feat(components): 添加搜索弹窗组件并优化弹窗插件

添加了新的 search-popup 组件,包含完整的搜索和筛选功能,
支持扫码、输入搜索、自定义插槽等特性。同时优化了 popup-plugin
组件的代码结构,移除了调试日志并改进了模板格式。
This commit is contained in:
zhengw
2026-01-09 15:26:10 +08:00
parent 779ea81406
commit 0c4b2a886c
6 changed files with 163 additions and 11 deletions

View File

@@ -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");
}

View File

@@ -1,8 +1,14 @@
<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>
</view>
<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/>
</view>
</t-popup>

View File

@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"popup-plugin": "/pages/components/popup-plugin/popup-plugin",
"t-input": "tdesign-miniprogram/input/input"
}
}

View 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");
},
},
});

View 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>

View File

@@ -0,0 +1 @@