[improvement] Button: jsx (#2447)

packages/button/demo/index.vue

@@ -13,30 +13,26 @@
       <van-button
         plain
         type="primary"
-      >
+        :text="$t('plain')"
-        {{ $t('plain') }}
+      />
-      </van-button>
       <van-button
         plain
         type="danger"
-      >
+        :text="$t('plain')"
-        {{ $t('plain') }}
+      />
-      </van-button>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
       <van-button
         disabled
         type="primary"
-      >
+        :text="$t('disabled')"
-        {{ $t('disabled') }}
+      />
-      </van-button>
       <van-button
         disabled
         type="danger"
-      >
+        :text="$t('disabled')"
-        {{ $t('disabled') }}
+      />
-      </van-button>
     </demo-block>
 
     <demo-block :title="$t('loadingStatus')">
@@ -54,15 +50,13 @@
       <van-button
         type="primary"
         square
-      >
+        :text="$t('square')"
-        {{ $t('square') }}
+      />
-      </van-button>
       <van-button
         type="danger"
         round
-      >
+        :text="$t('round')"
-        {{ $t('round') }}
+      />
-      </van-button>
     </demo-block>
 
     <demo-block :title="$t('size')">

packages/button/index.js

@@ -0,0 +1,69 @@
+import createSfc from '../utils/create';
+import createBem from '../utils/bem';
+
+const bem = createBem('van-button');
+
+export default createSfc({
+  name: 'button',
+
+  props: {
+    text: String,
+    block: Boolean,
+    plain: Boolean,
+    round: Boolean,
+    square: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    nativeType: String,
+    bottomAction: Boolean,
+    tag: {
+      type: String,
+      default: 'button'
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'normal'
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      if (!this.loading && !this.disabled) {
+        this.$emit('click', event);
+      }
+    }
+  },
+
+  render(h) {
+    return (
+      <this.tag
+        type={this.nativeType}
+        disabled={this.disabled}
+        class={bem([
+          this.type,
+          this.size,
+          {
+            block: this.block,
+            plain: this.plain,
+            round: this.round,
+            square: this.square,
+            loading: this.loading,
+            disabled: this.disabled,
+            'bottom-action': this.bottomAction
+          }
+        ])}
+        onClick={this.onClick}
+      >
+        {this.loading ? (
+          <loading size="20px" color={this.type === 'default' ? undefined : ''} />
+        ) : (
+          <span class={bem('text')}>{this.$slots.default || this.text}</span>
+        )}
+      </this.tag>
+    );
+  }
+});

packages/button/index.less

@@ -32,8 +32,11 @@
     opacity: .15;
   }
 
-  &--unclickable::before {
+  &--loading,
-    display: none;
+  &--disabled {
+    &::before {
+      display: none;
+    }
   }
 
   &--default {
@@ -101,7 +104,6 @@
     }
   }
 
-  /* mini图标默认宽度50px，文字不能超过4个 */
   &--mini {
     display: inline-block;
     width: 50px;

packages/button/index.vue

@@ -1,74 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :type="nativeType"
-    :disabled="disabled"
-    :class="b([
-      type,
-      size,
-      {
-        block,
-        plain,
-        round,
-        square,
-        loading,
-        disabled,
-        unclickable: disabled || loading,
-        'bottom-action': bottomAction
-      }
-    ])"
-    @click="onClick"
-  >
-    <loading
-      v-if="loading"
-      size="20px"
-      :color="type === 'default' ? void 0 : ''"
-    />
-    <span
-      v-else
-      :class="b('text')"
-    >
-      <slot>{{ text }}</slot>
-    </span>
-  </component>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'button',
-
-  props: {
-    text: String,
-    block: Boolean,
-    plain: Boolean,
-    round: Boolean,
-    square: Boolean,
-    loading: Boolean,
-    disabled: Boolean,
-    nativeType: String,
-    bottomAction: Boolean,
-    tag: {
-      type: String,
-      default: 'button'
-    },
-    type: {
-      type: String,
-      default: 'default'
-    },
-    size: {
-      type: String,
-      default: 'normal'
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      if (!this.loading && !this.disabled) {
-        this.$emit('click', event);
-      }
-    }
-  }
-});
-</script>

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

@@ -5,26 +5,14 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="demo-button-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button></div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
-      朴素按钮
+  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
-    </span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal van-button--loading">
-      朴素按钮
-    </span></button></div>
-  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
-      禁用状态
-    </span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
-      禁用状态
-    </span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
       <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    </button> <button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
+    </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
       <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
     </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">
+  <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
-      方形按钮
-    </span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">
-      圆形按钮
-    </span></button></div>
   <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
 </div>
 `;

packages/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__tip">
         你的收货地址不支持同城送, 我们已为你推荐快递</div>
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <!---->
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square van-button--loading van-button--unclickable">
+        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square van-button--loading">
           <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </button>
       </div>

packages/submit-bar/test/__snapshots__/index.spec.js.snap

@@ -4,7 +4,7 @@ exports[`submit 1`] = `
 <div class="van-submit-bar">
   <!---->
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 0.00</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text"></span></button>
+    <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 0.00</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled"><span class="van-button__text"></span></button>
   </div>
 </div>
 `;