一、省市区三级联动表单
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>