产品类型:这一项是选择涉及到父子组件信息传递下面拆开讲解
父组件
& lt; div类=皊ales-board-line”比;
& lt; div类=皊ales-board-line-left”比;
产品类型:
& lt;/div>
& lt; div类=皊ales-board-line-right”比;
& lt; v-selection:选择=癰uyTypes @on-change”=皁nParamChange (buyType,事件美元)“祝辞& lt;/v-selection>
& lt;/div>
& lt;/div>
之前
& lt; script>
从“. ./. ./组件/导入VSelection基地/选择”
从“lodash”进口_
出口默认{
组件:{
VSelection,
VCounter,
VChooser,
VMulChooser,
MyDialog:对话框中,
BankChooser,
CheckOrder
},
数据(){
返回{
buyNum: 0,
buyType: {},
版本:[],
期:{},
价格:0,
versionList:(
{
标签:“客户版”,
值:0
},
{
标签:“代理商版”,
值:1
},
{
标签:“专家版”,
值:2
}
),
periodList:(
{
标签:“半年”,
值:0
},
{
标签:“一年”,
值:1
},
{
标签:“三年”,
值:2
}
),
buyTypes:(
{
标签:“入门版”,
值:0
},
{
标签:“中级版”,
值:1
},
{
标签:“高级版”,
值:2
}
),
isShowPayDialog:假的,
bankId:空,
orderId:空,
isShowCheckOrder:假的,
isShowErrDialog:假
}
},
方法:{>
& lt; template>
& lt; div类=把≡褡榧北?
& lt; div类=" selection-show " @click=皌oggleDrop”比;
& lt; span>{{选择[nowIndex]。标签}}& lt;/span>
& lt; div类=凹贰弊４? lt;/div>
& lt;/div>
& lt; div类=v=癷sDrop”比“选择列表”;
& lt; ul>
& lt;李v="(项目、索引),选择“@click=癱hooseSelection(指数)”在{{项目。标签}}& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
道具:{
选择:{
类型:数组,
默认值:[{
标签:“测试”,
值:0
})
}
},
数据(){
返回{
isDrop:假的,
nowIndex: 0
}
},
方法:{
toggleDrop () {
这一点。isDrop=! this.isDrop
},
chooseSelection(指数){
这一点。nowIndex=指数
这一点。isDrop=false
这一点。释放美元(“变化”,this.selections [this.nowIndex])
}
}
}
& lt;/script>
& lt; scoped>风格;
.selection-component {
位置:相对;
显示:inline-block;
}
.selection-show {
边界:1 px固体# e3e3e3;
填充:20 px 0 10 px;
显示:inline-block;
位置:相对;
光标:指针;
高度:25 px;
行高:25 px;
border - radius: 3 px;
背景:# fff;
}
.selection-show .arrow {
显示:inline-block;
border-left: 4 px固体透明;
边境:4 px固体透明;
border-top: 5 px固体# e3e3e3;
宽度:0;
高度:0;
margin-top: 1 px;
margin-left: 6 px;
margin-right: -14 px;
vertical-align:中间;
}
.selection-list {
显示:inline-block;
位置:绝对的;
左:0;
上图:25 px;
宽度:100%;
背景:# fff;
border-top: 1 px固体# e3e3e3;
边界底部:1 px固体# e3e3e3;
z - index: 5;
}
李.selection-list {
填充:5 px 15 px 5 px 10 px;
border-left: 1 px固体# e3e3e3;
边境:1 px固体# e3e3e3;
光标:指针;
背景:# fff;
空白:nowrap;}
溢出:隐藏;
文本溢出:省略;
}
.selection-list李:{徘徊
背景:# e3e3e3;
}
& lt;/style>
之前
<强>
产品版本:这一项是选择涉及到父子组件信息传递下面拆开讲解
父组件
& lt; div类=皊ales-board-line”比;
& lt; div类=皊ales-board-line-left”比;
产品版本:
& lt;/div>
& lt; div类=皊ales-board-line-right”比;
& lt; v-mul-chooser
:选择=" versionList”
@on-change=" onParamChange(“版本”,事件美元)“祝辞& lt;/v-mul-chooser>
& lt;/div>
& lt;/div>
