fix(ui): 重构menu 重写menu example

affects: @varlet/cli, @varlet/ui
varletjs · Mar 9, 2021 · edacc76 · edacc76
1 parent 24f3177
commit edacc76
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 62 deletions.
diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json
@@ -71,6 +71,13 @@
         },
         "doc": "popup"
       },
+      {
+        "text": {
+          "zh-CN": "Menu 菜单",
+          "en-US": "Menu"
+        },
+        "doc": "menu"
+      },
       {
         "text": {
           "zh-CN": "Loading 加载",
@@ -141,13 +148,6 @@
         },
         "doc": "sticky"
       },
-      {
-        "text": {
-          "zh-CN": "Menu 菜单",
-          "en-US": "Menu"
-        },
-        "doc": "menu"
-      },
       {
         "text": {
           "zh-CN": "Lazy 懒加载",

diff --git a/packages/varlet-ui/src/menu/Menu.vue b/packages/varlet-ui/src/menu/Menu.vue
@@ -57,14 +57,20 @@ export default defineComponent({
         return
       }
 
+      const { show, onBlur } = props
+
+      if (!show) {
+        return
+      }
+
       props['onUpdate:show']?.(false)
-      props.onBlur?.()
+      onBlur?.()
     }
 
     watch(
       () => props.alignment,
       (newValue: string) => {
-        props.show === true && (top.value = computeTop(newValue))
+        props.show && (top.value = computeTop(newValue))
       }
     )
 
@@ -103,6 +109,5 @@ export default defineComponent({
 </script>
 
 <style lang="less">
-@import '../styles/elevation';
 @import './menu';
 </style>
diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
@@ -1,48 +1,157 @@
 <template>
-  <var-menu v-model:show="show" alignment="bottom" style="margin-top: 200px">
-    <var-button @click="show = true">trigger</var-button>
+  <app-type>对齐方式</app-type>
+  <div class="block-1">
+    <var-menu v-model:show="top">
+      <var-button @click="top = true">顶部对齐</var-button>
+
+      <template #menu>
+        <div class="cell-list">
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+        </div>
+      </template>
+    </var-menu>
+  </div>
+
+  <div class="block">
+    <var-menu alignment="bottom" v-model:show="bottom">
+      <var-button @click="bottom = true">底部对齐</var-button>
+
+      <template #menu>
+        <div class="cell-list">
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+        </div>
+      </template>
+    </var-menu>
+  </div>
+
+  <app-type>偏移量</app-type>
+
+  <div class="block-1">
+    <var-menu :offset-x="72" v-model:show="offsetX">
+      <var-button @click="offsetX = true">右偏移</var-button>
+
+      <template #menu>
+        <div class="cell-list">
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+        </div>
+      </template>
+    </var-menu>
+
+    <var-menu :offset-x="-72" v-model:show="offsetX1">
+      <var-button @click="offsetX1 = true">左偏移</var-button>
+
+      <template #menu>
+        <div class="cell-list">
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+        </div>
+      </template>
+    </var-menu>
+  </div>
+
+  <div class="block-2">
+    <var-menu :offset-y="36" v-model:show="offsetY">
+      <var-button @click="offsetY = true">下偏移</var-button>
+
+      <template #menu>
+        <div class="cell-list">
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+        </div>
+      </template>
+    </var-menu>
+
+    <var-menu :offset-y="-36" v-model:show="offsetY1">
+      <var-button @click="offsetY1 = true">上偏移</var-button>
+
+      <template #menu>
+        <div class="cell-list">
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+          <var-cell>菜单项</var-cell>
+        </div>
+      </template>
+    </var-menu>
+  </div>
+
+  <app-type>注册事件</app-type>
+  <var-menu v-model:show="event" @blur="() => Snackbar.success('blur')">
+    <var-button @click="event = true">注册事件</var-button>
 
     <template #menu>
-      <div class="list">
-        <div class="item" v-ripple>1</div>
-        <div class="item" v-ripple>2</div>
-        <div class="item" v-ripple>3</div>
-        <div class="item" v-ripple>4</div>
+      <div class="cell-list">
+        <var-cell>菜单项</var-cell>
+        <var-cell>菜单项</var-cell>
+        <var-cell>菜单项</var-cell>
       </div>
     </template>
   </var-menu>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, Ref } from 'vue'
+<script>
 import Menu from '..'
 import Button from '../../button'
-import Ripple from '../../ripple'
+import Cell from '../../cell'
+import Snackbar from '../../snackbar'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import { ref } from 'vue'
 
-export default defineComponent({
+export default {
   name: 'MenuExample',
-  directives: {
-    Ripple,
-  },
   components: {
     [Menu.name]: Menu,
     [Button.name]: Button,
+    [Cell.name]: Cell,
+    AppType,
   },
   setup() {
-    const show: Ref<boolean> = ref(false)
+    const top = ref(false)
+    const bottom = ref(false)
+    const offsetX = ref(false)
+    const offsetX1 = ref(false)
+    const offsetY = ref(false)
+    const offsetY1 = ref(false)
+    const event = ref(false)
 
     return {
-      show,
+      top,
+      bottom,
+      offsetX,
+      offsetX1,
+      offsetY,
+      offsetY1,
+      event,
+      Snackbar,
     }
   },
-})
+}
 </script>
 
 <style scoped lang="less">
-.list {
-  .item {
-    width: 70vw;
-    padding: 10px 20px;
-  }
+.cell-list {
+  background: #fff;
+}
+
+.block {
+  margin-top: 130px;
+}
+
+.block-1 {
+  display: flex;
+  justify-content: space-between;
+}
+
+.block-2 {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 130px;
 }
 </style>
diff --git a/packages/varlet-ui/src/menu/menu.less b/packages/varlet-ui/src/menu/menu.less
@@ -1,31 +1,25 @@
+@import '../styles/common';
+@import '../styles/elevation';
+
 @menu-background: #fff;
 
 .var {
-	&-menu-enter-from,
-	&-menu-leave-to {
-		transform: scale(0.3);
-		opacity: 0;
-	}
-	&-menu-enter-active,
-	&-menu-leave-active {
-		transition-property: opacity, transform;
-		transition-duration: 0.3s;
-	}
+  &-menu-enter-from,
+  &-menu-leave-to {
+    opacity: 0;
+  }
+  &-menu-enter-active,
+  &-menu-leave-active {
+    transition-property: opacity;
+    transition-duration: 0.3s;
+  }
 }
 
 .var-menu {
-	display: inline-block;
-	background: @menu-background;
-
-	&__menu {
-		position: absolute;
-	}
-
-	&--origin-top {
-		transform-origin: 0 0;
-	}
+  display: inline-block;
+  background: @menu-background;
 
-	&--origin-bottom {
-		transform-origin: 0 100%;
-	}
+  &__menu {
+    position: absolute;
+  }
 }
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
@@ -69,6 +69,13 @@ module.exports = {
         },
         doc: 'popup',
       },
+      {
+        text: {
+          'zh-CN': 'Menu 菜单',
+          'en-US': 'Menu',
+        },
+        doc: 'menu',
+      },
       {
         text: {
           'zh-CN': 'Loading 加载',
@@ -139,13 +146,6 @@ module.exports = {
         },
         doc: 'sticky',
       },
-      {
-        text: {
-          'zh-CN': 'Menu 菜单',
-          'en-US': 'Menu',
-        },
-        doc: 'menu',
-      },
       {
         text: {
           'zh-CN': 'Lazy 懒加载',