152 lines
4.0 KiB
Vue
152 lines
4.0 KiB
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>
|