vue 封装 下拉选择框 actionSheet, dropDown ,类似mint-ui中的actionSheet

一，封装蒙层Popup 框---带淡入淡出渐变效果的

<template>
    <transition name="rytpopup-transition">
        <div class="rytPopup" v-show="visible" @click="closeRytpopup">
            <slot></slot>
        </div>
    </transition>
</template>
<!--  slot 意为插槽 里面可以放任何标签 -->
<script>
 export default {
     name:"rytPopup",
     props:{
         center:{
             type: Boolean,
             default:false    
         }
      
     },
    data(){
        return{
            visible:false,     
        }
       
    },
    methods:{
        closeRytpopup(){
            this.visible = false
        },

    },
    watch:{
        visible(val){
           this.$emit('input',val)  //当visible的值发生改变的时候，把val（viaible的值）传给父组件的v-model属性
        },
          center(val){ //当center的值发生改变的时候，把center的val值传给this.viaible
            this.visible = val
          }    

    },
 }
</script>
<style scoped>
    .rytPopup {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background-color: #000
    }
    /*利用vue 的transition 中的过渡实现背景色的opacity 的值在0 和1之间的过渡*/
  .rytpopup-transition-enter-active, .rytpopup-transition-leave-active {
      transition: opacity .5s;
    }
    .rytpopup-transition-enter, .rytpopup-transition-leave-to /* .fade-leave-active below version 2.1.