yinshu_ui/yinshuacx/components/popup.vue

<template>
  <div class="popup" :class="[value ? 'show': '', classStyl]" :value="value" @touchmove.stop.prevent="move">
    <div class="popup-dialogs">
				 <slot>
				</slot>
     </div>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      location: {
        type: String,
        default: 'bottom'
      },
      locked: {
        type: Boolean,
        default: false
      }
    },
	data () {
		return {
		  showPopupVisible: this.value
		}	
	},
    watch: {
      showPopupVisible (val) {
        this.$emit('input', val)
      },
	  value(val) {
	    this.showPopupVisible = val
	   }
    },
    computed: {
      classStyl () {
        let transform = ''
        switch (this.location) {
          case 'top':
            transform = 'popup-top'
            break
          case 'center':
            transform = 'popup-center'
            break
          default:
            transform = 'bottom-modal'
        }
        return transform
      }
    },
    methods: {
      close () {
        this.showPopupVisible = false
      },
      move (e) {
      },
      hide () {
        if (this.locked) {
          this.value = false
        } else {
          return false
        }
      }
    }
  }
</script>
<style lang="scss">
.popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;	
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}
.popup-dialogs {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	min-height: 400upx;
	max-width: 100%;
	background-color: transparent;
	overflow: hidden;
}
.popup-center{
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	&.show{
		-ms-transform: scale(1);
		transform: scale(1);
	}
	&::after{
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
}

.popup.show {
	opacity: 1;
	transition-duration: 0.3s;	
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}


.popup.bottom-modal::before {
	vertical-align: bottom;
}

.popup.bottom-modal .cu-dialog {
	width: 100%;
	border-radius: 0;
}

.popup.bottom-modal {
	margin-bottom: -1000upx;
	&::after{
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: bottom;
	}
}

.popup.bottom-modal.show {
	margin-bottom: 0;
}
.popup.popup-top{
	margin-top: -1000px;
	&.show{
		margin-top: 0;
	}
}
</style>