使用Vue3撸一个弹窗组件

撸一个弹窗组件

• 新建confirm.vue文件

• 使用vue3里面新出的teleport标签来构建页面

这里text，confirmBtnText，cancelBtnText三个变量由父组件传入。

text：弹窗的文本信息；

confirmBtnText：确认按钮的文本信息；

cancelBtnText：取消按钮的文本信息；

• css样式

这里主要是定义confirm的过渡动画。

• 下面开始撸业务逻辑

定义个props用来接收父组件传来的值。

export default {
  name: 'confirm',
  props: {
    text: {
      type: String,
      default: ''
    },
    confirmBtnText: {
      type: String,
      default: '确定'
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    }
  },
  ......
}

定义data里面的变量visible来控制弹窗的出现和消失。

export default {
  ......
  data () {
    return {
      visible: false
    }
  }
  .....
}

定义几个事件来完成这个组件。

confirm ()：点击确认按钮，隐藏组件，并向父组件派发confirm事件；

cancel ()：点击取消按钮，隐藏组件，并向父组件派发cancel事件；

hide ()：隐藏组件；

show ()：显示组件；

使用emits将这两个事件派发出去。

export default {
  ......
  emits: ['confirm', 'cancel'],
  methods: {
    // 确认
    confirm () {
      this.hide()
      this.$emit('confirm')
    },
    // 取消
    cancel () {
      this.hide()
      this.$emit('cancel')
    },
    hide () {
      this.visible = false
    },
    show () {
      this.visible = true
    }
  }
}

• 组件使用

引用组件，拿到组件的ref，并定义一个confirm事件，来控制点击确定后面要干的事情。text，confirmBtnText控制组件显示的文本信息。

在使用组件的按钮处定义@click事件，来唤起组件让其显示。

业务逻辑这里使用setup函数组合API来编写。

先用ref拿到组件的dom

import { ref } from 'vue'
import Confirm from '../base/confirm/confirm'

export default {
  ......
  setup () {
    // 拿到confirm的dom
    const confirmRef = ref(null)
    // 唤起confirm
    function showConfirm () {
      confirmRef.value.show()
    }
    // 点击确认按钮后的事件处理
    function confirm () {
      ...
      这里编写你自己的处理逻辑
      ...
      // 事件处理完后记得关闭confirm组件
      confirmRef.value.hide()
    }

    return {
      confirmRef,
      showConfirm,
      confirm
    }
  }
  ......
}

• END 结束