chore(overlay): split demo (#2735)

jdf2e · Dec 13, 2023 · d2d661b · d2d661b
1 parent afa522b
commit d2d661b
Show file tree

Hide file tree

Showing 18 changed files with 350 additions and 609 deletions.
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/basic.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-button type="primary" @click="show = true">open</nut-button>
+  <nut-overlay v-model:visible="show"></nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/close.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/close.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-button type="primary" @click="show = true">close-on-click-overlay</nut-button>
+  <nut-overlay v-model:visible="show" :close-on-click-overlay="false">
+    <div class="overlay-body">
+      <div class="overlay-content" @click.stop="show = false">close</div>
+    </div>
+  </nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
+<style>
+.overlay-body {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.overlay-content {
+  display: flex;
+  width: 150px;
+  height: 150px;
+  background: #fff;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/duration.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/duration.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-button type="primary" @click="show = true">duration</nut-button>
+  <nut-overlay v-model:visible="show" :duration="2.5"></nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/index.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/index.vue
@@ -1,76 +1,50 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-button type="primary" @click="state.show = true">显示遮罩层</nut-button>
-      <nut-overlay v-model:visible="state.show" :z-index="2000"></nut-overlay>
-    </nut-cell>
-    <h2>遮罩样式</h2>
-    <nut-cell>
-      <nut-button type="primary" @click="state.show3 = true">显示遮罩层</nut-button>
-      <nut-overlay v-model:visible="state.show3" :z-index="2000" :overlay-style="state.overlayStyle"></nut-overlay>
-    </nut-cell>
-    <h2>设置动画时间</h2>
-    <nut-cell>
-      <nut-button type="primary" @click="state.show4 = true">设置动画时间</nut-button>
-      <nut-overlay v-model:visible="state.show4" :duration="2.5"></nut-overlay>
-    </nut-cell>
-    <h2>锁定背景滚动</h2>
-    <nut-cell>
-      <nut-button type="primary" @click="state.show5 = true">锁定背景滚动</nut-button>
-      <nut-overlay v-model:visible="state.show5" lock-scroll></nut-overlay>
-    </nut-cell>
-    <h2>嵌套内容</h2>
-    <nut-cell>
-      <nut-button type="success" @click="state.show2 = true">嵌套内容</nut-button>
-      <nut-overlay v-model:visible="state.show2" :z-index="2000">
-        <div class="wrapper">
-          <div class="content">这里是正文</div>
-        </div>
-      </nut-overlay>
-    </nut-cell>
-    <h2>点击遮罩不关闭</h2>
-    <nut-cell>
-      <nut-button type="primary" @click="state.show6 = true">点击遮罩不关闭</nut-button>
-      <nut-overlay v-model:visible="state.show6" lock-scroll :close-on-click-overlay="false">
-        <div class="wrapper">
-          <div class="content" @click.stop="state.show6 = false">close</div>
-        </div>
-      </nut-overlay>
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('mask') }}</h2>
+    <Mask />
+
+    <h2>{{ t('duration') }}</h2>
+    <Duration />
+
+    <h2>{{ t('lock') }}</h2>
+    <Lock />
+
+    <h2>{{ t('nest') }}</h2>
+    <Nest />
+
+    <h2>{{ t('close') }}</h2>
+    <Close />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-const state = reactive({
-  show: false,
-  show2: false,
-  show3: false,
-  show4: false,
-  show5: false,
-  show6: false,
-  overlayStyle: {
-    backgroundColor: 'rgba(0, 0, 0, .2)'
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Mask from './mask.vue';
+import Duration from './duration.vue';
+import Lock from './lock.vue';
+import Nest from './nest.vue';
+import Close from './close.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    mask: '遮罩样式',
+    duration: '设置动画时间',
+    lock: '锁定背景滚动',
+    nest: '嵌套内容',
+    close: '点击遮罩不关闭'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    mask: 'Mask style',
+    duration: 'Set animation time',
+    lock: 'Lock Background Scroll',
+    nest: 'Nested content',
+    close: 'Click the mask not to close'
   }
 });
 </script>
-
-<style lang="scss">
-.wrapper {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  .content {
-    display: flex;
-    width: 150px;
-    height: 150px;
-    background: #fff;
-    border-radius: 8px;
-    align-items: center;
-    justify-content: center;
-    color: red;
-  }
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/lock.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/lock.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-button type="primary" @click="show = true">lock-scroll</nut-button>
+  <nut-overlay v-model:visible="show" :lock-scroll="true"></nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/mask.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/mask.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-button type="primary" @click="show = true">style</nut-button>
+  <nut-overlay
+    v-model:visible="show"
+    :overlay-style="{
+      backgroundColor: 'rgba(0, 0, 0, .2)'
+    }"
+  ></nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/overlay/nest.vue b/packages/nutui-taro-demo/src/basic/pages/overlay/nest.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-button type="success" @click="show = true">content</nut-button>
+  <nut-overlay v-model:visible="show">
+    <div class="overlay-body">
+      <div class="overlay-content">text</div>
+    </div>
+  </nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
+<style>
+.overlay-body {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.overlay-content {
+  display: flex;
+  width: 150px;
+  height: 150px;
+  background: #fff;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+}
+</style>
diff --git a/src/packages/__VUE/overlay/demo.vue b/src/packages/__VUE/overlay/demo.vue
diff --git a/src/packages/__VUE/overlay/demo/basic.vue b/src/packages/__VUE/overlay/demo/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-button type="primary" @click="show = true">open</nut-button>
+  <nut-overlay v-model:visible="show"></nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/overlay/demo/close.vue b/src/packages/__VUE/overlay/demo/close.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-button type="primary" @click="show = true">close-on-click-overlay</nut-button>
+  <nut-overlay v-model:visible="show" :close-on-click-overlay="false">
+    <div class="overlay-body">
+      <div class="overlay-content" @click.stop="show = false">close</div>
+    </div>
+  </nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>
+<style>
+.overlay-body {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.overlay-content {
+  display: flex;
+  width: 150px;
+  height: 150px;
+  background: #fff;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+}
+</style>
diff --git a/src/packages/__VUE/overlay/demo/duration.vue b/src/packages/__VUE/overlay/demo/duration.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-button type="primary" @click="show = true">duration</nut-button>
+  <nut-overlay v-model:visible="show" :duration="2.5"></nut-overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+</script>