chore(menu): split demo (#2859)

jdf2e · Jan 21, 2024 · 46199f8 · 46199f8
1 parent 98093c5
commit 46199f8
Show file tree

Hide file tree

Showing 20 changed files with 497 additions and 1,095 deletions.
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/basic.vue b/packages/nutui-taro-demo/src/nav/pages/menu/basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/col.vue b/packages/nutui-taro-demo/src/nav/pages/menu/col.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val" :cols="2" :options="options" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val = ref(0);
+const options = ref([
+  { text: '全部商品', value: 0 },
+  { text: '家庭清洁/纸品', value: 1 },
+  { text: '个人护理', value: 2 },
+  { text: '美妆护肤', value: 3 },
+  { text: '食品饮料', value: 4 },
+  { text: '家用电器', value: 5 },
+  { text: '母婴', value: 6 },
+  { text: '数码', value: 7 },
+  { text: '电脑、办公', value: 8 },
+  { text: '运动户外', value: 9 },
+  { text: '厨具', value: 10 },
+  { text: '医疗保健', value: 11 },
+  { text: '酒类', value: 12 },
+  { text: '生鲜', value: 13 },
+  { text: '家具', value: 14 },
+  { text: '传统滋补', value: 15 },
+  { text: '汽车用品', value: 16 },
+  { text: '家居日用', value: 17 }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/color.vue b/packages/nutui-taro-demo/src/nav/pages/menu/color.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-menu active-color="green">
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/custom.vue b/packages/nutui-taro-demo/src/nav/pages/menu/custom.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val" :options="options" />
+    <nut-menu-item ref="item" title="筛选">
+      <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
+        <div :style="{ marginRight: '10px' }">自定义内容</div>
+        <nut-button @click="onClick">确认</nut-button>
+      </div>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const item = ref();
+const val = ref(0);
+const options = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+
+const onClick = () => {
+  item.value.toggle();
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/disabled.vue b/packages/nutui-taro-demo/src/nav/pages/menu/disabled.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu>
+    <nut-menu-item v-model="val1" disabled :options="options1" />
+    <nut-menu-item v-model="val2" disabled :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/icon.vue b/packages/nutui-taro-demo/src/nav/pages/menu/icon.vue
@@ -0,0 +1,30 @@
+<template>
+  <nut-menu>
+    <template #icon>
+      <TriangleDown />
+    </template>
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2">
+      <template #icon>
+        <Checked></Checked>
+      </template>
+    </nut-menu-item>
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/index.vue b/packages/nutui-taro-demo/src/nav/pages/menu/index.vue
@@ -1,102 +1,56 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange" />
-    </nut-menu>
-    <h2>自定义菜单内容</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item ref="item" title="筛选">
-        <div :style="{ display: 'flex', flex: 1, 'justify-content': 'space-between', 'align-items': 'center' }">
-          <div :style="{ marginRight: '10px' }">自定义内容</div>
-          <nut-button @click="onConfirm">确认</nut-button>
-        </div>
-      </nut-menu-item>
-    </nut-menu>
-    <h2>一行两列</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value3" :cols="2" :options="state.options3" />
-    </nut-menu>
-    <h2>自定义选中态颜色</h2>
-    <nut-menu active-color="green">
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange" />
-    </nut-menu>
-    <h2>自定义图标</h2>
-    <nut-menu>
-      <template #icon>
-        <TriangleDown />
-      </template>
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange">
-        <template #icon>
-          <Checked></Checked>
-        </template>
-      </nut-menu-item>
-    </nut-menu>
-    <h2>向上展开</h2>
-    <nut-menu direction="up">
-      <nut-menu-item v-model="state.value1" :options="state.options1" />
-      <nut-menu-item v-model="state.value2" :options="state.options2" @change="handleChange" />
-    </nut-menu>
-    <h2>禁用菜单</h2>
-    <nut-menu>
-      <nut-menu-item v-model="state.value1" disabled :options="state.options1" />
-      <nut-menu-item v-model="state.value2" disabled :options="state.options2" @change="handleChange" />
-    </nut-menu>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('col') }}</h2>
+    <Col />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
+
+    <h2>{{ t('up') }}</h2>
+    <Up />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
-const state = reactive({
-  options1: [
-    { text: '全部商品', value: 0 },
-    { text: '新款商品', value: 1 },
-    { text: '活动商品', value: 2 }
-  ],
-  options2: [
-    { text: '默认排序', value: 'a' },
-    { text: '好评排序', value: 'b' },
-    { text: '销量排序', value: 'c' }
-  ],
-  options3: [
-    { text: '全部商品', value: 0 },
-    { text: '家庭清洁/纸品', value: 1 },
-    { text: '个人护理', value: 2 },
-    { text: '美妆护肤', value: 3 },
-    { text: '食品饮料', value: 4 },
-    { text: '家用电器', value: 5 },
-    { text: '母婴', value: 6 },
-    { text: '数码', value: 7 },
-    { text: '电脑、办公', value: 8 },
-    { text: '运动户外', value: 9 },
-    { text: '厨具', value: 10 },
-    { text: '医疗保健', value: 11 },
-    { text: '酒类', value: 12 },
-    { text: '生鲜', value: 13 },
-    { text: '家具', value: 14 },
-    { text: '传统滋补', value: 15 },
-    { text: '汽车用品', value: 16 },
-    { text: '家居日用', value: 17 }
-  ],
-  value1: 0,
-  value2: 'a',
-  value3: 0
-});
-
-const item = ref('');
-
-const onConfirm = () => {
-  item.value.toggle();
-};
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Col from './col.vue';
+import Color from './color.vue';
+import IconDemo from './icon.vue';
+import Up from './up.vue';
+import Disabled from './disabled.vue';
 
-const handleChange = (val) => {
-  console.log('val', val);
-};
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义菜单内容',
+    col: '一行两列',
+    color: '自定义选中态颜色',
+    icon: '自定义图标',
+    up: '向上展开',
+    disabled: '禁用菜单'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Menu Content',
+    col: 'Two Cols In One Line',
+    color: 'Custom Active Color',
+    icon: 'Custom Icons',
+    up: 'Expand Direction',
+    disabled: 'Disable Menu'
+  }
+});
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/packages/nutui-taro-demo/src/nav/pages/menu/up.vue b/packages/nutui-taro-demo/src/nav/pages/menu/up.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-menu direction="up">
+    <nut-menu-item v-model="val1" :options="options1" />
+    <nut-menu-item v-model="val2" :options="options2" @change="onChange" />
+  </nut-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const val1 = ref(0);
+const val2 = ref('a');
+const options1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+]);
+const options2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+]);
+
+const onChange = (val) => {
+  console.log('val', val);
+};
+</script>