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用户注册提示效果的简单实例
Aug 17 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
node.js中的console用法总结
Dec 15 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
微信小程序页面渲染实现方法
Nov 06 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
用PHP4访问Oracle815
2006/10/09 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
删除重复数据的算法
2006/11/23 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python抓取京东图书评论数据
2014/08/31 Python
深入理解python try异常处理机制
2016/06/01 Python
python图片验证码生成代码
2016/07/02 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python实现双色球随机选号
2020/01/01 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python中wx模块的具体使用方法
2020/05/15 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
《泉水》教学反思
2014/04/11 职场文书
大学生村官演讲稿
2014/04/25 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
英文投诉信格式
2015/07/03 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL