base components

@@ -109,6 +109,8 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 <h2>tip</h2>
 <h2>tip</h2>
 可以控制显示，隐藏
 可以控制显示，隐藏
 支持设置，自动消失
 支持设置，自动消失
+<br>
+<button id="show-tip" class="button button-small" type="button">click 显示tip</button>
 
 
 <h2>loading</h2>
 <h2>loading</h2>
 可以控制显示，隐藏
 可以控制显示，隐藏

+<div class="tip">{{txt}}</div>

+/**
+ *  tip
+ *  @author chenxuan <xuan.chen@yoho.cn>
+ *
+ *  @example
+ *  tip('lalalalal~')
+ *
+ * @example
+ *  tip({
+ *     txt: 'lalalalal',
+ *     delay: 2000
+ *  })
+ */
+
+function tip(param) {
+    let timer;
+    const viewData = {
+        mask: false,
+        delay: 2000,
+        txt: ''
+    };
+
+    if (typeof param === 'string') {
+        $.extend(viewData, { txt: param });
+    } else {
+        $.extend(viewData, param);
+    }
+
+    const tipView = `<div class="tip-box"><div class="tip">${viewData.txt}</div></div>`;
+    const $oldTip = $('.tip');
+
+    if ($oldTip.length) {
+        timer = $oldTip.data('timer');
+        clearTimeout(timer);
+        $oldTip.remove();
+    }
+
+    const $tip = $(tipView).appendTo(document.body);
+
+    $tip.data('timer', setTimeout(function() {
+        $tip.remove();
+    }, viewData.delay));
+}
+
+module.exports = tip;

@@ -2,6 +2,7 @@ var Vue = require('yoho-vue');
 
 
 var app = require('example/home.vue');
 var app = require('example/home.vue');
 var tpl = require('example/hello.hbs');
 var tpl = require('example/hello.hbs');
+var tip = require('../common/tip');
 
 
 var vm = new Vue({
 var vm = new Vue({
     el: '#app',
     el: '#app',
@@ -39,5 +40,11 @@ $('#hbs-placeholder').html(tpl({
     text: 'Handlerbars'
     text: 'Handlerbars'
 }));
 }));
 
 
+/* --------------tip demo---------*/
+var tipBtn = document.querySelector('#show-tip');
+tipBtn.addEventListener('click', function(){
+    tip('中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中')
+})
+
 
 
 /* eslint-enable */
 /* eslint-enable */

 .badge {
 .badge {
     min-width: 16px;
     min-width: 16px;
     padding: 3px 7px;
     padding: 3px 7px;
-    border-radius: 10px;
+    border-radius: 9999px;
     font-size: 14px;
     font-size: 14px;
     line-height: 1;
     line-height: 1;
     text-align: center;
     text-align: center;

+.tip-box {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 998;
+    transform: translate(-50%, -50%);
+    display: table;
+    max-width: 90%;
+    min-height: 100px;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 28px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 10px 20px;
+
+    .tip {
+        display: table-cell;
+        vertical-align: middle;
+    }
+}
+