112 lines
3.1 KiB
Vue
112 lines
3.1 KiB
Vue
<template name="simpleActionSheet">
|
|
<view class="simple-action-sheet" v-if="show" @touchmove.stop.prevent="moveHandleStop">
|
|
<view class="simple-actionsheet-mask" v-if="overlay" v-bind:style="{ zIndex: zIndex-1 }" @click="ActionCloseOverlay"></view>
|
|
<view class="simple-actionsheet" v-bind:style="{ zIndex: zIndex }" :class="[show ? 'simple-actionsheet-animate-show' : '']">
|
|
<view class="simple-actionsheet-content">
|
|
<view class="simple-actionsheet_item" hover-class="simple-actionsheet_item_hover" v-for="(item,index) in actions" :key="index" @click="ActionClick(index)">{{item.name}}</view>
|
|
<view class="simple-actionsheet_item simple-actionsheet_item-cancel" hover-class="simple-actionsheet_item_hover" @click="ActionCancelClick">{{cancelText}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "simpleActionSheet",
|
|
props: {
|
|
show:{
|
|
type : Boolean,
|
|
default:false, // 是否展示
|
|
},
|
|
actions:{
|
|
type : Array,
|
|
default : [], // 菜单选项
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "" // 标题
|
|
},
|
|
zIndex:{
|
|
type : Number,
|
|
default : 100 // z-index 层级
|
|
},
|
|
cancelText:{
|
|
type: String,
|
|
default: "取消" //取消按钮文字
|
|
},
|
|
overlay:{
|
|
type : Boolean,
|
|
default:true, // 是否显示遮罩层
|
|
},
|
|
closeOverlay:{
|
|
type : Boolean,
|
|
default:true, // 是否点击遮罩层关闭
|
|
}
|
|
},
|
|
methods:{
|
|
ActionClick:function(index){
|
|
var action = this.actions[index];
|
|
this.$emit('select',action); // 选中
|
|
},
|
|
ActionCancelClick:function(){
|
|
this.$emit('cancel'); // 点击了取消按钮
|
|
},
|
|
ActionCloseOverlay:function(){
|
|
this.$emit('close'); // 点击了遮罩层
|
|
},
|
|
moveHandleStop:function(){
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
.simple-action-sheet .simple-actionsheet{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
color: #323233;
|
|
max-height: 90%;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
background-color: #f8f8f8;
|
|
-webkit-transform: translateY(100%);
|
|
transform: translateY(100%);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
z-index: 5000;
|
|
width: 100%;
|
|
background-color: #efeff4;
|
|
-webkit-transition: -webkit-transform .3s;
|
|
transition: -webkit-transform .3s;
|
|
transition: transform .3s;
|
|
transition: transform .3s,-webkit-transform .3s;
|
|
}
|
|
.simple-action-sheet .simple-actionsheet.simple-actionsheet-animate-show{
|
|
-webkit-transform: translate(0);
|
|
transform: translate(0);
|
|
}
|
|
.simple-action-sheet .simple-actionsheet-mask{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
.simple-action-sheet .simple-actionsheet .simple-actionsheet_item{
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #ebedf0;
|
|
}
|
|
.simple-action-sheet .simple-actionsheet .simple-actionsheet_item_hover{
|
|
background-color: #e8e8e8;
|
|
}
|
|
.simple-actionsheet_item-cancel{
|
|
margin-top: 10rpx;
|
|
}
|
|
</style> |