12 changed files with 1067 additions and 129 deletions
@ -0,0 +1,27 @@ |
|||||
|
## 1.3.2(2026-02-09) |
||||
|
- 修复 pc 触屏问题 |
||||
|
## 1.3.1(2022-02-25) |
||||
|
- 修复 条件判断 `NaN` 错误的 bug |
||||
|
## 1.3.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-rate](https://uniapp.dcloud.io/component/uniui/uni-rate) |
||||
|
## 1.2.2(2021-09-10) |
||||
|
- 优化 默认值修改为 0 颗星 |
||||
|
## 1.2.1(2021-07-30) |
||||
|
- 优化 vue3下事件警告的问题 |
||||
|
## 1.2.0(2021-07-13) |
||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
|
## 1.1.2(2021-05-12) |
||||
|
- 新增 组件示例地址 |
||||
|
## 1.1.1(2021-04-21) |
||||
|
- 修复 布局变化后 uni-rate 星星计算不准确的 bug |
||||
|
- 优化 添加依赖 uni-icons, 导入 uni-rate 自动下载依赖 |
||||
|
## 1.1.0(2021-04-16) |
||||
|
- 修复 uni-rate 属性 margin 值为 string 组件失效的 bug |
||||
|
|
||||
|
## 1.0.9(2021-02-05) |
||||
|
- 优化 组件引用关系,通过uni_modules引用组件 |
||||
|
|
||||
|
## 1.0.8(2021-02-05) |
||||
|
- 调整为uni_modules目录规范 |
||||
|
- 支持 pc 端 |
||||
@ -0,0 +1,371 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view ref="uni-rate" class="uni-rate"> |
||||
|
<view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}" |
||||
|
:style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index" |
||||
|
@touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown" |
||||
|
@mousemove.stop="mousemove" @mouseleave="mouseleave"> |
||||
|
<uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" /> |
||||
|
<!-- #ifdef APP-NVUE --> |
||||
|
<view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on"> |
||||
|
<uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size" |
||||
|
type="star-filled" /> |
||||
|
</view> |
||||
|
<!-- #endif --> |
||||
|
<!-- #ifndef APP-NVUE --> |
||||
|
<view :style="{ width: star.activeWitch}" class="uni-rate__icon-on"> |
||||
|
<uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" /> |
||||
|
</view> |
||||
|
<!-- #endif --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// #ifdef APP-NVUE |
||||
|
const dom = uni.requireNativePlugin('dom'); |
||||
|
// #endif |
||||
|
/** |
||||
|
* Rate 评分 |
||||
|
* @description 评分组件 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=33 |
||||
|
* @property {Boolean} isFill = [true|false] 星星的类型,是否为实心类型, 默认为实心 |
||||
|
* @property {String} color 未选中状态的星星颜色,默认为 "#ececec" |
||||
|
* @property {String} activeColor 选中状态的星星颜色,默认为 "#ffca3e" |
||||
|
* @property {String} disabledColor 禁用状态的星星颜色,默认为 "#c0c0c0" |
||||
|
* @property {Number} size 星星的大小 |
||||
|
* @property {Number} value/v-model 当前评分 |
||||
|
* @property {Number} max 最大评分评分数量,目前一分一颗星 |
||||
|
* @property {Number} margin 星星的间距,单位 px |
||||
|
* @property {Boolean} disabled = [true|false] 是否为禁用状态,默认为 false |
||||
|
* @property {Boolean} readonly = [true|false] 是否为只读状态,默认为 false |
||||
|
* @property {Boolean} allowHalf = [true|false] 是否实现半星,默认为 false |
||||
|
* @property {Boolean} touchable = [true|false] 是否支持滑动手势,默认为 true |
||||
|
* @event {Function} change uniRate 的 value 改变时触发事件,e={value:Number} |
||||
|
*/ |
||||
|
|
||||
|
export default { |
||||
|
name: "UniRate", |
||||
|
props: { |
||||
|
isFill: { |
||||
|
// 星星的类型,是否镂空 |
||||
|
type: [Boolean, String], |
||||
|
default: true |
||||
|
}, |
||||
|
color: { |
||||
|
// 星星未选中的颜色 |
||||
|
type: String, |
||||
|
default: "#ececec" |
||||
|
}, |
||||
|
activeColor: { |
||||
|
// 星星选中状态颜色 |
||||
|
type: String, |
||||
|
default: "#ffca3e" |
||||
|
}, |
||||
|
disabledColor: { |
||||
|
// 星星禁用状态颜色 |
||||
|
type: String, |
||||
|
default: "#c0c0c0" |
||||
|
}, |
||||
|
size: { |
||||
|
// 星星的大小 |
||||
|
type: [Number, String], |
||||
|
default: 24 |
||||
|
}, |
||||
|
value: { |
||||
|
// 当前评分 |
||||
|
type: [Number, String], |
||||
|
default: 0 |
||||
|
}, |
||||
|
modelValue: { |
||||
|
// 当前评分 |
||||
|
type: [Number, String], |
||||
|
default: 0 |
||||
|
}, |
||||
|
max: { |
||||
|
// 最大评分 |
||||
|
type: [Number, String], |
||||
|
default: 5 |
||||
|
}, |
||||
|
margin: { |
||||
|
// 星星的间距 |
||||
|
type: [Number, String], |
||||
|
default: 0 |
||||
|
}, |
||||
|
disabled: { |
||||
|
// 是否可点击 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
readonly: { |
||||
|
// 是否只读 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
allowHalf: { |
||||
|
// 是否显示半星 |
||||
|
type: [Boolean, String], |
||||
|
default: false |
||||
|
}, |
||||
|
touchable: { |
||||
|
// 是否支持滑动手势 |
||||
|
type: [Boolean, String], |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
valueSync: "", |
||||
|
userMouseFristMove: true, |
||||
|
userRated: false, |
||||
|
userLastRate: 1, |
||||
|
PC: false |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
value(newVal) { |
||||
|
this.valueSync = Number(newVal); |
||||
|
}, |
||||
|
modelValue(newVal) { |
||||
|
this.valueSync = Number(newVal); |
||||
|
}, |
||||
|
}, |
||||
|
computed: { |
||||
|
stars() { |
||||
|
const value = this.valueSync ? this.valueSync : 0; |
||||
|
const starList = []; |
||||
|
const floorValue = Math.floor(value); |
||||
|
const ceilValue = Math.ceil(value); |
||||
|
for (let i = 0; i < this.max; i++) { |
||||
|
if (floorValue > i) { |
||||
|
starList.push({ |
||||
|
activeWitch: "100%" |
||||
|
}); |
||||
|
} else if (ceilValue - 1 === i) { |
||||
|
starList.push({ |
||||
|
activeWitch: (value - floorValue) * 100 + "%" |
||||
|
}); |
||||
|
} else { |
||||
|
starList.push({ |
||||
|
activeWitch: "0" |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
return starList; |
||||
|
}, |
||||
|
|
||||
|
marginNumber() { |
||||
|
return Number(this.margin) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.valueSync = Number(this.value || this.modelValue); |
||||
|
this._rateBoxLeft = 0 |
||||
|
this._oldValue = null |
||||
|
// #ifdef H5 |
||||
|
this.PC = this.IsPC() |
||||
|
// #endif |
||||
|
}, |
||||
|
mounted() { |
||||
|
setTimeout(() => { |
||||
|
this._getSize() |
||||
|
}, 100) |
||||
|
}, |
||||
|
methods: { |
||||
|
touchstart(e) { |
||||
|
// #ifdef H5 |
||||
|
if (this.PC) return |
||||
|
// #endif |
||||
|
if (this.readonly || this.disabled) return |
||||
|
const { |
||||
|
clientX, |
||||
|
screenX |
||||
|
} = e.changedTouches[0] |
||||
|
// TODO 做一下兼容,只有 Nvue 下才有 screenX,其他平台是 clientX |
||||
|
this._getRateCount(clientX || screenX) |
||||
|
}, |
||||
|
touchmove(e) { |
||||
|
// #ifdef H5 |
||||
|
if (this.PC) return |
||||
|
// #endif |
||||
|
if (this.readonly || this.disabled || !this.touchable) return |
||||
|
const { |
||||
|
clientX, |
||||
|
screenX |
||||
|
} = e.changedTouches[0] |
||||
|
this._getRateCount(clientX || screenX) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 兼容 PC @tian |
||||
|
*/ |
||||
|
|
||||
|
mousedown(e) { |
||||
|
// #ifdef H5 |
||||
|
if (!this.PC) return |
||||
|
if (this.readonly || this.disabled) return |
||||
|
const { |
||||
|
clientX, |
||||
|
} = e |
||||
|
this.userLastRate = this.valueSync |
||||
|
this._getRateCount(clientX) |
||||
|
this.userRated = true |
||||
|
// #endif |
||||
|
}, |
||||
|
mousemove(e) { |
||||
|
// #ifdef H5 |
||||
|
if (!this.PC) return |
||||
|
if (this.userRated) return |
||||
|
if (this.userMouseFristMove) { |
||||
|
this.userLastRate = this.valueSync |
||||
|
this.userMouseFristMove = false |
||||
|
} |
||||
|
if (this.readonly || this.disabled || !this.touchable) return |
||||
|
const { |
||||
|
clientX, |
||||
|
} = e |
||||
|
this._getRateCount(clientX) |
||||
|
// #endif |
||||
|
}, |
||||
|
mouseleave(e) { |
||||
|
// #ifdef H5 |
||||
|
if (!this.PC) return |
||||
|
if (this.readonly || this.disabled || !this.touchable) return |
||||
|
if (this.userRated) { |
||||
|
this.userRated = false |
||||
|
return |
||||
|
} |
||||
|
this.valueSync = this.userLastRate |
||||
|
// #endif |
||||
|
}, |
||||
|
// #ifdef H5 |
||||
|
IsPC() { |
||||
|
var userAgentInfo = navigator.userAgent || ''; |
||||
|
var info = typeof uni !== 'undefined' && uni.getSystemInfoSync ? uni.getSystemInfoSync() : null; |
||||
|
if (info && info.deviceType) { |
||||
|
if (info.deviceType === 'pc') return true; |
||||
|
if (info.deviceType === 'phone' || info.deviceType === 'pad') return false; |
||||
|
} |
||||
|
var isMobileUA = /Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|Mobile|Harmony|HarmonyOS/i.test(userAgentInfo); |
||||
|
if (isMobileUA) return false; |
||||
|
var hasTouch = false; |
||||
|
if (typeof navigator.maxTouchPoints === 'number') { |
||||
|
hasTouch = navigator.maxTouchPoints > 0; |
||||
|
} else if (typeof window !== 'undefined') { |
||||
|
hasTouch = 'ontouchstart' in window; |
||||
|
} |
||||
|
if (hasTouch && typeof window !== 'undefined' && window.matchMedia) { |
||||
|
var finePointer = window.matchMedia('(pointer: fine)').matches; |
||||
|
var canHover = window.matchMedia('(hover: hover)').matches; |
||||
|
return finePointer || canHover; |
||||
|
} |
||||
|
return !hasTouch; |
||||
|
}, |
||||
|
// #endif |
||||
|
|
||||
|
/** |
||||
|
* 获取星星个数 |
||||
|
*/ |
||||
|
_getRateCount(clientX) { |
||||
|
this._getSize() |
||||
|
const size = Number(this.size) |
||||
|
if (isNaN(size)) { |
||||
|
return new Error('size 属性只能设置为数字') |
||||
|
} |
||||
|
const rateMoveRange = clientX - this._rateBoxLeft |
||||
|
let index = parseInt(rateMoveRange / (size + this.marginNumber)) |
||||
|
index = index < 0 ? 0 : index; |
||||
|
index = index > this.max ? this.max : index; |
||||
|
const range = parseInt(rateMoveRange - (size + this.marginNumber) * index); |
||||
|
let value = 0; |
||||
|
if (this._oldValue === index && !this.PC) return; |
||||
|
this._oldValue = index; |
||||
|
if (this.allowHalf) { |
||||
|
if (range > (size / 2)) { |
||||
|
value = index + 1 |
||||
|
} else { |
||||
|
value = index + 0.5 |
||||
|
} |
||||
|
} else { |
||||
|
value = index + 1 |
||||
|
} |
||||
|
|
||||
|
value = Math.max(0.5, Math.min(value, this.max)) |
||||
|
this.valueSync = value |
||||
|
this._onChange() |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 触发动态修改 |
||||
|
*/ |
||||
|
_onChange() { |
||||
|
|
||||
|
this.$emit("input", this.valueSync); |
||||
|
this.$emit("update:modelValue", this.valueSync); |
||||
|
this.$emit("change", { |
||||
|
value: this.valueSync |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* 获取星星距离屏幕左侧距离 |
||||
|
*/ |
||||
|
_getSize() { |
||||
|
// #ifndef APP-NVUE |
||||
|
uni.createSelectorQuery() |
||||
|
.in(this) |
||||
|
.select('.uni-rate') |
||||
|
.boundingClientRect() |
||||
|
.exec(ret => { |
||||
|
if (ret) { |
||||
|
this._rateBoxLeft = ret[0].left |
||||
|
} |
||||
|
}) |
||||
|
// #endif |
||||
|
// #ifdef APP-NVUE |
||||
|
dom.getComponentRect(this.$refs['uni-rate'], (ret) => { |
||||
|
const size = ret.size |
||||
|
if (size) { |
||||
|
this._rateBoxLeft = size.left |
||||
|
} |
||||
|
}) |
||||
|
// #endif |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.uni-rate { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
line-height: 1; |
||||
|
font-size: 0; |
||||
|
flex-direction: row; |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: pointer; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
|
||||
|
.uni-rate__icon { |
||||
|
position: relative; |
||||
|
line-height: 1; |
||||
|
font-size: 0; |
||||
|
} |
||||
|
|
||||
|
.uni-rate__icon-on { |
||||
|
overflow: hidden; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
line-height: 1; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.uni-cursor-not-allowed { |
||||
|
/* #ifdef H5 */ |
||||
|
cursor: not-allowed !important; |
||||
|
/* #endif */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,106 @@ |
|||||
|
{ |
||||
|
"id": "uni-rate", |
||||
|
"displayName": "uni-rate 评分", |
||||
|
"version": "1.3.2", |
||||
|
"description": "Rate 评分组件,可自定义评分星星图标的大小、间隔、评分数。", |
||||
|
"keywords": [ |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"评分" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "", |
||||
|
"uni-app": "^4.05", |
||||
|
"uni-app-x": "" |
||||
|
}, |
||||
|
"directories": { |
||||
|
"example": "../../temps/example_temps" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
||||
|
"type": "component-vue", |
||||
|
"darkmode": "x", |
||||
|
"i18n": "x", |
||||
|
"widescreen": "x" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": [ |
||||
|
"uni-scss", |
||||
|
"uni-icons" |
||||
|
], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "x", |
||||
|
"aliyun": "x", |
||||
|
"alipay": "x" |
||||
|
}, |
||||
|
"client": { |
||||
|
"uni-app": { |
||||
|
"vue": { |
||||
|
"vue2": "√", |
||||
|
"vue3": "√" |
||||
|
}, |
||||
|
"web": { |
||||
|
"safari": "√", |
||||
|
"chrome": "√" |
||||
|
}, |
||||
|
"app": { |
||||
|
"vue": "√", |
||||
|
"nvue": "√", |
||||
|
"android": "√", |
||||
|
"ios": "√", |
||||
|
"harmony": "√" |
||||
|
}, |
||||
|
"mp": { |
||||
|
"weixin": "√", |
||||
|
"alipay": "√", |
||||
|
"toutiao": "√", |
||||
|
"baidu": "√", |
||||
|
"kuaishou": "-", |
||||
|
"jd": "-", |
||||
|
"harmony": "-", |
||||
|
"qq": "√", |
||||
|
"lark": "-", |
||||
|
"xhs": "-" |
||||
|
}, |
||||
|
"quickapp": { |
||||
|
"huawei": "√", |
||||
|
"union": "√" |
||||
|
} |
||||
|
}, |
||||
|
"uni-app-x": { |
||||
|
"web": { |
||||
|
"safari": "-", |
||||
|
"chrome": "-" |
||||
|
}, |
||||
|
"app": { |
||||
|
"android": "-", |
||||
|
"ios": "-", |
||||
|
"harmony": "-" |
||||
|
}, |
||||
|
"mp": { |
||||
|
"weixin": "-" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
|
||||
|
|
||||
|
## Rate 评分 |
||||
|
> **组件名:uni-rate** |
||||
|
> 代码块: `uRate` |
||||
|
> 关联组件:`uni-icons` |
||||
|
|
||||
|
|
||||
|
评分组件,多用于购买商品后,对商品进行评价等场景 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-rate) |
||||
@ -0,0 +1,25 @@ |
|||||
|
## 2.1.2(2025-08-19) |
||||
|
- 修复 传入数字 0 不显示的问题 |
||||
|
## 2.1.1(2024-03-20) |
||||
|
- 优化 app下边框过窄导致不显示的bug |
||||
|
## 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目录规范 |
||||
@ -0,0 +1,255 @@ |
|||||
|
<template> |
||||
|
<text class="uni-tag" v-if="showTag" :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: { |
||||
|
showTag() { |
||||
|
return !!this.text.toString() |
||||
|
}, |
||||
|
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" scoped> |
||||
|
$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> |
||||
@ -0,0 +1,106 @@ |
|||||
|
{ |
||||
|
"id": "uni-tag", |
||||
|
"displayName": "uni-tag 标签", |
||||
|
"version": "2.1.2", |
||||
|
"description": "Tag 组件,用于展示1个或多个文字标签,可点击切换选中、不选中的状态。", |
||||
|
"keywords": [ |
||||
|
"uni-ui", |
||||
|
"uniui", |
||||
|
"", |
||||
|
"tag", |
||||
|
"标签" |
||||
|
], |
||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||
|
"engines": { |
||||
|
"HBuilderX": "", |
||||
|
"uni-app": "^4.07", |
||||
|
"uni-app-x": "" |
||||
|
}, |
||||
|
"directories": { |
||||
|
"example": "../../temps/example_temps" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
||||
|
"type": "component-vue", |
||||
|
"darkmode": "x", |
||||
|
"i18n": "x", |
||||
|
"widescreen": "x" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": [ |
||||
|
"uni-scss" |
||||
|
], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "x", |
||||
|
"aliyun": "x", |
||||
|
"alipay": "x" |
||||
|
}, |
||||
|
"client": { |
||||
|
"uni-app": { |
||||
|
"vue": { |
||||
|
"vue2": "√", |
||||
|
"vue3": "√" |
||||
|
}, |
||||
|
"web": { |
||||
|
"safari": "√", |
||||
|
"chrome": "√" |
||||
|
}, |
||||
|
"app": { |
||||
|
"vue": "√", |
||||
|
"nvue": "√", |
||||
|
"android": "√", |
||||
|
"ios": "√", |
||||
|
"harmony": "√" |
||||
|
}, |
||||
|
"mp": { |
||||
|
"weixin": "√", |
||||
|
"alipay": "√", |
||||
|
"toutiao": "√", |
||||
|
"baidu": "√", |
||||
|
"kuaishou": "-", |
||||
|
"jd": "-", |
||||
|
"harmony": "-", |
||||
|
"qq": "√", |
||||
|
"lark": "-" |
||||
|
}, |
||||
|
"quickapp": { |
||||
|
"huawei": "√", |
||||
|
"union": "√" |
||||
|
} |
||||
|
}, |
||||
|
"uni-app-x": { |
||||
|
"web": { |
||||
|
"safari": "-", |
||||
|
"chrome": "-" |
||||
|
}, |
||||
|
"app": { |
||||
|
"android": "-", |
||||
|
"ios": "-", |
||||
|
"harmony": "-" |
||||
|
}, |
||||
|
"mp": { |
||||
|
"weixin": "-" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
|
||||
|
|
||||
|
## Tag 标签 |
||||
|
> **组件名:uni-tag** |
||||
|
> 代码块: `uTag` |
||||
|
|
||||
|
|
||||
|
用于展示1个或多个文字标签,可点击切换选中、不选中的状态 。 |
||||
|
|
||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-tag) |
||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
||||
|
|
||||
|
|
||||
Loading…
Reference in new issue