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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
requireJS使用指南
Apr 27 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
webpack4打包vue前端多页面项目
Sep 17 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
项目中应用Redis+Php的场景
2016/05/22 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python中动态创建类实例的方法
2017/03/24 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
教师党员公开承诺书
2014/03/25 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
教师群众路线心得体会
2014/11/04 职场文书
党员检讨书范文
2014/12/27 职场文书
入党培养人考察意见
2015/06/08 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
Go语言编译原理之源码调试
2022/08/05 Golang