前端插件使用汇总

pc端复制链接

1. 下载插件 vue-clipboard2

npm install --save vue-clipboard2

2. main.js

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3.在vue文件中使用

<button @click="copy">复制链接</button>
copy () {
	let url = location.href;
	this.$copyText(url).then(
		res => {
			console.log(res.text) // 这里可以换成提示信息，比如：已成功复制到剪切板
		},
		err => {
			console.log(err) // 同上
		}
	)
}

移动端复制链接

1.安装
 npm install clipboard
2.引入 
import Clipboard from 'clipboard'
3. 使用
html：
<span
  @click="copyText($event, item.content)"
  class="copy"
>复制</span>


js：
copyText(e, text) {
      const clipboard = new Clipboard(e.target, { text: () => text })
      clipboard.on('success', e => {
        Toast('复制成功')
      })
      clipboard.onClick(e)
    }

vuedraggable 拖拽插件使用

1.安装
    npm install vuedraggable
2.引入（当做组件引入页面）
import vueDraggable from 'vuedraggable'
components:{ vueDraggable }

 <vue-draggable
          v-model="eightLabelList"
          animation="1000"
          @start="onStart"
          @end="onEnd"
        >
          <div
            v-for="(item, index) in eightLabelList"
            :key="index"
            class="labelList"
          >
            <div class="labelItem">
              <div>{{ item.labelName }}</div>
              <div class="delete" @click="removeLabel(item, index)">×</div>
            </div>
          </div>
        </vue-draggable>
        
methods:{
    // 开始拖拽事件
    onStart(data) {},
    // 拖拽结束事件
    onEnd(data) {
      this.updateLabelData()
    },
}

html2canvas 使用页面导出为图片

1.安装
    npm install html2canvas -S
2.引入
    在需要使用的页面引入，当前插件 import html2canvas from 'html2canvas'
3.使用
    dataURLToBlob(dataUrl) {
      var arr = dataUrl.split(',');
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    /**
     *  导出指定区域页面图片
     *  DOM 截取的区域id
     *  name 导出的文件名
     *  type 导出图片格式类型
     *  bgColor 背景颜色
     *   */
    exportInJPG(DOM, name, bgColor = 'rgba(10,42,51,.75)', type = 'image/jpg') {
      const canvasID = document.getElementById(DOM);
      const a = document.createElement('a');
      html2canvas(canvasID, { backgroundColor: bgColor })
        .then(canvas => {
          const dom = document.body.appendChild(canvas);
          dom.style.display = 'none';
          a.style.display = 'none';
          document.body.removeChild(dom);
          const blob = this.dataURLToBlob(dom.toDataURL(type));
          a.setAttribute('href', URL.createObjectURL(blob));
          a.setAttribute('download', name + '.jpg');
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(blob);
          document.body.removeChild(a);
        })
        .catch(res => {});
    },
4. html代码
<el-button
                  type="primary"
                  size="small"
                  @click="
                    exportInJPG('productionChart', '季度企业生产经营状况')
                  "
                  >导出</el-button
                >

vsconsole移动端调试

    安装
    npm i vconsole -save
    在main.js中引入
    import VConsole from 'vconsole';
    const VConsole = new VConsole();
    Vue.use(VConsole);

js-md5 加密使用

    安装：npm i js-md5 -save
    引入 import md5 from js-md5
    使用 md5(password)

js-cookie的使用

    // 主要方便操作 cookie 的存储
    安装：npm install --save js-cookie

    安装完成后，在用到的文件中调用
    import Cookies form 'js-cookie'

    使用
    存储（set）
    // 创建对当前页面路径有效的3天过期cookie
    Cookies.set('user', '咸蛋君', { expires: 3, path: '' });

    获取（get）
    Cookies.get('user')

    删除（remove）
    Cookies.remove('user')

nprogress 页面加载虚假进度条使用

    安装 NPM 
    npm install --save nprogess

    页面引入
    import NProgress from 'nprogress';

    直接调用 start() 或者 done() 来控制进度条
    NProgress.start();
    NProgress.done(); 

    通过使用 done() 让进度条关闭
    NProgress.done(true);

sreenfull 插件，全屏插件使用

    npm install --save screenfull
    使用页面引入 import screenfull from 'screenful'
    调用 screenfull.togger() 方法

vuex-persistedstate 持久化插件使用

• 为什么使用 vuex-persistedstate ？？？

vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，
但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，
我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验

• 安装 npm i -S vuex-persistedstate
• 配置使用

// 在store.js中引入
import persistedState from 'vuex-persistedstate'

export const sStorageKey = 'xxxVuex' // 建议设置为项目名称，比如：jxglVuex
const paths = \['platform', 'userData'];
const createPersistedState = persistedState({
key: sStorageKey,  // 用于存储持久状态的密钥，默认为 vuex。
// storage: window\.sessionStorage, // 可以修改缓存的存储形式，默认 window\.localStorage
paths // 选择存储对象，如果使用模块请包括模块名称
})

// 在初始化 Store 时 引入插件
const store = new Vuex.Store({
plugins: \[createPersistedState]
})
export default store

基于 vue-seamless-scroll 无缝滚动

在线演示: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
教程和简介: https://madewith.cn/74

1. 安装 vue-seamless-scroll

    npm install vue-seamless-scroll --save

2. 引入组件

\<vue-seamless-scroll \:class-option="scrollOption">\</vue-seamless-scroll>

    import vueSeamlessScroll from 'vue-seamless-scroll';

    data:(){
    return {
    // 无缝滚动参数
    scrollOption: {
    type: Object,
    default() {
    return {
    step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 1, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    };
    }
    },
    }
    }
    components: {
    vueSeamlessScroll
    },

“qrcodejs2”: “^0.0.2”, 二维码插件

npm install --save qrcodejs2
页面引入  import QRCode from 'qrcodejs2';

使用列子