chore: move vant to packages folder (#9384)

2021-09-03 14:32:16 +08:00
parent 5a75326b65
commit c21324b256
1022 changed files with 150 additions and 164 deletions
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const t = useTranslate({
+  'zh-CN': {
+    left: '左侧',
+    right: '右侧',
+    bottom: '底部',
+    gradient: '渐变色',
+    customSize: '大小定制',
+    customStyle: '样式定制',
+    customColor: '颜色定制',
+    customWidth: '宽度定制',
+    startPosition: '起始位置',
+    counterClockwise: '逆时针',
+  },
+  'en-US': {
+    left: 'Left',
+    right: 'Right',
+    bottom: 'Bottom',
+    gradient: 'Gradient',
+    customSize: 'Custom Size',
+    customStyle: 'Custom Style',
+    customColor: 'Custom Color',
+    customWidth: 'Custom Width',
+    startPosition: 'Start Position',
+    counterClockwise: 'Counter Clockwise',
+  },
+});
+
+const rate = ref(70);
+const currentRate1 = ref(70);
+const currentRate2 = ref(70);
+const currentRate3 = ref(70);
+const currentRate4 = ref(70);
+
+const gradientColor = {
+  '0%': '#3fecff',
+  '100%': '#6149f6',
+};
+
+const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
+
+const add = () => {
+  rate.value = format(rate.value + 20);
+};
+
+const reduce = () => {
+  rate.value = format(rate.value - 20);
+};
+</script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-circle
+      v-model:current-rate="currentRate1"
+      :rate="rate"
+      :speed="100"
+      :text="currentRate1.toFixed(0) + '%'"
+    />
+  </demo-block>
+
+  <demo-block :title="t('customStyle')">
+    <van-circle
+      v-model:current-rate="currentRate3"
+      :rate="rate"
+      :speed="100"
+      :stroke-width="60"
+      :text="t('customWidth')"
+    />
+
+    <van-circle
+      v-model:current-rate="currentRate3"
+      color="#ee0a24"
+      :rate="rate"
+      layer-color="#ebedf0"
+      :speed="100"
+      :text="t('customColor')"
+    />
+
+    <van-circle
+      v-model:current-rate="currentRate2"
+      :rate="rate"
+      :speed="100"
+      :color="gradientColor"
+      :text="t('gradient')"
+    />
+
+    <van-circle
+      v-model:current-rate="currentRate4"
+      color="#07c160"
+      :rate="rate"
+      :speed="100"
+      :clockwise="false"
+      :text="t('counterClockwise')"
+      style="margin-top: 15px"
+    />
+
+    <van-circle
+      v-model:current-rate="currentRate4"
+      color="#7232dd"
+      :rate="rate"
+      :speed="100"
+      size="120px"
+      :clockwise="false"
+      :text="t('customSize')"
+      style="margin-top: 15px"
+    />
+  </demo-block>
+
+  <div style="margin-top: 15px">
+    <van-button :text="t('add')" type="primary" size="small" @click="add" />
+    <van-button
+      :text="t('decrease')"
+      type="danger"
+      size="small"
+      @click="reduce"
+    />
+  </div>
+
+  <demo-block :title="t('startPosition')">
+    <van-circle
+      :current-rate="75"
+      :rate="rate"
+      :text="t('left')"
+      start-position="left"
+    />
+    <van-circle
+      :current-rate="75"
+      :rate="rate"
+      :text="t('right')"
+      start-position="right"
+    />
+    <van-circle
+      :current-rate="75"
+      :rate="rate"
+      :text="t('bottom')"
+      start-position="bottom"
+    />
+  </demo-block>
+</template>
+
+<style lang="less">
+.demo-circle {
+  .van-circle {
+    margin-left: var(--van-padding-md);
+  }
+
+  .van-button {
+    margin: var(--van-padding-md) 0 0 10px;
+
+    &:first-of-type {
+      margin-left: var(--van-padding-md);
+    }
+  }
+}
+</style>