134 lines
3.5 KiB
Vue
134 lines
3.5 KiB
Vue
<template>
|
|
<view class="_star" :class="{_left:left,_disabled:disabled}">
|
|
<input type="hidden" :name="name" :value="innervalue" style="display:none;" />
|
|
<view @tap="selstar(item.id)" :class="item.cls" v-for="(item, index) in stars" :key="index" :style="{width:size,height:size}"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue', 'update:value'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number]
|
|
},
|
|
value: {
|
|
type: [String, Number]
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxstar: {
|
|
type: [String, Number],
|
|
default: 5
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '2em'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
innervalue: this.modelValue !== undefined ? this.modelValue : this.value
|
|
};
|
|
},
|
|
watch: {
|
|
modelValue(newD) {
|
|
if (newD !== undefined) {
|
|
this.innervalue = newD;
|
|
}
|
|
},
|
|
value(newD) {
|
|
if (this.modelValue === undefined) {
|
|
this.innervalue = newD;
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
stars() {
|
|
var stars = [];
|
|
for (var i = 1; i <= this.maxstar; i++) {
|
|
if (i <= this.innervalue)
|
|
stars.push({
|
|
id: i,
|
|
cls: '_sel'
|
|
});
|
|
else
|
|
stars.push({
|
|
id: i,
|
|
cls: '_unsel'
|
|
});
|
|
}
|
|
return stars;
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.innervalue
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
updatevalue(val) {
|
|
if (val > this.maxstar)
|
|
val = this.maxstar;
|
|
this.innervalue = val;
|
|
},
|
|
selstar(id) {
|
|
if (this.disabled)
|
|
return;
|
|
var val = this.toint(id);
|
|
this.updatevalue(val);
|
|
this.$emit('update:modelValue', val);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'click',
|
|
value: val
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
._star {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
._star._left {
|
|
justify-content: start;
|
|
}
|
|
|
|
._star._disabled ._sel,
|
|
._star._disabled ._unsel {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
._star ._sel {
|
|
width: 2em;
|
|
height: 2em;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMS4wNDI1NiAxMTUuMzA3NTJsMTIxLjQ5NzYgMjc0LjMyNDQ4IDI5OC4zMjE5MiAzMS45NTkwNC0yMjMuMzYgMjAwLjMyNTEyIDYxLjc4ODE2IDI5My41ODU5Mi0yNTkuNTI3NjgtMTUwLjUyOC0yNjAuMTMxODQgMTQ5LjUwNCA2Mi45NTU1Mi0yOTMuMzYwNjQtMjIyLjU1NjE2LTIwMS4xOTU1MiAyOTguNDI5NDQtMzAuNzc2MzIgMTIyLjU4MzA0LTI3My44MzgwOHoiIGZpbGw9IiNGRjk2MkYiPjwvcGF0aD48L3N2Zz4=");
|
|
}
|
|
|
|
._star ._unsel {
|
|
width: 2em;
|
|
height: 2em;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5Ny41NzE4NCA0MjAuNDQ0MTZsLTI2NS42NjY1Ni00MC41NDUyOEw1MTIgMTI1LjQ0IDM5Mi4wOTk4NCAzNzkuODk4ODhsLTI2NS42NjY1NiA0MC41NDUyOCAxOTIuMzUzMjggMTk2LjY2NDMyLTQ1LjcwNjI0IDI3OS40NjQ5Nkw1MTIgNzY0LjYxNTY4bDIzOC45MTk2OCAxMzEuOTU3NzYtNDUuNzExMzYtMjc5LjQ2NDk2IDE5Mi4zNjM1Mi0xOTYuNjY0MzJ6TTUxMiA3MDguNTI2MDhsLTE3OS40MDk5MiAxMDAuOTEwMDggMzQuNDk4NTYtMjAyLjcwNTkyLTE1NC4zOTg3Mi0xNTYuOTk5NjggMjA4Ljc0NzUyLTI3LjYwMTkyTDUxMiAyMjguOTE1Mmw4OS43MDc1MiAxOTMuMjEzNDQgMjA3Ljg2Njg4IDI5LjM0MjcyLTE1Mi42NTc5MiAxNTYuMTEzOTIgMzEuOTAyNzIgMjAyLjcxMTA0TDUxMiA3MDguNTI2MDh6IiBmaWxsPSIjRkY5NjJGIj48L3BhdGg+PC9zdmc+");
|
|
}
|
|
</style> |