[improvement] Tabbar: jsx (#2663)

packages/tabbar/index.js

@@ -1,19 +1,8 @@
-<template>
-  <div
-    class="van-hairline--top-bottom"
-    :class="b({ fixed })"
-    :style="style"
-  >
-    <slot />
-  </div>
-</template>
+import { use } from '../utils';
 
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'tabbar',
+const [sfc, bem] = use('tabbar');
 
+export default sfc({
   data() {
     return {
       items: []
@@ -33,14 +22,6 @@ export default create({
     }
   },
 
-  computed: {
-    style() {
-      return {
-        zIndex: this.zIndex
-      };
-    }
-  },
-
   watch: {
     items() {
       this.setActiveItem();
@@ -64,6 +45,16 @@ export default create({
         this.$emit('change', active);
       }
     }
+  },
+
+  render(h) {
+    return (
+      <div
+        style={{ zIndex: this.zIndex }}
+        class={['van-hairline--top-bottom', bem({ fixed: this.fixed })]}
+      >
+        {this.$slots.default}
+      </div>
+    );
   }
 });
-</script>