常用插件（2）：vue3-hash-calendar 日期时间选择插件、基于Vue的组织架构图组件、lodash、radash、vue-esign 手写电子签名、vue-currency-input

_Tough_Girl

已于 2025-04-01 08:46:01 修改

阅读量1.3k

点赞数 9

分类专栏： web前端文章标签： vue.js

于 2024-10-23 14:24:32 首次发布

本文链接：https://blog.csdn.net/icemwj/article/details/141631697

版权

web前端专栏收录该内容

26 篇文章

订阅专栏

上一篇：常用插件（1）：vue-count-to 数字滚动插件、vue-seamless-scroll 基于vue.js的无缝滚动、vue-qr Vue生成二维码插件、qrcode.vue 一款 Vue.js

1、vue3-hash-calendar：基于 vue3 的移动端日期、时间选择插件，日期选择面板以日历形式展示

vue3-hash-calendar 文档和示例： https://hxkj.vip/calendar/#/home

特性

支持自定义农历/节假日
支持单选、多选、范围选择类型
上下滑动可切换周/月模式
支持快速切换年份和月份
周模式，左右滑动切换周
月模式，左右滑动切换月份
单元测试全覆盖
详尽的文档和示例
支持定制主题
国际化语言支持（中/英）
使用 TypeScript 开发，提供完整的类型定义文件

快速上手

安装

# 通过 npm
npm i vue3-hash-calendar

# 通过 yarn
yarn add vue3-hash-calendar

# 通过 pnpm
pnpm add vue3-hash-calendar

引入

import Vue from 'vue';
import VueHashCalendar from 'vue3-hash-calendar';
import 'vue3-hash-calendar/es/index.css';

Vue.use(VueHashCalendar);

使用

<vue-hash-calendar />

效果
在这里插入图片描述

2、好用的基于Vue的组织架构图组件：vue-org-tree、vue-okr-tree、vue-tree-chart

2.1 vue-org-tree：基于Vue2.x的简单组织树

vue-org-tree： https://gitee.com/devi001/vue-org-tree

安装：

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

引入：

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'
import 'vue2-org-tree/dist/style.css'

Vue.use(Vue2OrgTree)

// ...

CDN:

# css
<link href="https://unpkg.com/vue2-org-tree/dist/style.css">

# js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree/dist/index.js"></script>

使用：

<template>
  <div>
    <h2>vue2-org-tree 使用示例1：</h2>
    <!-- :horizontal="true" -->
    <vue2-org-tree
      :data="treeData"
      :key="1"
      :horizontal="true"
      :collapsable="collapsable"
      @on-expand="onExpand"
      @on-node-click="onNodeClick"
    />
    <br />

    <h2>vue2-org-tree 使用示例2：</h2>
    <vue2-org-tree :data="treeData" :key="2" />
  </div>
</template>

<script>
import Vue2OrgTree from "vue2-org-tree";
import "vue2-org-tree/dist/style.css";

