详解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 08 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
Angular排序实例详解
Jun 28 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
javascript中闭包closure的深入讲解
Mar 03 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下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
php扩展开发入门demo示例
2019/09/23 PHP
JS操作JSON要领详细总结
2013/08/25 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python处理session的方法整理
2019/08/29 Python
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
超市周年庆活动方案
2014/08/16 职场文书
英文感谢信格式
2015/01/21 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