前端vue element-ui 中的 dialog实现边框放大缩小

要实现vue element-ui中的dialog边框放大缩小，可以使用CSS的transform属性和transition属性来达到效果。具体实现步骤如下：

1. 首先，在dialog组件中添加一个div元素作为边框，设置其样式为绝对定位、宽高100%、边框的宽度和颜色等。

2. 然后，使用CSS的transform属性和transition属性来实现放大缩小效果。将div元素的transform属性设置为scale(1)（原始大小），并设置transition属性为all 0.3s ease-in-out（缩放动画时间和缓动效果）。

3. 最后，在需要放大缩小边框的时候，使用Vue的$refs来获取到该div元素，并将其transform属性设置为scale(1.2)（放大）或scale(1)（缩小）即可。

下面是一个简单的示例代码：

<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" :width="width" :before-close="handleClose">
    <div class="dialog-border" ref="border"></div>
    <div>{{ content }}</div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: 'Dialog标题',
      width: '50%',
      content: 'Dialog内容'
    }
  },
  methods: {
    handleClose(done) {
      this.$refs.border.style.transform = 'scale(1)';
      setTimeout(() => {
        done();
      }, 300);
    },
    handleClick() {
      this.dialogVisible = true;
      this.$refs.border.style.transform = 'scale(1.2)';
    }
  }
}
</script>

<style scoped>
.dialog-border {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #409EFF;
  top: 0;
  left: 0;
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}
</style>

以上代码仅供参考，具体实现方式可以根据实际需求进行调整。