4 changed files with 515 additions and 0 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) |
|||
Loading…
Reference in new issue