自适應彈框寬度

<div class="dialog_wrapper" @click.self="close()" v-show="visible">
    <div class="dialog-setting" v-show="visible" :style="{width:dialogWidth}">
    <!-- 彈框的内容（用的是element架構的彈框）--->
    </div>
 </div>
           

<script>
export default {
  props: {
    visible: Boolean,
  },
  watch: {
    visible(value) {
      if (value) {
        this.dialogWidth = innerWidth();
        window.onresize = () => {
          return (() => {
            this.dialogWidth = innerWidth();
          })();
        };
      } else {
        window.onresize = null;
      }
    }
  },
  data() {
    return {
      dialogWidth: "100%"
    };
  },
  methods: {
    close() {
      this.updateVisible(false);
    },
    updateVisible(val) {
      this.$emit("update:visible", val);
    }
  }
};
function innerWidth() {
  if (window.innerWidth >= 960) {
    return "960px";
  } else if (window.innerWidth <= 450) {
    return "450px";
  } else {
    return "100%";
  }
}
</script>