Skip to content

U
uni-app

CoderSmallfan / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 0774f384 编写于 作者: hbcui1984's avatar hbcui1984
浏览文件
操作

hello uni-app 新增 tag标签 模板

上级 0bd510b1
隐藏空白更改
内联 并排
Showing with 271 addition and 0 deletion
examples/hello-uniapp/components/uni-tag.vue 0 → 100644
浏览文件 @ 0774f384
<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>
examples/hello-uniapp/pages/template/tag/tag.vue 0 → 100644
浏览文件 @ 0774f384
<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>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或