149 lines
3.5 KiB
Vue
149 lines
3.5 KiB
Vue
<template>
|
||
<view class="tm-rate d-inline-block">
|
||
<view @touchstart="ishover=false" @touchend="ishover=disabled?false:true" v-for="(item,index) in num" :key="index" class="d-inline-block" :class="[ishover&&index+1==indexStar?'ani':'','pr-'+margin]">
|
||
<tm-icons :black="black_tmeme" dense @click="clicSelect(index+1)" :size="size" :color="index+1 <= indexStar?color_tmeme:uncolor"
|
||
:name="icon"></tm-icons>
|
||
</view>
|
||
<slot name="default" :num="num"><text v-if="showNum" :class="['text-'+color_tmeme]">{{indexStar}}</text></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 评分
|
||
* @property {String} color = [] 默认：primary，选中的颜色
|
||
* @property {String} uncolor = [] 默认：grey-lighten-2，未选中的颜色
|
||
* @property {Number} num = [] 默认：5，数量
|
||
* @property {Number} value = [] 默认：0，当前的评分，推荐：value.sync或者v-model.
|
||
* @property {Number} size = [] 默认：32，单位upx,图标大小。
|
||
* @property {Number} margin = [] 默认：16，单位upx,间隙。
|
||
* @property {Boolean} disabled = [] 默认：false，是否禁用。
|
||
* @property {Boolean} black = [] 默认：null，暗黑模式。
|
||
* @property {Boolean} show-num = [] 默认：false，是否展示评分数字。
|
||
* @property {Boolean} icon = [] 默认：icon-collection-fill，图片名称，可以自定义其它的。
|
||
* @property {String} name = [] 默认：''，提交表单时的的字段名称标识
|
||
* @property {Function} change 评分改变时触发，参数当前的评分。
|
||
*/
|
||
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||
export default {
|
||
components:{tmIcons},
|
||
name: "tm-rate",
|
||
model: {
|
||
prop: "value",
|
||
event: "input"
|
||
},
|
||
props: {
|
||
//提交表单时的的字段名称
|
||
name:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: "primary"
|
||
},
|
||
uncolor: {
|
||
type: String,
|
||
default: "grey-lighten-2"
|
||
},
|
||
black:{
|
||
type:Boolean|String,
|
||
default:null
|
||
},
|
||
num: {
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
value: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
size: {
|
||
type: Number,
|
||
default: 42
|
||
},
|
||
margin: {
|
||
type: Number,
|
||
default: 16
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showNum:{
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
icon:{
|
||
type: String,
|
||
default: 'icon-collection-fill'
|
||
},
|
||
// 跟随主题色的改变而改变。
|
||
fllowTheme:{
|
||
type:Boolean|String,
|
||
default:true
|
||
}
|
||
},
|
||
computed: {
|
||
black_tmeme:function(){
|
||
if(this.black!==null) return this.black;
|
||
return this.$tm.vx.state().tmVuetify.black;
|
||
},
|
||
color_tmeme:function(){
|
||
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
|
||
return this.$tm.vx.state().tmVuetify.color;
|
||
}
|
||
return this.color;
|
||
},
|
||
indexStar: {
|
||
get: function() {
|
||
|
||
return this.value;
|
||
},
|
||
set: function(val) {
|
||
let dval = val;
|
||
if(val > this.num) dval = this.num;
|
||
this.$emit("input",val)
|
||
this.$emit("update:value",val)
|
||
this.$emit("change",val)
|
||
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
ishover:false,
|
||
};
|
||
},
|
||
methods: {
|
||
clicSelect(index) {
|
||
if (this.disabled) return;
|
||
this.indexStar = index;
|
||
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tm-rate{
|
||
.ani {
|
||
animation: ani 0.2s linear;
|
||
}
|
||
}
|
||
|
||
@keyframes ani {
|
||
0% {
|
||
transform: scale(0.85)
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.2)
|
||
}
|
||
|
||
100% {
|
||
transform: scale(0.85)
|
||
}
|
||
}
|
||
</style>
|