feat(components): 添加搜索弹窗组件并优化弹窗插件
添加了新的 search-popup 组件,包含完整的搜索和筛选功能, 支持扫码、输入搜索、自定义插槽等特性。同时优化了 popup-plugin 组件的代码结构,移除了调试日志并改进了模板格式。
This commit is contained in:
@@ -18,10 +18,8 @@ Component({
|
||||
*/
|
||||
methods: {
|
||||
onVisibleChange(e: any) {
|
||||
console.log(e.detail.visible);
|
||||
this.setData({
|
||||
open: e.detail.visible,
|
||||
});
|
||||
// console.log(e.detail.visible);
|
||||
this.setData({ open: e.detail.visible });
|
||||
if (!e.detail.visible) {
|
||||
this.triggerEvent("close");
|
||||
}
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
<t-popup visible="{{visible}}" bind:visible-change="onVisibleChange" placement="{{placement || 'bottom'}}" close-btn>
|
||||
<t-popup
|
||||
visible="{{visible}}"
|
||||
bind:visible-change="onVisibleChange"
|
||||
placement="{{placement || 'bottom'}}"
|
||||
close-btn
|
||||
>
|
||||
<view style="border-bottom: 1px solid #ddd;">
|
||||
<view style="padding: 12px 12px;">{{title}}</view>
|
||||
</view>
|
||||
<view style="max-height: 70vh;overflow: auto;">
|
||||
<slot></slot>
|
||||
<slot/>
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"popup-plugin": "/pages/components/popup-plugin/popup-plugin",
|
||||
"t-input": "tdesign-miniprogram/input/input"
|
||||
}
|
||||
}
|
||||
79
miniprogram/pages/components/search-popup/search-popup.ts
Normal file
79
miniprogram/pages/components/search-popup/search-popup.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
Component({
|
||||
options: { multipleSlots: true },
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
useFooterSlot: {
|
||||
type: Boolean,
|
||||
},
|
||||
dataKey: {
|
||||
type: String,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
},
|
||||
value: null,
|
||||
hideMore: {
|
||||
type: Boolean,
|
||||
},
|
||||
hideInput: {
|
||||
type: Boolean,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: "",
|
||||
},
|
||||
useInputSlot: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
showSearch() {
|
||||
this.setData({ show: true });
|
||||
this.triggerEvent("showChange", true);
|
||||
},
|
||||
close() {
|
||||
this.setData({ show: false });
|
||||
this.triggerEvent("showChange", false);
|
||||
},
|
||||
ok() {
|
||||
this.setData({ show: false });
|
||||
this.triggerEvent("showChange", false);
|
||||
this.triggerEvent("ok");
|
||||
},
|
||||
change(e: any) {
|
||||
this.triggerEvent("change", e.detail);
|
||||
},
|
||||
scanCode() {
|
||||
const _this = this;
|
||||
wx.scanCode({
|
||||
onlyFromCamera: true,
|
||||
scanType: ["qrCode"],
|
||||
success: (res) => {
|
||||
const qrcode = res.result || "";
|
||||
_this.triggerEvent("change", { value: qrcode });
|
||||
_this.triggerEvent("ok");
|
||||
},
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.triggerEvent("ok");
|
||||
},
|
||||
clear() {
|
||||
this.triggerEvent("change", { value: "" });
|
||||
this.triggerEvent("ok");
|
||||
},
|
||||
},
|
||||
});
|
||||
61
miniprogram/pages/components/search-popup/search-popup.wxml
Normal file
61
miniprogram/pages/components/search-popup/search-popup.wxml
Normal file
@@ -0,0 +1,61 @@
|
||||
<view style="display: flex;align-items: center;margin-bottom: 12px;{{customStyle}}">
|
||||
<view style="flex: 1;margin-right: {{hideMore ? 0 : '12px'}};">
|
||||
<block wx:if="{{useInputSlot}}">
|
||||
<slot name='input' />
|
||||
</block>
|
||||
<block wx:else>
|
||||
<t-input
|
||||
wx:if="{{!hideInput}}"
|
||||
placeholder="{{placeholder || '请输入关键字'}}"
|
||||
clearable
|
||||
borderless
|
||||
bindchange="change"
|
||||
value="{{value || ''}}"
|
||||
data-key="{{dataKey}}"
|
||||
confirm-type="search"
|
||||
bind:clear="clear"
|
||||
custom-style="background:#f5f5f5;min-height: 34px;height:34px;padding: 0;"
|
||||
size="small"
|
||||
>
|
||||
<t-button
|
||||
name="search"
|
||||
slot="prefix-icon"
|
||||
size="small"
|
||||
theme="primary"
|
||||
bindtap="scanCode"
|
||||
icon="scan"
|
||||
/>
|
||||
<t-button
|
||||
slot="suffix-icon"
|
||||
bindtap="search"
|
||||
icon="search"
|
||||
theme="primary"
|
||||
size="small"
|
||||
/>
|
||||
</t-input>
|
||||
</block>
|
||||
</view>
|
||||
<t-button
|
||||
wx:if="{{!hideMore}}"
|
||||
bindtap="showSearch"
|
||||
theme="primary"
|
||||
size="small"
|
||||
>
|
||||
筛选
|
||||
</t-button>
|
||||
</view>
|
||||
|
||||
<popup-plugin visible="{{ show }}" bind:close="close" title="筛选条件">
|
||||
<slot name='content' />
|
||||
<slot wx:if="{{useFooterSlot}}" name="footer" />
|
||||
<view wx:else style="padding: 12px 0;display: flex;justify-content: center;position: sticky;bottom: 0;left: 0;background-color: #fff;z-index: 1;">
|
||||
<t-button
|
||||
bindtap="ok"
|
||||
style="min-width: 80px;"
|
||||
size="small"
|
||||
theme="primary"
|
||||
>搜索
|
||||
</t-button>
|
||||
</view>
|
||||
</popup-plugin>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
Reference in New Issue
Block a user