精华内容
下载资源
问答
  • vue 拉伸

    千次阅读 2019-07-03 16:07:15
    要求和效果: 元素定位到bottom为0,左右不可以拖动,只能向上向下拖动,向上可以拖动到窗口可视区域最高处,向下拖动的极限就是整个元素的高度为0,拖动的时候,位置不变,增减高度 需要下载js-cookie,也可以...

    要求和效果:

    元素定位到bottom为0,左右不可以拖动,只能向上向下拖动,向上可以拖动到窗口可视区域最高处,向下拖动的极限就是整个元素的高度为0,拖动的时候,位置不变,增减高度

    需要下载js-cookie,也可以直接使用localStorage不用下载js-cookie插件,然后代码就可以直接运行

    HTML:

    <template>
      <div class="form-all-style">
        <div style="height: 432px" id="zhankaiStyle" class="bottom-form" ref="kongtiao"
          @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)">
        </div>
      </div>
    </template>

    JS:

    <script>
    import Cookies from 'js-cookie'
    export default {
        data() {
          return {
            moveDataelse: {
              x: null,
              y: null,
              TopDong: null
            }
          }
        },
        computed: {
          // 检测定位top的变化
          TopDongChange() {
            return this.moveDataelse.TopDong
          }
        },
        mounted() {
          // 给元素一个起始的高度值,并存在cookie中
          Cookies.set('chazhiValue', 432)
        },
        watch: {
          // 定位top的变化值,就是元素高度的变化值,通过原始值和元素top定位的变化值最终得到的就是height高度值
          TopDongChange(newVal, oldVal) {
            console.log(newVal, oldVal)
            var reduce
            // 因为oldVal起始值为null,所以先排除掉
            if (!oldVal && typeof oldVal === 'object') {
              reduce = 0
            } else {
              reduce = oldVal - newVal
            }
            document.getElementById('zhankaiStyle').style.height = Number(Cookies.get('chazhiValue')) + reduce + 'px'
            Cookies.set('chazhiValue', Number(Cookies.get('chazhiValue')) + reduce)
          }
        },
        methods: {
          // 鼠标按下
          mouseDownHandleelse(event) {
            this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
            event.currentTarget.style.cursor = 'move'
            window.onmousemove = this.mouseMoveHandleelse
          },
         // 鼠标移动
          mouseMoveHandleelse(event) {
            this.moveDataelse.TopDong = event.pageY - this.moveDataelse.y
          },
         // 鼠标松开
          mouseUpHandleelse(event) {
            window.onmousemove = null
            event.currentTarget.style.cursor = 'move'
          }
        }
      }
    </script>

     CSS:

    .form-all-style {
        width: 100%;
        height: 100%;
      }
    
      .bottom-form {
        width: calc(100% - 120px);
        position: fixed;
        bottom: 0px;
        height: 432px;
        padding-top: 30px;
        background-color: saddlebrown;
      }

     

    展开全文
  • H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 自己改装成vue的例子 图片能发大缩放
  • vue实现dom元素拉伸

    千次阅读 2019-09-17 00:20:14
    封装了三个methods方法,传入对应节点即可实现对应元素节点的拉伸收缩。 二、代码 1. 函数封装 /*** * 让指定的dom元素支持沿x轴的拉伸收缩 * oBox为指定的dom节点 * e为鼠标按键默认传入的对象 */ moveX(oBox, e) ...

    一、实现效果

    封装了三个methods方法,传入对应节点即可实现对应元素节点的拉伸收缩。

    二、代码

    1. 函数封装

    /***
    * 让指定的dom元素支持沿x轴的拉伸收缩
    * oBox为指定的dom节点
    * e为鼠标按键默认传入的对象
    */
     moveX(oBox, e) {
          let x = e.clientX;
          let oBoxW = oBox.offsetWidth;
          document.onmousemove = e => (oBox.style.width = oBoxW + e.clientX - x + 'px')
          document.onmouseup = () => [document.onmousemove, document.onmouseup] = [null, null]
          e.preventDefault && e.preventDefault()
        },
    moveY(oBox, e) {
          if (e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('lineBlock'))
            || e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('blockItem'))) {
            return
          }
          let y = e.clientY;
          let oBoxH = oBox.offsetHeight;
          document.onmousemove = e => oBox.style.height = oBoxH + e.clientY - y + 'px'
          document.onmouseup = () => [document.onmousemove, document.onmouseup] = [null, null]
          e.preventDefault && e.preventDefault()
        },
    moveXY(oBox, e) {
          let x = e.clientX;
          let y = e.clientY;
          let oBoxH = oBox.offsetHeight;
          let oBoxW = oBox.offsetWidth;
          document.onmousemove = e => {
            let xx = e.clientX
            let yy = e.clientY
            oBox.style.width = oBoxW + xx - x + 'px'
            oBox.style.height = oBoxH + yy - y + 'px'
            return false;
          }
          document.onmouseup = () => [document.onmousemove, document.onmouseup] = [null, null]
          e.preventDefault && e.preventDefault()
        },
    

    2. 函数调用

    定义了一个包含所有要添加横向拉伸事件的数组,遍历这个数组将这些节点的onmousedown事件设定为moveX函数。

    let dragX = [];
    dragX.push(...document.getElementsByClassName('blockItem'), ...document.getElementsByClassName('lineBlock'));
    
    dragX.map(v => (v.onmousedown事件设定为 = this.moveX.bind({}, v)));
    

    3.dom节点

    设定一个blockItemlineBlock的div就尝试拖拽了。

    三、坑点介绍

    1. 将需要拖拽的元素传入而不是使用e.target获取

    一开始觉得一个参数就能搞定,但实际开发中发现e.target指向的不一定是这个元素本身,也有可能是它的某个子元素,这样就变成了对其子元素的拉伸实现。

    2.父级元素支持拉伸导致给子元素添加的拉伸功能失效

    在给父元素添加拉伸事件时判断是否当前鼠标按下对应元素是需要支持支持拉伸事件的子元素。(示例代码如下)

    if (e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('lineBlock'))
    || e.path.some(v => v.getAttribute && v.getAttribute('class') && v.getAttribute('class').includes('blockItem'))) {
    return
    }
    

    聪明的小伙伴应该发现了,以上代码虽然是在vue项目中实现的,但实际用到的语法主要还是原生js。也就是说,要想在原生js中实现呢元素拉伸功能根据以上思路也是非常方便。

    END

    展开全文
  • https://zhuanlan.zhihu.com/p/164429781

    https://zhuanlan.zhihu.com/p/164429781

    展开全文
  • import Vue from 'vue'; /* * 定义公共js里,在入口文件main.js中import; * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。... //弹框可拉伸最小宽高 let minWidth = 400;

    文章借鉴

    效果

    在这里插入图片描述

    创建js文件

    import Vue from 'vue';
    /*
     *  定义公共js里,在入口文件main.js中import;
     *  给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。
     */
    // v-dialogDrag: 弹窗拖拽+水平方向伸缩
    Vue.directive('dialogDrag', {
      bind(el, binding, vnode, oldVnode) {
        //弹框可拉伸最小宽高
        let minWidth = 400;
        let minHeight = 300;
        //初始非全屏
        let isFullScreen = false;
        //当前宽高
        let nowWidth = 0;
        let nowHight = 0;
        //当前顶部高度
        let nowMarginTop = 0;
        //获取弹框头部(这部分可双击全屏)
        const dialogHeaderEl = el.querySelector('.el-dialog__header');
        //弹窗
        const dragDom = el.querySelector('.el-dialog');
        //给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;
        dragDom.style.overflow = "auto";
        //清除选择头部文字效果
        dialogHeaderEl.onselectstart = new Function("return false");  
        //头部加上可拖动cursor
        dialogHeaderEl.style.cursor = 'move';
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    
        let moveDown = (e) => {
          // 鼠标按下,计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;
    
          // 获取到的值带px 正则匹配替换
          let styL, styT;
    
          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          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;
    
            // 移动当前元素  
            dragDom.style.left = `${l + styL}px`;
            dragDom.style.top = `${t + styT}px`;
    
            //将此时的位置传出去
            //binding.value({x:e.pageX,y:e.pageY})
          };
    
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
        dialogHeaderEl.onmousedown = moveDown;
        //双击头部效果
        dialogHeaderEl.ondblclick = (e) => {
          if (isFullScreen == false) {
            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;
          } else {
            dragDom.style.height = "auto";
            dragDom.style.width = nowWidth + 'px';
            dragDom.style.marginTop = nowMarginTop;
            isFullScreen = false;
            dialogHeaderEl.style.cursor = 'move';
            dialogHeaderEl.onmousedown = moveDown;
          }
        }
        
    
        //拉伸
        let resizeEl=document.createElement("div");
        dragDom.appendChild(resizeEl); 
        //在弹窗右下角加上一个10-10px的控制块
        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) => {
          // 记录初始x位置
          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';
          };
          //拉伸结束
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
      }
    })
    /**
     *  注意:如果是el-dialog弹出的表单el-form,最好不要把提交按钮当做el-form-item(elementUI文档是这么用的),放在el-dialog里。
     *  不然按钮会同el-dialog中标签一样被overflow;
    */
    

    引入项目中使用

    在el-dialog中添加: v-dialogDrag

    <el-dialog title="使用"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :show-close="false"
                   v-dialogDrag
                   :visible.sync="dialog" >
         
        </el-dialog>
    
    展开全文
  • 有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条,直接加title.,体验不太好,想增加一个手动拖动拉伸收收缩的功能 目录slidebar增加拖拽点增加动态style增加计算属性barWidth监听拖拽点 slidebar增加拖拽...
  • vue拉伸div边框加高div 类似于浏览器F12控制台那样的拉高效果 直接上代码了 复制过去即可使用 <template> <div> <div id="app"> <div class="box-bottom" ref="drag_box" :style="'height:'...
  • 最近公司项目需求左侧菜单栏需要自由拉伸,本人小白一个,大神看到不要喷 1.首先找到layout/componments/SideBar/index.vue文件 2.修改这个index.vue文件 2.1将sidebar套上一层div,并将底下的main-container加上...
  • 1.使用openLayers加载高德地图的时候,高德地图会被拉伸 2.解决方法是 (1)引入import { fromLonLat } from “ol/proj”; (2)将 projection: “EPSG:4326”,换成projection: “EPSG:3857” (3)然后 center: ...
  • SVG拉伸几何体介绍和使用1.SVG拉伸体使用步骤1.1svg的初始化1.2svg内容获取与转换成Shape类型1.3创建几何体,网格对象,添加到场景2.demo说明3.demo代码 1.SVG拉伸体使用步骤 通过SVG拉伸创建几何体实际上使用的还是...
  • <style lang="less"> .parameter { height: 569px; width: 960px; position: absolute; left: 50%; top: 50%; margin-left: calc(-960px / 2); margin-top: calc(-569px / 2);...
  • 原理是 利用vue 的自定义指令功能 自定义一个指令... //弹框可拉伸最小宽高 let minWidth = 400; let minHeight = 300; //初始非全屏 let isFullScreen = false; //当前宽高 let nowWidth = 0; let nowHight = 0
  • 使用拖动,调整大小或两者兼备 定义用于调整大小的句柄 限制大小和移动到父元素或自定义选择器 将元素捕捉到自定义网格 将拖动限制为垂直或水平轴 保持纵横比 启用触控功能 使用自己的样式 为句柄提供...

空空如也

空空如也

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

vue可拉伸

vue 订阅