前端插件使用汇总

文章目录

- - - - pc端复制链接
      - 移动端复制链接
      - [vuedraggable 拖拽插件使用](#vuedraggable 拖拽插件使用)
      - [html2canvas 使用页面导出为图片](#html2canvas 使用页面导出为图片)
      - vsconsole移动端调试
      - [js-md5 加密使用](#js-md5 加密使用)
      - js-cookie的使用
      - [nprogress 页面加载虚假进度条使用](#nprogress 页面加载虚假进度条使用)
      - [sreenfull 插件，全屏插件使用](#sreenfull 插件，全屏插件使用)
      - [vuex-persistedstate 持久化插件使用](#vuex-persistedstate 持久化插件使用)
      - [基于 vue-seamless-scroll 无缝滚动](#基于 vue-seamless-scroll 无缝滚动)
      - ["qrcodejs2": "^0.0.2", 二维码插件](#"qrcodejs2": "^0.0.2", 二维码插件)

pc端复制链接

javascript 复制代码

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) // 同上
		}
	)
}

移动端复制链接

javascript 复制代码

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 拖拽插件使用

javascript 复制代码

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 使用页面导出为图片

javascript 复制代码

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移动端调试

javascript 复制代码

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

js-md5 加密使用

javascript 复制代码

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

js-cookie的使用

javascript 复制代码

    // 主要方便操作 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 页面加载虚假进度条使用

javascript 复制代码

    安装 NPM 
    npm install --save nprogess

    页面引入
    import NProgress from 'nprogress';

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

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

sreenfull 插件，全屏插件使用

javascript 复制代码

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

vuex-persistedstate 持久化插件使用

为什么使用 vuex-persistedstate ？？？

javascript 复制代码

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

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

javascript 复制代码

// 在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

安装 vue-seamless-scroll

javascript 复制代码

    npm install vue-seamless-scroll --save

引入组件

javascript 复制代码

\<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';

使用列子

<template>

  <div :class="$style.login">

    <div :class="$style.loginLogo"></div>

    <div :class="$style.loginBox">

      <div :class="$style.loginTitle">企业端登录</div>

      <div :class="$style.qrcodeBox">

        <div

          :id="id"

          :ref="id"

          :class="[

            $style.codeImg,

            isExpired || isNotConfirmStatus ? $style.opacity : ''

          ]"

        ></div>

      </div>

      <div :class="$style.title">

        请使用企业码扫码

        <i

          v-show="isExpired"

          @click="getCode"

          class="el-icon-refresh"

          :class="$style.refreshIcon"

        ></i>

      </div>

    </div>

  </div>

</template>



<script>

import QRCode from 'qrcodejs2';

import { ROOT_PAGE_NAME } from '@config/index.js';

import { mapActions } from 'vuex';



export default {

  name: 'Login',

  components: {},

  data() {

    return {

      id: 'qrcode' + parseInt(Math.random() * 100000000),

      isExpired: false,

      isNotConfirmStatus: false,

      ticket: ''

    };

  },

  watch: {},

  created() {},

  mounted() {

    this.$nextTick(() => {

      this.getCode();

    });

  },

  methods: {

    ...mapActions(['platform/setApiHeaderParams', 'setUserData']),

    // 获取二维码链接

    getCode() {

      this.$api['login/getScanUrl']()

        .then(res => {

          this.isExpired = false;



          if (res.code === this.$constant.apiServeCode.SUCCESS_CODE) {

            this.$refs[this.id].innerHTML = '';

            const data = res.data;

            const qrcodeUrl = data.qrcode;

            this.ticket = data.ticket;

            this.$nextTick(function() {

              this.qrcode(qrcodeUrl);

              this.getLoginStatus();

            });

          } else {

            this.$message.error(res.msg || '获取二维码失败');

          }

        })

        .catch(() => {});

    },

    // 轮询扫码状态

    getLoginStatus() {

      const ticket = this.ticket;



      this.$api['login/checkLoginStatus']({

        params: {

          ticket

        }

      })

        .then(res => {

          if (res.code === this.$constant.apiServeCode.SUCCESS_CODE) {

            // status  01表示过期 00表示扫码成功登录 02 未监测到扫码操作 04表示未授权 05 监测到扫码未确认状态

            if (res.data.status !== '00') {

              if (res.data.status === '01') {

                this.isExpired = true;

                this.isNotConfirmStatus = false;

              } else {

                if (res.data.status === '05') {

                  // 05 监测到扫码未确认状态

                  this.isNotConfirmStatus = true;

                } else if (res.data.status === '04') {

                  this.$message.error('未授权，无法登录！');

                } else {

                  this.isNotConfirmStatus = false;

                }

                const timer = setTimeout(() => {

                  this.getLoginStatus();

                }, 1000);

                this.$once('hook:beforeDestroy', () => {

                  timer && clearTimeout(timer);

                });

              }

            } else {

              this.setUserData({

                data: res.data.User

              });

              this.$store.commit('platform/UPDATE_DATA', res.data);

              this['platform/setApiHeaderParams']({

                token: _get(res, 'data.Token.token')

              });



              this.$router.push({ name: ROOT_PAGE_NAME });

            }

          } else {

            this.$message.error(res.mesg || '获取登录状态失败');

          }

        })

        .catch(() => {});

    },

    // 生成二维码

    qrcode(url) {

      const colorLight = '#FFFFFF';

      const colorDark = '#000000';

      const qrcode = new QRCode(this.id, {

        width: 216,

        height: 216,

        text: url, // 二维码地址

        colorDark: colorDark,

        colorLight: colorLight,

        correctLevel: 0

      });

      console.log(qrcode);

    }

  },

  destroyed() {}

};

</script>



<style lang="less" module>

.login {

  position: relative;

  width: 100%;

  height: 100%;

  background-image: url('~@assets/images/login-bg.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  &-logo {

    position: absolute;

    top: 40px;

    left: 40px;

    width: 223px;

    height: 24px;

    background: url('~@/assets/images/login-logo.png') no-repeat;

    background-size: auto 24px;

  }

  &-title {

    margin-top: 48px;

    margin-bottom: 32px;

    font-size: 20px;

    font-weight: 700;

    color: rgba(0, 0, 0, 0.85);

  }

  &-box {

    position: absolute;

    top: calc(43.76% - 198.7px);

    right: calc(14.4% - 57.6px);

    align-items: center;

    width: 400px;

    height: 454px;

    background: white;

    border-radius: 2px;

    box-shadow: 0 10px 30px 0 rgba(0, 41, 106, 1);

    .flex-column;

    .title {

      font-size: 14px;

      line-height: 24px;

      color: rgba(0, 0, 0, 0.65);

      .refreshIcon {

        margin-left: 19px;

        color: rgba(0, 119, 255, 1);

        .pointer;

        .f-14;

      }

    }

  }

  .qrcode-box {

    position: relative;

    width: 216px;

    height: 216px;

    margin-bottom: 24px;

    .codeImg {

    }

    .opacity {

      opacity: 0.6;

    }

  }

}

</style>