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 相关文章推荐
取得传值的函数
Oct 27 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
浅谈React碰到v-if
Nov 04 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
js图片无缝滚动插件使用详解
May 26 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
python得到windows自启动列表的方法
2018/10/14 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
品管员岗位职责
2013/11/10 职场文书
竞选班长演讲稿
2013/12/30 职场文书
初中音乐教学反思
2014/01/12 职场文书
给领导的检讨书
2014/02/16 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript