精华内容
下载资源
问答
  • el-dialog 拖拽及居中效果

    万次阅读 2019-11-28 16:39:04
    el-dialog拖拽及改变大小 1.新建directive.js import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el) { //备注:可以改变类名使其它元素也实现拖拽效果 //鼠标...

    博客地址:http://www.globm.top/blog/1/detail/35
    el-dialog拖拽及改变大小

    1.新建directive.js

    import Vue from 'vue';
    

    只能在窗口内拖拽

    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', {
      bind (el) {
        // 备注:可以改变类名使其它元素也实现拖拽效果
        // 鼠标点击拖拽区域
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        // 被拖拽元素主题
        const dragDom = el.querySelector('.el-dialog')
        dialogHeaderEl.style.cursor = 'move'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    
        dialogHeaderEl.onmousedown = (e) => {
          // 鼠标按下,计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
    
          const screenWidth = document.body.clientWidth // body当前宽度
          const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度,可某些环境下无法获取)
    
          const dragDomWidth = dragDom.offsetWidth // 对话框宽度
          const dragDomheight = dragDom.offsetHeight // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    
          const minDragDomTop = dragDom.offsetTop
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
    
          // 获取到的值带px 正则匹配替换
          let styL, styT
    
          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes('%')) {
            // eslint-disable-next-line no-useless-escape
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
            // eslint-disable-next-line no-useless-escape
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
          } else {
            styL = +sty.left.split('px')[0]
            styT = +sty.top.split('px')[0]
          }
    
          document.onmousemove = function (e) {
            // 通过事件委托,计算移动的距离
            let left = e.clientX - disX
            let top = e.clientY - disY
    
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
    
            // 移动当前元素
            dragDom.style.transform = 'none'
            dragDom.style.left = `${left + styL}px`
            dragDom.style.top = `${top + styT}px`
    
            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          }
    
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    })
    

    可以移出窗口

    // v-dialogDrag: 弹窗拖拽
    Vue.directive('dialogDrag', {
        bind(el) {
        //备注:可以改变类名使其它元素也实现拖拽效果
        	//鼠标点击拖拽区域
            const dialogHeaderEl = el.querySelector('.el-dialog__header');
            //被拖拽元素主题
            const dragDom = el.querySelector('.el-dialog');
            dialogHeaderEl.style.cursor = 'move';
    
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;
    
                // 获取到的值带px 正则匹配替换
                let styL, styT;
    
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if(sty.left.includes('%')) {
                    // eslint-disable-next-line no-useless-escape
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                    // eslint-disable-next-line no-useless-escape
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                }else {
                    styL = +sty.left.split('px')[0];
                    styT = +sty.top.split('px')[0];
                }
    
                document.onmousemove = function (e) {
                    // 通过事件委托,计算移动的距离
                    const l = e.clientX - disX;
                    const t = e.clientY - disY;
    
                    // 移动当前元素
                    dragDom.style.left = `${l + styL}px`;
                    dragDom.style.top = `${t + styT}px`;
    
                    //将此时的位置传出去
                    //binding.value({x:e.pageX,y:e.pageY})
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        }
    })
    

    弹窗宽度拖大 拖小

    // v-dialogDragWidth: 弹窗宽度拖大 拖小
    Vue.directive('dialogDragWidth', {
        bind(el, binding) {
            const dragDom = binding.value.$el.querySelector('.el-dialog');
    
            el.onmousedown = (e) => {
    
                // 鼠标按下,计算当前元素距离可视区的距离
                const disX = e.clientX - el.offsetLeft;
    
                document.onmousemove = function (e) {
                    e.preventDefault(); // 移动时禁用默认事件
    
                    // 通过事件委托,计算移动的距离
                    const l = e.clientX - disX;
                    dragDom.style.width = `${l}px`;
                };
    
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }
        }
    })
    
    

    2.在main.js中引入directive.js
    3.在el-dialog标签的开始位置加入v-dialogDrag或 v-dialogDragWidth就可以实现相应的效果

    el-dialog居中显示效果

    // 推荐直接使用js实现
    this.$nextTick(_ => {
      this.$refs.dialog.style.marginTop
       = `calc((100vh${this.$refs.dialog.clientHeight}px) / 2)`
    })
    
    //配合dialog自带属性实现效果,不建议使用,固定定位元素受动画影响
    .el-dialog{
        transform: translateY(-50%);
        margin-top: 0!important;
        top: 50%;
    }
    
    //使用弹性布局,兼容性较差
    .el-dialog{
        display: flex;
        flex-direction: column;
        margin:0 !important;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        /*height:600px;*/
        max-height:calc(100% - 30px);
        max-width:calc(100% - 30px);
    }
    .el-dialog .el-dialog__body{
        flex:1;
        overflow: auto;
    }
    
    展开全文
  • el-dialog

    2020-07-14 15:12:25
    el-dialog 局中滚动 .el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50%, -50%); max-height: calc(100% - 30px); max-width: calc(100% - 30px); ...

    el-dialog  局中滚动

    .el-dialog {

    position: absolute;

    top: 50%;

    left: 50%;

    margin: 0 !important;

    transform: translate(-50%, -50%);

    max-height: calc(100% - 30px);

    max-width: calc(100% - 30px);

    display: flex;

    flex-direction: column;

    }

     

    .el-dialog__body {

    overflow: auto;

    }

    展开全文
  • el-dialog 自定义指令el-drag-dialog 的使用 可放大,还原,拖拽。 直接上代码 dialog.js export default { bind(el, binding, vnode, oldVnode) { if (!binding.value) { const dialogHeaderEl = el....

    el-dialog 自定义指令el-drag-dialog 的使用
    可放大,还原,拖拽。
    直接上代码

    dialog.js

    export default {
      bind(el, binding, vnode, oldVnode) {
        if (!binding.value) {
          const dialogHeaderEl = el.querySelector('.el-dialog__header')
          const dragDom = el.querySelector('.el-dialog')
          dialogHeaderEl.style.cssText += ';cursor:move;'
          dragDom.style.cssText += ';top:0px;'
         window.getComputedStyle(dom元素, null);
          const getStyle = (function() {
            if (window.document.currentStyle) {
              return (dom, attr) => dom.currentStyle[attr]
            } else {
              return (dom, attr) => getComputedStyle(dom, false)[attr]
            }
          })()
          dialogHeaderEl.onmousedown = (e) => {
            const disX = e.clientX - dialogHeaderEl.offsetLeft
            const disY = e.clientY - dialogHeaderEl.offsetTop
            const dragDomWidth = dragDom.offsetWidth
            const dragDomHeight = dragDom.offsetHeight
            const screenWidth = document.body.clientWidth
            const screenHeight = document.body.clientHeight
            const minDragDomLeft = dragDom.offsetLeft
            const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
            const minDragDomTop = dragDom.offsetTop
            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
            let styL = getStyle(dragDom, 'left')
            let styT = getStyle(dragDom, 'top')
            if (styL.includes('%')) {
              styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
              styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
            } else {
              styL = +styL.replace(/\px/g, '')
              styT = +styT.replace(/\px/g, '')
            }
            document.onmousemove = function(e) {
              let left = e.clientX - disX
              let top = e.clientY - disY
              if (-(left) > minDragDomLeft) {
                left = -minDragDomLeft
              } else if (left > maxDragDomLeft) {
                left = maxDragDomLeft
              }
              if (-(top) > minDragDomTop) {
                top = -minDragDomTop
              } else if (top > maxDragDomTop) {
                top = maxDragDomTop
              }
              dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
            }
            document.onmouseup = function(e) {
              document.onmousemove = null
              document.onmouseup = null
            }
          }
        } else {
          const minWidth = 400
          const minHeight = 300
          let isFullScreen = false
          let nowWidth = 0
          let nowHight = 0
          let nowMarginTop = 0
          const dialogHeaderEl = el.querySelector('.el-dialog__header')
          let hasSetBodyHight = false
          const dragDom = el.querySelector('.el-dialog')
          dialogHeaderEl.onselectstart = new Function('return false')
          dialogHeaderEl.style.cursor = 'move'
    window.getComputedStyle(dom元素, null);
          const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
          const maxMin = document.createElement('button')
          maxMin.className += ' el-dialog__headerbtn el-dialog__minmax'
          maxMin.style.right = '40px'
          maxMin.style.color = '#909399'
          maxMin.title = '最大化'
          maxMin.innerHTML = '<i class="el-icon-full-screen" onMouseOver="this.style.color=\'#409EFF\'" onMouseOut="this.style.color=\'inherit\'"></i>'
          dialogHeaderEl.insertBefore(maxMin, dialogHeaderEl.childNodes[1])
          const moveDown = (e) => {
            const disX = e.clientX - dialogHeaderEl.offsetLeft
            const disY = e.clientY - dialogHeaderEl.offsetTop
            let styL, styT
            if (sty.left.includes('%')) {
              styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
              styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
            } else {
              styL = +sty.left.replace(/\px/g, '')
              styT = +sty.top.replace(/\px/g, '')
            }
            document.onmousemove = function(e) {
              const l = e.clientX - disX
              const t = e.clientY - disY
              if((t + styT) < 0  &&  Math.abs(t + styT) > window.screen.availHeight * 0.15){
                dragDom.style.left = `${l + styL}px`
                dragDom.style.top = `${-(window.screen.availHeight * 0.15 -20)}px`
              }else {
                dragDom.style.left = `${l + styL}px`
                dragDom.style.top = `${t + styT}px`
              }
            }
            document.onmouseup = function(e) {
              document.onmousemove = null
              document.onmouseup = null
            }
          }
          dialogHeaderEl.onmousedown = moveDown
          let bodyHeight = 'auto'
          function setMaxMin() {
            if (isFullScreen == false) {
              const i = maxMin.querySelector('.el-icon-full-screen')
              i.classList.remove('el-icon-full-screen')
              i.classList.add('el-icon-crop')
              maxMin.title = '还原'
              bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px'
              nowHight = dragDom.clientHeight
              nowWidth = dragDom.clientWidth
              nowMarginTop = dragDom.style.marginTop
              dragDom.style.left = 0
              dragDom.style.top = 0
              dragDom.style.height = '100VH'
              dragDom.style.width = '100VW'
              dragDom.style.marginTop = 0
              isFullScreen = true
              dialogHeaderEl.style.cursor = 'initial'
              dialogHeaderEl.onmousedown = null
              if (!hasSetBodyHight) {
                dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + dialogHeaderEl.offsetHeight + 'px)'
                hasSetBodyHight = true
              }
              vnode.child.$emit('dragDialog', binding.value === 'eltabs' ? 'calc(100vh - 210px)' : (binding.value === 'eltabsB' ? 'calc(100vh - 240px)' : 'calc(100vh - 160px)'), isFullScreen)
            } else {
              const i = maxMin.querySelector('.el-icon-crop')
              i.classList.remove('el-icon-crop')
              i.classList.add('el-icon-full-screen')
              maxMin.innerHTML = '<i class="el-icon-full-screen"></i>'
              maxMin.title = '最大化'
              dragDom.style.height = 'auto'
              dragDom.style.width = nowWidth + 'px'
              dragDom.style.marginTop = nowMarginTop
              isFullScreen = false
              dialogHeaderEl.style.cursor = 'move'
              dialogHeaderEl.onmousedown = moveDown
              dragDom.querySelector('.el-dialog__body').style.height = binding.value === 'eltabs' ? 'calc(100vh - 230px)' : (binding.value === 'eltabsB' ? 'calc(100vh - 200px)' : 'calc(100vh - 190px)')
              hasSetBodyHight = false
              vnode.child.$emit('dragDialog', binding.value === 'eltabs' ? 'calc(100vh - 380px)' : (binding.value === 'eltabsB' ? 'calc(100vh - 380px)' : 'calc(100vh - 280px)'), isFullScreen)
            }
          }
          maxMin.onclick = setMaxMin
          dialogHeaderEl.ondblclick = setMaxMin
          const resizeEl = document.createElement('div')
          dragDom.appendChild(resizeEl)
          resizeEl.style.cursor = 'se-resize'
          resizeEl.style.position = 'absolute'
          resizeEl.style.height = '10px'
          resizeEl.style.width = '10px'
          resizeEl.style.right = '0px'
          resizeEl.style.bottom = '0px'
          resizeEl.onmousedown = (e) => {
            const clientX = e.clientX
            const disX = e.clientX - resizeEl.offsetLeft
            const disY = e.clientY - resizeEl.offsetTop
            document.onmousemove = function(e) {
              e.preventDefault() // 移动时禁用默认事件
              const x = e.clientX - disX + (e.clientX - clientX)// 这里 由于elementUI的dialog控制居中的,所以水平拉伸效果是双倍
              const y = e.clientY - disY
              dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
              dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
              if (!hasSetBodyHight) {
                dragDom.querySelector('.el-dialog__body').style.height = 'calc(100% - ' + dialogHeaderEl.offsetHeight + 'px)'
                hasSetBodyHight = true
              }
              vnode.child.$emit('dragDialog', binding.value === 'eltabs' ? dragDom.style.height.substring(0, dragDom.style.height.indexOf('px')) - 210 + 'px' : dragDom.style.height.substring(0, dragDom.style.height.indexOf('px')) - 180 + 'px')
            }
            document.onmouseup = function(e) {
              document.onmousemove = null
              document.onmouseup = null
            }
          }
        }
      }
    }
    

    里面有一些特定的属性进行判断,只是我项目中用到了,默认是没有的,可以去掉

    index.js

    import dialog from './dialog'
    
    const install = function(Vue) {
      Vue.directive('el-drag-dialog', dialog)
    }
    
    if (window.Vue) {
      window['el-drag-dialog'] = dialog
      Vue.use(install); // eslint-disable-line
    }
    
    dialog.install = install
    export default dialog
    
    

    在main.js中注册

    import elDragDialog from '@/components/el-drag-dialog' // base on element-ui
    Vue.directive('elDragDialog', elDragDialog)
    

    使用方式

    <el-dialog v-el-drag-dialog ></el-dialog>```
    
    
    展开全文
  • //有scoped为局部css --scoped只在本文件生效在这里设置el-dialog__header不生效 //因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效 <template> <el-container><el-main> &...

    //没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效

    //有scoped为局部css --scoped只在本文件生效在这里设置el-dialog__header不生效

    //因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效


    <template>
      <el-container><el-main>
      <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
      <el-dialog class="my-dialog-name"//自定义class
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>dialog内容</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
      </el-main></el-container>
    </template>
    <script>
      export default {

        data() {
          return {
            centerDialogVisible: false
          }

        }
      }
    </script>
    //没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效
    <style lang="scss">
      .my-dialog-name{ //因此通过el-dialog的class进行全局css中局部定义 只在当前文件生效
        .el-dialog__header{ //声明弹出框头dialog__header为蓝色   内容 和 尾巴标题这样修改,具体可以修改的东西点F12看它渲染出来的内容
          text-align: left;
          background-color: #1482f0;
          border-bottom: 1px solid #e8eaec;
          .el-dialog__body {
          }
          .el-dialog__footer {
            text-align: center;
          }
        }
      }
    </style>

    //有scoped局部css --scoped只在本文件生效在这里设置el-dialog__header不生效
     <style lang="scss" scoped></style>

    展开全文
  • vue el-dialog 每次都刷新重新加载,自定义调节el-dialog的宽: 1.el-dialog 每次都刷新重新加载 在 el-dialog中加一个if判断就可以了, v-if="dialogFormVisibleBindApi" 完整的: <el-dialog title="增加...
  • 解决el-dialog弹框多重嵌套的问题。实现最好用的el-dialog &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;随着vueJs的广泛使用,Element组件逐渐深入人心。但是在使用element组件的时候,难免会...
  • el-tabs中使用el-dialog

    2020-09-09 19:06:52
    在el-tabs中使用el-dialog会出现,阴影把内容给挡住,这是需要输入两个属性 :visible.sync=“editFormVisible” :close-on-click-modal=“false” 直接加在el-dialog
  • 今天遇到一个问题就是编辑弹框中可上传图片,但是发现图片放大层级不够 搜了很多资料最后发现只是加一句话的事 只需要在里面的el-dialog中加入append-to-body即可 完事~
  • ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他区域会导致该对话框关闭。
  • 在一个file1.vue文件中引入引入另一个file2.vue文件(...file2.vue文件中模板元素是一个el-dialog, 但是通过服务方式调用的el-loading无法加载在这个el-dialog上,而是加载到了file1.vue上。</p>
  • Element-ui的el-dialog的应用 1.安装element-ui npm i element-ui -S 2.全局引用 **在main.js引用** import ElementUi from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUi); 3...
  • el-dialog el-tabs结合样式改造

    千次阅读 2018-07-19 14:17:54
    el-dialog el-tabs结合 样式改造 效果: dialog.vue (封装好的组件) &lt;template&gt; &lt;div&gt; &lt;el-dialog :visible.sync="dialogVisibles" class="theme1" ...
  • <el-dialog title="编辑" :visible.sync="editDialogVisible" :modal-append-to-body='false' center> {{scope.$index+1}} <el-form :model="scope.row" label-suffix=":" label-width="100px"> <el-form-...
  • 一、当el-dialog作为子组件使用,点击右上角的关闭按钮会出现如下报错 ** 报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. ...
  • el-dialog title="" :visible.sync="dialogFormVisible"> <el-form-item label="是否上架:" prop="status"> <el-select v-model="ruleForm.status" placeholder="是否上架" po
  • 如果你对el-dialog做了这样的优化 .el-dialog { display: flex; flex-direction: column; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ...
  • el-dialog 使用

    2020-11-27 14:52:54
    显示 el-dialog :visible.sync=“true” 关闭 el-dialog :visible.sync=“false” 点击外部不关闭 el-dialog :close-on-click-modal=“false”
  • 这个问题是因为el-dialog和el-popover之间的层级关系,当我把el-dialog嵌套在el-popover中,dialog就挂在了el-popover上,如果想要实现当dialog窗口出现时,它是亮的,其他页面都变暗,就需要将el-dialog拉到body上 ...
  • 记一次element-ui,el-dialog里面嵌入el-form,使用resetFields方法初始化表单失效,问题记录: 前提:          当el-form在一个el-dialog中,dialog显示与否绑定变量 showDialog,ref 为...
  • 注意: style样式不能写在scoped中。...此时该样式会污染全局样式,最好加上类名,防止所有的el-submenu和el-dialog样式都被修改,submenuClassName为导航栏的类名,dialogCLassName 为dialog弹窗的类名。 如: <sty
  • el-dialog 内容居中

    千次阅读 2020-12-01 20:19:50
    原样:dialog 内容部分, 默认左对齐 目的:内容居中显示,比如表单 修改: .el-dialog .el-dialog__body{ display: flex; justify-content: center; align-items: center; }
  • 如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套。 如果在scoped下修改style。所有的自定义样式都无法覆盖element的样式啊,加上...
  • el-dialog 动态修改title值

    千次阅读 2020-03-16 09:30:13
    1. 定义一个el-dialog,设置“:title” --------------注意title前面需要加冒号-------------- <el-dialog :title="titleType+'关系'" :visible.sync="dialogVisible" width="600px" ></el-dialog> 2. ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,506
精华内容 1,002
关键字:

el-dialog