132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
// components/wan-select/select.js
|
||
Component({
|
||
options: {
|
||
addGlobalClass: true,
|
||
},
|
||
properties: {
|
||
/* --------- 样式参数 --------- */
|
||
titleWidth: { // 标题长度
|
||
type: String,
|
||
value: "60px"
|
||
},
|
||
bgColor: { // 输入框背景颜色
|
||
type: String,
|
||
value: "#fff"
|
||
},
|
||
itemBgColor: { // 选中的选项背景颜色
|
||
type: String,
|
||
value: "#F5F8FE"
|
||
},
|
||
textColor: { // 选中的字体颜色
|
||
type: String,
|
||
value: "#3772E9"
|
||
},
|
||
/* --------- 数据参数 --------- */
|
||
title: { // 下拉框标题
|
||
type: String,
|
||
value: ""
|
||
},
|
||
options: { // 选项数组
|
||
type: Array,
|
||
value: [],
|
||
},
|
||
labelName: { // 选项数组-绑定的label名称
|
||
type: String,
|
||
value: "dictLabel",
|
||
},
|
||
valueName: { // 选项数组-绑定的value名称
|
||
type: String,
|
||
value: "dictValue"
|
||
},
|
||
modelValue: { // 绑定的value
|
||
type: String,
|
||
value: "",
|
||
observer: function () {
|
||
//如果有默认值，需要匹配出name，所以这里使用obersver，当父组件中值改变时触发
|
||
this.handleData();
|
||
}
|
||
},
|
||
placeholder: { // 输入框为空时占位符
|
||
type: String,
|
||
value: "请选择"
|
||
},
|
||
disabled: { // 是否禁用
|
||
type: Boolean,
|
||
value: false
|
||
},
|
||
readonly: { // 是否只读
|
||
type: Boolean,
|
||
value: false
|
||
}
|
||
},
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
show: false, //选项框及图标展示
|
||
selectValue: "", //选中的value
|
||
selectLabel: "", //选中的label
|
||
toTop: false, // 下拉框是否展示在输入框上方
|
||
},
|
||
attached() {
|
||
this.handleData()
|
||
},
|
||
methods: {
|
||
// 清空输入框
|
||
clearInput() {
|
||
this.setData({
|
||
selectValue: "", //选中的value
|
||
selectLabel: "", //选中的label
|
||
show: false,
|
||
})
|
||
},
|
||
// 下拉框收起和展开
|
||
changeShow(e) {
|
||
let that = this
|
||
const query = wx.createSelectorQuery();
|
||
// 选择当前点击的 view 元素
|
||
query.select('.inputPlaceholder').boundingClientRect();
|
||
query.exec(function (res) { // res[0].bottom 是元素距离可视区域顶部的距离加上元素自身的高度; res[1].scrollTop 是页面的滚动距离
|
||
var show = !that.data.show
|
||
if (res[0]) {
|
||
/* that.triggerEvent("handleShow", show); // [暂未发现]处理滚动选项区域时背景页面滚动问题 */
|
||
let toBottom = wx.getSystemInfoSync().windowHeight - res[0].bottom;
|
||
console.log('距离设备底部的距离:', toBottom);
|
||
that.setData({
|
||
toTop: toBottom < 160 ? true : false,
|
||
show: show
|
||
})
|
||
} else {
|
||
that.setData({ show: show })
|
||
}
|
||
});
|
||
},
|
||
// 选择数据后回显
|
||
handleChange(e) {
|
||
let { item } = e.currentTarget.dataset
|
||
let { labelName, valueName } = this.data
|
||
this.setData({
|
||
selectValue: item[valueName],
|
||
selectLabel: item[labelName],
|
||
show: false
|
||
})
|
||
let obj = {}
|
||
obj[valueName] = item[valueName]
|
||
obj[labelName] = item[labelName]
|
||
this.triggerEvent("handleChange", obj);// 传参
|
||
},
|
||
// 匹配值并回显
|
||
handleData() {
|
||
let { modelValue, options, valueName, labelName } = this.properties;
|
||
if (modelValue) {
|
||
let item = options.find(r => r[valueName] == modelValue)
|
||
this.setData({
|
||
selectLabel: item ? item[labelName] : modelValue,
|
||
selectValue: modelValue,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|