[improvement] NavBar: jsx (#2541)

2019-01-16 21:17:16 +08:00
parent 7ed9a5352f
commit 3f60e4701b
3 changed files with 57 additions and 78 deletions
@@ -0,0 +1,53 @@
+import { use } from '../utils';
+import Icon from '../icon';
+
+const [sfc, bem] = use('nav-bar');
+
+export default sfc({
+  props: {
+    title: String,
+    fixed: Boolean,
+    leftText: String,
+    rightText: String,
+    leftArrow: Boolean,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    }
+  },
+
+  render(h) {
+    return (
+      <div
+        class={[bem({ fixed: this.fixed }), { 'van-hairline--bottom': this.border }]}
+        style={{ zIndex: this.zIndex }}
+      >
+        <div
+          class={bem('left')}
+          onClick={() => {
+            this.$emit('click-left');
+          }}
+        >
+          {this.$slots.left || [
+            this.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
+            this.leftText && <span class={bem('text')}>{this.leftText}</span>
+          ]}
+        </div>
+        <div class={[bem('title'), 'van-ellipsis']}>{this.$slots.title || this.title}</div>
+        <div
+          class={bem('right')}
+          onClick={() => {
+            this.$emit('click-right');
+          }}
+        >
+          {this.$slots.right ||
+            (this.rightText && <span class={bem('text')}>{this.rightText}</span>)}
+        </div>
+      </div>
+    );
+  }
+});