element-plus 的 dialog 半优雅写法！

前言

本人前端水平只是下等，这个比较简单适合自己。

常规

通常我们要控制多个弹窗子组件，需要定义多个变量和方法，但是逻辑大致相同

const dialogVisible = ref(false)
const handleClose = ()=>{
    dialogVisible.value = false;
}

const dialogVisible2 = ref(false)
const handleClose2 = ()=>{
    dialogVisible2.value = false;
}

 <el-dialog v-model="dialogVisible" title="Outer Dialog">
 </el-dialog>
 
 <el-dialog v-model="dialogVisible2" title="Outer Dialog">
 </el-dialog>

改进

很容易看出，属性和方法相同的模板样式占据太多空间，那么如果使用 class，然后去 new 对象，分别去控制就很好解决这样的问题，幸好这个 vue-class-setup 库经过我的探索可以很好解决这个问题。

• 定义 class 类需要的功能

<script lang="ts">
import { Setup, Context } from 'vue-class-setup';

@Setup
class BaseDialog extends Context {
  public visible = false;

  public handleClose() {
    this.visible = false
  }

  public openClose() {
    this.visible = true
  }
}
</script>

• 实例化 class

<script setup lang="ts">
const add = new BaseDialog();
const edit = new BaseDialog();
</script>

• 使用

 <el-dialog v-model="add.visible" title="Outer Dialog">
 </el-dialog>
 
 <el-dialog v-model="edit.visible" title="Outer Dialog">
 </el-dialog>

最后

class 可以定义更多功能，也可以使用继承来扩展独有功能，这个也是相对比较满意的方案，脑细胞消耗少。 其他功能没有重复度这么高的也不需要使用 class。