element-ui el-dialog侧边弹窗可横向拖拽改变宽度

el-dialog侧边弹窗可横向拖拽改变宽度，并且存储到localStorage，刷新页面后依然是拖拽后的宽度

Vue.directive('dialogDrag', {inserted: function (el) {const dragDom = el.querySelector(".el-dialog");dragDom.style.cursor = "e-resize";const dialogHeader = el.querySelector('.el-dialog__header');dialogHeader.style.cursor = "auto";// 存储的宽度,需要id存储let dialogWidth = localStorage.getItem('dialogWidth') let dialogWidthObj = {}if(dialogWidth && el.id) {dialogWidthObj = JSON.parse(dialogWidth)const sw = dialogWidthObj[el.id]if(sw) {dragDom.style.width = `${sw}px`}}dragDom.onmousedown = (e) => {// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientXconst w = dragDom.clientWidthconst minW = 300const maxW = document.body.clientWidthvar nwdocument.onmousemove = function(e) {// 通过事件委托，计算移动的距离const l = e.clientX - disX// 改变当前元素宽度，不可超过最小最大值nw = w - lnw = nw < minW ? minW : nwnw = nw > maxW ? maxW : nwdragDom.style.width = `${nw}px`if(el.id) {dialogWidthObj[el.id] = nwlocalStorage.setItem('dialogWidth',JSON.stringify(dialogWidthObj)) }}document.onmouseup = function(e) {document.onmousemove = nulldocument.onmouseup = null}}},update: function (el) {const dialogBody = el.querySelector('.el-dialog__body');if(dialogBody) {dialogBody.style.margin = "0 20px";dialogBody.style.padding = "30px 0";dialogBody.style.cursor = "auto";}}
});

使用：在el-dialog 组件中绑定 v-dialogDrag 指令

<el-dialogv-dialogDragid="addRoleDialog":before-close="handleClose":visible="dialogVisible"append-to-bodytitle="添加角色"width="28%"
>
//.......
</el-dialog>

在这里插入图片描述

element-ui el-dialog侧边弹窗可横向拖拽改变宽度相关推荐

element vue 点击一边拖拽改变宽度解决拖动会选中文字的问题
实现效果: 实现代码: //最外边的这个是放表格容器的div <div @mousemove="shrinkMove" @mouseup="shrinkUp&quo ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
自定义v-drag指令（横向拖拽滚动）
指令 Vue.directive('drag', {// 钩子函数,被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中).inserted: (el, binding, ...
element ui中dialog相关问题
一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...
element ui里dialog关闭后清除验证条件
//vue<el-dialog title="编辑用户" :visible.sync="dialogFor ...
element ui 组件vue组件使用slot-scope=“scop“根据ID改变地址
<template><div><el-table :data="tableD ...
jquery.ui.draggable中文文档jquery 自由拖拽类~study~
为什么80%的码农都做不了架构师?>>> JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-dragg ...
iview 自定义指令实现Table左右横向拖拽
有时候表格内容会很多,需要横向滚动查看右边的内容,又不想到底部拖动滚动条,如果能直接在内容中拖动就好了,这个时候就可以用 vue 的自定义指令来实现了. 为了以后扩展指令方便,创建 directive ...
【Android】HorizontalScrollView内子控件横向拖拽
前言网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 声明欢迎转载,但请保留文章原始出处:) 博客园 ...

element-ui el-dialog侧边弹窗可横向拖拽改变宽度

element-ui el-dialog侧边弹窗可横向拖拽改变宽度相关推荐

最新文章

热门文章