新增 徽章demo

Author: kouchao

src/App.vue

@@ -66,7 +66,8 @@
             </template>
             <lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
               <lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
-              <lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
+            <lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
+            <lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
 
           </lay-menu-item>
         </lay-menu>

src/router.js

@@ -6,6 +6,7 @@ import Grid from './views/Grid.vue'
 import Button from './views/Button.vue'
 import Form from './views/Form.vue'
 import Nav from './views/Nav.vue'
+import Badge from './views/Badge.vue'
 
 Vue.use(Router)
 
@@ -40,6 +41,11 @@ export default new Router({
 			path: '/nav',
 			name: 'nav',
 			component: Nav
+		},
+		{
+			path: '/badge',
+			name: 'badge',
+			component: Badge
 		}
 
 

src/views/Badge.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="demo">
+        <lay-block title="小徽章、大家族"></lay-block>
+
+        <div style="margin: 10px 30px">
+            小圆点：
+            <lay-badge type="dot"></lay-badge>
+            <lay-badge type="dot" theme="orange"></lay-badge>
+            <lay-badge type="dot" theme="green"></lay-badge>
+            <lay-badge type="dot" theme="cyan"></lay-badge>
+            <lay-badge type="dot" theme="blue"></lay-badge>
+            <lay-badge type="dot" theme="black"></lay-badge>
+            <lay-badge type="dot" theme="gray"></lay-badge>
+        </div>
+        <div style="margin: 15px 30px">
+            常规弧形徽章：
+            <lay-badge>6</lay-badge>
+            <lay-badge>99</lay-badge>
+            <lay-badge>61728</lay-badge>
+            <lay-badge>赤</lay-badge>
+            <lay-badge theme="orange">橙</lay-badge>
+            <lay-badge theme="green">绿</lay-badge>
+            <lay-badge theme="cyan">青</lay-badge>
+            <lay-badge theme="blue">蓝</lay-badge>
+            <lay-badge theme="black">黑</lay-badge>
+            <lay-badge theme="gray">灰</lay-badge>
+        </div>
+        <div style="margin: 15px 30px">
+            边框徽章：
+            <lay-badge type="rim">6</lay-badge>
+            <lay-badge type="rim">Hot</lay-badge>
+        </div>
+
+        <lay-block title="与其它元素的搭配"></lay-block>
+
+        <lay-button>查看消息<lay-badge theme="gray">1</lay-badge></lay-button>
+        <lay-button>动态<lay-badge type="dot" theme="orange"></lay-badge></lay-button>
+
+        <br>
+        <br>
+        <lay-menu mode="horizontal">
+            <lay-menu-item :index="0">
+                <template slot="title">
+                    控制台<lay-badge>9</lay-badge>
+                </template>
+            </lay-menu-item>
+            <lay-menu-item :index="1">
+                <template slot="title">
+                    个人中心<lay-badge type="dot"></lay-badge>
+                </template>
+            </lay-menu-item>
+        </lay-menu>
+        <br>
+        <br>
+        <!--TODO: tab的徽章展示-->
+        <lay-block color="#FFB800">暂缺tab的徽章展示</lay-block>
+    </div>
+</template>
+
+<script>
+	export default {
+		name: "Badge"
+	}
+</script>
+
+<style>
+    .demo .layui-badge, .demo .layui-badge-dot, .demo .layui-badge-rim {
+        margin-left: 3px;
+    }
+</style>

src/views/Form.vue

@@ -2,7 +2,7 @@
     <div>
 
         <lay-block>本模块与layui的验证方式完全不同。</lay-block>
-
+        <lay-block color="#FFB800">表单验证有一些小问题</lay-block>
         <lay-block title="表单集合演示"></lay-block>
         <lay-form :model="form" :rules="rules" ref="form">
             <lay-form-item label="单行输入框" prop="first" block>