Vue系列插件

标签： Vue 分类： Javascript 创建时间：2020-09-08 10:32:07 更新时间：2024-11-15 10:49:44

1.lib-flexible

这是一个适配的插件，还有一个就是postcss-pxtorem，可以将px转化为rem。但是别人在使用的时候，出现了一个54问题，就是在不同的电脑上，出现的效果不一样。

这里我就不写解决方案了，就是参考文章2中出现的问题，可以使用其中的解决方法。

1
2
3
4
5
6
7
8
9
function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }
参考文章：
1.lib-flexible适配大屏方案（附移动端适配） (这是插件及其使用问题)
2.vue实现PC端分辨率适配 (这里有个540相关问题)
3.vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法；

2.image-webpack-loader

在我的电脑上安装image-webpack-loader插件进行图片压缩，是没有问题的，但是在别人的电脑上安装，总是安装不成功:cnpm install image-webpack-loader -D ,报错:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Command failed: E:\dxq\website\node_modules\_pngquant-bin@6.0.0@pngquant-bin\vendor\pngquant.exe --version
  ‼ pngquant pre-build test failed
  i compiling from source
  × Error: pngquant failed to build, make sure that libpng-dev is installed
    at E:\dxq\website\node_modules\_execa@0.7.0@execa\index.js:231:11
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
[npminstall:runscript:error] image-webpack-loader@7.0.0 › imagemin-pngquant@9.0.1 › pngquant-bin@^6.0.0 scripts.postinstall run "node lib/install.js" error: Error [RunScriptError]: Run "C:\Windows\system32\cmd.exe /d /s /c node lib/install.js" error, exit code 1
    at ChildProcess.<anonymous> (D:\soft\node\node_global\node_modules\cnpm\node_modules\runscript\index.js:96:21)
    at ChildProcess.emit (events.js:314:20)
    at maybeClose (internal/child_process.js:1051:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5) {
  stdio: [Object],
  exitcode: 1
}
× Install fail! RunScriptError: post install error, please remove node_modules before retry!

有篇文章说，是因为要翻墙，因为我的电脑的确翻过了，但是另一台安装不上的电脑，却没有翻墙。还有就是说，image-webpack-loader中的pngquant不支持windows，但是我自己的电脑上的开发环境就是windows，另外一台安装不上的也是windows。奇怪的是，我在linux服务器上运行，也是可以正常安装和压缩部署的。

[尝试]
在windows上可以尝试安装 windows-build-tools ，不起作用

1
cnpm install --global windows-build-tools
参考文章：
1.webpack图片压缩image-webpack-loader无法安装或安装卡死的解决办法 (先卸载，在安装，我已经试过很多回了，就是不行)
2.npm install is broken by pngquant-bin dependency (这里是针对无法安装libpng-dev进行的修复，我没有尝试，但是据不可靠消息，安装了npm install –global windows-build-tools之后，那台不行的电脑，真的就安装成功了。)

