自己怎么用h5做网站,外贸网站功能,常州免费网站建站模板,gta5房地产网站建设中近期产品提出了一个需求#xff0c;要求一个form的表单里面的一个组件既可以下拉模糊搜索#xff0c;又可以弹窗搜索#xff0c;我就为这个封装了一个组件#xff0c;下面看效果图。 效果大家看到了#xff0c;下面就看组件封装和实现方法 第一步#xff0c;组件封装要求一个form的表单里面的一个组件既可以下拉模糊搜索又可以弹窗搜索我就为这个封装了一个组件下面看效果图。 效果大家看到了下面就看组件封装和实现方法 第一步组件封装我取名为C_SerachBtn 组件其中的C_Select组件也可以用el-select组件来代替C_Select使我们自己封装的组件。 templatediv classsearch-boxC_Selectv-bind$attrsv-model_modelValuefilterableremoteclearablereserve-keywordremote-show-suffix:remote-methodoverhaulProjectCodeMethod:options_options || []:loading_loadingfocusfocuschangehandleChangeSearchBtn($event)/el-button:iconSearchcolor#f5f7faclasssearch-box-btnclickhandleBtnClick//div
/templatescript langts setup
import { isFunction } from /utils/d_is
import { Search } from element-plus/icons-vueinterface Props {value: anylabel?: anyoption?: anyoptions?: any[]// query代表的值queryValue: string// 列表label代表的字段labelField?: string// 列表label代表的字段valueField?: stringdisabledField?: string// 下拉数据请求接口api?: (arg?: any) Promiseany// 接口参数params?: any//返回的值和赋值的值callBackNames: any[],// 返回列表数据字段resultField?: string// 是否立即请求接口否则将在第一次获取焦点时触发请求immediate?: boolean// 是否多选multiple?: boolean
}const props withDefaults(definePropsProps(), {labelField: label,valueField: value,disabledField: disabled,resultField: records,queryValue:,callBackNames:[],immediate: true,
})
const emits defineEmits([update:value,update:label,update:option,change,visible-change,remove-tag,clear,blur,focus,// 下拉接口重新请求数据更新后触发options-change,//按钮点击btn-click,
])
const _selectRef ref()
const _modelValue ref(props.value || )
const _options ref(props.options || [])
const _option ref(props.option || {})
const _loading ref(false)watch(() props.options,(newVal) {if (props.api) return_options.value newVal},{deep: true,}
)watch(() props.option,(newVal) {_option.value newVal},{deep: true,}
)watch(() props.value,(newVal) {if (props.multiple !Array.isArray(newVal)) {console.error(multiple 为true时传入的value数据类型必须为array)}_modelValue.value newVal},{immediate: true,}
)watch(() _modelValue.value,() {emits(update:value, _modelValue.value)},{immediate: true,}
)//标准项目编号-搜索开始
const overhaulProjectCodeMethod async (query: string) {if (query) {const api props.apiif (!api || !isFunction(api)) return_options.value []_loading.value truelet obj {pageNum: 1,pageSize: 10,...props.params,}obj[props.queryValue] querylet res await api(obj)_loading.value falselet arr props.labelField.split(,)_options.value res.records.map((item) {let str arr.forEach(p str item[p] )return {label: str,value: item[props.valueField],name: item[props.valueField],key: item[props.valueField],...item,}})} else {_options.value []}
}async function handleChangeSearchBtn(val) {if(!val){props.callBackNames.forEach(p{_option.value[p.value] })return}let obj _options.value.filter((el) el.value val)[0]props.callBackNames.forEach(p{_option.value[p.value] obj[p.name]})change(val)
}//按钮点击
const handleBtnClick () {emits(btn-click, unref(_options))
}// 下拉接口重新请求数据更新后触发
const emitChange () {emits(options-change, unref(_options))
}
// 当 input 获得焦点时触发
const focus (e) {emits(focus, e)
}
// 选中值发生变化时触发
const change (val) {let data _options.value?.filter((x) x.value val)emits(change, val, data)
}
// 下拉框出现/隐藏时触发
const visibleChange (val: boolean) {handleFetch()emits(visible-change, val)
}
// 多选模式下移除tag时触发
const removeTag (val) {emits(remove-tag, val)
}
// 可清空的单选模式下用户点击清空按钮时触发
const clear (e) {emits(clear, e)
}
// 当 input 失去焦点时触发
const blur (e) {emits(blur, e)
}
const getOptions () _options.value
defineExpose({ selectMethods: _selectRef, getOptions })
/scriptstyle scoped
.search-box{display: flex;width: 100%;.search-box-btn{border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-top: 1px solid #dcdfe6;border-right: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;color: #a8abb2;}
}
/style
第二步页面使用在页面中el-table中当做slot使用我的slot取名为 overhaulProjectCode !-- 标准项目编号 --template #overhaulProjectCode{ row, index }C_SearchBtnv-model:valuerow.overhaulProjectCode:placeholder请选择:apiListOverhaulProject:optionrow:queryValueoverhaulCode:params{deviceCode: 0,status: 3,}:labelFieldoverhaulCode,overhaulName:valueFieldoverhaulCode:options[]:callBackNames[{name: id,value: overhaulProjectId,},{name: overhaulCode,value: overhaulProjectCode,},{name: overhaulName,value: overhaulProjectName,},]btn-clickhandleOverhaulCodeModalVisible(row, index)focushandleFocus(index)//template
第三步弹窗和一般的弹窗一样自行封装。
!-- 生产设备 --materialOnetitle选择生产设备v-ifmaterialOneModalVisible:datacurRowv-model:visiblematerialOneModalVisibleselecthandleMaterialOneSelect2closematerialOneModalVisible false/
以上就是基本的做的c_SerachBtn的组件的封装其中的一些例如handleOverhaulCodeModalVisibl 和 handleFocus 方法需要自己定义根据自己的具体的需求进行修改。
