精华内容
下载资源
问答
  • vue实现放大镜效果

    2020-10-14 18:27:52
    主要为大家详细介绍了vue实现放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了一个手写的vue放大镜,组件使用less,文中给出了示例代码,需要的朋友可以参考下
  • vue 放大镜组件封装

    2021-10-09 21:45:13
    右侧 显示放大图片效果的盒子(宽 高 是400 * 400 但背景大小是 800 * 800 - 显示放大效果) 左侧 目标盒子(400*400) 目标盒子上有一个透明蒙层盒子(200*200) 放大镜效果 : 基于 鼠标移动事件 (根据鼠标...

    封装的效果

    结构

    右侧 显示放大图片效果的盒子(宽 高 是400 * 400 但背景大小是 800 * 800  - 显示放大效果)

    左侧 目标盒子(400*400)  目标盒子上有一个透明蒙层盒子(200*200)

     

    放大镜效果 : 基于 鼠标移动事件 (根据鼠标移动实现)

    1. 蒙层滑块会跟随 鼠标移动 - 控制的是 蒙层滑块 的 top  left 值
    2. 右侧大图也会跟随移动 - 移动的是背景的位置 background-position

    核心问题 : 获取到鼠标当前移动的坐标值

    解决: 借助@vueuse核心包中的useMouseInElement 方法 - 可以获取到当前鼠标的位置相对于某个元素 移动的坐标值(看官网用法)

    思路 :

    1. 获取鼠标相对坐标值 - 借助@vueuse核心包中的useMouseInElement 方法 - 可以获取到当前鼠标的位置相对于某个元素(目标盒子) 移动的坐标值(看官网用法)

     

     

    2. 滑块蒙层跟随移动 - 通过watch 监听鼠标移动的坐标值 作最大临界值的判断  

    (1)找到蒙层滑块最大移动的范围 (鼠标在橙色箭头区域内移动,蒙层滑块会跟着移动,超过这个范围,滑块就不会移动了)

    鼠标横向移动 往左超过最大范围 , 滑块的left  =  0

    鼠标横向移动 往右超过最大范围 , 滑块的 left = 容器宽 - 滑块宽

    纵向移动同理

     

    (2)有效移动单位的换算关系 (临界点时 滑块跟着鼠标走的时候,滑块的left值 top值和鼠标坐标值的关系)

    横向移动 滑块的 left = 鼠标距离容器左侧的距离 - 滑块自身宽度的一半

    纵向移动 同理

     

     

    3. 右侧 放大效果 大图背景移动

    (1)滑块的移动方向 和 大图的背景移动方向 是反向的

    (2)滑块的移动距离 和 大图的背景移动距离 是一个 1:2 的关系

    4. 控制蒙层的显示和隐藏

     通过v-if 判断鼠标进入还是离开 目标盒子中

     

     

     

     

     

    展开全文
  • vue放大缩小div

    千次阅读 2020-09-22 19:28:54
    <span @click="narrow()"> <svg class="fulls-iconfont" aria-hidden="true"> <use xlink:href="#bi-cancel-full-screen"></use> </svg>...svg class="fulls..
     <span @click="narrow()">
    		   <svg class="fulls-iconfont" aria-hidden="true">
    		     <use xlink:href="#bi-cancel-full-screen"></use>
    		   </svg>
    	   </span>
    	   <span @click="enlarge()">
    		   <svg class="fulls-iconfont" aria-hidden="true">
    		     <use xlink:href="#bi-full-screen"></use>
    		   </svg>
    	   </span>
    
    enlarge() {
    		var dom= document.getElementById('canvas')
    		if (dom.requestFullscreen) {
    			dom.requestFullscreen()
    		} else if (dom.mozRequestFullScreen) {
    			dom.mozRequestFullScreen()
    		} else if (dom.webkitRequestFullscreen) {
    			dom.webkitRequestFullscreen()
    		} else if (dom.msRequestFullscreen) {
    			dom.msRequestFullscreen()
    		}
    		this.flag= true
    	}
    
    	narrow() {
    		if (!this.flag) return
    		document.exitFullscreen()
    		this.flag= false
    	}

     

    展开全文
  • vue-zoom-on-hover 不能通过npm 安装,所以自己把代码拿出来组成组件,这样就可以用了!!!
  • vue放大缩小拖拽功能

    千次阅读 2020-09-24 21:54:41
    点击放大至全屏 再次点击缩小至原始 这个弹框是基于element dialog的基础上写的 1.再utils文件夹下面新建一个directives.js (封装好了 直接拿去用) import Vue from 'vue'; import bigPic from '../assets/...

    点击放大至全屏 再次点击缩小至原始  这个弹框是基于element dialog的基础上写的 

    1.再utils文件夹下面新建一个directives.js  (封装好了 直接拿去用)

    import Vue from 'vue';
    import bigPic from '../assets/images/bigChange.png';
    // 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');
    
        // 全屏按钮
    
        dialogHeaderEl.insertAdjacentHTML('beforeEnd', '<div class="bigbtn"><div class="changeBig"></div><div class="changeSmall"></div></div>');
    
        const bigBtn = el.querySelector('.bigbtn');
    
        const changeBig = el.querySelector('.changeBig');
    
        const changeSmall = el.querySelector('.changeSmall');
        //给弹窗加上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;
    
        //双击头部全屏效果
    
        bigBtn.onclick = (e) => {
          if (isFullScreen == false) {
    
            changeBig.style.display = 'none';
    
            changeSmall.style.display = 'block';
    
            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 {
    
            changeBig.style.display = 'block';
    
            changeSmall.style.display = 'none';
    
            dragDom.style.height = "auto";
    
            dragDom.style.width = nowWidth + 'px';
    
            dragDom.style.marginTop = nowMarginTop;
    
            isFullScreen = false;
    
            dialogHeaderEl.style.cursor = 'move';
    
            dialogHeaderEl.onmousedown = moveDown;
    
          }
    
        }
    
        dragDom.onmousemove = function (e) {
          // console.log(dialogHeaderEl,dragDom.querySelector('.el-dialog__body'), 123);
          let moveE = e;
    
          if (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) {
    
            dragDom.style.cursor = 'w-resize';
    
          } else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) {
    
            dragDom.style.cursor = 's-resize';
    
          } else {
    
            dragDom.style.cursor = 'default';
    
            dragDom.onmousedown = null;
    
          }
    
          dragDom.onmousedown = (e) => {
    
            const clientX = e.clientX;
    
            const clientY = e.clientY;
    
            let elW = dragDom.clientWidth;
    
            let elH = dragDom.clientHeight;
    
            let EloffsetLeft = dragDom.offsetLeft;
    
            let EloffsetTop = dragDom.offsetTop;
    
            dragDom.style.userSelect = 'none';
    
            let ELscrollTop = el.scrollTop;
    
            //判断点击的位置是不是为头部
    
            if (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {
    
              //如果是头部在此就不做任何动作,以上有绑定dialogHeaderEl.onmousedown = moveDown;
    
            } else {
    
              document.onmousemove = function (e) {
    
                e.preventDefault(); // 移动时禁用默认事件
    
                //左侧鼠标拖拽位置
    
                if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
    
                  //往左拖拽
    
                  if (clientX > e.clientX) {
    
                    dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
    
                  }
    
                  //往右拖拽
    
                  if (clientX < e.clientX) {
    
                    if (dragDom.clientWidth < minWidth) {
    
                    } else {
    
                      dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
    
                    }
    
                  }
    
                }
    
                //右侧鼠标拖拽位置
    
                if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
    
                  //往左拖拽
    
                  if (clientX > e.clientX) {
    
                    if (dragDom.clientWidth < minWidth) {
    
                    } else {
    
                      dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
    
                    }
    
                  }
    
                  //往右拖拽
    
                  if (clientX < e.clientX) {
    
                    dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
    
                  }
    
                }
    
                //底部鼠标拖拽位置
    
                if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) {
    
                  //往上拖拽
    
                  if (clientY > e.clientY) {
    
                    if (dragDom.clientHeight < minHeight) {
    
                    } else {
    
                      dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
    
                    }
    
                  }
    
                  //往下拖拽
    
                  if (clientY < e.clientY) {
    
                    dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
    
                  }
    
                }
    
              };
    
              //拉伸结束
    
              document.onmouseup = function (e) {
    
                document.onmousemove = null;
    
                document.onmouseup = null;
    
              };
    
            }
    
          }
    
        }
      }
    })

    2.再main.js引入

    import './utils/directives.js';
    

    3.页面直接以自定义属性名进行使用  (  v-dialogDrag  )

    <el-dialog
         v-dialogDrag
          title="用户信息"
          :visible.sync="dialogVisible"
          width="50%"
          :close-on-click-modal="false"
          :before-close="handleClose">
          <div>
            <el-table :data="phoneData" style="width: 100%">
              <el-table-column prop="fullName" label="姓名" width="100"></el-table-column>
              <el-table-column prop="sex" label="性别" width="80"></el-table-column>
              <el-table-column prop="idCard" label="身份证号" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column prop="mobile" label="联系电话" width="150"></el-table-column>
              <el-table-column prop="censusAreaName" label="户籍区划" min-width="120" show-overflow-tooltip></el-table-column>
              <el-table-column prop="censusAddr" label="户籍地址" min-width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="120" fixed="right" align="center">
                <template slot-scope="{row}">
                  <span @click="chooseInfor(row.id)" class="table-btn">选择</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-dialog>

    4.CSS也一并奉上 (注意查看directives.js里面的标签元素)

    .changeBig {
        width: 20px;
        height: 20px;
        background: url("../assets/images/bigChange.png") no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;
        position: absolute;
        top: 14px;
        right: 60px;
    }
    .changeSmall {
        width: 20px;
        height: 20px;
        background: url("../assets/images/smallChange.png") no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;
        position: absolute;
        top: 14px;
        right: 60px;
        display: none;
    }

     

    展开全文
  • 原料 :vue+element-ui+svg目的:让svg 图形在点击按钮后放大和缩小htmlstyle="fill:#7daf7d;stroke:#b5acac;stroke-width:2"/>1script//stations: 需要绘制的站台export default {name: 'svgMap',data() {...

    原料 :vue+element-ui+svg

    目的:让svg 图形在点击按钮后放大和缩小

    html

    style="fill:#7daf7d;stroke:#b5acac;stroke-width:2"/>

    1

    script

    //stations: 需要绘制的站台

    export default {

    name: 'svgMap',

    data() {

    return {

    stations:[ {num:1,x:50,y:20,w:20,h:40},{x:75,y:20,w:20,h:40},{x:100,y:20,w:20,h:40},

    {x:125,y:20,w:20,h:40},{x:150,y:20,w:20,h:40},{x:175,y:20,w:20,h:40},

    {x:200,y:20,w:20,h:40},{x:225,y:20,w:20,h:40}]

    }

    },

    methods: {

    zoomin(){//放大

    this.stations = this.draw(this.stations,1.1);

    },

    zoomout(){//缩小

    this.stations = this.draw(this.stations,0.9);//同时更新站台信息,才会更新页面

    },

    draw(pointArray,factor){//根据变化倍数更新svg的坐标

    var newPointArray = [];

    for(var i=0;i

    var point = {};

    point.x = pointArray[i].x*factor;

    point.y = pointArray[i].y*factor;

    point.w = pointArray[i].w*factor;

    point.h = pointArray[i].h*factor;

    newPointArray.push(point);

    }

    return newPointArray;

    }

    }

    }

    注意

    直接更新vue的数据列表,页面的数据是不会更新的。需要一起同时更新,才会更新页面数据

    以下是不会更新页面的写法

    for(var i=0;i

    this.stations[i].x = this.station[i].x*factor

    this.stations[i].y = this.station[i].y*factor

    this.stations[i].w = this.station[i].w*factor

    this.stations[i].h = this.station[i].h*factor

    }

    展开全文
  • 本篇文章主要介绍了vue.js+Echarts开发图表放大缩小功能实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue放大镜组件

    2021-06-21 19:06:31
    Detail组件代码示例如下: <div class="detail-box"> <el-button icon="el-icon-arrow-left" @click="$router.back()" >...-- 放大镜组件 --> <!-- <div class="left">
  • 放大: remote.getCurrentWindow().maximize(); 判断是否处于最大化: remote.getCurrentWindow().isMaximized() 恢复: remote.getCurrentWindow().restore(); 关闭: remote.getC
  • 0-saturn_solar.jpg_468x468q75.jpg_.webp" :style="demoImg"> </div> </div> </div> </div> var app = new Vue({ el: '#app', data: { flag: false, image: { 'position': 'relative', 'top': '0', 'left': '0', },...
  • vue放大

    2018-11-23 11:22:39
    最近有一个需求是要像淘宝商品详情页那样,分享一下。小白第一次分享,各位大神...npm install vue-piczoom --save # 使用 use import PicZoom from 'vue-piczoom' export default { components: { PicZoom } ...
  • 基于vue2.x的电商图片放大镜插件
  • 主要为大家详细介绍了vue实现点击图片放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了。 所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本,最近...vue-draggable-resizable :is-conflict-c
  • vue3封装放大镜组件

    2021-09-19 19:37:59
    落地代码: + // 实现右侧大图布局效果(背景图放大4倍) + + // 准备待移动的遮罩容器 + 安装vueuse npm i @vueuse/core@5.3.0 目前5.3.0版本相对稳定 vueuse提供的监听进入指定范围方法的基本使用 import { ...
  • Vue实现放大

    2020-03-06 20:49:56
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...放大镜</title> <link rel="stylesheet" href="magnifier.css"> <script src="http...
  • 按照官网操作, 执行完vue-piczoom,还需要postcss-import和postcss-url npm install vue-piczoom --save npm install -D postcss-import npm install postcss-url
  • Vue.use(Viewer)//引入 Viewer.setDefaults({ title(img){ // console.log('img',img) return (img.alt) }, toolbar:false, url: "data-source", }) 第四步页面使用 <viewer :images="cltp"> (item,index) in this...
  • 1、vue_屏幕放大功能

    2021-09-24 22:06:11
    -save-dev则添加到package.json文件devDependencies下 2、引入组件 import screenfull from "screenfull" 3、监听事件 mounted() { //report是需要放大的元素的id const element = document.getElementById("report...
  • vue实现放大

    千次阅读 2019-07-02 11:03:02
    <script src="vue.js"> :style="styleObj" :class="mask_hide"> ($event)" @mouseover="display(true)" @mouseout="display(false)"> var app = new Vue({ el: "#app", data: { mask_hide:{ ...
  • 主要为大家详细介绍了vue.js实现双击放大预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • <template> <div class="custom-monitoring page"> <div :class="[ 'custom-box', 'shadow', item.index === index && item.largen && 'all-page', ... currLa.
  • 1.安装。 npm install v-viewer --save 2.main.js引入。...Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 't
  • 在使用Vue进行项目开发时,需要把产品的照片进行放大展示。方法图片随鼠标在一定范围内,移动而放大。 二、需求分析: 例如:Handler 发送消息有两种方式,分别是 Handler.obtainMessage()和 Handler....
  • Vue放大镜 VuePhotoZoomPro

    千次阅读 2019-08-30 16:37:34
    npm install vue-photo-zoom-pro 2.引入 main.js import VuePhotoZoomPro from 'vue-photo-zoom-pro' Vue.use(VuePhotoZoomPro) 3.使用*.vue <vue-photo-zoom-pro url=""></vue-photo-zoom-pro&...
  • Vue3.0手写放大镜插件

    2021-09-23 15:33:09
    需要准备vueuse插件 npm i @vueuse/core # yarn add @vueuse/core 我们开始上代码吧 <template> <div class="goods-image"> <div class="large" :style="[ { backgroundImage: `url(${images...
  • vue中图片放大镜功能

    2021-03-11 15:10:33
    vue中图片放大镜功能
  • Vue图片放大镜插件

    千次阅读 2020-07-10 23:37:27
    Vue(2.x) 图片放大器(Photoloupe) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wdg2GA8A-1594395415139)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,568
精华内容 4,227
关键字:

vue放大

vue 订阅