vue实现弹框(非UI框架)
1、先写弹框样式<!-- 弹框 --><div background-color="grey"><div class="back" v-if="showModal" @click="showModal=false"></div><div class="pop" v-if="showModal"></div></div&g
1、先写弹框样式
<!-- 弹框 -->
<div background-color="grey">
<div class="back" v-if="showModal" @click="showModal=false"></div>
<div class="pop" v-if="showModal">
</div>
</div>
2、点击事件,点击弹出弹框
3、return中设置默认值为false
4、methods中改变showmodel的值
这样可以实现一个弹框事件,我是因为在electron发现不能使用el-dialog组件老是报错,采用这个方法写的弹窗。
css样式:
/* 弹框样式 */
.back {
background-color: #000;
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}.pop {
background-color: #fff;
position: fixed;
top: 100px;
left: 300px;
width: calc(100% - 600px);
height: calc(100% - 200px);
z-index: 2
}
更多推荐
所有评论(0)