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


Posted in Javascript onMay 28, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
jQuery实现简单全选框
Sep 13 jQuery
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
vue实现条件叠加搜索的解决方法
May 28 #Javascript
webpack4 从零学习常用配置(小结)
May 28 #Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 #Javascript
jQuery实现高级检索功能
May 28 #jQuery
利用原生JS实现data方法示例代码
May 28 #Javascript
php结合js实现多条件组合查询
May 28 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
Node.js实现数据推送
2016/04/14 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python动态加载包的方法小结
2016/04/18 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
对python中Json与object转化的方法详解
2018/12/31 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python如何调用外部系统命令
2019/08/07 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python 绘制场景热力图的示例
2020/09/23 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
初级党校心得体会
2014/09/11 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
服务员态度差检讨书
2014/10/28 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android