366 lines
8.7 KiB
Vue
366 lines
8.7 KiB
Vue
<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
|
||
};
|
||
},
|
||
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
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this._getSize()
|
||
}, 100)
|
||
// #ifdef H5
|
||
this.PC = this.IsPC()
|
||
// #endif
|
||
},
|
||
methods: {
|
||
touchstart(e) {
|
||
// #ifdef H5
|
||
if (this.IsPC()) 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.IsPC()) 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.IsPC()) 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.IsPC()) return
|
||
if (this.userRated) return
|
||
if (this.userMouseFristMove) {
|
||
console.log('---mousemove----', this.valueSync);
|
||
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.IsPC()) 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 Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||
var flag = true;
|
||
for (let v = 0; v < Agents.length - 1; v++) {
|
||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||
flag = false;
|
||
break;
|
||
}
|
||
}
|
||
return flag;
|
||
},
|
||
// #endif
|
||
|
||
/**
|
||
* 获取星星个数
|
||
*/
|
||
_getRateCount(clientX) {
|
||
const _this = this;
|
||
this._getSize(function() {
|
||
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(fn) {
|
||
// #ifndef APP-NVUE
|
||
uni.createSelectorQuery()
|
||
.in(this)
|
||
.select('.uni-rate')
|
||
.boundingClientRect()
|
||
.exec(ret => {
|
||
if (ret) {
|
||
this._rateBoxLeft = ret[0].left
|
||
fn && fn()
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
|
||
const size = ret.size
|
||
if (size) {
|
||
this._rateBoxLeft = size.left
|
||
fn && fn()
|
||
}
|
||
})
|
||
// #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>
|