From 0774f384372c8024607e6fdd2232f53897ec860b Mon Sep 17 00:00:00 2001
From: hbcui1984 <hbcui1984@163.com>
Date: Tue, 30 Oct 2018 12:15:40 +0800
Subject: [PATCH] =?UTF-8?q?hello=20uni-app=20=E6=96=B0=E5=A2=9E=20tag?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=20=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/hello-uniapp/components/uni-tag.vue  | 132 +++++++++++++++++
 .../hello-uniapp/pages/template/tag/tag.vue   | 139 ++++++++++++++++++
 2 files changed, 271 insertions(+)
 create mode 100644 examples/hello-uniapp/components/uni-tag.vue
 create mode 100644 examples/hello-uniapp/pages/template/tag/tag.vue

diff --git a/examples/hello-uniapp/components/uni-tag.vue b/examples/hello-uniapp/components/uni-tag.vue
new file mode 100644
index 000000000..39a4afd9a
--- /dev/null
+++ b/examples/hello-uniapp/components/uni-tag.vue
@@ -0,0 +1,132 @@
+<template>
+    <view class="uni-tag" v-if="text" :class="[disabled === true || disabled === 'true' ? 'uni-tag-disabled' : '',inverted === true || inverted === 'true' ? 'uni-tag-inverted' : '',circle === true || circle === 'true' ? 'uni-tag-circle' : '','uni-tag-'+size,'uni-tag-'+type]" @click="onClick()">{{text}}</view>
+</template>
+
+<script>
+    export default {
+        props: {
+            type: { //标签类型default、primary、success、warning、danger、royal
+                type: String,
+                default: 'default'
+            },
+            size: { //标签大小 normal, small
+                type: String,
+                default: 'normal'
+            },
+            text: String, //标签内容
+            disabled: { //是否为禁用状态
+            	type: [String, Boolean],
+            	defalut: false
+            },
+            inverted: { //是否为空心
+            	type: [String, Boolean],
+            	defalut: false
+            },
+            circle: { //是否为圆角
+                type: [String, Boolean],
+                defalut: false
+            }
+        },
+        methods: {
+            onClick() {
+                if(this.disabled === true || this.disabled === 'true'){
+                    return;
+                }
+                this.$emit('click')
+            }
+        }
+    }
+</script>
+
+<style>
+    .uni-tag,
+    .uni-tag-default {
+        box-sizing: border-box;
+        padding: 0px 32upx;
+        height: 60upx;
+        line-height: calc(60upx - 2px);
+        font-size: 28upx;
+        display: inline-block;
+        color: #666;
+        border-radius: 8upx;
+        background-color: #F1F1F1;
+        border: 1px solid #F1F1F1;
+    }
+    .uni-tag-circle{
+        border-radius: 30upx;
+    }
+    .uni-tag-small{
+        height: 40upx;
+        padding: 0px 16upx;
+        line-height: calc(40upx - 2px);
+        font-size: 20rpx;
+    }
+    .uni-tag-disabled{
+        opacity: 0.5;
+    }
+    .uni-tag.uni-tag-inverted {
+        color: #666;
+        background-color: #FFFFFF;
+        border: 1px solid # F1F1F1;
+    }
+
+    .uni-tag-primary {
+        color: #fff;
+        background-color: #007aff;
+        border: 1px solid #007aff;
+    }
+
+    .uni-tag-primary.uni-tag-inverted {
+        color: #007aff;
+        background-color: #FFFFFF;
+        border: 1px solid #007aff;
+    }
+
+    .uni-tag-success {
+        color: #fff;
+        background-color: #4cd964;
+        border: 1px solid #4cd964;
+    }
+
+    .uni-tag-success.uni-tag-inverted {
+        color: #4cd964;
+        background-color: #FFFFFF;
+        border: 1px solid #4cd964;
+    }
+
+    .uni-tag-warning {
+        color: #fff;
+        background-color: #f0ad4e;
+        border: 1px solid #f0ad4e;
+    }
+
+    .uni-tag-warning.uni-tag-inverted{
+        color: #f0ad4e;
+        background-color: #FFFFFF;
+        border: 1px solid #f0ad4e;
+    }
+
+    .uni-tag-danger{
+        color: #fff;
+        background-color: #dd524d;
+        border: 1px solid #dd524d;
+    }
+
+    .uni-tag-danger.uni-tag-inverted {
+        color: #dd524d;
+        background-color: #FFFFFF;
+        border: 1px solid #dd524d;
+    }
+
+    .uni-tag-royal {
+        color: #fff;
+        background-color: #8a6de9;
+        border: 1px solid #8a6de9;
+    }
+
+    .uni-tag-royal.uni-tag-inverted {
+        color: #8a6de9;
+        background-color: #FFFFFF;
+        border: 1px solid #8a6de9;
+    }
+</style>
diff --git a/examples/hello-uniapp/pages/template/tag/tag.vue b/examples/hello-uniapp/pages/template/tag/tag.vue
new file mode 100644
index 000000000..b9c0e848c
--- /dev/null
+++ b/examples/hello-uniapp/pages/template/tag/tag.vue
@@ -0,0 +1,139 @@
+<template>
+    <view class="page">
+        <page-head :title="title"></page-head>
+        <view class="page-body">
+            <view class="page-section">
+                <view class="page-section-title">实心标签</view>
+                <view class="page-section">
+                    <view class="tag-view">
+                        <uni-tag text="标签"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="primary"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="success"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="warning"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="danger" :circle="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="royal" :circle="true"></uni-tag>
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">空心标签</view>
+                <view class="page-section">
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="primary"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="success"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="warning"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="danger" :circle="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="royal" :circle="true"></uni-tag>
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">点击事件</view>
+                <view class="page-section">
+                    <view class="tag-view">
+                        <uni-tag text="标签" :type="type" @click="setType"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="primary" :circle="true" :inverted="inverted" @click="setInverted"></uni-tag>
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">小标签</view>
+                <view class="page-section">
+                    <view class="tag-view">
+                        <uni-tag text="标签" size="small"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="primary" size="small"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="success" size="small"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="warning" size="small"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="danger" size="small" :circle="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="royal" size="small" :circle="true"></uni-tag>
+                    </view>
+                </view>
+            </view>
+            <view class="page-section">
+                <view class="page-section-title">不可点击状态</view>
+                <view class="page-section">
+                    <view class="tag-view">
+                        <uni-tag text="标签" :disabled="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" type="primary" :disabled="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="danger" size="small" :disabled="true"></uni-tag>
+                    </view>
+                    <view class="tag-view">
+                        <uni-tag text="标签" inverted="true" type="royal" size="small" :circle="true" :disabled="true"></uni-tag>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import uniTag from '@/components/uni-tag.vue'
+    export default {
+        components: {
+            uniTag
+        },
+        data() {
+            return {
+                title: 'tag',
+                type: 'default',
+                inverted: false
+            }
+        },
+        methods: {
+            setType() {
+                let types = ['default', 'primary', 'success', 'warning', 'danger', 'royal'];
+                let index = types.indexOf(this.type);
+                types.splice(index, 1)
+                let randomIndex = Math.ceil(Math.random() * 5);
+                this.type = types[randomIndex];
+            },
+            setInverted() {
+                this.inverted = !this.inverted;
+            }
+        }
+    }
+</script>
+
+<style>
+    .tag-view {
+        margin: 10upx 20upx;
+        display: inline-block;
+    }
+</style>
-- 
GitLab