<template>
	  <div>
	    <div>
	      <el-button @click="dialogFormVisible=true">
	        打开
	      </el-button>
	    </div>
	    <el-dialog title="弹框" :visible.sync="dialogFormVisible" :width="dialogWidth">
	      <el-form  :model="addline" >
	        <el-row :gutter="10">
	          <el-col>
	            <el-form-item label="标题" prop="title">
	              <el-input
	                v-model="addline.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: 'DialogWidth',
		  data() {
		    return {
		      addline: {
		        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 //宽度最小为800,可修改
		     //窗口宽度小于默认宽度时，将弹框看度设置为50%,可修改
		      if (val < def) {
		        this.dialogWidth = '50%'
		      } else {
			 //窗口宽度大于默认宽度1200时，将弹框设置为400宽度,可修改
		        this.dialogWidth =  '400px'
		      }
		    }
		  }
		}
	</script>