Appearance
逻辑操作
路由跳转
js
this.$router.push('pageId')
移动端调试Vconsole
js
this.$js("VConsole", "https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js").then((VConsole) => {
new VConsole()
})
移动端异步加载element
js
this.$css('/czdn/js/element-ui.css')
this.$js("element", "/czdn/js/element-ui.js").then((element) => {})
弹窗
js
this.$dialog({
// 弹窗标题
title: "对话框标题",
// 弹窗宽度,UI规范可选值:480px 720px 1200px 1600px
width: "1024px",
// 全屏
fullscreen: false,
// 距离顶部的边距
top: "15vh",
// 遮罩
modal: true,
// 遮罩层是否插入至 body 元素上
modalAppendToBody: true,
// Dialog 自身是否插入至 body 元素上
appendToBody: true,
// 是否在 Dialog 出现时将 body 滚动锁定
lockScroll: true,
// Dialog 的自定义类名
customClass: "",
// 是否可以通过点击 modal 关闭 Dialog
closeOnClickModal: true,
// 是否可以通过按下 ESC 关闭 Dialog
closeOnPressEscape: true,
// 是否显示关闭按钮
showClose: true,
// 关闭前的回调,会暂停 Dialog 的关闭
// beforeClose: ()=>{},
// 是否对头部和底部采用居中布局
center: false,
// 关闭时销毁 Dialog 中的元素
destroyOnClose: false,
// 必填项,勿删
noBindOptions: true,
},"UIBlock", {
//待打开的页面或组件标识
code: "chart-test",
//传递的数据对象,在组件中通过props:['opts']声明
opts: {}
}).then((res) => {
// 打开的页面关闭时数据通过$emit('close',数据)传递给res
});
如何设置不带标题行的弹窗
前置条件:比如满足非嵌套弹窗,即这个弹窗是直接从页面弹出的
弹窗配置修改:appendToBody: false, customClass: "noHeader",
页面高级样式的样式表代码中添加
css
>>> .noHeader .el-dialog__header{
display: none;
}
抽屉
js
this.$drawer(
{
// 自身是否插入至 body 元素上
appendToBody: true,
// 关闭前的回调
// beforeClose: ()=>{},
// 是否可以通过按下 ESC 关闭
closeOnPressEscape: true,
// 自定义类名
customClass: "",
// 控制是否在关闭 Drawer 之后将子元素全部销毁
destroyOnClose: false,
// 是否需要遮罩层
modal: true,
// 遮罩层是否插入至 body 元素上
modalAppendToBody: true,
// 弹窗方向 rtl / ltr / ttb / btt
direction: "rtl",
// 是否显示关闭按钮
showClose: true,
// 抽屉尺寸,UI规范可选值:720px 1200px 1600px
size:"850px",
// 标题
title: "抽屉标题",
// 点击遮罩层是否可以关闭 Drawer
wrapperClosable: true,
// 是否显示 header 栏
withHeader: true,
}, "UIBlock", {
//待打开的页面或组件标识
code: "chart-test",
//传递的数据对象,在组件中通过props:['opts']声明
opts: {}
}
).then((res) => {
// 打开的页面关闭时数据通过$emit('close',数据)传递给res
});
定时器
js
// 1秒后执行
setTimeout(()=>{
}, 1000)
// 每隔1秒执行
var clock = setInterval(()=>{
}, 1000)
// 清除定时器
clearInterval(clock)