feat: migrate Sidebar component

2020-07-12 15:24:05 +08:00
parent 75d76d2cec
commit 08e03e988f
11 changed files with 649 additions and 1 deletions
@@ -0,0 +1,51 @@
+import { createNamespace } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
+import { route, routeProps } from '../utils/router';
+import Info from '../info';
+
+const [createComponent, bem] = createNamespace('sidebar-item');
+
+export default createComponent({
+  mixins: [ChildrenMixin('vanSidebar')],
+
+  props: {
+    ...routeProps,
+    dot: Boolean,
+    badge: [Number, String],
+    title: String,
+    disabled: Boolean,
+  },
+
+  computed: {
+    select() {
+      return this.index === +this.parent.modelValue;
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.$emit('click', this.index);
+      this.parent.$emit('update:modelValue', this.index);
+      this.parent.setIndex(this.index);
+      route(this.$router, this);
+    },
+  },
+
+  render() {
+    return (
+      <a
+        class={bem({ select: this.select, disabled: this.disabled })}
+        onClick={this.onClick}
+      >
+        <div class={bem('text')}>
+          {this.title}
+          <Info dot={this.dot} info={this.badge} class={bem('info')} />
+        </div>
+      </a>
+    );
+  },
+});
@@ -0,0 +1,59 @@
+@import '../style/var';
+
+.van-sidebar-item {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  padding: @sidebar-padding;
+  overflow: hidden;
+  color: @sidebar-text-color;
+  font-size: @sidebar-font-size;
+  line-height: @sidebar-line-height;
+  word-wrap: break-word;
+  background-color: @sidebar-background-color;
+  cursor: pointer;
+  user-select: none;
+
+  &:active {
+    background-color: @sidebar-active-color;
+  }
+
+  &__text {
+    position: relative;
+    display: inline-block;
+  }
+
+  &:not(:last-child)::after {
+    border-bottom-width: 1px;
+  }
+
+  &--select {
+    color: @sidebar-selected-text-color;
+    font-weight: @sidebar-selected-font-weight;
+
+    &,
+    &:active {
+      background-color: @sidebar-selected-background-color;
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: @sidebar-selected-border-width;
+      height: @sidebar-selected-border-height;
+      background-color: @sidebar-selected-border-color;
+      transform: translateY(-50%);
+      content: '';
+    }
+  }
+
+  &--disabled {
+    color: @sidebar-disabled-text-color;
+    cursor: not-allowed;
+
+    &:active {
+      background-color: @sidebar-background-color;
+    }
+  }
+}