• 实现ElementUI Dialog宽度响应式变化


    <template>
      <div class="app-container">
        <div class="filter-container">
          <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible=true">
            打开
          </el-button>
        </div>
        <el-dialog title="Test" :visible.sync="dialogFormVisible" :width="dialogWidth">
          <el-form ref="dataForm" :model="temp" label-position="left" label-width="110px">
            <el-row :gutter="10">
              <el-col>
                <el-form-item label="标题" prop="title">
                  <el-input
                    v-model="temp.title"
                    placeholder="请输入培训标题"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">
              取消
            </el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      name: 'DialogWidthDemo',
      components: {
      },
      data() {
        return {
          temp: {
            title: ''
          },
          dialogWidth: 0,
          dialogFormVisible: false
        }
      },
      created() {
        this.setDialogWidth()
      },
      mounted() {
        window.onresize = () => {
          return (() => {
            this.setDialogWidth()
          })()
        }
      },
      methods: {
        setDialogWidth() {
          console.log(document.body.clientWidth)
          var val = document.body.clientWidth
          const def = 800 // 默认宽度
          if (val < def) {
            this.dialogWidth = '100%'
          } else {
            this.dialogWidth = def + 'px'
          }
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

    源文:https://www.cnblogs.com/aquilahkj/p/11309257.html

  • 相关阅读:
    VUE 路由
    JS小表达式
    JS正则表达式
    react案例—实现组件之间的通信
    React脚手架搭建
    react属性三ref
    react属性二props
    java多线程2
    jvm小结2
    spark小结3
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/13425381.html
Copyright © 2020-2023  润新知