Vue2.x通用条件搜索组件的封装及应用详解
程序员文章站
2024-02-02 19:27:04
本文实例为大家分享了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完整源码如上所示，有疑问建议研究一下源码，也欢迎留言交流。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。