vue3.0手写dialog提示框
Posted 奥特曼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.0手写dialog提示框相关的知识,希望对你有一定的参考价值。
实现效果
组件代码
<template>
<div class="xtx-dialog" v-show="visible" :class="{fade:visible}" >
<div class="wrapper" :class="{fade:visible}">
<div class="header">
<h3>{{title}}</h3>
<a href="javascript:;" class="iconfont icon-close-new"
@click="close">
</a>
</div>
<div class="body">
<!-- 自定内容 -->
<slot></slot>
</div>
<div class="footer">
<slot name="footer"/>
<!-- <XtxButton type="gray" style="margin-right:20px">取消</XtxButton>
<XtxButton type="primary">确认</XtxButton> -->
</div>
</div>
</div>
</template>
<script>
export default {
name: 'XtxDialog',
props: {
title: { type: String, default: '' },
visible: { type: Boolean, default: false }
},
setup (props, { emit }) {
const close = () => {
// 修改父组件的数据 visible
emit('update:visible', false)
}
return { close }
}
}
</script>
<style scoped lang="less">
.xtx-dialog {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 8887;
background: rgba(0,0,0,0);
&.fade {
transition: all 0.4s;
background: rgba(0,0,0,.5);
}
.wrapper {
width: 600px;
background: #fff;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-60%);
opacity: 0;
&.fade {
transition: all 0.4s;
transform: translate(-50%,-50%);
opacity: 1;
}
.body {
padding: 20px 40px;
font-size: 16px;
.icon-warning {
color: @priceColor;
margin-right: 3px;
font-size: 16px;
}
}
.footer {
text-align: center;
padding: 10px 0 30px 0;
}
.header {
position: relative;
height: 70px;
line-height: 70px;
padding: 0 20px;
border-bottom: 1px solid #f5f5f5;
h3 {
font-weight: normal;
font-size: 18px;
}
a {
position: absolute;
right: 25px;
top: 25px;
font-size: 24px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #999;
&:hover {
color: #666;
}
}
}
}
}
</style>
1. 采用v-model语法糖 控制组件的显示与隐藏
vue3 通过v-model 相当于 传入 modelValue
通过v-mode:visible="值" 相当于传入 visible 抛出一个事件 update:visible
2. 通过props接收title显示dialog组件标题的内容
3. 使用插槽实现主体内容和底部的区分,分别用于插槽和具名插槽为区分
插槽 slot 具名插槽 <slot name="val" /> 使用具名插槽 <template v-slot:val>底部</template>
注册组件后使用组件
<template>
<XtxDialog title="标题" v-model:visible="dialogVisible">
内容
<template v-slot:footer>
<button>取消</button>
<button>确定</button>
</template>
</XtxDialog>
</template>
<script>
export default {
components: {
GoodsImage
},
setup () {
const dialogVisible = ref(false)
const dialog = () => {
dialogVisible.value = true
}
return { dialogVisible }
}
}
</script>
以上是关于vue3.0手写dialog提示框的主要内容,如果未能解决你的问题,请参考以下文章