<template> <view class="tm-actionSheet "> <tm-poup @change="toogle" ref="pop" v-model="showpop" height="auto" :black="black_tmeme" :bg-color="black_tmeme ? 'grey-darken-6' : 'grey-lighten-4'"> <view class="tm-actionSheet-title pa-32 pb-32 relative " :class="[black_tmeme ? 'grey-darken-5' : 'white']"> <view class="text-size-n text-align-center">{{ title }}</view> <view class="tm-actionSheet-close rounded flex-center absolute" :class="black_tmeme ? 'grey-darken-4' : 'grey-lighten-3'"> <tm-icons @click="close" name="icon-times" size="24" :color="black_tmeme ? 'white' : 'grey'"></tm-icons> </view> </view> <view> <slot> <tm-grouplist shadow="5" round="4"> <tm-listitem :black="black_tmeme" @click="onclick(index, item)" v-for="(item, index) in actions" :key="index" :title="item[rangKey]" :label="item['label'] ? item['label'] : ''" :right-icon="item['rightIcon'] ? item['rightIcon'] : 'icon-angle-right'" ></tm-listitem> </tm-grouplist> </slot> </view> <view style="height: 50upx"></view> </tm-poup> </view> </template> <script> /** * 动作面板 * @description 动作面板,从底部弹出的操作菜单。 * @property {Boolean} black = [true|false] 默认:false,暗黑模式 * @property {Boolean} value = [true|false] 默认:false,显示菜单,推荐使用v-model,使用value.sync达到双向绑定。 * @property {String} title = [] 默认:'请操作',弹出层的标题。 * @property {Array} actions = [] 默认:[],格式见文档,操作数组。 * @property {String} rang-key = [title] 默认:title,actions对象数组时,自定义标题键。 * @property {Boolean} click-close = [true|false] 默认:true,点击项目时,是否自动关闭弹层。 * @property {Function} change 点击项目时触发,返回:{index:项目索引,data:actions的对象数据} * @property {Function} input 弹层显示和隐藏时,将会触发。 * @example <tm-actionSheet @change="test" v-model="show" :actions="[{title:'说明文档',label:'这是说明文件的资料信息'},{title:'新建文件夹'}]"></tm-actionSheet> */ import tmGrouplist from '@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue'; import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue'; import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue'; import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue'; export default { components: { tmGrouplist, tmListitem, tmIcons, tmPoup }, name: 'tm-actionSheet', model: { prop: 'value', event: 'input' }, props: { value: { type: Boolean, default: false }, black: { type: Boolean, default: null }, title: { type: String, default: '操作栏' }, // 数组格式。 /* { title:"标题", label:"项目说明文字", rightIcon:"",//右边图标。 } */ actions: { type: Array, default: () => { return []; } }, // 自定义标题键key. rangKey: { type: String, default: 'title' }, // 点击项目时,是否关闭弹层 clickClose: { type: Boolean, default: true } }, data() { return { showpop: false }; }, mounted() { this.showpop = this.value; }, watch: { value: function(val) { this.showpop = val; } }, computed: { black_tmeme: function() { if (this.black !== null) return this.black; return this.$tm.vx.state().tmVuetify.black; } }, methods: { close() { this.$refs.pop.close(); }, toogle(e) { let t = this; if (e) { this.$nextTick(function() { if (this.showpop != this.value) { this.showpop = this.value; } }); } this.$emit('input', e); this.$emit('update:value', e); }, onclick(index, item) { if (this.clickClose === true) { this.$refs.pop.close(); this.$emit('change', { index: index, data: item }); } } } }; </script> <style lang="scss" scoped> .tm-actionSheet-title { .tm-actionSheet-close { top: 32upx; right: 32upx; width: 50upx; height: 50upx; } } </style>