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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
jquery replace方法去空格
May 08 jQuery
Angular4 中常用的指令入门总结
Jun 12 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
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中smarty区域循环的方法
2015/06/11 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
document.compatMode介绍
2009/05/21 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Python3.5字符串常用操作实例详解
2019/05/01 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
采购意向书范本
2014/03/31 职场文书
买卖车协议书
2014/04/21 职场文书
化工操作工岗位职责
2014/04/29 职场文书
图书室标语
2014/06/21 职场文书
调研汇报材料范文
2014/08/17 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2014年人事部工作总结
2014/12/03 职场文书
安全员岗位职责
2015/02/10 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
新郎新娘致辞
2015/07/31 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
Oracle使用别名的好处
2022/04/19 Oracle