v1.0.0-beta 源码正式开源

2026-06-12 13:19:31 +08:00 · 2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
@@ -0,0 +1,151 @@
+<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>