|
@@ -0,0 +1,224 @@
|
|
|
+<template>
|
|
|
+ <view class="ss-modal-body" :class="{'ss-modal-active' : animation, 'ss-modal-H5Top': _H5Top, 'ss-modal-H5Bottom': _H5Bottom}" :data-platform="platform">
|
|
|
+ <view class="ss-modal" :class="'ss-modal-' + position +' ' + 'ss-modal-' + mode">
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+ <view v-if="_mask" class="uni-mask" @touchmove.stop.prevent="moveHandle" catchtouchmove="true" @click.stop="hide()"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const systemInfo = uni.getSystemInfoSync();
|
|
|
+ export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ animation: false,
|
|
|
+ platform: systemInfo.platform
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ /*
|
|
|
+ * 参数说明(定位)
|
|
|
+ */
|
|
|
+ position: {//可能值 top left right bottom middle
|
|
|
+ type: String,
|
|
|
+ default: 'middle'
|
|
|
+ },
|
|
|
+ /*
|
|
|
+ * 参数说明
|
|
|
+ * full 宽度100%
|
|
|
+ * insert 80%宽度内联小框
|
|
|
+ * cover 宽度高度100%
|
|
|
+ */
|
|
|
+ mode: {
|
|
|
+ type: String,
|
|
|
+ default: 'full'
|
|
|
+ },
|
|
|
+ mask: {
|
|
|
+ type: [Boolean, String],
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ /*
|
|
|
+ * H5置顶
|
|
|
+ */
|
|
|
+ H5Top: {
|
|
|
+ type: [Boolean, String],
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ /*
|
|
|
+ * H5置底
|
|
|
+ */
|
|
|
+ H5Bottom: {
|
|
|
+ type: [Boolean, String],
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ _mask() {
|
|
|
+ return String(this.mask) === 'false' ? false : true;
|
|
|
+ },
|
|
|
+ _H5Top() {
|
|
|
+ return String(this.H5Top) === 'false' ? false : true;
|
|
|
+ },
|
|
|
+ _H5Bottom() {
|
|
|
+ return String(this.H5Bottom) === 'false' ? false : true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ animation(val) {
|
|
|
+ this.$emit('change', val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moveHandle() {
|
|
|
+ return ;
|
|
|
+ },
|
|
|
+ show () {
|
|
|
+ this.animation = true;
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ hide () {
|
|
|
+ this.animation = false;
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ toggle () {
|
|
|
+ return !this.animation ? this.show() : this.hide()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ // 弹窗公用样式
|
|
|
+ .ss-modal-body{
|
|
|
+ box-sizing: border-box;
|
|
|
+ opacity: 0;
|
|
|
+ position: fixed;
|
|
|
+ top: 44px;
|
|
|
+ bottom: 50px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: translateX(0);
|
|
|
+ transition: all .2s linear;
|
|
|
+ z-index: 98;
|
|
|
+ &.ss-modal-active{
|
|
|
+ pointer-events: auto;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .ss-modal-body.ss-modal-H5Top{
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ .ss-modal-body.ss-modal-H5Bottom{
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ .ss-modal-body .uni-mask{
|
|
|
+ z-index: 1;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0,0,0,.6);
|
|
|
+ }
|
|
|
+ .ss-modal{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 2;
|
|
|
+ transition: inherit;
|
|
|
+ /deep/ .gmy-float-touch{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ss-modal-middle{
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .ss-modal-cover{
|
|
|
+ width: 100%;
|
|
|
+ // width: 100vw;
|
|
|
+ width: calc(100% + 3px);
|
|
|
+ // width: calc(100vw + 2px);//清除translate带来了计算误差
|
|
|
+ height: 100%;
|
|
|
+ // height: 100vw;
|
|
|
+ height: calc(100% + 3px);
|
|
|
+ // height: calc(100vh + 2px);//清除translate带来了计算误差
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(100%, 0);
|
|
|
+ }
|
|
|
+ .ss-modal-top{
|
|
|
+ left: 50%;
|
|
|
+ z-index: 98;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ transform: translate(-50%, -100%);
|
|
|
+ & + .uni-mask{
|
|
|
+ z-index: 97;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ss-modal-full{
|
|
|
+ width: 100%;
|
|
|
+ width: calc(100% + 3px);//清除translate带来了计算误差
|
|
|
+ left: 0;
|
|
|
+ transform: translate(0, -100%);
|
|
|
+ }
|
|
|
+ .ss-modal-full.ss-modal-top{
|
|
|
+ transform: translate(0, -200%);
|
|
|
+ }
|
|
|
+ .ss-modal-full.ss-modal-bottom{
|
|
|
+ transform: translate(0, 100%);
|
|
|
+ transition: inherit;
|
|
|
+ }
|
|
|
+ .ss-modal-right{
|
|
|
+ right: 0;
|
|
|
+ max-width: 80%;
|
|
|
+ }
|
|
|
+ .ss-modal-left{
|
|
|
+ left: 0;
|
|
|
+ max-width: 80%;
|
|
|
+ }
|
|
|
+ .ss-modal-middle.ss-modal-insert {
|
|
|
+ min-width: 380rpx;
|
|
|
+ min-height: 380rpx;
|
|
|
+ max-width: 102%;
|
|
|
+ max-height: 80%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .ss-modal-body{
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .ss-modal-active{
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ .ss-modal-top{
|
|
|
+ top: 44px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ .ss-modal-full{
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ }
|
|
|
+ .ss-modal-full.ss-modal-top{
|
|
|
+ transform: translate(0, 0);
|
|
|
+ }
|
|
|
+ .ss-modal-bottom{
|
|
|
+ transform: translate(0, 0);
|
|
|
+ }
|
|
|
+ .ss-modal-cover{
|
|
|
+ transform: translate(0, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ss-modal-bottom{
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+</style>
|