select 下拉单选框 · SpeedBH v9

* 该组件自助研发,提供下拉框选项选择,通过输入内容可以自动筛选选项内容 * 模板处理 ~~~ <view class="sbh_input" v-if="item.type == 'select'"> <view class="name">{{item.name}}</view> <view class="content"> <view class="select_object">  <input type="text" :placeholder="item.note" :value="select_data_name[item.field]?select_data_name[item.field]:(select_data_name[item.field]==''?'':item.val_name)" @input="select_search" @focus="select_focus" :data-field="item.field" :data-opt="item.opt" :data-val="item.val" :data-name="item.val_name" data-dis="true" />  <view class="sbh v9-10 open" v-if="select_opt_display[item.field]" @click="select_focus" :data-field="item.field" :data-opt="item.opt" :data-val="item.val" :data-name="item.val_name"></view> <view class="sbh v9-10 close" v-if="!select_opt_display[item.field]" @click="select_focus" :data-field="item.field" :data-opt="item.opt" :data-val="item.val" :data-name="item.val_name"></view>  <view class="select_opt" v-if="select_opt_display[item.field]"> <view class="active" v-for="sel_opt in select_opt_arr_tmp" v-if="sel_opt.val == select_data_val[item.field]" @click="select_check" :data-field="item.field">{{sel_opt.name}}</view> <view v-for="sel_opt in select_opt_arr_tmp" v-if="sel_opt.val != select_data_val[item.field]" @click="select_check" :data-name="sel_opt.name" :data-val="sel_opt.val" :data-field="item.field">{{sel_opt.name}}</view> <view v-if="select_opt_arr_tmp == ''">无任何搜索项</view> </view> </view> </view> <input type="text" :name="item.field" v-model="select_data_val[item.field]" style="display: none;" /> </view> ~~~ * 模板属性 | 名称 | 说明 | | --- | --- | | item.type | 表单类型 | | item.name | 显示名称 | | item.field | 关联字段名称 | | item.opt | 选项数组(name 名称/val 值) | | item.val | 选中值 | | item.val_name | 选中显示名称 | * data属性 ~~~ data(){ let arr = {}; arr.select_data_name = {}; //>下拉框组件 - 选中显示[字段名=>显示值] arr.select_data_val = {}; //>下拉框组件 - 选中值[字段名=>传递值] arr.select_opt_arr = []; //>下拉框组件 - 选项数据数组 arr.select_opt_arr_tmp = []; //>下拉框组件 - 选项数据数组,搜索之后 arr.select_opt_display = {}; //>下拉框组件 - 选项框显示状态数组[字段名=>布尔值] return arr; }, ~~~ * methods属性 ~~~ methods: { //>select组件 - 触发下拉框 select_focus(e){ //>选项框显示判定 let dis = e.currentTarget.dataset.dis; //>强制打开 let field = e.currentTarget.dataset.field; //>字段名 let obj = {}; dis ? obj[field] = true : obj[field] = !this.select_opt_display[field]; this.select_opt_display = obj; //>传递下级选项数据 let opt = e.currentTarget.dataset.opt; //>选项数组 this.select_opt_arr = opt; this.select_opt_arr_tmp = opt; //>默认值 if(!this.select_data_val[field] && this.select_data_val[field] != ''){ let name = e.currentTarget.dataset.name; //>默认显示 this.select_data_name[field] = name; let val = e.currentTarget.dataset.val; //>默认值 this.select_data_val[field] = val; } }, //>select组件 - 输入搜索结果 select_search(e){ let field = e.currentTarget.dataset.field; //>字段名 let result = e.detail.value; //>输入值 let select_opt_arr = this.select_opt_arr; //>选项框值 //>根据内容筛选出显示字段中包含的数据 let obj = []; for(let i in select_opt_arr){ if(select_opt_arr[i].name.indexOf(result) != -1){ obj.push(select_opt_arr[i]); } } this.select_opt_arr_tmp = obj; }, //>select组件 - 选中选项 select_check(e){ let field = e.currentTarget.dataset.field; //>字段名 let name = e.currentTarget.dataset.name; //>选中名称 let val = e.currentTarget.dataset.val; //>选中值 if(val == undefined){ //>去除选中选项 this.select_data_name[field] = ''; this.select_data_val[field] = ''; }else{ //>选中选项 this.select_data_name[field] = name; this.select_data_val[field] = val; } this.select_opt_display[field] = false; }, } ~~~