update toptips

LuckyCrystalM · Feb 9, 2017 · d306999 · d306999
1 parent 23cc633
commit d306999
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git a/components/toptips/toptips.js b/components/toptips/toptips.js
@@ -66,6 +66,8 @@ class wux {
 			 * 默认参数
 			 */
 			defaults: {
+				icon: 'cancel', 
+				hide: !1, 
 				text: '', 
 				timer: 3000, 
 				className: '', 
@@ -74,6 +76,8 @@ class wux {
 			/**
 			 * 显示toptips组件
 			 * @param {Object} opts 参数对象
+			 * @param {String} opts.icon 图标类型
+			 * @param {Boolean} opts.hide 是否隐藏图标
 			 * @param {String} opts.text 报错文本
 			 * @param {Number} opts.timer 多少毫秒后消失
 			 * @param {String} opts.className 添加自定义类
@@ -105,6 +109,26 @@ class wux {
 
 				return _toptips.hide
 			},
+			success(opts = {}) {
+				return this.show(extend({
+					icon: 'success', 
+				}, opts))
+			},
+			info(opts = {}) {
+				return this.show(extend({
+					icon: 'info', 
+				}, opts))
+			},
+			warn(opts = {}) {
+				return this.show(extend({
+					icon: 'warn', 
+				}, opts))
+			},
+			error(opts = {}) {
+				return this.show(extend({
+					icon: 'cancel', 
+				}, opts))
+			},
 		}
 	}
 

diff --git a/components/toptips/toptips.wxml b/components/toptips/toptips.wxml
@@ -1,5 +1,6 @@
 <template name="toptips">
-	<view class="weui-toptips weui-toptips_warn {{ animateCss }} {{ className }}" hidden="{{ !visible }}">
+	<view class="weui-toptips {{ icon ? 'weui-toptips_' + icon : 'weui-toptips_cancel' }} {{ animateCss }} {{ className }}" hidden="{{ !visible }}">
 		{{ text }}
+		<icon wx:if="{{ icon && !hide }}" class="weui-toptips_icon" type="{{ icon }}" size="24" color="#fff" />
 	</view>
 </template>
diff --git a/components/wux.wxss b/components/wux.wxss
@@ -392,6 +392,26 @@
 	height: 100%;
 }
 
+.weui-toptips_success {
+	background-color: #09bb08 !important;
+}
+
+.weui-toptips_info {
+	background-color: #10aefe !important;
+}
+
+.weui-toptips_warn {
+	background-color: #ffbe00 !important;
+}
+
+.weui-toptips_cancel {
+	background-color: #E64340 !important;
+}
+
+.weui-toptips_icon {
+	float: left;
+}
+
 .wux-number-input {
     float: left;
     width: 32px;

diff --git a/pages/toptips/index.js b/pages/toptips/index.js
@@ -64,9 +64,9 @@ Page({
 			return false
 		}
 
-		this.$wuxToptips.show({
+		this.$wuxToptips.success({
+			hide: !0, 
 			text: '提交成功', 
-			className: 'bg-success', 
 		})
 	},
 	initValidate() {

diff --git a/pages/toptips/index.wxss b/pages/toptips/index.wxss
@@ -1,4 +1 @@
-/* pages/toptips/index.wxss */
-.bg-success {
-	background-color: #4cd964;
-}
+/* pages/toptips/index.wxss */