Vue3+TS 携手打造灵活的对话框组件，一次满足所有需求！

2023-09-29 17:40:08

引言

Vue.js 与 TypeScript 的结合带来了开发灵活性和类型安全性，使得构建更复杂的前端应用成为可能。本文聚焦于如何使用这两项技术创建一个高度灵活、满足各类需求的 Modal 对话框组件。

满足基本需求：基础构建

在开始之前，确保项目中已经配置好 Vue3 和 TypeScript。接下来，创建一个新的 Modal 组件。

<template>
  <div v-if="visible" class="modal">
    <div class="content">{{ content }}</div>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: "Modal",
  props: {
    visible: Boolean,
    content: String
  },
});
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}
</style>

灵活的内容展示

为了支持更灵活的对话框内容，可以允许用户传递任意的 Vue 组件作为子组件。

<template>
  <div v-if="visible" class="modal">
    <slot></slot>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: "Modal",
});
</script>

跳出父组件的束缚

通过使用 Vue3 的 Teleport 组件，可以让对话框跳出当前父级结构，直接插入到 <body> 标签内。这样可以避免 CSS 阻挡问题。

<template>
  <teleport to="body">
    <div v-if="visible" class="modal">
      <slot></slot>
      <button @click="$emit('close')">关闭</button>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: "Modal",
});
</script>

父组件调用

在任何需要对话框的父组件中，通过动态绑定 visible 属性来控制显示状态。

<template>
  <button @click="showModal = true">打开对话框</button>
  <modal :visible.sync="showModal">
    <p>这里是内容区域</p>
  </modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Modal from './components/Modal.vue';

export default defineComponent({
  components: {
    Modal
  },
  data() {
    return {
      showModal: false,
    };
  }
});
</script>