chore(avatar): split demo (#2751)

jdf2e · Dec 16, 2023 · c7dbf44 · c7dbf44
1 parent 501d992
commit c7dbf44
Show file tree

Hide file tree

Showing 25 changed files with 470 additions and 887 deletions.
diff --git a/packages/nutui-taro-demo/src/app.scss b/packages/nutui-taro-demo/src/app.scss
@@ -4,6 +4,7 @@ page {
 
 page,
 #app {
+  font-size: 14px;
   min-width: 100vw;
   .demo {
     box-sizing: border-box;

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/badge.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/badge.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-badge value="8">
+    <nut-avatar shape="square"><My /></nut-avatar>
+  </nut-badge>
+  <span style="margin-right: 10px"></span>
+  <nut-badge dot>
+    <nut-avatar shape="square"><My /></nut-avatar>
+  </nut-badge>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/basic.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar> <img :src="url" /> </nut-avatar>
+  <nut-avatar> <My /> </nut-avatar>
+  <nut-avatar> 王 </nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/click.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/click.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar @click="click"><My /></nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const click = () => {
+  console.log('click');
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/color.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/color.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-avatar bg-color="red">
+    <My color="white" />
+  </nut-avatar>
+  <nut-avatar color="white" bg-color="blue">小明</nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/count.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/count.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-button size="mini" @click="count++">+1</nut-button>
+  <nut-button size="mini" @click="count--">-1</nut-button>
+  <nut-avatar-group max-count="4" z-index="right">
+    <nut-avatar v-for="i in count" :key="i">
+      <My v-if="i % 2 == 0" />
+      <img v-else :src="url" />
+    </nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { My } from '@nutui/icons-vue-taro';
+const count = ref(4);
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/group.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/group.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-avatar-group span="-4">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+  </nut-avatar-group>
+  <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/index.vue
@@ -1,139 +1,67 @@
 <template>
-  <Demo class="full avatar-demo">
-    <h2>支持三种尺寸：small、normal、large</h2>
-    <nut-cell>
-      <nut-avatar size="large">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar size="normal">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar size="small">
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-    </nut-cell>
-    <h2>支持两种形状：square、round</h2>
-    <nut-cell>
-      <nut-avatar shape="square"><My /></nut-avatar>
-      <nut-avatar shape="round"><My /></nut-avatar>
-    </nut-cell>
-    <h2>支持三种类型：图片、Icon 以及字符</h2>
-    <nut-cell>
-      <nut-avatar>
-        <img
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-        />
-      </nut-avatar>
-      <nut-avatar><My /></nut-avatar>
-      <nut-avatar>王</nut-avatar>
-    </nut-cell>
-    <h2>Icon 和字符型可以自定义颜色及背景色</h2>
-    <nut-cell>
-      <nut-avatar class="demo-avatar" bg-color="#FA2C19"><My color="#fff" /></nut-avatar>
-      <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-    </nut-cell>
-    <h2>带徽标的头像</h2>
-    <nut-cell>
-      <nut-badge value="8">
-        <nut-avatar shape="square"><My /></nut-avatar>
-      </nut-badge>
-      <nut-badge dot>
-        <nut-avatar shape="square"><My /></nut-avatar>
-      </nut-badge>
-    </nut-cell>
-    <h2>头像组合展现</h2>
-    <nut-cell>
-      <nut-avatar-group span="-4">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
+  <Demo class="bg-w">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-cell>
-      <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
-    <h2>组合头像可控制层级方向</h2>
-    <nut-cell>
-      <nut-avatar-group max-count="3" z-index="right" max-content="...">
-        <nut-avatar>
-          <img
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-        <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
-        <nut-avatar><My /></nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
+    <h2>{{ t('size') }}</h2>
+    <Size />
 
-    <h2>点击头像触发事件</h2>
-    <nut-cell>
-      <nut-avatar @click="handleClick"><My /></nut-avatar>
-    </nut-cell>
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
 
-    <h2 class="demo-avatar-group-title">动态添加头像<nut-button size="mini" @click="addAvatar">添加</nut-button></h2>
-    <nut-cell>
-      <nut-avatar-group max-count="4" z-index="right">
-        <nut-avatar v-for="i in avatarCount" :key="i">
-          <My v-if="i % 2 == 0" />
-          <img
-            v-else
-            src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
-          />
-        </nut-avatar>
-      </nut-avatar-group>
-    </nut-cell>
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('badge') }}</h2>
+    <Badge />
+
+    <h2>{{ t('group') }}</h2>
+    <Group />
+
+    <h2>{{ t('zindex') }}</h2>
+    <Zindex />
+
+    <h2>{{ t('click') }}</h2>
+    <Click />
+
+    <h2>{{ t('count') }}</h2>
+    <Count />
   </Demo>
 </template>
 <script setup lang="ts">
-import { My } from '@nutui/icons-vue-taro';
-import { ref } from 'vue';
-const handleClick = () => {
-  console.log('触发点击头像');
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Size from './size.vue';
+import Shape from './shape.vue';
+import Color from './color.vue';
+import Badge from './badge.vue';
+import Click from './click.vue';
+import Group from './group.vue';
+import Zindex from './zindex.vue';
+import Count from './count.vue';
 
-const avatarCount = ref(4);
-const addAvatar = () => {
-  avatarCount.value += 1;
-};
-</script>
-<style lang="scss">
-.avatar-demo {
-  .nut-cell {
-    align-items: flex-end;
-    border-radius: 0;
-    & > view {
-      margin-right: 30px;
-    }
-  }
-  .demo-avatar {
-    color: #fff;
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    size: '尺寸',
+    shape: '形状',
+    color: '自定义颜色',
+    badge: '带徽标的头像',
+    group: '头像组合展现',
+    zindex: '组合头像可控制层级方向',
+    click: '点击事件',
+    count: '动态修改数量'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    size: 'Size',
+    shape: 'Shape',
+    color: 'Color',
+    badge: 'Avatar with Badge',
+    group: 'Avatar group display',
+    zindex: 'Avatar group to control hierarchy direction',
+    click: 'Click Event',
+    count: 'Dynamically change count'
   }
-  .demo-avatar-group-title {
-    display: flex;
-    align-items: center;
-    row-gap: 8px;
-    column-gap: 8px;
-  }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/shape.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/shape.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-avatar shape="square"><My /></nut-avatar>
+  <nut-avatar shape="round"><My /></nut-avatar>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/size.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/size.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-avatar size="large">
+    <img :src="url" />
+  </nut-avatar>
+  <nut-avatar size="normal">
+    <img :src="url" />
+  </nut-avatar>
+  <nut-avatar size="small">
+    <img :src="url" />
+  </nut-avatar>
+</template>
+<script setup lang="ts">
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/avatar/zindex.vue b/packages/nutui-taro-demo/src/exhibition/pages/avatar/zindex.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-avatar-group max-count="3" z-index="right" max-content="...">
+    <nut-avatar><img :src="url" /></nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+    <nut-avatar color="rgb(245, 106, 0)" bg-color="rgb(253, 227, 207)">小明</nut-avatar>
+    <nut-avatar><My /></nut-avatar>
+  </nut-avatar-group>
+</template>
+<script setup lang="ts">
+import { My } from '@nutui/icons-vue-taro';
+const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png';
+</script>