当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue2.x通用条件搜索组件的封装及应用详解

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

2019年07月19日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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完整源码如上所示，有疑问建议研究一下源码，也欢迎留言交流。

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网