277 lines
7.7 KiB
Vue
277 lines
7.7 KiB
Vue
|
<template>
|
||
|
|
<view
|
||
|
|
:class="classPrefix"
|
||
|
|
:style="tools._style([customStyle])"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
:class="classPrefix + '__wrapper ' + tClass"
|
||
|
|
:style="'font-size:' + utils.regSize(size)"
|
||
|
|
aria-role="slider"
|
||
|
|
:aria-valuemax="count"
|
||
|
|
:aria-valuemin="0"
|
||
|
|
:aria-valuenow="dataValue"
|
||
|
|
:aria-valuetext="utils.getText(texts, dataValue, defaultTexts)"
|
||
|
|
@touchstart="parseEventDynamicCode($event, !disabled ? 'onTouchStart' : '')"
|
||
|
|
@touchmove="parseEventDynamicCode($event, !disabled ? 'onTouchMove' : '')"
|
||
|
|
@click="onTap"
|
||
|
|
@touchend="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
|
||
|
|
@touchcancel="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
|
||
|
|
>
|
||
|
|
<t-icon
|
||
|
|
v-for="(item, index) in count"
|
||
|
|
:key="index"
|
||
|
|
:t-class="classPrefix + '__icon ' + utils.getIconClass(classPrefix + '__icon', defaultValue, dataValue, index, allowHalf, disabled, scaleIndex) + ' ' + tClassIcon"
|
||
|
|
:custom-style="'margin-right: ' + (count - index > 1 ? tools.addUnit(gap) : 0) + '; ' + utils.getColor(color)"
|
||
|
|
:name="utils.getIconName(defaultValue, dataValue, index, icon)"
|
||
|
|
:size="size"
|
||
|
|
:prefix="iconPrefix"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
<text
|
||
|
|
v-if="showText"
|
||
|
|
:class="tools.cls(classPrefix + '__text', [['active', dataValue > 0]]) + ' ' + tClassText"
|
||
|
|
:aria-hidden="true"
|
||
|
|
>
|
||
|
|
{{ utils.getText(texts, dataValue, defaultTexts) }}
|
||
|
|
</text>
|
||
|
|
<text
|
||
|
|
v-if="isVisibleToScreenReader"
|
||
|
|
:class="
|
||
|
|
tools.cls(classPrefix + '__text', [
|
||
|
|
['active', dataValue > 0],
|
||
|
|
['sr-only', isVisibleToScreenReader]
|
||
|
|
]) +
|
||
|
|
' ' +
|
||
|
|
tClassText
|
||
|
|
"
|
||
|
|
aria-role="alert"
|
||
|
|
aria-live="assertive"
|
||
|
|
>
|
||
|
|
{{ dataValue + '星' }} {{ utils.getText(texts, dataValue, defaultTexts) }}
|
||
|
|
</text>
|
||
|
|
<!-- TODO -->
|
||
|
|
<view
|
||
|
|
v-if="tipsVisible && placement"
|
||
|
|
:class="tools.cls(classPrefix + '__tips', [placement])"
|
||
|
|
:style="'left: ' + tipsLeft + 'px'"
|
||
|
|
:aria-hidden="true"
|
||
|
|
>
|
||
|
|
<block v-if="actionType == 'tap'">
|
||
|
|
<view
|
||
|
|
v-if="allowHalf"
|
||
|
|
:class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) - 0.5 == dataValue]])"
|
||
|
|
:data-value="utils.ceil(dataValue) - 0.5"
|
||
|
|
@click="onSelect"
|
||
|
|
>
|
||
|
|
<t-icon
|
||
|
|
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--selected-half'"
|
||
|
|
:name="utils.getIconName(defaultValue, dataValue, 0, icon)"
|
||
|
|
:size="size"
|
||
|
|
:custom-style="utils.getColor(color)"
|
||
|
|
/>
|
||
|
|
<view :class="classPrefix + '__tips-text'">
|
||
|
|
{{ utils.ceil(dataValue) - 0.5 }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
:class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue]])"
|
||
|
|
:data-value="utils.ceil(dataValue)"
|
||
|
|
@click="onSelect"
|
||
|
|
>
|
||
|
|
<t-icon
|
||
|
|
:t-class="tools.cls(classPrefix + '__icon', ['selected'])"
|
||
|
|
:name="utils.getIconName(defaultValue, 0, 0, icon)"
|
||
|
|
:size="size"
|
||
|
|
:custom-style="utils.getColor(color)"
|
||
|
|
/>
|
||
|
|
<view :class="classPrefix + '__tips-text'">
|
||
|
|
{{ utils.ceil(dataValue) }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<view
|
||
|
|
v-else
|
||
|
|
:class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue && actionType == 'tap']])"
|
||
|
|
:data-value="utils.ceil(dataValue)"
|
||
|
|
@click="onSelect"
|
||
|
|
>
|
||
|
|
<t-icon
|
||
|
|
:t-class="
|
||
|
|
tools.cls(classPrefix + '__icon', [
|
||
|
|
['selected', utils.ceil(dataValue) == dataValue],
|
||
|
|
['selected-half', utils.ceil(dataValue) != dataValue]
|
||
|
|
])
|
||
|
|
"
|
||
|
|
:name="utils.getIconName(defaultValue, 0, 0, icon)"
|
||
|
|
:size="size"
|
||
|
|
:custom-style="utils.getColor(color)"
|
||
|
|
/>
|
||
|
|
<view :class="classPrefix + '__tips-text'">
|
||
|
|
{{ dataValue }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import TIcon from '../icon/icon';
|
||
|
|
import { uniComponent } from '../common/src/index';
|
||
|
|
import { prefix } from '../common/config';
|
||
|
|
import props from './props';
|
||
|
|
import { unitConvert, getRect, coalesce } from '../common/utils';
|
||
|
|
import tools from '../common/utils.wxs';
|
||
|
|
import utils from './computed.js';
|
||
|
|
import { parseEventDynamicCode } from '../common/event/dynamic';
|
||
|
|
|
||
|
|
|
||
|
|
const name = `${prefix}-rate`;
|
||
|
|
|
||
|
|
|
||
|
|
export default uniComponent({
|
||
|
|
name,
|
||
|
|
options: {
|
||
|
|
styleIsolation: 'shared',
|
||
|
|
},
|
||
|
|
controlledProps: [
|
||
|
|
{
|
||
|
|
key: 'value',
|
||
|
|
event: 'change',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
externalClasses: [
|
||
|
|
`${prefix}-class`,
|
||
|
|
`${prefix}-class-icon`,
|
||
|
|
`${prefix}-class-text`,
|
||
|
|
],
|
||
|
|
components: {
|
||
|
|
TIcon,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
...props,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
prefix,
|
||
|
|
classPrefix: name,
|
||
|
|
defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
|
||
|
|
tipsVisible: false,
|
||
|
|
tipsLeft: 0,
|
||
|
|
actionType: '',
|
||
|
|
scaleIndex: -1,
|
||
|
|
isVisibleToScreenReader: false,
|
||
|
|
|
||
|
|
tools,
|
||
|
|
utils,
|
||
|
|
dataValue: coalesce(this.value, this.defaultValue),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value: {
|
||
|
|
handler(v) {
|
||
|
|
this.dataValue = v;
|
||
|
|
},
|
||
|
|
immediate: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
parseEventDynamicCode,
|
||
|
|
onTouch(e, eventType) {
|
||
|
|
const { count, allowHalf, gap, dataValue: currentValue, size } = this;
|
||
|
|
let touch = e.changedTouches?.[0];
|
||
|
|
// #ifdef MP-ALIPAY
|
||
|
|
if (eventType === 'tap') {
|
||
|
|
touch = e.target;
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
const margin = unitConvert(gap);
|
||
|
|
getRect(this, `.${name}__wrapper`).then((rect) => {
|
||
|
|
const { width, left } = rect;
|
||
|
|
const starWidth = (width - (count - 1) * margin) / count;
|
||
|
|
const offsetX = touch.pageX - left;
|
||
|
|
const num = (offsetX + margin) / (starWidth + margin);
|
||
|
|
const remainder = num % 1;
|
||
|
|
const integral = num - remainder;
|
||
|
|
let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
|
||
|
|
|
||
|
|
if (value > count) {
|
||
|
|
value = count;
|
||
|
|
} else if (value < 0) {
|
||
|
|
value = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
const tipsLeft = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
|
||
|
|
this.tipsVisible = true;
|
||
|
|
this.actionType = eventType;
|
||
|
|
this.scaleIndex = Math.ceil(value);
|
||
|
|
this.tipsLeft = Math.max(tipsLeft, 0);
|
||
|
|
|
||
|
|
if (value !== currentValue) {
|
||
|
|
this.innerTrigger(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.touchEnd) {
|
||
|
|
this.hideTips();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
innerTrigger(value) {
|
||
|
|
this._trigger('change', { value });
|
||
|
|
if (this._selfControlled) {
|
||
|
|
this.currentValue = value;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onTap(e) {
|
||
|
|
const { disabled } = this;
|
||
|
|
if (disabled) return;
|
||
|
|
this.onTouch(e, 'tap');
|
||
|
|
},
|
||
|
|
onTouchStart() {
|
||
|
|
this.touchEnd = false;
|
||
|
|
},
|
||
|
|
onTouchMove(e) {
|
||
|
|
this.onTouch(e, 'move');
|
||
|
|
this.showAlertText();
|
||
|
|
},
|
||
|
|
onTouchEnd() {
|
||
|
|
this.touchEnd = true;
|
||
|
|
this.hideTips();
|
||
|
|
},
|
||
|
|
hideTips() {
|
||
|
|
if (this.actionType === 'move') {
|
||
|
|
this.tipsVisible = false;
|
||
|
|
this.scaleIndex = -1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onSelect(e) {
|
||
|
|
const { value } = e.currentTarget.dataset;
|
||
|
|
const { actionType } = this;
|
||
|
|
|
||
|
|
if (actionType === 'move') return;
|
||
|
|
|
||
|
|
this.innerTrigger(value);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
this.tipsVisible = false;
|
||
|
|
this.scaleIndex = -1;
|
||
|
|
}, 300);
|
||
|
|
},
|
||
|
|
// 旁白模式: 变更数值时显示告警文案
|
||
|
|
showAlertText() {
|
||
|
|
if (this.isVisibleToScreenReader === true) return;
|
||
|
|
this.isVisibleToScreenReader = true;
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
this.isVisibleToScreenReader = false;
|
||
|
|
}, 2e3);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
@import './rate.css';
|
||
|
|
</style>
|