feat(components): 添加搜索弹窗组件并优化弹窗插件
添加了新的 search-popup 组件,包含完整的搜索和筛选功能, 支持扫码、输入搜索、自定义插槽等特性。同时优化了 popup-plugin 组件的代码结构,移除了调试日志并改进了模板格式。
This commit is contained in:
@@ -18,10 +18,8 @@ Component({
|
|||||||
*/
|
*/
|
||||||
methods: {
|
methods: {
|
||||||
onVisibleChange(e: any) {
|
onVisibleChange(e: any) {
|
||||||
console.log(e.detail.visible);
|
// console.log(e.detail.visible);
|
||||||
this.setData({
|
this.setData({ open: e.detail.visible });
|
||||||
open: e.detail.visible,
|
|
||||||
});
|
|
||||||
if (!e.detail.visible) {
|
if (!e.detail.visible) {
|
||||||
this.triggerEvent("close");
|
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="border-bottom: 1px solid #ddd;">
|
||||||
<view style="padding: 12px 12px;">{{title}}</view>
|
<view style="padding: 12px 12px;">{{title}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view style="max-height: 70vh;overflow: auto;">
|
<view style="max-height: 70vh;overflow: auto;">
|
||||||
<slot></slot>
|
<slot/>
|
||||||
</view>
|
</view>
|
||||||
</t-popup>
|
</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