vue3 + ts +elementUI plus 弹窗

以下是使用Vue3、TypeScript和Element Plus创建弹窗的示例代码：

<template>
  <div>
    <el-button @click="showDialog">打开弹窗</el-button>
    <el-dialog v-model="dialogVisible" title="弹窗标题">
      <span>这是弹窗内容</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

export default defineComponent({
  name: 'MyComponent',
  components: {
    ElDialog,
    ElButton
  },
  setup() {
    const dialogVisible = ref(false)

    const showDialog = () => {
      dialogVisible.value = true
    }

    return {
      dialogVisible,
      showDialog
    }
  }
})
</script>

在这个示例中，我们使用了`ElButton`和`ElDialog`组件来创建一个按钮和一个弹窗。我们使用`ref`来创建一个响应式的`dialogVisible`变量，并且在`setup`函数中定义了`showDialog`函数来打开弹窗。弹窗的内容和底部按钮都可以通过插槽来自定义。最后，我们将`dialogVisible`和`showDialog`导出，以便在模板中使用。