linchentlab/vue3-shape

useful graph drawn by PURE css

vue3-shape

简单易用的css图形组件, 由纯css3属性(clip-path)绘制, 无依赖。适用于vue3。

中文 | English

在线预览

安装

pnpm

pnpm install vue3-shape

npm

npm install vue3-shape

yarn

yarn install vue3-shape

使用

全局引用

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ShapeComponent from 'vue3-shape';

createApp(App).use(ShapeComponent).mount('#app');

// use in sfc
// xxx/app.vue
<template>
  <div>
     <shape type="circle" :size="20" color="red" />
  </div>
</template>

// abrove will render a circle that it's tadius is 20px and fill witch red color;

直接引用

<script lang="ts" setup>
import { Shape } from 'vue3-shape';

</script>

<template>
  <div>
     <shape type="circle" :size="20" color="red" />
  </div>
</template>