1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <template>
| <uni-shadow-root class="vant-rate-index"><view class="van-rate custom-class" @touchmove="onTouchMove">
| <view v-for="(item,index) in (innerCountArray)" :key="item.index" class="van-rate__item" :style="'padding-right: '+(index !== count - 1 ? utils.addUnit(gutter) : '')">
| <van-icon :name="index + 1 <= innerValue ? icon : voidIcon" class="van-rate__icon" :style="'font-size: '+(utils.addUnit(size))" custom-class="icon-class" :data-score="index" :color="disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor" @click="onSelect"></van-icon>
|
| <van-icon v-if="allowHalf" :name="index + 0.5 <= innerValue ? icon : voidIcon" :class="utils.bem('rate__icon', ['half'])" :style="'font-size: '+(utils.addUnit(size))" custom-class="icon-class" :data-score="index - 0.5" :color="disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor" @click="onSelect"></van-icon>
| </view>
| </view></uni-shadow-root>
| </template>
| <wxs src="../wxs/utils.wxs" module="utils"></wxs>
| <script>
| import VanIcon from '../icon/index.vue'
| global['__wxVueOptions'] = {components:{'van-icon': VanIcon}}
|
| global['__wxRoute'] = 'vant/rate/index'
| import { VantComponent } from '../common/component';
| import { canIUseModel } from '../common/version';
| VantComponent({
| field: true,
| classes: ['icon-class'],
| props: {
| value: {
| type: Number,
| observer(value) {
| if (value !== this.data.innerValue) {
| this.setData({ innerValue: value });
| }
| },
| },
| readonly: Boolean,
| disabled: Boolean,
| allowHalf: Boolean,
| size: null,
| icon: {
| type: String,
| value: 'star',
| },
| voidIcon: {
| type: String,
| value: 'star-o',
| },
| color: {
| type: String,
| value: '#ffd21e',
| },
| voidColor: {
| type: String,
| value: '#c7c7c7',
| },
| disabledColor: {
| type: String,
| value: '#bdbdbd',
| },
| count: {
| type: Number,
| value: 5,
| observer(value) {
| this.setData({ innerCountArray: Array.from({ length: value }) });
| },
| },
| gutter: null,
| touchable: {
| type: Boolean,
| value: true,
| },
| },
| data: {
| innerValue: 0,
| innerCountArray: Array.from({ length: 5 }),
| },
| methods: {
| onSelect(event) {
| const { data } = this;
| const { score } = event.currentTarget.dataset;
| if (!data.disabled && !data.readonly) {
| this.setData({ innerValue: score + 1 });
| if (canIUseModel()) {
| this.setData({ value: score + 1 });
| }
| wx.nextTick(() => {
| this.$emit('input', score + 1);
| this.$emit('change', score + 1);
| });
| }
| },
| onTouchMove(event) {
| const { touchable } = this.data;
| if (!touchable) return;
| const { clientX } = event.touches[0];
| this.getRect('.van-rate__icon', true).then((list) => {
| const target = list
| .sort((item) => item.right - item.left)
| .find((item) => clientX >= item.left && clientX <= item.right);
| if (target != null) {
| this.onSelect(
| Object.assign(Object.assign({}, event), { currentTarget: target })
| );
| }
| });
| },
| },
| });
| export default global['__wxComponents']['vant/rate/index']
| </script>
| <style platform="mp-weixin">
| @import '../common/index.css';.van-rate{display:-webkit-inline-flex;display:inline-flex;-webkit-user-select:none;user-select:none}.van-rate__item{position:relative;padding:0 2px;padding:0 var(--rate-horizontal-padding,2px)}.van-rate__icon{display:block;height:1em;font-size:20px;font-size:var(--rate-icon-size,20px)}.van-rate__icon--half{position:absolute;top:0;width:.5em;overflow:hidden;left:2px;left:var(--rate-horizontal-padding,2px)}
| </style>
|
|
