init
This commit is contained in:
王鹏
21
uni_modules/uni-tag/changelog.md
Normal file
21
uni_modules/uni-tag/changelog.md
Normal file
@@ -0,0 +1,21 @@
|
||||
## 2.1.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-tag](https://uniapp.dcloud.io/component/uniui/uni-tag)
|
||||
## 2.0.0（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
- 移除 插槽
|
||||
- 移除 type 属性的 royal 选项
|
||||
## 1.1.1（2021-08-11）
|
||||
- type 不是 default 时，size 为 small 字体大小显示不正确
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.7（2021-06-18）
|
||||
- 修复 uni-tag 在字节跳动小程序上 css 类名编译错误的 bug
|
||||
## 1.0.6（2021-06-04）
|
||||
- 修复 未定义 sass 变量 "$uni-color-royal" 的bug
|
||||
## 1.0.5（2021-05-10）
|
||||
- 修复 royal 类型无效的bug
|
||||
- 修复 uni-tag 宽度不自适应的bug
|
||||
- 新增 uni-tag 支持属性 custom-style 自定义样式
|
||||
## 1.0.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
252
uni_modules/uni-tag/components/uni-tag/uni-tag.vue
Normal file
252
uni_modules/uni-tag/components/uni-tag/uni-tag.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Tag 标签
|
||||
* @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=35
|
||||
* @property {String} text 标签内容
|
||||
* @property {String} size = [default|small|mini] 大小尺寸
|
||||
* @value default 正常
|
||||
* @value small 小尺寸
|
||||
* @value mini 迷你尺寸
|
||||
* @property {String} type = [default|primary|success｜warning｜error] 颜色类型
|
||||
* @value default 灰色
|
||||
* @value primary 蓝色
|
||||
* @value success 绿色
|
||||
* @value warning 黄色
|
||||
* @value error 红色
|
||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
||||
* @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
|
||||
* @property {Boolean} circle = [true|false] 是否为圆角
|
||||
* @event {Function} click 点击 Tag 触发事件
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniTag",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
// 标签类型default、primary、success、warning、error、royal
|
||||
type: String,
|
||||
default: "default"
|
||||
},
|
||||
size: {
|
||||
// 标签大小 normal, small
|
||||
type: String,
|
||||
default: "normal"
|
||||
},
|
||||
// 标签内容
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
disabled: {
|
||||
// 是否为禁用状态
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
inverted: {
|
||||
// 是否为空心
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
circle: {
|
||||
// 是否为圆角样式
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
mark: {
|
||||
// 是否为标记样式
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
const {
|
||||
type,
|
||||
disabled,
|
||||
inverted,
|
||||
circle,
|
||||
mark,
|
||||
size,
|
||||
isTrue
|
||||
} = this
|
||||
const classArr = [
|
||||
'uni-tag--' + type,
|
||||
'uni-tag--' + size,
|
||||
isTrue(disabled) ? 'uni-tag--disabled' : '',
|
||||
isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
|
||||
isTrue(circle) ? 'uni-tag--circle' : '',
|
||||
isTrue(mark) ? 'uni-tag--mark' : '',
|
||||
// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
|
||||
isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
|
||||
size === 'small' ? 'uni-tag-text--small' : ''
|
||||
]
|
||||
// 返回类的字符串，兼容字节小程序
|
||||
return classArr.join(' ')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isTrue(value) {
|
||||
return value === true || value === 'true'
|
||||
},
|
||||
onClick() {
|
||||
if (this.isTrue(this.disabled)) return
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-info: #8f939c !default;
|
||||
|
||||
|
||||
$tag-default-pd: 4px 7px;
|
||||
$tag-small-pd: 2px 5px;
|
||||
$tag-mini-pd: 1px 3px;
|
||||
|
||||
.uni-tag {
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
padding: $tag-default-pd;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
background-color: $uni-info;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: $uni-info;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
|
||||
// size attr
|
||||
&--default {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--default--inverted {
|
||||
color: $uni-info;
|
||||
border-color: $uni-info;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: $tag-small-pd;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
padding: $tag-mini-pd;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// type attr
|
||||
&--primary {
|
||||
background-color: $uni-primary;
|
||||
border-color: $uni-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: #fff;
|
||||
background-color: $uni-success;
|
||||
border-color: $uni-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: #fff;
|
||||
background-color: $uni-warning;
|
||||
border-color: $uni-warning;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: #fff;
|
||||
background-color: $uni-error;
|
||||
border-color: $uni-error;
|
||||
}
|
||||
|
||||
&--primary--inverted {
|
||||
color: $uni-primary;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
|
||||
&--success--inverted {
|
||||
color: $uni-success;
|
||||
border-color: $uni-success;
|
||||
}
|
||||
|
||||
&--warning--inverted {
|
||||
color: $uni-warning;
|
||||
border-color: $uni-warning;
|
||||
}
|
||||
|
||||
&--error--inverted {
|
||||
color: $uni-error;
|
||||
border-color: $uni-error;
|
||||
}
|
||||
|
||||
&--inverted {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// other attr
|
||||
&--circle {
|
||||
border-radius: 15px !important;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-right-radius: 15px !important;
|
||||
border-bottom-right-radius: 15px !important;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-tag-text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
&--primary {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $uni-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $uni-warning;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $uni-error;
|
||||
}
|
||||
|
||||
&--small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
uni_modules/uni-tag/package.json
Normal file
87
uni_modules/uni-tag/package.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-tag",
|
||||
"displayName": "uni-tag 标签",
|
||||
"version": "2.1.0",
|
||||
"description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"",
|
||||
"tag",
|
||||
"标签"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
uni_modules/uni-tag/readme.md
Normal file
13
uni_modules/uni-tag/readme.md
Normal file
@@ -0,0 +1,13 @@
|
||||
|
||||
|
||||
## Tag 标签
|
||||
> **组件名：uni-tag**
|
||||
> 代码块： `uTag`
|
||||
|
||||
|
||||
用于展示1个或多个文字标签，可点击切换选中、不选中的状态 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tag)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
Reference in New Issue
Block a user