整理了一些自己常用的 vue3 组件

安装

npm i my_tool_vue3

全局导入

import tool from 'my_tool_vue3'
const app = createApp(App)
app.use(tool)

组件

Container

说明：

监听屏幕大小，通过改变 scale 的方式，使 container 中的内容与屏幕自适应

参数：

• options: 设计图的宽高

示例

<container class="container" :options="{ width: 1920, height: 1080 }" >
 .....内容
</container>

CountTo

说明：

一个很有名的数字动画组件，vue-count-to，接收 startVal 和 endVal ，实现两个 value 变化时的动画效果

但是我希望每次只用传入一个 value , startVal 默认就是上一次传入的值，所以给这个组件套了给壳子，使它更符合我的需求

保留了原版的组件，需要的时候可以直接使用

<vue-count-to />

参数

• value: 绑定的值
• decimals： 小数位数 默认0
• duration： 动画时间(ms) 默认为1000

示例

<count-to :value="value" />

VueEcharts

说明：

现在 VueEcharts 已经支持 vue3.0了，但是我在使用中遇到了一些问题，一些使用 dataset 绑定的值失效了。（可能是我使用方式不对，但是我的确找不到原因）

而原版的 Echarts 在 vue3 中不太方便，每次使用都需要获取 dom，并在数据更新时调用 setOption 更新数据

所以把 导入 echarts, 获取 dom, 数据更新时绑定 setOption 这个操作直接在组件中完成了

只是给 echarts 套了给壳子，方便使用，如果以后遇到其他的功能再添加（当然最好是能使用 VueEcharts 这个官方库，以后有时间在琢磨吧）

（echarts 直接全部导入了，以后遇到具体的项目再按需导入）

参数:

option: echarts 需要绑定的数据

示例

<vue-echarts :option="option" />

ProgressBar

说明

简易方形进度条

参数

• currentPercent: 当前进度条的百分比，可以传入小数或者百分数
• width： 长度 css属性
• height： 高度 css属性
• backgroundColor： 背景色 css属性
• color: 填充色 css属性

示例

<progress-bar width="90%" height="15px" color="#B4E372" :currentPercent="value" />