3.窗口可拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue';
const drag = Vue.directive('drag', {
    bind: function (el) { },
    inserted: function (el) {
        el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft;
            var disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                el.style.left = e.pageX - disx + 'px';
                el.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
    //当VNode更新的时候会执行updated，可以触发多次
    updated: function (el) { }
})
export default drag;
参考文章：
1.Vue-实现div弹窗可自由拖拽(亲测有效)

4.vue-seamless-scroll

vue-seamless-scroll 是一个滚动列表组件,使用也非常的简单，就是绑定数据列表，就可以了，下面的是使用 pug 语法搞的。

1
2
3
4
5
6
vue-seamless-scroll(:data="pinlist"  :class-option="classOption" ref="scrollCom")
        .scroll-wrap
            .list-item(v-for="item in pinlist" :key="item.id" @click="itemClickHandle(item)" :class="activatedPanel==item.id ? 'activated' : ''")
                .item-text {{item.wtlx}} 
                .item-text {{item.district}}
                .item-text.item-time {{item.time}}

（1）设置 autoPlay
这里有一个要说明的地方，就是要想自动控制滚动和停止滚动，需要配置 autoPlay:false，因为要是不配置的话，那就会导致鼠标滑过之后，就会继续的滚动了。

1
2
3
4
5
6
7
8
9
data() {
    return {
        pinlist: [], // 问题列表
        classOption: {
            step: 0.5,
            autoPlay: false
        }, // 列表滚动配置
    }
},

（2）执行滚动方法
然后在组件加载的时候，自动通过 _startMove() 进行列表滚动。

1
2
3
4
5
6
mounted(){
    // 执行滚动
    this.$nextTick(() => {
        this.$refs.scrollCom._startMove()
    })
}

（3）列表点击时停止滚动，这样就可以实现点击停止滚动，关闭点击然后继续滚动了。

1
2
3
4
// 列表点击
itemClickHandle(item) {
    this.$refs.scrollCom._stopMove()
},
参考文章:
【1】.有没有停止滚动事件？ 和再次开始滚动事件 这是作者回复的相关内容
【2】.vue-seamless-scroll数据量少时，暂停滚动，继续滚动 数据量少的时候如何自动滚动
【3】.vue-seamless-scroll 动态开启和关闭滚动 绑定一个ref, 通过this.$refs.scroll3._cancle()方法停止滚动, 通过 this.$refs.scroll3._startMove()方法再次启动
【4】.安装 文档
【5】.chenxuan0000 / vue-seamless-scroll 源码
【6】.DavidJ-0 / vue-j-scroll.js 另外一个滚动插件
【7】.革命性创新，动画杀手锏 @scroll-timeline

问题

(1) 滚动重置
如果动态请求的数据，该如何处理呢？我尝试了使用 reset() 方法，结果没有效果，还是一样的。而且我配置了 limitMoveNum ，列表重复的数量，结果也不起作用，就是只能滚动一而已。

【解决方案】
就是通过 yPos 属性，重新定位滚动的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$refs.scrollCom._stopMove()
let data = res.data
this.pinlist = []
this.clearMap()
this.pinlist.push(...data)
// 重启滚动
this.$nextTick(() => {
    this.$refs.scrollCom.reset()
    this.$refs.scrollCom.yPos = 0
    if (this.pinlist.length >= 6) {
        this.$refs.scrollCom._startMove()
    } else {
        this.$refs.scrollCom._stopMove()
    }
})
参考文章:
【1】.vue项目中使用vue-seamless-scroll遇到的坑
【2】.关于使用vue-seamless-scroll，滚动到第二遍的时候不能进行点击的问题记录 这个好像没有用
【3】.使用vue-seamless-scroll实现滚动，出现空白间隔的问题 1.检查一下css样式，可能是布局出了问题，2.清空下浏览器缓存试试;3.在vue-seamless-scroll中再复制一次滚动列表。

（2）无限滚动
在我的使用过程中，出现了一个问题，就是比如我数据量是 30 条，那么等这个30条滚动完成之后，就没有了，没有实现无限滚动。

经过尝试，要想实现无限滚动，这个 autoPlay 必须设置为 true，但是如果设置为了 true，就无法实现点击列表之后，暂停滚动。无论是调用 _cancle() 方法，还是调用 _stopMove() 方法，都没效果。

【解决方案】
经过尝试，还有思考，最后可以通过属性设置重置 autoPlay属性

1
2
3
4
5
// 列表点击时将 autoPlay 设置为 false ,在合适的时候的时候再打开
itemClickHandle(item) {
    this.classOption.autoPlay = false
    this.$refs.scrollCom._stopMove()
},
参考文章:
【1】.vue中如何运用vue-seamless-scroll超简单实现自动无限循环滚动和停顿滚动效果
【2】.【vue vue-seamless-scroll】解决vue-seamless-scroll鼠标悬浮才滚动或者只滚动一次就失效的问题 最后发现是因为数据需要在页面挂载好就赋值，否则页面在加载完成后，数据无法自动滚动。但因为数据是网络传输获取的，所以采用获取到数据后，重新渲染这一块页面的解决方式解决。
【3】.复杂结构数组属性更新问题
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.lib-flexible
  2. 2. 2.image-webpack-loader
  3. 3. 3.窗口可拖动
  4. 4. 4.vue-seamless-scroll
  5. 5. 问题
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文