首页 前端知识 vue相关插件

vue相关插件

2024-09-03 02:09:47 前端知识 前端哥 119 611 我要收藏

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
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17581.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!