Vue 3 + TypeScript 模态框组件实现

Vue 3 + TypeScript 模态框组件实现

在这篇文章中，我们将讨论如何使用 Vue 3 和 TypeScript 构建一个简单的模态框组件。这个模态框组件包含标题、文本、提示信息和按钮，所有这些内容都是通过 props 来传递的，并且我们将使用 emit 来处理模态框的关闭事件。

组件模板代码解析

首先，让我们来看看模态框的 HTML 结构和 Vue 模板部分：

<template>
    <view class="model-wrap">
        <view class="content-wrap">
            <view
                v-show="title"
                class="c-title font-bold"
            >
                {
  
  { title }}
            </view>
            <view
                v-show="tip"
                class="c-tip"
            >
                {
  
  { tip }}
            </view>
            <view
                v-show="txt"
                class="c-txt"
                v-for="(item,index) in txt"
                :key="index"
            >
               <view class="title font-bold">{
  
  {item.title}}</view>
                <view class="des">{
  
  {item.des}}</view>
            </view>

            <view
                class="c-btn"
                @tap="onClose"
            >
                {
  
  { btnTxt }}
            </view>
        </view>
    </view>
</template>

模板中的结构说明

• model-wrap 是模态框的最外层容器，它覆盖整个屏幕以显示背景遮罩。
• content-wrap 包含模态框的实际内容，包括标题、提示信息、文本列表和按钮。
• v-show 用于根据 props 的值来决定是否显示相应的部分。
• 文本列表使用 v-for 循环来渲染，这样我们可以动态传递一个文本数组，每个数组项都有 title 和 des 字段。

组件逻辑实现

接下来是 script 部分，这里我们使用了 Vue 3 的 setup 语法糖，并结合 TypeScript 对 props 进行类型定义。

<script setup lang="ts">
const {
   
    title, txt, tip