|
|
|
<template>
|
|
|
|
<div v-transfer-dom :data-transfer="transfer" :class="actionCls">
|
|
|
|
<transition name="action-sheet-mask">
|
|
|
|
<div class="yoho-popup-mask" @click="maskClick" v-if="mask && isVisible"></div>
|
|
|
|
<div
|
|
|
|
class="yoho-popup-mask"
|
|
|
|
@click="maskClick"
|
|
|
|
v-if="mask && isVisible"
|
|
|
|
></div>
|
|
|
|
</transition>
|
|
|
|
<transition name="action-sheet-move">
|
|
|
|
<div class="yoho-popup" v-show="isVisible" :style="{'z-index': zIndex}">
|
|
|
|
<div class="yoho-popup-container" :style="{'max-height': maxHeight + 'px', 'height': contentHeight}">
|
|
|
|
<div class="yoho-popup" v-show="isVisible" :style="{ 'z-index': zIndex }">
|
|
|
|
<div
|
|
|
|
class="yoho-popup-container"
|
|
|
|
:style="{ 'max-height': maxHeight + 'px', height: contentHeight }"
|
|
|
|
>
|
|
|
|
<slot></slot>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -14,9 +21,9 @@ |
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {mapState} from 'vuex';
|
|
|
|
import { mapState } from "vuex";
|
|
|
|
export default {
|
|
|
|
name: 'YohoActionSheet',
|
|
|
|
name: "YohoActionSheet",
|
|
|
|
props: {
|
|
|
|
maskClosable: {
|
|
|
|
type: Boolean,
|
|
...
|
...
|
@@ -48,29 +55,33 @@ export default { |
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.maxHeight = document.documentElement.clientHeight;
|
|
|
|
this.$watch('visible', (newVal) => {
|
|
|
|
if (newVal) {
|
|
|
|
this.show();
|
|
|
|
} else {
|
|
|
|
this.hide();
|
|
|
|
this.$watch(
|
|
|
|
"visible",
|
|
|
|
newVal => {
|
|
|
|
if (newVal) {
|
|
|
|
this.show();
|
|
|
|
} else {
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
immediate: true
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
immediate: true
|
|
|
|
});
|
|
|
|
);
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['yoho']),
|
|
|
|
...mapState(["yoho"]),
|
|
|
|
actionCls() {
|
|
|
|
return [{ 'yoho-action-sheet': this.full }];
|
|
|
|
return [{ "yoho-action-sheet": this.full }];
|
|
|
|
},
|
|
|
|
contentHeight() {
|
|
|
|
let {statusBarHeight, statusBarStatus} = this.yoho.window || {};
|
|
|
|
let { statusBarHeight, statusBarStatus } = this.yoho.window || {};
|
|
|
|
|
|
|
|
if (!statusBarStatus) {
|
|
|
|
statusBarHeight = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.full ? `${this.maxHeight - 20 - statusBarHeight}px` : 'auto';
|
|
|
|
return this.full ? `${this.maxHeight - 20 - statusBarHeight}px` : "auto";
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
...
|
...
|
@@ -80,7 +91,7 @@ export default { |
|
|
|
|
|
|
|
cancel() {
|
|
|
|
this.hide();
|
|
|
|
this.$emit('cancel');
|
|
|
|
this.$emit("cancel");
|
|
|
|
},
|
|
|
|
|
|
|
|
show() {
|
|
...
|
...
|
@@ -92,80 +103,71 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.action-sheet-move-enter,
|
|
|
|
.action-sheet-move-leave-active {
|
|
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-move-enter,
|
|
|
|
.action-sheet-move-leave-to {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-move-enter-active {
|
|
|
|
transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06);
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-move-leave-active {
|
|
|
|
transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-mask-enter,
|
|
|
|
.action-sheet-mask-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-mask-enter-active {
|
|
|
|
transition: opacity 0.3s linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-mask-leave-active {
|
|
|
|
transition: opacity 0.1s linear;
|
|
|
|
.action-sheet-move-enter,
|
|
|
|
.action-sheet-move-leave-active {
|
|
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-move-enter,
|
|
|
|
.action-sheet-move-leave-to {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-move-enter-active {
|
|
|
|
transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06);
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-move-leave-active {
|
|
|
|
transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-mask-enter,
|
|
|
|
.action-sheet-mask-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-mask-enter-active {
|
|
|
|
transition: opacity 0.3s linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-sheet-mask-leave-active {
|
|
|
|
transition: opacity 0.1s linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
.yoho-popup-mask {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
z-index: 99;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
.yoho-popup {
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
.yoho-popup-container {
|
|
|
|
position: relative;
|
|
|
|
opacity: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.yoho-popup-mask {
|
|
|
|
display: block;
|
|
|
|
&:after {
|
|
|
|
content: "";
|
|
|
|
width: 100%;
|
|
|
|
height: 200px;
|
|
|
|
position: absolute;
|
|
|
|
z-index: 99;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
.yoho-popup {
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
.yoho-popup-container {
|
|
|
|
background-color: #fff;
|
|
|
|
position: relative;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: "";
|
|
|
|
width: 100%;
|
|
|
|
height: 200px;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
bottom: -200px;
|
|
|
|
z-index: -1;
|
|
|
|
background: #fff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.yoho-action-sheet {
|
|
|
|
.yoho-popup-container {
|
|
|
|
border-radius: 8PX 8PX 0 0;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
bottom: -200px;
|
|
|
|
z-index: -1;
|
|
|
|
background: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
