详解vuejs2.0 select 动态绑定下拉框支持多选


Posted in Javascript onApril 25, 2019

详解vuejs2.0 select 动态绑定下拉框支持多选

select 下拉选择

产品类型:这一项是select 涉及到父子组件信息传递 下面拆开讲解

父组件

<div class="sales-board-line">
    <div class="sales-board-line-left">
     产品类型:
    </div>
    <div class="sales-board-line-right">
     <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection>
    </div>
   </div>
<script>
import VSelection from '../../components/base/selection'
import _ from 'lodash'
export default {
 components: {
 VSelection,
 VCounter,
 VChooser,
 VMulChooser,
 MyDialog: Dialog,
 BankChooser,
 CheckOrder
 },
 data () {
 return {
  buyNum: 0,
  buyType: {},
  versions: [],
  period: {},
  price: 0,
  versionList: [
  {
   label: '客户版',
   value: 0
  },
  {
   label: '代理商版',
   value: 1
  },
  {
   label: '专家版',
   value: 2
  }
  ],
  periodList: [
  {
   label: '半年',
   value: 0
  },
  {
   label: '一年',
   value: 1
  },
  {
   label: '三年',
   value: 2
  }
  ],
  buyTypes: [
  {
   label: '入门版',
   value: 0
  },
  {
   label: '中级版',
   value: 1
  },
  {
   label: '高级版',
   value: 2
  }
  ],
  isShowPayDialog: false,
  bankId: null,
  orderId: null,
  isShowCheckOrder: false,
  isShowErrDialog: false
 }
 },
 methods: {
 onParamChange (attr, val) {
  this[attr] = val
  // this.getPrice()
  console.log(this[attr], attr)
 },
 getPrice () {
  let buyVersionsArray = _.map(this.versions, (item) => {
  return item.value
  })
  let reqParams = {
  buyNumber: this.buyNum,
  buyType: this.buyType.value,
  period: this.period.value,
  version: buyVersionsArray.join(',')
  }
  this.$http.post('/api/getPrice', reqParams)
  .then((res) => {
  this.price = res.data.amount
  })
 },

 onChangeBanks (bankObj) {
  this.bankId = bankObj.id
 },
 confirmBuy () {
  let buyVersionsArray = _.map(this.versions, (item) => {
  return item.value
  })
  let reqParams = {
  buyNumber: this.buyNum,
  buyType: this.buyType.value,
  period: this.period.value,
  version: buyVersionsArray.join(','),
  bankId: this.bankId
  }
  this.$http.post('/api/createOrder', reqParams)
  .then((res) => {
  this.orderId = res.data.orderId
  this.isShowCheckOrder = true
  this.isShowPayDialog = false
  }, (err) => {
  this.isShowBuyDialog = false
  this.isShowErrDialog = true
  })
 }
 },
 mounted () {
 this.buyNum = 1
 this.buyType = this.buyTypes[0]
 this.versions = [this.versionList[0]]
 this.period = this.periodList[0]
 }
}
</script>

:selections=”buyTypes” 传入子组件 在子组件 接收这个参数

