chore(image): split demo (#2819)

src/packages/__VUE/image/demo/basic.vue

@@ -0,0 +1,6 @@
+<template>
+  <nut-image :src="url" width="100" height="100" />
+</template>
+<script setup lang="ts">
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+</script>

src/packages/__VUE/image/demo/error.vue

@@ -0,0 +1,16 @@
+<template>
+  <nut-space>
+    <nut-image src="https://x" width="100" height="100" show-error></nut-image>
+    <nut-image src="https://x" width="100" height="100" show-loading>
+      <template #loading>
+        <Loading width="16" height="16"></Loading>
+      </template>
+      <template #error>
+        <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+      </template>
+    </nut-image>
+  </nut-space>
+</template>
+<script setup lang="ts">
+import { Loading, CircleClose } from '@nutui/icons-vue';
+</script>

src/packages/__VUE/image/demo/fit.vue

@@ -0,0 +1,12 @@
+<template>
+  <nut-space wrap>
+    <div v-for="fit in fits" :key="fit">
+      <nut-image :src="url" width="100" height="100" :fit="fit" />
+      <div style="text-align: center">{{ fit }}</div>
+    </div>
+  </nut-space>
+</template>
+<script setup>
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
+</script>

src/packages/__VUE/image/demo/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('fit') }}</h2>
+    <Fit />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('round') }}</h2>
+    <Round />
+
+    <h2>{{ t('loading') }}</h2>
+    <Loading />
+
+    <h2>{{ t('error') }}</h2>
+    <Error />
+
+    <h2>{{ t('lazy') }}</h2>
+    <Lazy />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Fit from './fit.vue';
+import Position from './position.vue';
+import Round from './round.vue';
+import Loading from './loading.vue';
+import Error from './error.vue';
+import Lazy from './lazy.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    fit: '填充模式',
+    position: '图片位置',
+    round: '圆形图片',
+    loading: '加载中提示',
+    error: '加载失败',
+    lazy: '懒加载'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    fit: 'Object Fill',
+    position: 'Object Position',
+    round: 'Round',
+    loading: 'Loading',
+    error: 'Error',
+    lazy: 'Lazy Load'
+  }
+});
+</script>

src/packages/__VUE/image/demo/lazy.vue

@@ -0,0 +1,9 @@
+<template>
+  <nut-cell v-for="(_, index) in count" :key="index">
+    <nut-image :src="`${url}?t=${index}`" height="200" width="100%" lazy-load />
+  </nut-cell>
+</template>
+<script setup lang="ts">
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const count = Array.from({ length: 7 });
+</script>

src/packages/__VUE/image/demo/loading.vue

@@ -0,0 +1,13 @@
+<template>
+  <nut-space>
+    <nut-image width="100" height="100" show-loading></nut-image>
+    <nut-image width="100" height="100" show-loading>
+      <template #loading>
+        <Loading width="16" height="16"></Loading>
+      </template>
+    </nut-image>
+  </nut-space>
+</template>
+<script setup lang="ts">
+import { Loading } from '@nutui/icons-vue';
+</script>

src/packages/__VUE/image/demo/position.vue

@@ -0,0 +1,19 @@
+<template>
+  <nut-space wrap>
+    <div v-for="pos in positions1" :key="pos">
+      <nut-image :src="url" width="100" height="100" fit="contain" :position="pos" />
+      <div style="text-align: center"> contain </div>
+      <div style="text-align: center">{{ pos }}</div>
+    </div>
+    <div v-for="pos in positions2" :key="pos">
+      <nut-image :src="url" width="100" height="100" fit="cover" :position="pos" />
+      <div style="text-align: center"> cover </div>
+      <div style="text-align: center">{{ pos }}</div>
+    </div>
+  </nut-space>
+</template>
+<script setup lang="ts">
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const positions1 = ['top', 'center', 'bottom'];
+const positions2 = ['left', 'center', 'right'];
+</script>

src/packages/__VUE/image/demo/round.vue

@@ -0,0 +1,15 @@
+<template>
+  <nut-space>
+    <div>
+      <nut-image :src="url" width="100" height="100" fit="cover" round></nut-image>
+      <div style="text-align: center">cover</div>
+    </div>
+    <div>
+      <nut-image :src="url" width="100" height="100" fit="cover" radius="10px"></nut-image>
+      <div style="text-align: center">cover</div>
+    </div>
+  </nut-space>
+</template>
+<script setup lang="ts">
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+</script>