first commit
This commit is contained in:
lingxiao865
276
uni_modules/tdesign-uniapp/components/rate/rate.vue
Normal file
276
uni_modules/tdesign-uniapp/components/rate/rate.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user