wardrobe/tm-vuetify/components/tm-actionSheet/tm-actionSheet.vue

<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>