hengmei-two/components/rate.vue

143 lines
3.7 KiB
Vue
Raw Normal View History

2021-08-19 06:40:59 +00:00
<template>
<view class="htz-rate-main">
<template v-for="(item,index) in count">
<image @tap="checkItem((index+1))" class="htz-rate-image" :key="index"
:style="{'width':size+'rpx','height':size+'rpx','padding-right':gutter+'rpx'}"
:src="checkedVal<(index+1)?defImgSrc:selImgSrc"></image>
</template>
</view>
</template>
<script>
export default {
name: 'htz-rate',
props: {
value: { //受控分值
type: Number,
default: 0,
},
count: { //数量
type: Number,
default: 5,
},
size: { //图标大小
type: Number,
default: 42,
},
gutter: { //图标间距
type: Number,
default: 15,
},
type: { //内置类型
type: Number,
default: 0,
},
disHref: { //自定义默认图片
type: String,
default: '',
},
checkedHref: { //自定义选中图片
type: String,
default: '',
},
readonly: { //是否只读
type: Boolean,
default: false,
},
},
data() {
return {
ImgData: ['/static/img/rate/rate1_0.png', '/static/img/rate/rate2_0.png',
'/static/img/rate/rate3_0.png', '/static/img/rate/rate4_0.png', '/static/img/rate/rate5_0.png',
'/static/img/rate/rate6_0.png'
],
defImgSrc: '',
selImgSrc: '',
checkedVal: 0,
}
},
mounted: function() {
this.$nextTick(function() {
this.checkedVal = this.value;
if (this.disHref != '') {
this.defImgSrc = this.disHref;
this.selImgSrc = this.checkedHref;
} else {
//if (this.type != undefined) {
this.defImgSrc = this.ImgData[this.type];
this.selImgSrc = this.ImgData[this.type].replace('_0', '_1');
//}
}
});
},
watch: {
value(val, oldVal) {
this.checkedVal = this.value;
},
},
methods: {
checkItem(index) {
if (!this.readonly) {
this.checkedVal = index;
this.$emit('input', index);
this.$emit('change', index);
}
},
}
}
</script>
<style>
.htz-rate-main {
display: inline-flex;
}
.htz-rate-image {
vertical-align: middle;
}
.htz-image-upload-list {
display: flex;
flex-wrap: wrap;
}
.htz-image-upload-Item {
width: 160rpx;
height: 160rpx;
margin: 13rpx;
border-radius: 10rpx;
position: relative;
}
.htz-image-upload-Item image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.htz-image-upload-Item-add {
font-size: 105rpx;
/* line-height: 160rpx; */
text-align: center;
border: 1px dashed #d9d9d9;
color: #d9d9d9;
}
.htz-image-upload-Item-del {
background-color: #f5222d;
font-size: 24rpx;
position: absolute;
width: 35rpx;
height: 35rpx;
line-height: 35rpx;
text-align: center;
top: 0;
right: 0;
z-index: 100;
color: #fff;
}
</style>