做设计常用的网站,网站信息平台建设方案,晚上国网app,敏捷开发平台采用uniapp-vue3实现的数据选择器#xff0c;支持H5、微信小程序#xff08;其他小程序未测试过#xff0c;可自行尝试#xff09; 支持本地自定义过滤、远程接口过滤#xff0c;为了避免弹窗面板超出边界的情况#xff0c;自动计算弹窗面板安置的位置#xff08;在微信… 采用uniapp-vue3实现的数据选择器支持H5、微信小程序其他小程序未测试过可自行尝试 支持本地自定义过滤、远程接口过滤为了避免弹窗面板超出边界的情况自动计算弹窗面板安置的位置在微信小程序节点信息是页面渲染后才拿得到所以会有一段位移过程大神如果更合适的方案可以自行优化支持自定义弹窗面板显示内容支持自定义取值字段默认为options: [{label‘键’, value: ‘值’, …}]格式
由于移动端输入场景下会弹出键盘如果设置为失焦时关闭弹窗面板, 则收起键盘时弹窗就会被关闭无法再进行下一步选择。所以采用弹窗常驻手动点击右边图标关闭弹窗的方式
可到插件市场下载尝试 https://ext.dcloud.net.cn/plugin?id17287
使用示例
H5示例 微信小程序示例
props属性
id 组件唯一标识 同个页面存在多个wo-select组件的情况id为必填项因为需要通过id去计算弹窗面板与输入框的位置以便安置弹窗面板在合适的位置避免超出边界 id: {type: String,default: inputId,reqiured: true
},value 默认值valueField字段指定的字段值 value: {type: String || Number,default: null
},options 结构化数据 options: {type: Array,default: () []
},placeholder 占位描述 placeholder: {type: String,default: 请选择数据
},labelField 选中后输入框显示的值的取值字段 labelField: {type: String,default: label
},如果 options [{ name: 按钮1, id: 1}, { name: 按钮2, id: 2 }]; labelField name
则选中后输入框中则显示name字段的值valueField 选中值的取值字段 valueField: {type: String,default: value
}如果 options [{ name: 按钮1, id: 1}, { name: 按钮2, id: 2 }]; valueField id
则选中值就是id字段的值事件
filter 过滤事件支持本地过滤、远程过滤等 on-change 选中后返回值值为valueField配置的字段值 示例
templateview classcontentview classcardview classtitle默认样式/viewviewwo-selectclasswhite-select:idinputOne:optionsstate.data:label-fieldlabel:value-fieldvaluefilteronFilteron-changeonChangeStaff1/wo-select/viewview classtitle选中值为{{ state.res1 }}/view/viewview classcardview classtitle设置初始值/viewviewwo-selectclasswhite-select:idinputTwo2:value2:optionsstate.data:label-fieldlabel:value-fieldvaluefilteronFilteron-changeonChangeStaff2/wo-select/viewview classtitle选中值为{{ state.res2 }}/view/viewview classcardview classtitle自定义面板/viewviewwo-selectclasswhite-selectrefselectorRef1:idinputTwo1:optionsstate.data:label-fieldlabel:value-fieldvaluefilteronFilteron-changeonChangeStaff3view styledisplay: flex; flex-direction: column; gap: 20rpxview styledisplay: flex; justify-content:center这是头部/viewviewv-foritem in state.data:keyitem.valuestylefont-size: 24rpx; z-index: 120; display: flex; justify-content: space-between;clickselectorRef1.onClickSelect(item)view stylewidth: 200px;{{ item.label }}/viewview stylebackground-color: dodgerblue; color: white; padding: 4px 8px;border-radius: 8rpx;{{ item.category }}/view/view/view/wo-select/viewview classtitle选中值为{{ state.res3 }}/view/viewview classcard darkview classtitle stylecolor: white暗黑样式/viewviewwo-selectclassdark-selectrefselectorRef:idinputTwo:optionsstate.data:label-fieldlabel:value-fieldvaluefilteronFilteron-changeonChangeStaff4view styledisplay: flex; flex-direction: column; gap: 20rpxviewv-foritem in state.data:keyitem.valuestylefont-size: 24rpx; z-index: 120; display: flex; justify-content: space-between;clickselectorRef.onClickSelect(item)view stylewidth: 200px;{{ item.label }}/viewview stylebackground-color: dodgerblue; color: white; padding: 4px 8px;border-radius: 8rpx;{{ item.category }}/view/view/view/wo-select/viewview classtitle stylecolor: white;选中值为{{ state.res4 }}/view/viewview classflex-center内容区/viewview classcardview classtitle面板位置自动调整/viewviewwo-selectclasswhite-select:idinputThree:placeholder输入过滤:optionsstate.data:label-fieldlabel:value-fieldvaluefilteronFilteron-changeonChangeStaff5/wo-select/viewview classtitle选中值为{{ state.res5 }}/view/viewview classflex-center内容区/view/view
/templatescript setup langtsimport { reactive, ref } from vueconst selectorRef1 ref()const selectorRef ref();const state reactive({data: [{label: 哈墨的脑袋,value: 1,category: 正常},{label: 摩西女神的手臂,value: 2,category: 异常},{label: 奥尔墨的铠甲,value: 3,category: 维修中},{label: 摩西女神的翅膀,value: 4,category: 正常},{label: 战神瑞尔的斧头,value: 5,category: 正常},{label: 丘比特的箭头,value: 6,category: 异常},{label: 雅典娜的光明盾,value: 7,category: 异常}] as any[],userOptions: [] as any[],res1: ,res2: ,res3: ,res4: ,res5: ,})// 克隆一份数据用于过滤筛选state.userOptions JSON.parse(JSON.stringify(state.data))const onFilter (e: any) {state.data state.userOptions.filter((res) {return res.label.indexOf(e.detail.value) ! -1});};const onChangeStaff1 (e: any) {state.res1 e};const onChangeStaff2 (e: any) {state.res2 e};const onChangeStaff3 (e: any) {state.res3 e};const onChangeStaff4 (e: any) {state.res4 e};const onChangeStaff5 (e: any) {state.res5 e};
/scriptstyle scoped.content {width: 100%;font-size: 28rpx;}.card {padding: 20px;}.dark {background-color: black;}.dark-select {color: white;}.title {font-weight: 600;font-size: 24rpx;padding-bottom: 10rpx;}:deep .dark-select .panel {background-color: black;}.box {padding: 20px;}.flex-center {display: flex;justify-content: center;align-items: center;height: 600px;background: #666;}
/style
