先写静态,慢慢改造
初始组件结构
<template>
<div class="dialog">
<div class="cantiner">
<div class="header">
<h4>标题</h4>
<span>x</span>
</div>
<div class="main">
半醉半醒日复日,花开花落年复年
</div>
<div class="footer">
<button>确定</button>
<button>取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DialogT',
data () {
return {
}
},
created () {
},
computed: {
},
methods: {
}
}
</script>
<style lang='scss' scoped>
.dialog{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
position: fixed;
.cantiner{
position: relative;
width: 40%;
background: #ffff;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
.header{
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
span{
cursor: pointer;
}
}
.main{
padding: 50px 0px;
}
.footer{
padding: 20px 0px;
& button:nth-child(1) {
margin-right: 40px;
}
}
}
}
</style>
main.js全局注册引入
import TdialogT from './components/TdialogT.vue'
Vue.component('TdialogT', TdialogT)
使用组件
浏览器效果
使用v-bind的修饰符.sync,设置初始false,子组件不接收也可以使用,使用v-if判断
父组件
<TdialogT :flagshow.sync="flagshow"></TdialogT>
子组件
借鉴Elment
close | Dialog 关闭的回调 |
使用.sync语法糖在子组件抛出update事件修改flagshow状态
效果
具名插槽,匿名插槽
让父组件,可以设置子组件的,标题,内容,宽度
演示