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学习笔记4 Eval函数
Jan 11 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
wx-charts 微信小程序图表插件的具体使用
Aug 18 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
Yii核心验证器api详解
2016/11/23 PHP
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
vue实现商城上货组件简易版
2017/11/27 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
python查看FTP是否能连接成功的方法
2015/07/30 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python语言中有算法吗
2020/06/16 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2016年十一促销广告语
2016/01/28 职场文书
七年级作文之英语老师
2019/10/28 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android