vue插件汇总

一、省市区三级联动表单

1.vantUi

组件名称：
vant-area
引入方式：
引入vantUi即可，通常与弹出层(van-popup)配合使用

2.（纯插件）

省市区三级联动插件：
v-distpicker
引入方式：
cnpm install v-distpicker --save
github地址：
https://github.com/jcc/v-distpicker

3. elementUi级联选择器配合数据

名称：
Element UI 中国省市区级联数据
引入方式：
cnpm install element-china-area-data -S
github地址：
https://www.npmjs.com/package/element-china-area-data
使用参考：
https://blog.csdn.net/xiejnpeng/article/details/111400199

二、vue中实现页面结构等生成图片

名称：
html2canvas
引入方式：
cnpm install html2canvas --save
github地址：
https://github.com/niklasvh/html2canvas
使用参考：
http://html2canvas.hertzen.com/
vue中使用参考：
https://www.cnblogs.com/Super-scarlett/p/10770126.html

三、vue中字符串生成二维码（qrcode）

名称：
qrcode
引入方式：
cnpm install --save qrcode
github地址： （es7、es8使用方法，配合options项参考使用）
https://github.com/soldair/node-qrcode#tocanvascanvaselement-text-options-cberror
使用示例：
import QRCode from ‘qrcode’

codeToImg() {
const code = ‘17315376813’
// With promises
QRCode.toDataURL(code,
{
margin: 2,
color: {
dark: ‘#91663c’, // 二维码颜色
light: ‘#999’, // 背景色
}
})
.then(url => {
const img = url
console.log(img)
})
.catch(err => {
console.error(err)
})
},

四、百度地图

百度地图拾取坐标系统：
https://api.map.baidu.com/lbsapi/getpoint/index.html
名称：
vue-baidu-map
引入方式：
cnpm install vue-baidu-map --save
github地址：
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
使用参考：
https://www.cnblogs.com/jiekzou/p/10485604.html
vue中使用简单示例：

<template>
  <div class="baidu-map">
    <baidu-map class="map" :center="center" :zoom="zoom"></baidu-map>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'baidu-map',
  data () {
    return {
      center: {
        lng: 121.232629, 
        lat: 31.337943
      },
      zoom: 15
    }
  },
  created () {},
  components: {},
  mounted () {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.baidu-map {
  width: 100vw;
  min-height: 100vh;
  
  .map {
    width: 100%;
    height: 400px;
  }
}
</style>

五、用于从用户代理数据中检测浏览器、引擎、操作系统、CPU 和设备类型/模型

名称：
UAParser.js
引入方式：
cnpm install ua-parser-js --save
github地址：
https://www.npmjs.com/package/ua-parser-js
vue中使用简单举例：
引入：import UAParser from ‘ua-parser-js’
使用(例：获取当前设备类型)：
const device = new UAParser().getDevice().type

六、点击按钮的复制文本的功能

名称：
clipboard
引入方式：
cnpm i clipboard --save
全局或者局部引入依赖：
import Clipboard from ‘clipboard’
vue中使用简单举例：

<template>
  <div >
    <p>{{copyTxt}}</p>
    <button id="copy_text"
            :data-clipboard-text="copyTxt"
            @click="handleCopyFun">复制</button>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      copyTxt: '即将复制的文本'
    }
  },
  method() {
    // 操作：点击了复制按钮
    handleCopyFun() {
      let clipboard = new Clipboard('#copy_text')
      clipboard.on('success', e => {
        alert('复制成功')
        clipboard.destroy() // 释放内存
      })
      clipboard.on('error', e => {
        // 不支持复制
        alert('该浏览器不支持自动复制')
        clipboard.destroy() // 释放内存
      })
    }
  }
}
</script>

七、预览word文档

名称：
mammoth.js
引入方式：
npm install --save mammoth
vue中使用示例：

<template>
  <div class="view-doc">
    <div class="preview" v-html="wordZ" ref="docPreview">

    </div>
  </div>
</template>

<script>
import mammoth from "mammoth";
export default {
  data() {
    return {
      docArr: [
        'https://static.luckevent.com/projects/huashan/huashananxinwen/axwfwtk.docx',
        'https://static.luckevent.com/projects/huashan/huashananxinwen/axzysbhzc.docx',
        'https://static.luckevent.com/projects/huashan/huashananxinwen/axwmzsm.docx'
      ],
      doc: "",
      vHtml: "",
      wordURL:'',  //文件地址，看你对应怎末获取、赋值
      wordZ: ''
    };
  },
  computed: {},
  created() {},
  mounted() {
    const DocStr = this.$route.query.str;
    if (!DocStr) return this.$router.back();
    this.wordURL = this.docArr[Number(DocStr)];
    // 具体函数调用位置根据情况而定
    this.previewFile()
  },
  methods: {
    previewFile() {
      let _this=this;
      try {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", this.wordURL);
        xhr.responseType = "arraybuffer";
        let self = this;
 
        xhr.onload = function(e) {
          console.log(e)
          var arrayBuffer = xhr.response; //arrayBuffer
          mammoth
            .convertToHtml({ arrayBuffer: arrayBuffer })
            .then(displayResult)
            .done();
 
          function displayResult(result) {
            console.log(result);
            self.$refs.docPreview.innerHTML = result.value || "";
          }
        };
        xhr.send();
      } catch (e) {
        console.log(e);
        _this.$emit("errorPreview");
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.view-doc {
  width: 100vw;
  min-height: 100vh;

  .preview {
    padding: 5vw 2vw;
    line-height: 30px;
  }
}
</style>

八、vue线上手机调试工具VConsole

在pubilc > index.html中加入如下代码：

<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
    // 初始化
    var vConsole = new VConsole();
    console.log('Hello world');
</script>