Vue2.x通用条件搜索组件的封装及应用详解
程序员文章站
2023-12-01 21:26:16
本文实例为大家分享了vue2.x通用条件搜索组件的封装及应用,供大家参考,具体内容如下
效果
组件源码
...
本文实例为大家分享了vue2.x通用条件搜索组件的封装及应用,供大家参考,具体内容如下
效果
组件源码
<template> <div class="search"> <el-select v-model="type" @change="changetype" class="select"> <el-option v-for="item in selectitems" :key="item.value" :lable="item.label" :value="item.value"> </el-option> </el-select> <div class='search-input'> <el-input :placeholder="placeholderdes" v-model="searchvalue"></el-input> </div> <el-button icon="el-icon-search" @click="search"></el-button> </div> </template> <script> export default { data () { return { searchvalue: '', type: '' } }, created () { this.type = this.inittype }, props: { selectitems: { type: array, require: true }, placeholderdes: { type: string, require: true }, inittype: { type: string, require: true } }, methods: { changetype (newtype) { this.$emit('changetype', newtype) }, search () { this.$emit('searchok', this.searchvalue) } } } </script> <style lang="less" scoped> .search { display: flex; .el-select { width: 90px; height: 40px; box-sizing: border-box; border-right: none; border-radius: 0; background-color: #ddf0fe; border: 1px solid #40b0ff; } .search-input { width: 216px; height: 40px; border: 1px solid #40b0ff; border-left: none; box-sizing: border-box; font-family: 'microsoftyahei'; font-size: 14px; color: #909399; border-radius: 0; } .el-button { width: 44px; height: 40px; padding: 0; border: 1px solid #40b0ff; border-radius: 0; color: #fff; background: #40b0ff; &:hover { background: #10b0ff } } } </style>
父组件中的引用
<template> <div class="test"> <v-search :inittype="inittype" :selectitems="selectitems" :placeholderdes="placeholderdes" @changetype="changetype" @searchok="searchok"></v-search> </div> </template> <script> import vsearch from '@/components/common/zlgcomponents/xgqtest/search/search' export default { data () { return { selectitems: [], selectstatus: 'devname', inittype: '', placeholderdes: '请输入要搜索的测试名称' } }, created () { this.setselectitems() this.setinittype() }, methods: { setselectitems () { this.selectitems = [{ value: '测试名', label: '测试名' }, { value: '测试id', label: '测试id' }] }, changetype (newtype) { if (newtype === '测试名') { this.placeholderdes = '请输入要搜索的测试名称' this.selectstatus = 'name' } else if (newtype === '测试id') { this.placeholderdes = '请输入要搜索的测试id' this.selectstatus = 'id' } }, searchok (value) { console.log(this.selectstatus) console.log(value) // 调用你的搜索接口,搜索条件为搜索的类型 + 搜索值 // yoursearch (this.selectstatus, value) }, setinittype () { this.inittype = '测试名' } }, components: { vsearch } } </script> <style lang="less" scoped> </style>
组件基于element-ui的二次封装,适合用于使用element的项目,子组件父组件demo完整源码如上所示,有疑问建议研究一下源码,也欢迎留言交流。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。