liquid-svg

liquid-svg 是一个水球进度百分比的 vue3 版本，支持三种主题色，蓝色、绿色、黄色；默认黄色。

效果

如何使用?

npm i liquid-svg

版本

vue2 版本，请使用 vue2-liquid-svg 包

示例

<template>
  <LiquidSvg :data="50" />
  <LiquidSvg :data="10" :width="100" theme="blue" />
  <LiquidSvg :data="50" :width="300" theme="green" />
  <LiquidSvg :data="90" :width="300" theme="yellow" />
</template>

<script>
import { LiquidSvg } from "liquid-svg";
import "liquid-svg/style.css";
</script>

参数

属性	描述	类型	默认值	必填
data	百分比	Number	0	否
width	水球宽高	Number	100	否
theme	主题色可选 blue、green、yellow	String	blue	否