add Tag

src/code/tag.js

@@ -0,0 +1,120 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-tag": "../../dist/tag/index"
+}
+`;
+code.usage = `
+基本用法
+
+<i-tag>标签一</i-tag>
+
+设置边框配置
+
+<i-tag 
+    class="i-tags"
+    name="标签一" 
+    type="border" 
+    color="red">
+    标签一
+</i-tag>
+<i-tag 
+    class="i-tags"
+    name="标签一" 
+    color="green"
+    type="border">
+    标签一
+</i-tag>
+
+各种颜色配置
+
+<i-tag 
+    class="i-tags"
+    name="单个标签">
+    标签一
+</i-tag>
+<i-tag 
+    class="i-tags"
+    name="单个标签" 
+    color="red">
+    标签一
+</i-tag>
+<i-tag 
+    class="i-tags" 
+    name="标签一" 
+    color="green">
+    标签一
+</i-tag>
+<i-tag 
+    class="i-tags" 
+    name="标签一" 
+    color="blue">
+    标签一
+</i-tag>
+<i-tag 
+    class="i-tags" 
+    name="标签一" 
+    color="yellow">
+    标签一
+</i-tag>
+
+多个标签
+
+<i-tag 
+    wx:for="{{tags}}" 
+    wx:key="{{index}}"
+    bindchange="onChange" 
+    checkable="{{true}}" 
+    name="{{index}}" 
+    color="{{item.color}}" 
+    checked="{{item.checked}}" 
+    type="border"
+    style="margin-right:5px;">
+    {{item.name}}
+</i-tag>
+`;
+
+code.js = `
+Page({
+    data : {
+        oneChecked : false,
+        tags : [
+            {
+                name : '标签一',
+                checked : false,
+                color : 'default'
+            },
+            {
+                name : '标签二',
+                checked : false,
+                color : 'red'
+            },
+            {
+                name : '标签三',
+                checked : true,
+                color : 'blue'
+            },
+            {
+                name : '标签4️',
+                checked : true,
+                color : 'green'
+            }
+        ]
+    },
+    oneChange(event){
+        this.setData({
+            'oneChecked' : event.detail.checked
+        })
+    },
+    onChange(event){
+        const detail = event.detail;
+        this.setData({
+            ['tags['+event.detail.name+'].checked'] : detail.checked
+        })
+        
+    }
+});
+`;
+
+export default code;

src/router.js

@@ -170,6 +170,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/alert.vue'], resolve)
     },
+    {
+        path: '/components/tag',
+        meta: {
+            title: '标签 Tag'
+        },
+        component: (resolve) => require(['./views/components/tag.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'

src/views/components/tag.vue

@@ -0,0 +1,109 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Tag 标签</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>对不同维度进行简单的标记和分类。</p>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <br><br>
+            <i-code bg lang="js">{{ code.js }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Tag properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>checkable</td>
+                            <td>标签是否可以选择</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                        <tr>
+                            <td>name</td>
+                            <td>当前标签的名称</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>checked</td>
+                            <td>标签的选中状态</td>
+                            <td>Boolean</td>
+                            <td>true</td>
+                        </tr>
+                        <tr>
+                            <td>type</td>
+                            <td>标签的样式类型，可选值为 border、dot</td>
+                            <td>String</td>
+                            <td>dot</td>
+                        </tr>
+                        <tr>
+                            <td>color</td>
+                            <td>标签颜色，预设颜色值为 blue、green、red、yellow、default，你也可以自定义颜色值。</td>
+                            <td>String</td>
+                            <td>default</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <Anchor title="Tag events" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>事件名</th>
+                            <th>说明</th>
+                            <th>返回值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>bind:change</td>
+                            <td>状态改变时触发</td>
+                            <td>{ name, checked }</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/tag';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>