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的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python探索之SocketServer详解
2017/10/28 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
pytest中文文档之编写断言
2019/09/12 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Django-migrate报错问题解决方案
2020/04/21 Python
如何使用Python调整图像大小
2020/09/26 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员剖析材料范文
2014/09/30 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书