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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
解决vue中provide inject的响应式监听
Apr 19 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
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
关于vue面试题汇总
2018/03/20 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python-嵌套列表list的全面解析
2016/06/08 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
出国留学自荐信
2013/10/25 职场文书
禁止酒驾标语
2014/06/25 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
卖房协议书样本
2014/10/30 职场文书
中考学习决心书
2015/02/04 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
如何Tomcat中使用ipv6地址
2022/05/06 Servers