select 下拉选择
产品类型：这一项是select 涉及到父子组件信息传递 下面拆开讲解
父组件
<div> <div> 产品类型： </div> <div> <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> <div @click="toggleDrop"> <span>{{ selections[nowIndex].label }}</span> <div></div> </div> <div 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> <div> 产品版本： </div> <div> <v-mul-chooser :selections="versionList" @on-change="onParamChange('versions', $event)"></v-mul-chooser> </div> </div>
子组件