详解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弹出层插件简化版代码下载
Oct 16 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python流程控制常用工具详解
2020/02/24 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python能做什么
2020/06/02 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
网络维护管理员的自我评价分享
2013/11/11 职场文书
爱情检讨书大全
2014/01/21 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
公司年会开场白
2015/06/01 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
第一军规观后感
2015/06/12 职场文书
Django如何与Ajax交互
2021/04/29 Python
Java 多态分析
2022/04/26 Java/Android
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers
Apache自带的ab压力测试工具的实现
2022/07/23 Servers