[improvement] Badge: jsx (#2440)

packages/badge-group/index.js

@@ -1,13 +1,3 @@
-<template>
-  <div
-    :class="b()"
-    class="van-hairline--top-bottom"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
 import create from '../utils/create';
 
 export default create({
@@ -30,6 +20,13 @@ export default create({
     return {
       badges: []
     };
+  },
+
+  render(h) {
+    return (
+      <div class={['van-hairline--top-bottom', this.b()]}>
+        {this.$slots.default}
+      </div>
+    );
   }
 });
-</script>

packages/badge/index.js

@@ -1,30 +1,9 @@
-<template>
-  <a
-    :class="[b({ select }), 'van-hairline']"
-    :href="url"
-    @click="onClick"
-  >
-    <div :class="b('text')">
-      {{ title }}
-      <van-info
-        :info="info"
-        :class="b('info')"
-      />
-    </div>
-  </a>
-</template>
-
-<script>
 import Info from '../info';
 import create from '../utils/create';
 
 export default create({
   name: 'badge',
 
-  components: {
-    [Info.name]: Info
-  },
-
   props: {
     url: String,
     info: [String, Number],
@@ -50,9 +29,7 @@ export default create({
     },
 
     select() {
-      return (
+      return this.parent.badges.indexOf(this) === +this.parent.activeKey;
-        this.parent.badges.indexOf(this) === +this.parent.activeKey
-      );
     }
   },
 
@@ -62,6 +39,20 @@ export default create({
       this.$emit('click', index);
       this.parent.$emit('change', index);
     }
+  },
+
+  render(h) {
+    return (
+      <a
+        href={this.url}
+        class={[this.b({ select: this.select }), 'van-hairline']}
+        onClick={this.onClick}
+      >
+        <div class={this.b('text')}>
+          {this.title}
+          <Info info={this.info} class={this.b('info')} />
+        </div>
+      </a>
+    );
   }
 });
-</script>

packages/badge/test/__snapshots__/demo.spec.js.snap

@@ -4,24 +4,17 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-hairline--top-bottom van-badge-group"><a class="van-badge van-badge--select van-hairline">
-        <div class="van-badge__text">
+        <div class="van-badge__text">标签名称
-          标签名称
           <!---->
         </div>
       </a> <a class="van-badge van-hairline">
-        <div class="van-badge__text">
+        <div class="van-badge__text">标签名称<div class="van-info van-badge__info">8</div>
-          标签名称
-          <div class="van-info van-badge__info">8</div>
         </div>
       </a> <a class="van-badge van-hairline">
-        <div class="van-badge__text">
+        <div class="van-badge__text">标签名称<div class="van-info van-badge__info">99</div>
-          标签名称
-          <div class="van-info van-badge__info">99</div>
         </div>
       </a> <a class="van-badge van-hairline">
-        <div class="van-badge__text">
+        <div class="van-badge__text">标签名称<div class="van-info van-badge__info">99+</div>
-          标签名称
-          <div class="van-info van-badge__info">99+</div>
         </div>
       </a></div>
   </div>