vue 弹出框自适应宽度

<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" :width="dialogWidth" >
  </el-dialog>
</template>
<script>
export default {
    data() {
      return {
        visible: false, 
        dialogWidth: "1080px",
      }
    },
     created() { 
      this.setDialogWidth() 
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.setDialogWidth()
        })()
      }
    },
    methods: {
      setDialogWidth() {
        var val = document.body.clientWidth
        const def = 1080 // 默认宽度
        if (val < def) {
          this.dialogWidth = '100%'
        } else {
          this.dialogWidth = def + 'px'
        }
      },
    }
}
</script>