[new feature] add DropdownMenu component

2019-05-06 20:12:37 +08:00
parent 9c9642ee1f
commit a26be4819c
18 changed files with 816 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { use } from '../utils';
+import { BLUE } from '../utils/color';
+
+const [sfc, bem] = use('dropdown-menu');
+
+export default sfc({
+  props: {
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    activeColor: {
+      type: String,
+      default: BLUE
+    }
+  },
+
+  provide() {
+    return {
+      vanDropdownMenu: this
+    };
+  },
+
+  data() {
+    return {
+      top: 0,
+      items: []
+    };
+  },
+
+  methods: {
+    toggleItem(active) {
+      const { menu } = this.$refs;
+      const rect = menu.getBoundingClientRect();
+      this.top = rect.y + rect.height;
+
+      this.items.forEach((item, index) => {
+        if (index === active) {
+          item.toggle();
+        } else {
+          item.toggle(false);
+        }
+      });
+    }
+  },
+
+  render(h) {
+    const Titles = this.items.map((item, index) => (
+      <div
+        class={bem('item')}
+        onClick={() => {
+          this.toggleItem(index);
+        }}
+      >
+        <span
+          class={bem('title', { active: item.show })}
+          style={{ color: item.show ? this.activeColor : '' }}
+        >
+          {item.displayTitle}
+        </span>
+      </div>
+    ));
+
+    return (
+      <div ref="menu" class={[bem(), 'van-hairline--top-bottom']}>
+        {Titles}
+        {this.slots('default')}
+      </div>
+    );
+  }
+});