1、树状插件 vue-tree-list
官网:http://www.paradeto.com/vue-tree-list/
gitee地址:https://gitee.com/mirrors_ParadeTo/vue-tree-list
gitcode地址:https://gitcode.com/ParadeTo/vue-tree-list/overview?utm_source=artical_gitcode
2、表格插件 vxe-table
官网:https://vxetable.cn/#/table/start/install
gitee地址:https://gitee.com/xuliangzhan_admin/vxe-table
gitcode地址:https://gitcode.com/x-extends/vxe-table/overview
3、表单生成器 form-create
官网:https://www.form-create.com,文档:https://www.form-create.com/v3/guide/demo.html
gitee地址:https://gitee.com/xaboy/form-create
4、二维码生成器
官网地址:https://davidshimjs.github.io/qrcodejs/
安装:npm i qrcodejs2
组件:
<template>
<div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
data() {
return {
qrcode: ''
}
},
props: {
id: {
type: String,
required: true
},
codeUrl: {
type: String,
default: ''
},
width: {
type: String,
default: '200'
},
height: {
type: String,
default: '200'
},
colorDark: {
type: String,
default: '#000000'
},
colorLight: {
type: String,
default: '#ffffff'
}
},
watch: {
codeUrl(newText) {
this.createQrcode()
}
},
mounted() {
this.createQrcode()
},
methods: {
// 有新的二维码地址了,先把之前的清除掉
createQrcode() {
if (this.qrcode) {
this.$refs[this.id].innerHTML = ''
}
this.qrcode = new QRCode(this.$refs[this.id], {
text: this.codeUrl,
width: this.width,
height: this.height,
colorDark: this.colorDark,
colorLight: this.colorLight,
correctLevel: QRCode.CorrectLevel.H,
})
},
}
}
</script>`
5、图像插件 v-viewer
官网:https://v-viewer.mirari.cc/
6、富文本编辑器 wangeditor
官网:https://www.wangeditor.com/
7、瀑布流组件
官网:https://lfyfly.github.io/vue-waterfall-easy/demo/#/
gitcode地址:https://gitcode.com/lfyfly/vue-waterfall-easy/overview?utm_source=csdn_blog_hover
8、导出表格 ExcelJS
gitcode地址:https://gitcode.com/exceljs/exceljs/blob/master/README_zh.md?utm_source=csdn_github_accelerator&isLogin=1