自定义模板，需要导入太多配置了，并不能复用逻辑，只能复用wxml,wxss都无法复用
控制对话框显示隐藏则是使用 display:flex/none进行切换，每一个功能都需要处理。
最后我的强迫症让我决定改成用组件实现
在根目录新建components文件夹
然后新建 compnents命名为searchdialog
新建好之后在自己的页面 json修改
"usingComponents": {
"searchdialog": "/components/searchdialog"
}
,而searchdialog这个名字可以随便定义，这将决定了在wxml里面的命名。
···
wxml里面写入
<searchdialog id='dialog'>
</searchdialog>
发现正常的显示了，和模板差不多。。
完整代码
包含了类似slot,也就是 自定义view里面放入view,要放入哪里，哪个节点 则需要再模板的wxml里面定义slot
多个节点也是支持的，这里不演示。
组件wxml
<view class="dialog-root-wrap" style="display:{{showSearchDialog?'flex':'none'}};">
<view class="dilog-root" bindtap="dismissDialog">
<view class="dialog-content" style="border-radius: 15rpx;min-width:60%;min-height:25%;" catchtap="_dialogAeraClick">
<view class="vertical">
<view class="input_wrap_style" id="keyword">
<input class="myinput" password type="text" placeholder="输入关键词" bindinput="bindKeywordInput" value="{{keyword}}" />
</view>
<picker style="margin-top: 20rpx;" mode="date" value="{{startdate}}" start="{{initStartDate}}" end="{{initEndDate}}" bindchange="_changeDate" data-value="0">
<view class="tui-picker-detail">
开始时间: {{startdate}}
</view>
</picker>
<picker style="margin-top: 20rpx;" mode="date" value="{{enddate}}" start="{{initStartDate}}" end="{{initEndDate}}" bindchange="_changeDate" data-value="1">
<view class="tui-picker-detail">
结束时间: {{enddate}}
</view>
</picker>
<slot></slot>
<button id="search" catchtap="searchClick" type="primary" style="margin-top: 30rpx;">{{confirmSearchText}}</button>
</view>
</view>
</view>
</view>
组件 ts
// component/searchdialog.ts
import * as datefns from 'date-fns';
Component({
/**
* 组件的属性列表
*/
properties: {
confirmSearchText: {
type: String,
value: '开始搜索'
}
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
created: function () { },// 无 在组件实例刚刚被创建时执行 1.6.3
attached: function () { },// 无 在组件实例进入页面节点树时执行 1.6.3
ready: function () {
const date = new Date();
var lastMonth: any = datefns.subMonths(date, 1);
this.setData({
initStartDate: datefns.format(datefns.subYears(date, 10), "yyyy-MM-dd"),
initEndDate: datefns.format(date, "yyyy-MM-dd"),
startdate: datefns.format(lastMonth, "yyyy-MM-dd"),
enddate: datefns.format(date, "yyyy-MM-dd"),
});
},// 无 在组件在视图层布局完成后执行 1.6.3
moved: function () { },// 无 在组件实例被移动到节点树另一个位置时执行 1.6.3
detached: function () { },// 无 在组件实例被从页面节点树移除时执行 1.6.3
error: function () { },// Object Error 每当组件方法抛出错误时执行 2.4.1
},
/*
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function () { }, */
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
/**
* 组件的初始数据
*/
data: {
startdate: "",
enddate: "",
initStartDate: "",
initEndDate: "",
},
/**
* 组件的方法列表
*/
methods: {
_dialogAeraClick: function () {
console.debug("用于阻止点击对话框其它内容也导致隐藏的问题");
},
_changeDate(e: any) {
console.debug(e);
if (e.currentTarget.dataset.value == "0") {
this.setData({ startdate: e.detail.value });
} else {
this.setData({ enddate: e.detail.value });
}
},
/*
* 公有方法
*/
dismissDialog: function () {
this.setData({
showSearchDialog: false
})
this.triggerEvent("onDismissDialog")
console.debug("dismissDialogclick");
},
showDialog: function () {
this.setData({
showSearchDialog: true
})
this.triggerEvent("onShowDialog")
},
searchClick: function () {
console.debug("onSearch");
var that = this;
this.triggerEvent("onSearchClick", { startdate: that.data.startdate, enddate: that.data.enddate })
}
}
})
page中的实现
···
onShowDialog(e: any) {
console.debug("收到了组件传递的onShowDialog事件 ");
},
onDismissDialog(e: any) {
console.debug("收到了组件传递的onDismissDialog事件 ");
},
requestShowDialog() {
var dialog = this.selectComponent("#dialog");
dialog.showDialog();
},
onSearchClick(e: any) {
console.debug("收到了组件的onSearchClick ", e, e.detail.startdate, e.detail.enddate);
},
···
page wxml的引用参数和定义事件监听
<searchdialog id='dialog' confirmSearchText='确认搜索' bind:onDismissDialog="onDismissDialog" bind:onShowDialog="onShowDialog" bind:onSearchClick="onSearchClick">
</searchdialog>
原理就是再组件的事件里面使用this.triggerEvent("onShowDialog")分发事件，
在page wxml使用bind即可， 对于多个参数的接受
this.triggerEvent("onSearchClick", { startdate: that.data.startdate, enddate: that.data.enddate })
```
page中的定义
onSearchClick(e: any) {
console.debug("收到了组件的onSearchClick ", e, e.detail.startdate, e.detail.enddate);
},
到这里已经实现完了对话框的弹出监听，以及搜索接受参数，已经page界面控制显示隐藏
```properties```为对外暴露的字段，
网友评论