Vue2.x通用条件搜索组件的封装及应用详解

本文实例为大家分享了Vue2.x通用条件搜索组件的封装及应用，供大家参考，具体内容如下

效果

组件源码

模板div class=' search ' El-select v-model=' type ' @ change=' changeType ' class=' select ' El-option v-for=' selection items ' : key=' item '。值“:标签=”项。标签“: value=”项。value '/El-option/El-select div class=' search-input ' El-input :占位符' v-model=' search value '/El-input/div El $ emit(' changeType '，newType) }，search () { this .$emit('searchOk '，这。搜索值)} }/脚本样式lang=' less '作用域。搜索{ display : flex。El-select { width : 90px；高度： 40px盒子尺寸：边框盒子；右边框：无；边界半径： 0;背景-color : # ddf 0fe；border: 1px固体# 40b0ff}。搜索-输入{ width : 216 px高度： 40pxborder: 1px固体# 40b0ff边框-左侧：无；盒子尺寸：边框盒子；font-family : ' MicroSoftyahei '；font-size : 14px颜色： # 909399边界半径： 0;} .El-button { width : 44px；高度： 40pxpadd : 0；border: 1px固体# 40b0ff边界半径： 0;color: # fff背景技术# 40b0ff:悬停{背景： # 10 b0ff } } }/样式父组件中的引用

模板div class=' test ' v-Search : init type=' init type ' : selectItems=' selectItems ' :占位符='占位符' @ changeType=' changeType ' @ Search ok=' Search ok '/v-Search/div/template script导入v Search from ' @/components/Common/zlgccomponents/XGQTest/Search '导出默认{ data(){ return { selectItems 3360[]，selectStatus: ' devname请输入要搜索的测试名称} }，创建了(){ this。setSelectItems()。这个。setinittype()}，methods : { setSelectItems(){ this。选择项=[{ value : '测试名，标签: '测试名}，{ value: '测试标识，标签: '测试ID' }] }，changeType(NewType){ if(NewType=='测试名){ this.placeholderDes='请输入要搜索的测试名称这个。select STatus=' name ' } else if(NewType=='测试ID '){这个。占位符='请输入要搜索的测试ID' this.selectStatus='id' } }，searchOk(值){控制台。日志(这个。选择状态)控制台。日志(值)//调用你的搜索接口，搜索条件为搜索的类型搜索值//您的搜索(this.selectStatus，value) }，setInitType () { this.initType='测试名} }，组件3360 { VSearch } }/脚本样式lang=' less '作用域/style组件基于元素-用户界面的二次封装，适合用于使用元素的项目，子组件父组件演示完整源码如上所示，有疑问建议研究一下源码，也欢迎留言交流。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。