详解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简化Ajax开发 Ajax开发入门
Oct 14 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
jquery replace方法去空格
May 08 jQuery
深入理解JS的事件绑定、事件流模型
May 13 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
vue实现简单的日历效果
Sep 24 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
微信小程序遍历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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
js实现微博发布小功能
2017/01/12 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python实现快递价格查询系统
2020/03/03 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python图像读写方法对比
2020/11/16 Python
介绍一下linux的文件系统
2015/10/06 面试题
元宵晚会主持词
2014/03/25 职场文书
初二学习计划书范文
2014/04/27 职场文书
调查研究项目计划书
2014/04/29 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python