export default {
  components: { Vue2OrgTree },
  data() {
    return {
      horizontal: true, //横版 竖版
      collapsable: true, // 子节点是否可折叠
      expandAll: true, //是否全部展开
      labelClassName: "白色", // 默认颜色
      scrollTreeStyle: "width:100%;",

      treeData: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端",
              },
              {
                id: 6,
                label: "研发-后端",
              },
              {
                id: 9,
                label: "UI设计",
              },
              {
                id: 10,
                label: "产品经理",
              },
            ],
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
              },
              {
                id: 8,
                label: "销售二部",
              },
            ],
          },
          {
            id: 4,
            label: "财务部",
          },
          {
            id: 9,
            label: "HR人事",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.expandChange();
  },
  methods: {
    // 展开
    onExpand(e, data) {
      console.log("展开", e, data);

      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    collapse(list) {
      list.forEach((child) => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },
    // 点击节点
    onNodeClick(e, data) {
      console.log("点击节点", e, data);
    },
    expandChange() {
      this.toggleExpand(this.treeData, this.expandAll);
    },
    // 默认展开
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach((item) => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
  },
};
</script>

在这里插入图片描述

相关使用示例： 详解树状结构图 vue-org-tree

Vue 树形结构插件 vue2-org-tree

vue2 使用vue-org-tree 组件完整示例Demo vue2-org-tree

前端vue2-org-tree实现精美组织架构图

在这里插入图片描述

v-org-tree

在这里插入图片描述

2.2 vue-okr-tree：基于 Vue2.x 的组织架构树组件（推荐）

github 地址： https://github.com/husky-dot/vue-okr-tree

文档和示例地址： http://www.longstudy.club/vue-okr-tree-doc/index.html

使用： 【vue-okr-tree实现树图结构，含展开，收缩，导出图片,pdf】

在这里插入图片描述

安装：

# use npm
npm i vue-okr-tree@1.0.10 

# use yarn
yarn add vue-okr-tree@1.0.10

引入：


import {VueOkrTree} from 'vue-okr-tree';
import 'vue-okr-tree/dist/vue-okr-tree.css'

// ...

CDN：

# css
<link href="http://qjge81f6q.hd-bkt.clouddn.com/vue-okr-tree.css">

# js
<script src="http://qjge81f6q.hd-bkt.clouddn.com/vue-okr-tree.umd.min.js"></script>

使用：

<vue-okr-tree 
  :data="testData" 
  direction="horizontal" 
  show-collapsable 
  default-expand-all /> 

<script>
  export default {
    data () {
      return {
        testData: [{
          label: 'xxx科技有有限公司',
          children: [{
            label: '产品研发部',
            children: [{
              label: '研发-前端',
            }, {
              label: '研发-后端',
            }, {
              label: 'UI 设计',
            }]
          }, {
            label: '销售部',
            children: [{
                label: '销售一部',
              },{
                label: '销售二部',
              }
            ]
          },{
            label: '财务部'
          }]
        }]
      }
    }
  }
</script>

在这里插入图片描述

2.3 vue-tree-chart：Vue 树形图组件（支持Vue2.x 和 Vue3.x）

支持Vue2.x版本的文档地址： https://github.com/tower1229/Vue-Tree-Chart/tree/master

安装以及引用：

npm i vue-tree-chart --save

in template:

<TreeChart :json="treeData" />

in script:

import TreeChart from "vue-tree-chart";

export default {
	components: {
    	TreeChart
	},
	data() {
		return {
			treeData: {
				...
			}
		}
	}
	...

使用：

<template>
  <div>
    <h2>vue-tree-chart 使用示例：</h2>
    <TreeChart :json="treeData"></TreeChart>
  </div>
</template>

<script>
import TreeChart from "vue-tree-chart";

export default {
  components: { TreeChart },
  data() {
    return {
      /**
       * - name[String] to display a node name
       * - image_url[String] to display a node image
       * - children[Array] node`s children
       * - mate[Array] node`s mate
       * - class[Array] node`s class
       * - extend[Boolean] show/hide node`s children, default True
       */
      treeData: {
        name: "xxx科技有有限公司",
        image_url: require("@/assets/images/死神巫师.png"),
        class: ["rootNode"],
        children: [
          {
            name: "产品研发部",
            image_url: require("@/assets/images/死神巫师.png"),
            children: [
              {
                name: "研发-前端",
                image_url: require("@/assets/images/死神巫师.png"),
                // mate: [
                //   {
                //     name: "mate",
                //     image_url: require("@/assets/images/死神巫师.png"),
                //   },
                // ],
              },
              {
                name: "研发-后端",
                image_url: require("@/assets/images/死神巫师.png"),
              },
              {
                name: "UI 设计",
                image_url: require("@/assets/images/死神巫师.png"),
              },
            ],
          },
          {
            name: "销售部",
            image_url: require("@/assets/images/死神巫师.png"),

            children: [
              {
                name: "销售一部",
                image_url: require("@/assets/images/死神巫师.png"),
              },
              {
                name: "销售二部",
                image_url: require("@/assets/images/死神巫师.png"),
              },
            ],
          },
          {
            name: "财务部",
            image_url: require("@/assets/images/死神巫师.png"),
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .node .person {
    width: auto;
  }
}
</style>

在这里插入图片描述

支持Vue3.x版本的文档地址： https://github.com/tower1229/Vue-Tree-Chart/tree/vue3

安装以及使用：

npm i vue-tree-chart-3 --save

in template:

<TreeChart :json="treeData" />

in script:

import TreeChart from "vue-tree-chart-3";

export default {
	components: {
    	TreeChart
	},
	data() {
		return {
			treeData: {
				...
			}
		}
	}
	...

在这里插入图片描述

3、lodash：是一个一致性、模块化、高性能的 JavaScript 实用工具库

官方文档： https://www.lodashjs.com/

安装：

npm i --save lodash
npm i --save-dev @types/lodash

使用：

使用方法一：

在 tsconfig.json 中开启：

"esModuleInterop": true

然后就可以这样引用：

import _ from 'lodash'

使用方法二：

如果没有启用 esModuleInterop，则可以这样引用：

import * as _ from 'lodash'

防抖使用示例：
在这里插入图片描述

防抖

_.debounce(func, [wait=0], [options=]) 函数在延迟几毫秒之后才执行，也就是停止改变几秒后执行。

参数

func (Function): 要防抖动的函数。
[wait=0] (number): 需要延迟的毫秒数。
[options=] (Object): 选项对象。
[options.leading=false] (boolean): 指定在延迟开始前调用。
[options.maxWait] (number): 设置 func 允许被延迟的最大值。
[options.trailing=true] (boolean): 指定在延迟结束后调用。

<script setup lang="ts">
	import * as _ from 'lodash'

	//防抖的函数应该是click事件
	const fangdou = _.debounce(click, 500, {
	  leading: true,  // 延长开始后调用
	  trailing: false  // 延长结束前调用
	})
	
	function click() {
		//响应点击
	  console.log("123")
	}
	//移除组件时，取消防抖
	onUnmounted(()=>{
	  fangdou.cancel()
	}) 

</script>

<template>
  <button @click="fangdou">fangdou</button>
</template>

节流使用示例：

在这里插入图片描述

节流

_.throttle(func, [wait=0], [options=]) 第一次会立即执行一次，然后等到过了毫秒数才会执行，以一定的频率后续处理

参数

func (Function): 要节流的函数。
[wait=0] (number): 需要节流的毫秒。
[options=] (Object): 选项对象。
[options.leading=true] (boolean): 指定调用在节流开始前。
[options.trailing=true] (boolean): 指定调用在节流结束后。

<script setup lang="ts">
   import * as _ from 'lodash'

   const throttle = _.throttle(() =>{
     console.log('I get fired every two seconds!')
   },2000,{
     leading: true,
     trailing: false
   })
   //移除组件时，取消节流
   onUnmounted(()=>{
     throttle.cancel()
   }) 
</script>

<template>
   <button @click="throttle">jieliu</button>
</template>

参考：vue3+ts通过lodash实现防抖节流

4、radash：是一个零依赖、模块化、高性能的 JS/TS 实用前端工具库

官方文档： https://www.radash.wiki/
在这里插入图片描述
安装：

// npm
npm install radash

// yarn
yarn add radash

使用：

import * as _ from 'radash'

const gods = [{
  name: 'Ra',
  power: 'sun',
  rank: 100,
  culture: 'egypt'
}, {
  name: 'Loki',
  power: 'tricks',
  rank: 72,
  culture: 'norse'
}, {
  name: 'Zeus',
  power: 'lightning',
  rank: 96,
  culture: 'greek'
}]

_.max(gods, g => g.rank) // => ra
_.sum(gods, g => g.rank) // => 268
_.fork(gods, g => g.culture === 'norse') // => [[loki], [ra, zeus]]
_.sort(gods, g => g.rank) // => [ra, zeus, loki]
_.boil(gods, (a, b) => a.rank > b.rank ? a : b) // => ra

_.objectify(
  gods, 
  g => g.name.toLowerCase(), 
  g => _.pick(g, ['power', 'rank', 'culture'])
) // => { ra, zeus, loki }

const godName = _.get(gods, g => g[0].name)

const [err, god] = await _.try(api.gods.findByName)(godName)

const allGods = await _.map(gods, async ({ name }) => {
  return api.gods.findByName(name)
})

在这里插入图片描述

5、vue-esign：Canvas 手写电子签名

vue-esign npm地址

在这里插入图片描述
功能：

支持Vue2、Vue3。
兼容 PC 和 Mobile。
画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）。
自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色。
支持裁剪（针对需求：有的签字需要裁剪掉四周空白）。
导出图片格式为 base64。
此组件适用于需要在线签署合同或其他文档的应用场景。

安装：

npm install vue-esign --save

使用：

（1）全局使用、局部使用

// 全局 vue2 main.js
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

// 全局vue3 main.js
import { createApp } from 'vue'
import App from './App.vue'
import vueEsign from 'vue-esign'
const app = createApp(App)
app.use(vueEsign)

// 局部
import vueEsign from 'vue-esign'
components: { vueEsign }

（2）页面中使用 必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate()。

无需给组件设置 style 的宽高，如果画布的 width属性值没超出父元素的样式宽度，则该组件的样式宽度就是画布宽度，超出的话，组件样式宽度则是父元素的100%；所以只需设置好父元素的宽度即可；

<!-- vue2 -->
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<!-- vue3 -->
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" v-model:bgColor="bgColor" />

<!-- isClearBgColor为false时，不必再给bgColor加sync修饰符或v-model -->

<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成图片</button>

data () {
  return {
    lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false
  }
},
methods: {
  handleReset () {
    this.$refs.esign.reset()
  },
  handleGenerate () {
    this.$refs.esign.generate().then(res => {
      this.resultImg = res
    }).catch(err => {
      alert(err) // 画布没有签字时会执行这里 'Not Signned'
    })
  }
}

（3）说明
在这里插入图片描述
两个内置方法，通过给组件设置 ref 调用：

清空画布

this.$refs.esign.reset()

生成图片

// 可选配置参数 ，在未设置format或quality属性时可在生成图片时配置 例如： {format:'image/jpeg', quality: 0.5}
// this.$refs.esign.generate({format:'image/jpeg', quality: 0.5})

this.$refs.esign.generate().then(res => {
  console.log(res) // base64图片
}).catch(err => {
  alert(err) // 画布没有签字时会执行这里 'Not Signned'
})

6、vue-currency-input：这是一个货币格式化的数字输入框组件

Vue Currenc Input是一款基于vuejs的货币格式化输入框组件，可轻松输入货币格式的数字，提供了独立的组件和自定义的Vue指令（v-currency），用于使用货币格式功能来装饰现有的输入组件。
它基于 Vue Composition API 构建，可以为任何输入组件添加货币格式化功能。
Vue货币输入框（Currency Input）只有〜3kB大小（最小+ gzip压缩），零依赖项。

Vue Currency Input组件基于 ECMAScript 国际化 API（Intl.NumberFormat）构建。它的特点有：

可以将您喜欢的框架（例如 Vuetify、Quasar 或 Element Plus）的输入组件变成货币输入字段。
支持 Vue 2 和 Vue 3。
基于标准构建: 通过使用 Intl.NumberFormat 确保正确的区域依赖格式化。
隐藏格式化，使输入不显眼。
内置值范围验证。

使用教程： https://madewith.cn/529

https://fantastic-admin.hurui.me/basic-example/#/plugin_example/currencyinput

安装：

npm install vue-currency-input 

# OR 

yarn add vue-currency-input

使用：

引入：

import Vue from 'vue'
import VueCurrencyInput from 'vue-currency-input'

Vue.use(VueCurrencyInput)

使用组件：

<template>
  <currency-input v-model="value" />
</template>

<script>
export default {
  data: () => ({ value: 1000 })
}
</script>

在这里插入图片描述
配置项：

在这里插入图片描述