vue插槽使用笔记

<template lang="pug">
  .confirm-wrapper(@click="closeConfirm")
    .container
      .title(v-if="title") {{title}}
      .content
      	// 这里content部分写成插槽，外部可自行传入（注意在slot的外面包一层div）；插槽可以传递组件进来，但是组件的样式是自己的，如果传递是dom标签，则需要手写行内样式传进来
        slot
      .concel-confirm(v-if="btnTypes[typeConfig] == 'CANCEL_CONFIRM'")
        span.btn-cancel(@click="onCancel") {{cancelTxt}}
        span.btn-confirm(@click="onConfirm") {{confirmTxt}}
      .only-cancel(v-else-if="btnTypes[typeConfig] == 'ONLY_CANCEL'")
        span.btn-cancel(@click="onCancel") {{cancelTxt}}
      .only-confirm(v-else-if="btnTypes[typeConfig] == 'ONLY_CONFIRM'")
        span.btn-confirm(@click="onConfirm") {{confirmTxt}}
</template>
<script>
export default {
  props: {
    typeConfig: {         // 按钮类型
      type: Number,
      default: 2
    },
    title: {              // 弹窗标题
      type: String,
      default: ''
    },
    cancelTxt: {          // 取消按钮文字
      type: String,
      default: '取消'
    },
    confirmTxt: {         // 确认按钮文字
      type: String,
      default: '确定'
    },
  },
  data() {
    return {
      // 0->ONLY_CANCEL     只有取消按钮
      // 1->ONLY_CONFIRM    只有确认按钮
      // 2->CANCEL_CONFIRM  取消和确认按钮
      // 3->NO_BTNS         不显示按钮
      btnTypes: ['ONLY_CANCEL', 'ONLY_CONFIRM', 'CANCEL_CONFIRM', 'NO_BTNS'],
    }
  },
  methods: {
    onCancel() {
      this.closeConfirm()
      this.$emit('on-cancel')
    },
    onConfirm() {
      this.closeConfirm()
      this.$emit('on-confirm')
    },
    closeConfirm() {
      this.$emit('close-confirm')
    }
  }
}
</script>
<style scoped lang="stylus">
div
  line-height 0
  margin 0
  padding 0
  font-size 0
.confirm-wrapper
  width: 100%
  height: 100%
  position: fixed
  left: 0
  top: 0
  background: rgba(0,0,0,0.7)
  z-index 201412280
  .container
    background-color #fff
    position fixed
    top 50%
    transform translateY(-50%)
    left 48px
    right 48px
    border-radius 32px
    .title
      padding 60px 40px 0px 40px
      font-size 36px
      line-height 52px
      color #060607
      text-align left
    .content
      padding 0px
      margin  0px
      line-height 0px
    .concel-confirm
      padding 0px 40px 60px
      span.btn-cancel
        width  272px
        font-size 32px
        line-height 44px
        color #FA3232
        border 2px solid rgba(250,50,50,0.2)
        border-radius 16px
        text-align center
        font-weight 500
        padding-top 28px
        padding-bottom 28px
        margin-right 30px
        display inline-block
      span.btn-confirm
        width  272px
        font-size 32px
        line-height 44px
        color #FFFFFF
        background #fa3232
        border-radius 16px
        font-weight: 500
        text-align center
        padding-top 28px
        padding-bottom 28px
        display inline-block
    .only-cancel
      padding 0px 40px 60px
      span.btn-cancel
        width 574px
        font-size 32px
        line-height 44px
        color #FA3232
        border 2px solid rgba(250,50,50,0.2)
        border-radius 16px
        text-align center
        font-weight: 500;
        padding-top 28px
        padding-bottom 28px
        display inline-block
    .only-confirm
      padding 0px 40px 60px
      span.btn-confirm
        width 574px
        font-size: 32px;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        background #fa3232
        border-radius 16px
        padding-top 28px
        padding-bottom 28px
        display inline-block
</style>

// 这里将div.content-con传入插槽，由于是dom标签，所以需要写行内样式传入
      confirm2(
        v-if="logoutConfirmConfig.isShow"
        :type-config="logoutConfirmConfig.typeConfig"
        :title="logoutConfirmConfig.title"
        :cancel-txt="logoutConfirmConfig.cancelTxt"
        :confirm-txt="logoutConfirmConfig.confirmTxt"
        @on-cancel="logoutCancel"
        @on-confirm="logoutConfirm"
        @close-confirm="logoutCloseConfirm"
      )
        .content-con(style="padding:0.24rem 0.40rem 0.60rem; fontSize: 0.28rem; lineHeight:0.40rem; color: #69727D; fontWeight: 400; textAlign: left") 您确定退出登录吗