下述为项目中弹窗/滑块统一处理方式汇总(下述已 el-dialog 为例)
演示环境:https://eugvd.csb.app/
Demo 地址:https://codesandbox.io/s/thirsty-sun-eugvd?file=/src/components/User.vue:2122-2497
DOM 结构
方式1. (推荐1:直接注入数据「详情」) el-dialog 壳子在外,内容单独组件,后续组件可以替换为其他壳子
<template>
<el-dialog
title="编辑"
:visible.sync="centerDialogVisible"
width="30%"
center>
<!-- 自定义组件 -->
<my-component :visible.sync="centerDialogVisible" :data="xxxx"></my-component>
<!-- 弹窗按钮 -->
<span slot="footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
方式2. (推荐2) el-dialog 壳子在外,内容单独组件,后续组件可以替换为其他壳子
<template>
<el-dialog
title="编辑"
:visible.sync="centerDialogVisible"
width="30%"
center>
<!-- 自定义组件(