【Vue3】文章分类添加编辑 [element-plus 弹层]

点击显示弹层

由于添加和编辑的弹层组件是可以复用的，所以直接封装成小组件

[外链图片转存中…(img-ovSyIrrJ-1718591701350)]

1. 准备弹层

使用弹窗的时候直接去官网复制粘贴即可

[外链图片转存中…(img-dAoHnE9K-1718591701351)]

const dialogVisible = ref(false)

<el-dialog v-model="dialogVisible" title="添加弹层" width="30%">
  <div>我是内容部分</div>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary"> 确认 </el-button>
    </span>
  </template>
</el-dialog>

2. 点击事件

<template #extra><el-button type="primary" @click="onAddChannel">添加分类</el-button></template>

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