play-with-pc/src/components/popup/src/main.vue

<template>
  <section v-show="vValue" class="absolute popup-screen center"
           @click="trigger && changeValue"
           :class="{'center':center}"
  >
    <section @click.stop :class="['popup-content-'+contentAnimate]">
      <slot></slot>
    </section>
  </section>
</template>

<script lang="ts">
import props from '../props';
export default <LibMixins>{
  name: "popup",

  data(){
    return {
      vValue:false
    }
  },

  watch:{
    value:{
      handler:function (this:any) {
        this.changeValue(this.value);
      },
      immediate:true
    }
  },

  methods:{

    // 发生变更
    changeValue(value:boolean=false):any{
      if (this.vValue !== value) {
        this.vValue = value;
        this.$emit(value ? 'open' :'close');
        if (this.value !== value) {
          return this.$emit('update:value',value);
        }
      }
    }

  },

  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>