Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #150 from lin-xin/dev
修复使用index作为v-for的key
- Loading branch information
Showing
6 changed files
with
150 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import Vue from 'vue'; | ||
|
|
||
| // v-dialogDrag: 弹窗拖拽属性 | ||
| Vue.directive('dialogDrag', { | ||
| bind(el, binding, vnode, oldVnode) { | ||
| const dialogHeaderEl = el.querySelector('.el-dialog__header'); | ||
| const dragDom = el.querySelector('.el-dialog'); | ||
|
|
||
| dialogHeaderEl.style.cssText += ';cursor:move;' | ||
| dragDom.style.cssText += ';top:0px;' | ||
|
|
||
| // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); | ||
| const sty = (() => { | ||
| 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 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 = sty(dragDom, 'left'); | ||
| let styT = sty(dragDom, 'top'); | ||
|
|
||
| // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px | ||
| 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; | ||
| }; | ||
| } | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <template> | ||
| <section class="main"> | ||
| <div class="crumbs"> | ||
| <el-breadcrumb separator="/"> | ||
| <el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item> | ||
| <el-breadcrumb-item>拖拽弹框</el-breadcrumb-item> | ||
| </el-breadcrumb> | ||
| </div> | ||
| <div class="container"> | ||
| <p>通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。</p> | ||
| <br> | ||
| <el-button type="primary" @click="visible = true;">点我弹框</el-button> | ||
| </div> | ||
| <el-dialog v-dialogDrag title="拖拽弹框" center :visible.sync="visible" width="30%"> | ||
| 我是一个可以拖拽的对话框！ | ||
| <span slot="footer" class="dialog-footer"> | ||
| <el-button @click="visible = false">取 消</el-button> | ||
| <el-button type="primary" @click="visible = false">确 定</el-button> | ||
| </span> | ||
| </el-dialog> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data(){ | ||
| return { | ||
| visible: false | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters