* 該組件自助研發,提供下拉框選項選擇,通過輸入內容可以自動篩選選項內容 * 模板處理 ~~~ <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; }, } ~~~