详解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 相关文章推荐
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
Vue指令实现OutClick的示例
Nov 16 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python MD5文件生成码
2009/01/12 Python
py2exe 编译ico图标的代码
2013/03/08 Python
python的Tqdm模块的使用
2018/01/10 Python
Python 读写文件的操作代码
2018/09/20 Python
python求质数的3种方法
2018/09/28 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python 如何展开嵌套的序列
2020/08/01 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
元宵节主持词
2014/03/25 职场文书
移风易俗倡议书
2014/04/15 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
会计人员演讲稿
2014/09/11 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
标准单位租车协议书
2014/09/23 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书