@on-change=”onParamChange(‘buyType', $event)” 通过这个事件 接收 子组件传入 的参数

子组件

<template>
 <div class="selection-component">
  <div class="selection-show" @click="toggleDrop">
  <span>{{ selections[nowIndex].label }}</span>
  <div class="arrow"></div>
  </div>
  <div class="selection-list" v-if="isDrop">
  <ul>
   <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
  </ul>
  </div>
 </div>
</template>

<script>
export default {
 props: {
 selections: {
  type: Array,
  default: [{
  label: 'test',
  value: 0
  }]
 }
 },
 data () {
 return {
  isDrop: false,
  nowIndex: 0
 }
 },
 methods: {
 toggleDrop () {
  this.isDrop = !this.isDrop
 },
 chooseSelection (index) {
  this.nowIndex = index
  this.isDrop = false
  this.$emit('on-change', this.selections[this.nowIndex])
 }
 }
}
</script>
<style scoped>
.selection-component {
 position: relative;
 display: inline-block;
}
.selection-show {
 border: 1px solid #e3e3e3;
 padding: 0 20px 0 10px;
 display: inline-block;
 position: relative;
 cursor: pointer;
 height: 25px;
 line-height: 25px;
 border-radius: 3px;
 background: #fff;
}
.selection-show .arrow {
 display: inline-block;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 5px solid #e3e3e3;
 width: 0;
 height: 0;
 margin-top: -1px;
 margin-left: 6px;
 margin-right: -14px;
 vertical-align: middle;
}
.selection-list {
 display: inline-block;
 position: absolute;
 left: 0;
 top: 25px;
 width: 100%;
 background: #fff;
 border-top: 1px solid #e3e3e3;
 border-bottom: 1px solid #e3e3e3;
 z-index: 5;
}
.selection-list li {
 padding: 5px 15px 5px 10px;
 border-left: 1px solid #e3e3e3;
 border-right: 1px solid #e3e3e3;
 cursor: pointer;
 background: #fff;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

}
.selection-list li:hover {
 background: #e3e3e3;
}
</style>

select 多选

产品版本:这一项是select 涉及到父子组件信息传递 下面拆开讲解

父组件

<div class="sales-board-line">
    <div class="sales-board-line-left">
     产品版本:
    </div>
    <div class="sales-board-line-right">
     <v-mul-chooser
     :selections="versionList"
     @on-change="onParamChange('versions', $event)"></v-mul-chooser>
    </div>
   </div>

子组件

<template>
 <div class="chooser-component">
  <ul class="chooser-list">
   <li
   v-for="(item, index) in selections"
   @click="toggleSelection(index)"
   :title="item.label"
   :class="{active: checkActive(index)}"
   >{{ item.label }}</li>
  </ul>
  </div>
 </div>
</template>

<script>
import _ from 'lodash'
export default {
 props: {
 selections: {
  type: Array,
  default: [{
  label: 'test',
  value: 0
  }]
 }
 },
 data () {
 return {
  nowIndexes: [0]
 }
 },
 methods: {
 toggleSelection (index) {
  if (this.nowIndexes.indexOf(index) === -1) {
  this.nowIndexes.push(index) 
  }
  else {
  this.nowIndexes = _.remove(this.nowIndexes, (idx) => {
   return idx !== index
  })
  }
  let nowObjArray = _.map(this.nowIndexes, (idx) => {
  return this.selections[idx]
  })
  this.$emit('on-change', nowObjArray)
 },
 checkActive (index) {
  return this.nowIndexes.indexOf(index) !== -1
 }
 }
}
</script>
<style scoped>
.chooser-component {
 position: relative;
 display: inline-block;
}
.chooser-list li{
 display: inline-block;
 border: 1px solid #e3e3e3;
 height: 25px;
 line-height: 25px;
 padding: 0 8px;
 margin-right: 5px;
 border-radius: 3px;
 text-align: center;
 cursor: pointer;
}
.chooser-list li.active {
 border-color: #4fc08d;
 background: #4fc08d;
 color: #fff;
}
</style>

这里用到 lodash 因为vuejs2.0 放弃了$.remove 方法 可以通过lodash 方法解决

以上所述是小编给大家介绍的vuejs2.0 select动态绑定下拉框详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
微信小程序遍历Echarts图表实现多个饼图
Apr 25 #Javascript
在微信小程序中使用图表的方法示例
Apr 25 #Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 #Javascript
Angular封装搜索框组件操作示例
Apr 25 #Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
You might like
如何把PHP转成EXE文件
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
javascript 闭包详解
2015/02/15 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python中二分查找法的实现方法
2020/12/06 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
给校长的建议书500字
2014/05/15 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2014年内勤工作总结
2014/11/24 职场文书
企业投资意向书
2015/05/09 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
Python制作一个随机抽奖小工具的实现
2021/07/07 Python