[bugfix] Toptips: 修复toptips在自定义组件中引入报错的问题，backgroundColor不生效的问题 (#318)

packages/toptips/README.md

@@ -30,11 +30,11 @@ Page({
 
 // 使用命令式调用的方式，必须在 wxml 模板中声明组件id，
 // 默认我们使用了 zan-toptips， 如果使用者要更换，可以手动传入
-
-const Toptips = require('path/to/zanui-weapp/dist/toptips/index');
+// 注意和 usingComponents 里引用的路径不一样
+const Toptips = require('path/to/zanui-weapp/dist/toptips/toptips');
 Page({
   customCallback() {
-    Toptips('只穿文案展示');
+    Toptips('只传文案展示');
   }
 })
 

packages/toptips/index.js

@@ -42,33 +42,9 @@ Component({
       this._timer = clearTimeout(this._timer);
 
       this.setData({
-        isShow: false
+        isShow: false,
+        backgroundColor: BG_COLOR
       });
     }
   }
 });
-
-function Toptips(options = {}) {
-  const pages = getCurrentPages();
-  const ctx = pages[pages.length - 1];
-  const defaultOptions = {
-    selector: '#zan-toptips',
-    duration: 3000
-  };
-
-  options = Object.assign(defaultOptions, parseParam(options));
-
-  const $toptips = ctx.selectComponent(options.selector);
-  delete options.selector;
-
-  $toptips.setData({
-    ...options
-  });
-  $toptips && $toptips.show();
-}
-
-function parseParam(params = '') {
-  return typeof params === 'object' ? params : { content: params };
-}
-
-module.exports = Toptips;

packages/toptips/index.wxml

@@ -1 +1 @@
-<view class="zan-toptips {{ isShow ? 'zan-toptips--show' : '' }}">{{ content }}</view>
+<view class="zan-toptips {{ isShow ? 'zan-toptips--show' : '' }}" style="background-color:{{ backgroundColor }}">{{ content }}</view>

packages/toptips/toptips.js

@@ -0,0 +1,25 @@
+
+function Toptips(options = {}) {
+  const pages = getCurrentPages();
+  const ctx = pages[pages.length - 1];
+  const defaultOptions = {
+    selector: '#zan-toptips',
+    duration: 3000
+  };
+
+  options = Object.assign(defaultOptions, parseParam(options));
+
+  const $toptips = ctx.selectComponent(options.selector);
+  delete options.selector;
+
+  $toptips.setData({
+    ...options
+  });
+  $toptips && $toptips.show();
+}
+
+function parseParam(params = '') {
+  return typeof params === 'object' ? params : { content: params };
+}
+
+module.exports = Toptips;