封装一个自己的Dialog 对话框

先写静态,慢慢改造

初始组件结构

<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状态

 效果

 具名插槽，匿名插槽

 让父组件，可以设置子组件的，标题，内容，宽度

 演示