docs(Button): add gradient color demo (#4454)

src/button/README.md

@@ -84,8 +84,9 @@ Vue.use(Button);
 ### Custom Color
 
 ```html
-<van-button color="#7232dd">Custom Color</van-button>
-<van-button color="#7232dd" plain>Custom Color</van-button>
+<van-button color="#7232dd">Pure</van-button>
+<van-button color="#7232dd" plain>Pure</van-button>
+<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
 ```
 
 ## API

src/button/README.zh-CN.md

@@ -104,8 +104,9 @@ Vue.use(Button);
 通过`color`属性可以自定义按钮的颜色
 
 ```html
-<van-button color="#7232dd">自定义颜色</van-button>
-<van-button color="#7232dd" plain>自定义颜色</van-button>
+<van-button color="#7232dd">单色按钮</van-button>
+<van-button color="#7232dd" plain>单色按钮</van-button>
+<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
 ```
 
 ## API

src/button/demo/index.vue

@@ -60,8 +60,9 @@
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-button color="#7232dd" :text="$t('customColor')" />
-      <van-button plain color="#7232dd" :text="$t('customColor')" />
+      <van-button color="#7232dd" :text="$t('pure')" />
+      <van-button plain color="#7232dd" :text="$t('pure')" />
+      <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
     </demo-block>
   </demo-section>
 </template>
@@ -93,7 +94,9 @@ export default {
       router: '页面导航',
       urlRoute: 'URL 跳转',
       vueRoute: '路由跳转',
-      customColor: '自定义颜色'
+      customColor: '自定义颜色',
+      pure: '单色按钮',
+      gradient: '渐变色按钮'
     },
     'en-US': {
       type: 'Type',
@@ -119,7 +122,9 @@ export default {
       router: 'Router',
       urlRoute: 'URL',
       vueRoute: 'Vue Router',
-      customColor: 'Custom Color'
+      customColor: 'Custom Color',
+      pure: 'Pure',
+      gradient: 'Gradient'
     }
   }
 };

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

@@ -24,6 +24,6 @@ exports[`renders demo correctly 1`] = `
       </i><span class="van-button__text">按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
-  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button></div>
+  <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
 </div>
 `;