需要封装一个dialog组件。但是出现一个问题。初始第一次点击某个按钮可以正常弹出。但是后面无论怎么点击都无法出现。

解决办法：

给dialog添加一个v-if。代码如下：

弹窗组件

login.vue

-------------------------------------------------

  <el-dialog

            :modal-append-to-body="false"

            title="您尚未登录,请先登录"

            :visible.sync="visible"

            width="30%"

            v-if="visible"

            @close="closeForm"

        >

       ........内容

</el-dialog>

export default {

    name:'loginCheck',

    props:{

        show:{

            type:Boolean,

            default:false

        }

    },

    watch:{

        show(){

            this.visible = this.show

        }

    },

    data() {

        return {

            userInfo:{

                userName:"",

                password:""

            },

            rememberPassword:false,

            language:"zh",

            langTypeVal:"",

            visible:this.show,

            showEyes:false

        };

    },

    created() {

 

    },

    mounted() {

 

    },

    methods: {

       closeForm(){

           this.$emit("update:show",false)

       },

       toggle(){

            this.showEyes=!this.showEyes

        },

    }

};

使用：

product.vue组件

<template>

<p @click='open'>点击</p>

</template>

<script>

data(){

   return{

       loginFlag:false

  }

},

methods:{

   open(){

        this.loginFlag=true

   }

}

</script>