chore(watermark): split demo

jdf2e · Dec 21, 2023 · b218916 · b218916
1 parent 38d341d
commit b218916
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 473 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-button @click="show = 'text'">Text</nut-button>
+  <span style="margin-right: 10px; display: inline"></span>
+  <nut-button @click="show = 'image'">Image</nut-button>
+  <span style="margin-right: 10px; display: inline"></span>
+  <nut-button @click="show = ''">hidden</nut-button>
+  <nut-watermark v-if="show == 'text'" :z-index="999" content="nut-watermark"></nut-watermark>
+  <nut-watermark
+    v-if="show == 'image'"
+    :image-width="60"
+    :image-height="23"
+    :z-index="999"
+    :image="imgSrc"
+  ></nut-watermark>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const imgSrc = ref(
+  'https://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
+);
+const show = ref<'text' | 'image' | ''>('');
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/index.vue
@@ -1,72 +1,31 @@
 <template>
-  <Demo class="watermark-demo">
-    <h2>基础用法</h2>
-    <nut-cell class="wrap">
-      <nut-button @click="showTextMark">文字水印</nut-button>
-      <nut-button @click="showImageMark">图片水印</nut-button>
-      <nut-watermark v-if="!flag" class="mark1" :z-index="1" content="nut-ui-water-mark"></nut-watermark>
-      <nut-watermark
-        v-if="flag"
-        class="mark1"
-        :image-width="60"
-        :image-height="23"
-        :z-index="1"
-        :image="imgSrc"
-      ></nut-watermark>
-    </nut-cell>
-    <h2>局部用法</h2>
-    <nut-cell class="wrap wrap2">
-      <img :src="src" alt="" />
-      <nut-watermark :full-page="false" font-color="#fa2c19" content="nut-ui"></nut-watermark>
-    </nut-cell>
-    <h2>多行水印</h2>
-    <nut-cell class="wrap wrap2">
-      <nut-watermark
-        :full-page="false"
-        :gap-y="24"
-        font-color="#fa2c19"
-        :content="['nut-ui', 'water-mark']"
-      ></nut-watermark>
-    </nut-cell>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('part') }}</h2>
+    <Part />
+
+    <h2>{{ t('multi') }}</h2>
+    <Multi />
   </Demo>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-const imgSrc = ref(
-  'http://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
-);
-const flag = ref(false);
-const showTextMark = () => {
-  flag.value = false;
-};
-const showImageMark = () => {
-  flag.value = true;
-};
-</script>
-<style lang="scss">
-.watermark-demo {
-  .wrap {
-    width: 100%;
-    height: 240px;
-    display: block;
-    position: relative;
-    background: #fff;
-    > img {
-      width: 100%;
-      max-height: 100%;
-    }
-    .mark1 {
-      width: 100%;
-      top: 50px;
-    }
-    .nut-button {
-      margin-right: 10px;
-    }
-  }
-  .wrap2 {
-    position: relative;
-    z-index: 2;
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Part from './part.vue';
+import Multi from './multi.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    part: '局部用法',
+    multi: '多行水印'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    part: 'Part Usage',
+    multi: 'Multiline Watermark'
   }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/multi.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/multi.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell style="height: 240px">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nutui', 'watermark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/watermark/part.vue b/packages/nutui-taro-demo/src/exhibition/pages/watermark/part.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell>
+    <img :src="src" alt="" style="width: 100%" />
+    <nut-watermark :full-page="false" font-color="#fa2c19" content="nutui"></nut-watermark>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
+</script>
diff --git a/src/packages/__VUE/watermark/demo.vue b/src/packages/__VUE/watermark/demo.vue
diff --git a/src/packages/__VUE/watermark/demo/basic.vue b/src/packages/__VUE/watermark/demo/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-button @click="show = 'text'">Text</nut-button>
+  <span style="margin-right: 10px"></span>
+  <nut-button @click="show = 'image'">Image</nut-button>
+  <span style="margin-right: 10px"></span>
+  <nut-button @click="show = ''">hidden</nut-button>
+  <nut-watermark v-if="show == 'text'" :z-index="999" content="nut-watermark"></nut-watermark>
+  <nut-watermark
+    v-if="show == 'image'"
+    :image-width="60"
+    :image-height="23"
+    :z-index="999"
+    :image="imgSrc"
+  ></nut-watermark>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const imgSrc = ref(
+  'https://img11.360buyimg.com/imagetools/jfs/t1/57345/6/20069/8019/62b995cdEd96fef03/51d3302dfeccd1d2.png'
+);
+const show = ref<'text' | 'image' | ''>('');
+</script>
diff --git a/src/packages/__VUE/watermark/demo/index.vue b/src/packages/__VUE/watermark/demo/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('part') }}</h2>
+    <Part />
+
+    <h2>{{ t('multi') }}</h2>
+    <Multi />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Part from './part.vue';
+import Multi from './multi.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    part: '局部用法',
+    multi: '多行水印'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    part: 'Part Usage',
+    multi: 'Multiline Watermark'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/watermark/demo/multi.vue b/src/packages/__VUE/watermark/demo/multi.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell style="height: 240px">
+    <nut-watermark
+      :full-page="false"
+      :gap-y="24"
+      font-color="#fa2c19"
+      :content="['nutui', 'watermark']"
+    ></nut-watermark>
+  </nut-cell>
+</template>
diff --git a/src/packages/__VUE/watermark/demo/part.vue b/src/packages/__VUE/watermark/demo/part.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-cell>
+    <img :src="src" alt="" style="width: 100%" />
+    <nut-watermark :full-page="false" font-color="#fa2c19" content="nutui"></nut-watermark>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
+</script>