uniapp下拉框组件

之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~

小程序选择框_WeiflR10的博客-CSDN博客_小程序选择框

子组件

<template><view style="position: relative;"><!-- 选中之后的数据展示 --><view class="inputPlaceholder" v-if='inputVal' @click="changejiantou(num,allnum)"><input :placeholder="placeholderText" disabled v-model="inputVal"></input><view class="jiantou1" v-if="evaluateCondition(`${'isjiantou' + this.num}`)"><i class="iconfont icon-jiantou1"></i></view><view class="jiantou1" v-else><i class="iconfont icon-jiantou"></i></view></view><!-- 未选择时的Placeholder展示 --><view class="inputPlaceholder" v-else @click="changejiantou(num,allnum)"><input :placeholder="placeholderText" disabled v-model="inputVal"></input><view class="jiantou1" v-if="evaluateCondition(`${'isjiantou' + this.num}`)"><i class="iconfont icon-jiantou1"></i></view><view class="jiantou1" v-else><i class="iconfont icon-jiantou"></i></view></view><!-- 下拉展开后的可选择内容 --><view class="content" v-if="!evaluateCondition(`${'isjiantou' + this.num}`)"><view v-if="selectcontent.length==0" class="nodata">暂无数据</view><view v-else :class="item.id==valueid ? 'active':'noactive'" v-for="(item,index) in selectcontent" @click="changecontent(item)">{{item.name}}</view></view></view>
</template><script>
import {mapState} from 'vuex'
export default{//selectcontent:下拉框的数据内容  num:本页面的第几个下拉框  allnum:本页面总共有多少个下拉框  placeholderText:placeholder显示的文字props:['selectcontent','num','allnum','placeholderText'],data() {return{inputVal:undefined,  //选中的值,namevalueid:''  //选中的值,id}},computed:{// 箭头切换 false是展开,true是关闭...mapState({isjiantou0:state=>state.isjiantou0,isjiantou1:state=>state.isjiantou1,isjiantou2:state=>state.isjiantou2,isjiantou3:state=>state.isjiantou3,isjiantou4:state=>state.isjiantou4,isjiantou5:state=>state.isjiantou5,isjiantou6:state=>state.isjiantou6})},mounted(){for(var i=0;i<this.allnum;i++){this.$store.dispatch(`${'getjiantou' + i}`,true)}},methods: {// 箭头切换 false是展开,true是关闭evaluateCondition(condition) {   //condition:就是属性名isjiantou0,isjiantou1...return this[condition]  //返回true或false},// 下拉框收起和下拉changejiantou(num,allnum){// 箭头切换 false是展开,true是关闭 将值存进vuex,改变时通知到所有相关组件if(this.$store.state[`${'isjiantou' + num}`]){this.$store.dispatch(`${'getjiantou' + num}`,false)}else{this.$store.dispatch(`${'getjiantou' + num}`,true)}for(var i=0;i<allnum;i++){if(i!=num){this.$store.dispatch(`${'getjiantou' + i}`,true)}}},// 选择数据后回显changecontent(e){this.$store.dispatch(`${'getjiantou' + this.num}`,true)//重复选同一个选择框,是不会触发事件的if(e.name!=this.inputVal){this.inputVal=e.name,this.valueid=e.id,this.$emit("change",e.id)  //change事件,可以在父组件中调用}},}
}
</script><style>.inputPlaceholder{min-width: 360rpx;width: calc(100% - 60rpx);height: 45rpx;border: 1px solid #DEDEDE;padding: 8rpx 40rpx 8rpx 20rpx;margin-left: 16rpx;border-radius: 10rpx;position: relative;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}.jiantou1{position: absolute;right: 10rpx;top: 8rpx;color: #CBCBCB;}.content{min-width: 384rpx;width: calc(100% - 40rpx);max-height: 240rpx;position: absolute;top: 62rpx;left: 16rpx;background: #FFFFFF;box-shadow: 0px 0px 10px 1px rgba(209, 209, 209, 0.35);border-radius: 20rpx;padding: 20rpx;overflow-x: hidden;overflow-y: scroll;z-index: 10000;}.noactive{padding: 10rpx 0;}.active{padding: 10rpx 0;color: #56D88A;}.nodata{color: #999;text-align: center;}
</style>

父组件

<template><view><view class="input-row"><view class="input-title">类别</view><ys-select :selectcontent='driverTypeOptions' placeholderText='请选择类别' num='0' :allnum='allnum'></ys-select></view><view class="input-row"><view class="input-title">人员</view><ys-select :selectcontent='driverOptions' placeholderText='请选择人员' num='1' :allnum='allnum'></ys-select></view><view class="input-row"><view class="input-title">属性</view><ys-select :selectcontent='carTypeOptions' placeholderText='请选择属性' num='2' :allnum='allnum'></ys-select></view><view class="input-row"><view class="input-title">车辆</view><ys-select :selectcontent='carOptions' placeholderText='请选择车辆' num='3' :allnum='allnum'></ys-select></view><view class="input-row"><view style="padding-right: 20rpx;">运输人员</view><ys-select :selectcontent='escortOptions' placeholderText='请选择运输人员' num='4' :allnum='allnum'></ys-select></view><view class="input-row"><view class="input-title">地点</view><ys-select :selectcontent='recycleOptions' placeholderText='请选择地点' num='5' :allnum='allnum'></ys-select></view><view class="input-row"><view class="input-title">商户</view><ys-select :selectcontent='merchantsOptions' placeholderText='请选择商户' num='6' :allnum='allnum'></ys-select></view></view>
</template><script>import ysselect from './ys-select.vue'export default {components:{'ys-select':ysselect},data() {return {driverTypeOptions:[{id:1,name:'1'},{id:2,name:'2'}],driverOptions:[],carTypeOptions:[{id:1,name:'1'},{id:2,name:'2'}],carOptions:[],escortOptions:[], recycleOptions:[],merchantsOptions:[],DriverTypeVal:'', allnum:6,  //选择框的个数};}};
</script><style>.input-row{position: relative;display: flex;align-items: center;padding: 0 0 30rpx 24rpx;}.input-title{padding-right: 20rpx;}.input-title::before{content: '*';font-size: 40rpx;color: red;position: absolute;left: 0;top: 14rpx;}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {isjiantou0:true,isjiantou1:true,isjiantou2:true,isjiantou3:true,isjiantou4:true,isjiantou5:true,isjiantou6:true,},mutations: {getjiantou0(state,n){state.isjiantou0=n},getjiantou1(state,n){state.isjiantou1=n},getjiantou2(state,n){state.isjiantou2=n},getjiantou3(state,n){state.isjiantou3=n},getjiantou4(state,n){state.isjiantou4=n},getjiantou5(state,n){state.isjiantou5=n},getjiantou6(state,n){state.isjiantou6=n}},actions: {getjiantou0(context,args){context.commit('getjiantou0',args);},getjiantou1(context,args){context.commit('getjiantou1',args);},getjiantou2(context,args){context.commit('getjiantou2',args);},getjiantou3(context,args){context.commit('getjiantou3',args);},getjiantou4(context,args){context.commit('getjiantou4',args);},getjiantou5(context,args){context.commit('getjiantou5',args);},getjiantou6(context,args){context.commit('getjiantou6',args);},}
})
export default store

注：模板字符串。

如果想在js中输出this.isjiantou0 this.isjiantou1 this.isjiantou2 ...，可以使用模板字符串

//`${'jiantou' + i}`
//this[`${'jiantou' + i}`]   这个就相当于this.isjiantou0 所以输出的时候直接是值for(var i=0;i<6;i++){console.log(`${'jiantou' + i}`)  //isjiantou0console.log(this[`${'jiantou' + i}`])  //true / false
}

uniapp下拉框组件相关推荐

自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
文章目录后台数据,通过el-select组件el-option如何使用v-for动态渲染问题一.效果截图: 二.代码示例 · 参考: 三.相关阅读: 后台数据,通过el-select组件el-op ...
用 :focus-within 实现纯 CSS 下拉框组件
:focus-within 伪类:当本节点或其子节点获得焦点时被激活. 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 当点击表单中的文本框时需高亮整个表单元素.但 ...
【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...
Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件一．加载方式自定义下拉框不能通过标签的方式进行创建. <in ...
GUI图像的下拉框组件选择老婆的图片
package com.Java.Learn.GUI;import javax.swing.*; import java.awt.*;public class Combobox2 {private s ...

uniapp下拉框组件

uniapp下拉框组件相关推荐

最新文章

热门文章