mint-ui Picker的使用
<template> <div v-bind:style="{minHeight:clientHeight + 'px'}" id="recive-min-body"> <mt-header title="我的赞"> <mt-button icon="back" slot="left" @click.native="goBack">返回</mt-button> </mt-header> <form> <h3 class="recive-min-input">请填写以下信息:</h3> <mt-field label="你要点赞给" placeholder="巩一杰" @click.native="handleClick"></mt-field> <!-- <mt-field label="使用数量" placeholder="1张"></mt-field> --> <mt-popup v-model="popupVisible" position="bottom" modal=false> <mt-picker v-bind:style="{width:clientWidth + 'px',padding: 20 + 'px'}" :slots="slots" @change="onValuesChange"></mt-picker> </mt-popup> <mt-field label="点赞理由" placeholder="点赞理由要规范" type="textarea" rows="4"></mt-field> <div class="recive-buttonBox"> <mt-button type="primary" class="recive-button" @click.native="reciveTestSubmit">确定</mt-button> </div> </form> </div> </template> <style scoped> #recive-min-body { background-color: #f5f5f5; } .picker-item { padding: 30px; } .recive-min-input { margin-top: 10px; } form h3 { margin: 0; padding: 10px !important; font-weight: normal; font-size: 15px; } .recive-buttonBox { margin: 0 20px; } .recive-button { width: 100%; border-radius: 7px; margin-top: 20px; } </style> <script> export default { data () { return { clientWidth: document.documentElement.clientWidth, clientHeight: document.documentElement.clientHeight, popupVisible:false, slots: [ { flex: 1, values: ['大一', '大二', '大三'], className: 'slot1', textAlign: 'left' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['1', '2', '3'], className: 'slot3', textAlign: 'right' } ], ids: "" } }, watch: { values:function(val,oldval){ console.log(val,oldval); } }, methods:{ goBack: function() { this.$router.push({ path: '/home/mine' }); }, handleClick: function() { this.popupVisible = true; }, onValuesChange(picker, values) { if (values[0]=='大一') { picker.setSlotValues(1, ['1','2','3']); }else if (values[0]=='大二') { picker.setSlotValues(1, ['a','b','c']); }else if (values[0]=='大三') { picker.setSlotValues(1, ['4','5','6']); }; } }, mounted(){ // this.ids = filters.ytox(this.$route.params.ids) } } </script>
效果图: