实现ElementUI Dialog宽度响应式变化
在ElementUI的Dialog中,需要实现其宽度随浏览器宽度变化而变化,并设定默认值,当浏览器宽度大于该值时,Dialog保持该宽度,小于该值时,使用100%宽度。
代码使用 window.onresize 事件触发变化,具体Demo代码如下
<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>
效果如下
实现ElementUI Dialog宽度响应式变化的更多相关文章
- Vue响应式变化
Vue有一个很方便的特性就是Vue的双向绑定,即响应式变化,在Vue2.X版本中,Vue响应式变化靠的是Object.defineProperty方法实现的,但是这个方法有个问题,就是对数组的支持不全 ...
- VUE下echarts宽度响应式
window.addEventListener("resize", () => { myChart2.resize();});
- vue响应式数据变化
vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...
- 第四课 开发uehtml官网响应式静态页面
概况:整站布局.头部菜单响应式设置.最新消息模块变化.内容模块四三二响应式变化. 伪类选择器: E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E E:nth-la ...
- Windows 10 响应式设计和设备友好的开发
使用Effective pixels有效像素设计UI 什么是缩放像素和Effective有效像素: 当你的应用程序运行在Windows的设备,系统用一个算法控制的规范,字体,和其他UI元素显示在屏幕上 ...
- 段落p元素内的响应式文本布局就靠rem单位实现
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu ...
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...
- jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同
在手机端浏览商品列表,开发人员懂得设计图片做正好的尺寸,那样浏览很好,但有人天生泛懒图片都是随手上传不管大小合适不合适,要求还是响应式的.今天就用jquery检测宽度,并赋值给高度来实现错位问题 &l ...
随机推荐
- Saiku默认给数据类型的数据添加小数点问题处理(三十一)
Saiku默认给数据类型的数据添加小数点问题处理 不知道大家有没有遇到过saiku定义的维度信息,数据类型时 展示出来的数据会自动加上 .0的后缀. 比如我定义了一个维度为 年, 在数据库中为 int ...
- EggJs快速入门
Egg.js 简介 Egg.js 为企业级框架和应用而生,帮助开发团队和开发人员降低开发和维护成本. 专注于提供 Web 开发的核心功能和一套灵活可扩展的插件机制,不会做出技术选型,因为固定的技术选型 ...
- js常用但是不容易记住的代码
<!-- iframe 自适应高度度 --><iframe src="__CONTROLLER__/showlist" frameborder="0&q ...
- c#汉字转拼音首字母全拼支持多音字
1.首先在NuGet安装pingyinConverter 2.下载-安装-引用ChineseChar.dll到项目中 官网了解:http://www.microsoft.com/zh-cn/downl ...
- WPF的DataGrid的某个列绑定数据的三种方法(Binding、Converter、DataTrigger)
最近在使用WPF的时候,遇到某个列的值需要根据内容不同进行转换显示的需求.尝试了一下,大概有三种方式可以实现: 1.传统的Binding方法,后台构造好数据,绑定就行. 2.转换器方法(Convert ...
- Abp vNext框架 从空项目开始 使用ASP.NET Core Web Application-笔记
参考 Abp vNext框架 从空项目开始 使用ASP.NET Core Web Application http://www.vnfan.com/helinbin/d/745b1e040c9b4f6 ...
- 高强度学习训练第十二天总结:Java hashCode和equals的关系
今天要收拾东西.草草的总结下.. 1.如果两个对象相等,则hashcode一定也是相同的 2.两个对象相等,对两个对象分别调用equals方法都返回true 3.两个对象有相同的hashcode值,它 ...
- 创建Npm脚手架
1工具 l Npm ( https://nodejs.org/en/ ) l Yeoman (npm install -g yo) l generator-generator (npm inst ...
- Android框架Volley之:ImageRequest请求实现图片加载
首先我们在项目中导入这个框架: implementation 'com.mcxiaoke.volley:library:1.0.19' 在AndroidManifest文件当中添加网络权限: < ...
- Python单元测试工具doctest和unittest
Python标准库包含两个测试工具. doctest:一个简单的模块,为检查文档而设计,但也适合用来编写单元测试. unittest:一个通用的测试框架. 一.使用doctest进行单元测试 创建文件 ...