breaking change: rename GoodsAction to ActionBar

2020-08-20 11:54:04 +08:00
parent 1ad76a8aa3
commit fc825d7a33
22 changed files with 315 additions and 317 deletions
@@ -0,0 +1,64 @@
+import { createNamespace, isDef } from '../utils';
+import { route, routeProps } from '../utils/router';
+import { ChildrenMixin } from '../mixins/relation';
+import Info from '../info';
+import Icon from '../icon';
+
+const [createComponent, bem] = createNamespace('action-bar-icon');
+
+export default createComponent({
+  mixins: [ChildrenMixin('vanActionBar')],
+
+  props: {
+    ...routeProps,
+    dot: Boolean,
+    text: String,
+    icon: String,
+    color: String,
+    info: [Number, String],
+    badge: [Number, String],
+    iconClass: null,
+  },
+
+  emits: ['click'],
+
+  methods: {
+    onClick(event) {
+      this.$emit('click', event);
+      route(this.$router, this);
+    },
+
+    genIcon() {
+      const info = isDef(this.badge) ? this.badge : this.info;
+
+      if (this.$slots.icon) {
+        return (
+          <div class={bem('icon')}>
+            {this.$slots.icon()}
+            <Info dot={this.dot} info={info} />
+          </div>
+        );
+      }
+
+      return (
+        <Icon
+          class={[bem('icon'), this.iconClass]}
+          tag="div"
+          dot={this.dot}
+          info={info}
+          name={this.icon}
+          color={this.color}
+        />
+      );
+    },
+  },
+
+  render() {
+    return (
+      <div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
+        {this.genIcon()}
+        {this.$slots.default ? this.$slots.default() : this.text}
+      </div>
+    );
+  },
+});
@@ -0,0 +1,27 @@
+@import '../style/var';
+
+.van-action-bar-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: @action-bar-icon-width;
+  height: @action-bar-icon-height;
+  color: @action-bar-icon-text-color;
+  font-size: @action-bar-icon-font-size;
+  line-height: 1;
+  text-align: center;
+  background-color: @white;
+  cursor: pointer;
+
+  &:active {
+    background-color: @action-bar-icon-active-color;
+  }
+
+  &__icon {
+    position: relative;
+    width: 1em;
+    margin: 0 auto 5px;
+    color: @action-bar-icon-color;
+    font-size: @action-bar-icon-size;
+  }
+}