利用Vue3封装一个弹框组件简单吗

下面是“利用Vue3封装一个弹框组件简单吗”的完整攻略。

步骤一：创建弹框组件

首先，我们需要在Vue3项目中创建一个弹框组件。在这里，我们可以使用createApp来创建一个Vue实例，并通过template的方式创建组件视图。同时，我们还需要在弹框组件中实现以下功能：

• 在组件外部调用 show() 方法可以展示弹框；
• 在组件外部调用 hide() 方法可以隐藏弹框；
• 可以自定义弹框大小、显示位置等样式。

以下是一个简单的弹框组件示例代码：

<template>
  <transition name="fade">
    <div class="dialog" v-if="visible">
      <div class="dialog-overlay" @click="handleClickOutside"></div>
      <div class="dialog-wrapper" :style="styles">
        <div class="dialog-header">{{ title }}</div>
        <div class="dialog-body">{{ content }}</div>
        <div class="dialog-footer">
          <button class="dialog-btn" @click="hide()">取消</button>
          <button class="dialog-btn confirm" @click="confirm()">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'Dialog',
  props: {
    title: String,
    content: String,
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: 'auto'
    },
    showMask: {
      type: Boolean,
      default: true
    },
    onConfirm: Function,
    onCancel: {
      type: Function,
      default () {
        this.hide()
      }
    }
  },
  setup (props) {
    const visible = ref(false)

    const styles = {
      width: props.width,
      height: props.height
    }

    const handleClickOutside = () => {
      if (props.showMask) {
        props.onCancel()
      }
    }

    const show = () => {
      visible.value = true
    }

    const hide = () => {
      visible.value = false
    }

    const confirm = () => {
      props.onConfirm()
      hide()
    }

    onMounted(() => {
      document.addEventListener('keydown', handleEscKey)
    })

    onUnmounted(() => {
      document.removeEventListener('keydown', handleEscKey)
    })

    const handleEscKey = (event) => {
      if (event.key === 'Escape') {
        hide()
      }
    }

    return {
      visible,
      styles,
      handleClickOutside,
      show,
      hide,
      confirm
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.dialog-wrapper {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.dialog-header, .dialog-footer {
  padding: 16px;
  background-color: #f3f4f5;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.dialog-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.dialog-btn {
  display: inline-block;
  border: none;
  outline: none;
  padding: 8px 16px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f3f4f5;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .3s;
}

.dialog-btn:hover {
  background-color: #e4e5e6;
}

.confirm {
  background-color: #409eff;
  color: #fff;
}

.confirm:hover {
  background-color: #66b1ff;
}
</style>

步骤二：使用弹框组件

在创建完弹框组件之后，就可以在需要使用弹框的地方直接引入并使用组件了。以下是示例代码：

<template>
  <div>
    <button @click="showDialog">打开弹框</button>
    <!-- 弹框组件 -->
    <Dialog
      ref="dialog"
      :title="title"
      :content="content"
      :width="width"
      :height="height"
      :on-confirm="handleConfirm"
      :on-cancel="handleCancel"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import Dialog from './Dialog.vue'

export default {
  name: 'MyComponent',
  components: {
    Dialog
  },
  setup () {
    const title = '提示'
    const content = '这是一个弹框！'
    const width = '400px'
    const height = 'auto'

    const dialog = ref(null)

    const showDialog = () => {
      dialog.value.show()
    }

    const handleConfirm = () => {
      alert('您点击了确定按钮！')
    }

    const handleCancel = () => {
      alert('您点击了取消按钮！')
    }

    return {
      title,
      content,
      width,
      height,
      dialog,
      showDialog,
      handleConfirm,
      handleCancel
    }
  }
}
</script>

以上示例代码展示了如何在一个Vue组件中使用弹框组件。具体来说，当点击“打开弹框”按钮时，会调用showDialog()方法，并显示弹框。弹框的相关参数，比如标题、内容、宽度和高度等，都可以在Vue组件中动态设置。当用户点击弹框的“确定”或“取消”按钮时，会触发handleConfirm()或handleCancel()方法，从而执行相应的逻辑。

到此为止，Vue3封装一个弹框组件的攻略就结束了。希望可以对您有所帮助。