1. 设置标题 props
  2. 动态插入内容 默认插槽
  3. 动态插入底部操作按钮具名插槽
  4. 打开关闭功能额 组件通信

    基础页面布局

    1. <template>
    2. <div class="xtx-dialog" :class="{fade}">
    3. <div class="wrapper" :class="{fade}">
    4.  <div class="header">
    5.    <h3>切换收货地址</h3>
    6.    <a href="JavaScript:;" class="iconfont icon-close-new"></a>
    7. </div>
    8.  <div class="body">
    9.    对话框内容
    10. </div>
    11.  <div class="footer">
    12.    <XtxButton type="gray" style="margin-right:20px">取消</XtxButton>
    13.    <XtxButton type="primary">确认</XtxButton>
    14. </div>
    15. </div>
    16. </div>
    17. </template>
    18. <script>
    19. import { ref, onMounted } from 'vue'
    20. export default {
    21.  name: 'XtxDialog',
    22.  setup () {
    23.    const fade = ref(false)
    24.    onMounted(() => {
    25.      // 结构和样式同时加上无过度效果，需要些延时。
    26.      setTimeout(() => {
    27.        fade.value = true
    28.      }, 0)
    29.    })
    30.    return { fade }
    31.  }
    32. }
    33. </script>
    34. <style scoped lang="less">
    35. .xtx-dialog {
    36.  position: fixed;
    37.  left: 0;
    38.  top: 0;
    39.  width: 100%;
    40.  height: 100%;
    41.  z-index: 8887;
    42.  background: rgba(0,0,0,0);
    43.  &.fade {
    44.    transition: all 0.4s;
    45.    background: rgba(0,0,0,.5);
    46.  }
    47.  .wrapper {
    48.    width: 600px;
    49.    background: #fff;
    50.    border-radius: 4px;
    51.    position: absolute;
    52.    top: 50%;
    53.    left: 50%;
    54.    transform: translate(-50%,-60%);
    55.    opacity: 0;
    56.    &.fade {
    57.      transition: all 0.4s;
    58.      transform: translate(-50%,-50%);
    59.      opacity: 1;
    60.    }
    61.    .body {
    62.      padding: 20px 40px;
    63.      font-size: 16px;
    64.      .icon-warning {
    65.        color: @priceColor;
    66.        margin-right: 3px;
    67.        font-size: 16px;
    68.      }
    69.    }
    70.    .footer {
    71.      text-align: center;
    72.      padding: 10px 0 30px 0;
    73.    }
    74.    .header {
    75.      position: relative;
    76.      height: 70px;
    77.      line-height: 70px;
    78.      padding: 0 20px;
    79.      border-bottom: 1px solid #f5f5f5;
    80.      h3 {
    81.        font-weight: normal;
    82.        font-size: 18px;
    83.      }
    84.      a {
    85.        position: absolute;
    86.        right: 25px;
    87.        top: 25px;
    88.        font-size: 24px;
    89.        width: 20px;
    90.        height: 20px;
    91.        line-height: 20px;
    92.        text-align: center;
    93.        color: #999;
    94.        &:hover {
    95.          color: #666;
    96.        }
    97.      }
    98.    }
    99.  }
    100. }
    101. </style>

    显示隐藏

    props抛出一个visible用来控制弹层组件的渲染

  1. <div class="xtx-dialog" :class="{fade}" v-if="visible">
  3. props: {
  4.     visible: {
  5.       type: Boolean,
  6.       default: false
  7.     }
  8.   },

标题

层级问题解决

css的层级在创建下就定义好了，组件内部无论在设置多少都无法突破层级限制 传送门组件<Teleprot to="#id名"></Teleprot> 在public下index.html加对应id的盒子用来存放就能突破层级限制