feat(Notify): add type prop (#4237)

src/notify/demo/index.vue

@@ -1,19 +1,22 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button
-        type="primary"
-        :text="$t('showNotify')"
-        @click="showNotify"
-      />
+      <van-button type="danger" :text="$t('basicUsage')" @click="showNotify" />
     </demo-block>
 
-    <demo-block :title="$t('customConfig')">
-      <van-button
-        type="primary"
-        :text="$t('showCustomNotify')"
-        @click="showCustomNotify"
-      />
+    <demo-block :title="$t('notifyType')">
+      <div style="margin-bottom: 15px;">
+        <van-button type="info" :text="$t('primary')" @click="showType('primary')" />
+        <van-button type="primary" :text="$t('success')" @click="showType('success')" />
+      </div>
+
+      <van-button type="danger" :text="$t('danger')" @click="showType('danger')" />
+      <van-button type="warning" :text="$t('warning')" @click="showType('warning')" />
+    </demo-block>
+
+    <demo-block :title="$t('customNotify')">
+      <van-button type="primary" :text="$t('customColor')" @click="showCustomColor" />
+      <van-button type="primary" :text="$t('customDuration')" @click="showCustomDuration" />
     </demo-block>
   </demo-section>
 </template>
@@ -22,16 +25,26 @@
 export default {
   i18n: {
     'zh-CN': {
+      primary: '主要通知',
+      success: '成功通知',
+      danger: '危险通知',
+      warning: '警告通知',
       content: '通知内容',
-      customConfig: '自定义配置',
-      showNotify: '显示消息通知',
-      showCustomNotify: '显示自定义消息通知'
+      notifyType: '通知类型',
+      customColor: '自定义颜色',
+      customNotify: '自定义配置',
+      customDuration: '自定义时长'
     },
     'en-US': {
+      primary: 'Primary',
+      success: 'Success',
+      danger: 'Danger',
+      warning: 'Warning',
       content: 'Notify Message',
-      customConfig: 'Custom Config',
-      showNotify: 'Show Notify',
-      showCustomNotify: 'Show Custom Notify'
+      notifyType: 'Notify Type',
+      customColor: 'Custom Color',
+      customNotify: 'Custom Notify',
+      customDuration: 'Custom Duration'
     }
   },
 
@@ -40,11 +53,25 @@ export default {
       this.$notify(this.$t('content'));
     },
 
-    showCustomNotify() {
+    showCustomColor() {
+      this.$notify({
+        message: this.$t('customColor'),
+        color: '#ad0000',
+        background: '#ffe1e1'
+      });
+    },
+
+    showCustomDuration() {
+      this.$notify({
+        message: this.$t('customDuration'),
+        duration: 1000
+      });
+    },
+
+    showType(type) {
       this.$notify({
         message: this.$t('content'),
-        duration: 1000,
-        background: '#1989fa'
+        type
       });
     }
   }
@@ -52,7 +79,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-notify {
   background-color: @white;