使用vue2+element开发，弹窗组件动画失效问题如何解决？

Z时代
2024-02-17
分类：IT

使用vue2+element开发pc端项目时，页面中有新增、详情、修改等逻辑，一般都是把这些封装成子组件，在父组件直接引用。以下是我常用的写法，但是不管子组件是抽屉还是弹窗，在打开或者关闭时动画都会失效，怎么优化呢？

// 父组件
<EditInfo 
  :showDetailDialog="showEditDialog" 
  @getResult="getResult"
  v-if="showEditDialog.visible">
</EditInfo>
<script>
export default {
   data() {
       return {
         showEditDialog: {visible: false}
       }
    },
    methods: {
      // 搜索接口
      search() {},
      // 新增
      handleAddClick() {
        this.showEditDialog= {
              visible: true,
              title: "新增"
         }
      },
      // 修改
      handleDetailClick(id) {
          this.showEditDialog= {
              visible: true,
              title: “修改”,
              id
          }
      },
      // 新增修改回调
      getResult(flag) {
       flag && this.search();
       this.showEditDialog.visible = false;
      }
   }
}
</script>
// 子组件
<el-dialog title="新增" :visible="showEditDialog.visible">
    <!-- 其他逻辑 -->
    <el-form></el-form>
   <div slot="footer">
      <el-button type="reset" @click="handleCancelClick" size="mini">取消</el-button>
      <el-button type="primary" @click="handleSureClick" size="mini">确定</el-button>
    </div>
</el-dialog>
<script>
export default {
   props: {
     showEditDialog: {
         type: Object,
         default: () => {}
     }
   },
  methods: {
    handleCancelClick() {
       this.$emit("getResult",false)
    },
   handleSureClick() {
     // 调用接口
      this.$emit("getResult",true)
   }
  }
}</script>

回答：

使用vue2+element开发，弹窗组件动画失效问题如何解决？是这个的原因
你不需要这里加这个v-if, 直接传值到子组件, 子组件做监听就可以了

回答：

不要使用 v-if 来控制子组件是否渲染，而是使用 ref 注册子组件实例，再到子组件内部的 open() 或者 init() 方法中初始化表单数据以及 visible 属性。

具体使用方法可以借鉴以下示例：

// 父级组件
<template>
  <div class="app-container">
    ....
    <!-- 添加或修改对话框 -->
    <MemberEditDialog ref="editDialog" @ok="loadData" />
  </div>
</template>
<script>
import MemberEditDialog from './dialog/MemberEditDialog'
export default {
  name: 'MemberList',
  components: { MemberEditDialog },
  methods: {
    // 加载列表数据
    loadData(reload) { ... },
    // 新增记录
    handleAdd() {
      this.$refs.formDialog.add()
      this.$refs.formDialog.title = "新增"
    },
    // 编辑记录
    handleEdit(data) {
      this.$refs.formDialog.edit(res.data)
      this.$refs.formDialog.title = "编辑"
    },
  }}

一般来说 add()、edit()、loadData() 等方法我都是提取出来为一个 mixin 文件来混入使用。

// 弹窗组件
<template>
  <el-dialog :title="title+'用户信息'" width="900px" :visible.sync="dialogVisible" :before-close="onClose">
     ...
  </el-dialog>
</template>
<script>
export default {
  name: 'MemberEditDialog',
  data() {
    return {
      title: "",
      record: {},
      dialogVisible: false
    }
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record = {}) {
      this.record = {...record}
      this.dialogVisible = true
      this.$nextTick(() => {
         ...
      })
    },
    onClose() {
      this.record = {}
      this.dialogVisible = false
      this.$nextTick(() => {
         ...
      })
    },
    ...
  }}

大体思路可以借鉴这个 ant-design-vue-pro，虽然使用的UI库是AntD Vue，但是思路是一样的。

回答：

个人理解，你会把控制弹框的字段和你详情展示的字段绑定在一起，为什么要绑定在一个对象里，一个是前端定义的固定字段，一个是后台返回的动态数据；
我这边的处理的方式是：
父组件：
使用vue2+element开发，弹窗组件动画失效问题如何解决？
子组件

在dialog的open方法中处理逻辑，如果你对于后台返回的数据不确定，那就用object的对象转数组方式处理，然后再dom上循环处理数组展示就行了。
至于页面的关闭也不用在给父组件传递了，直接在子组件的close方法中 this.$emit('input', false) 提交这个就可以关闭dialog了