<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>评分组件plus</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1743249_skbhw08vw5.css">
<style>
.star {
color: gold;
font-size: 24px;
cursor: pointer;
}
display: flex;
}
font-size: 20px;
color: gold;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="app">
请您对此次交易做出评价：
<div>
<raty label="商品评价:" title="点击评分" @change="setgGoods"></raty><span>{{goods}} 分</span>
<!--监听内部传出的事件change-->
</div>
<div>
<raty label="客服评价:" title="点击评分" @change="setKefu"></raty><span>{{kefu}} 分</span>
</div>
<div>
<raty label="物流评价:" title="点击评分" @change="setWuliu"></raty><span>{{wuliu}} 分</span>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.0-rc.1/vue.cjs.js"></script>
<script>
Vue.component("raty", {
props: {
label: {
type: String,
},
},
template: `
<div>
{{label}} <i v-for="item in count" class="iconfont star"
@mouseenter="tempScore=item"
@mouseleave="tempScore=score"
@click="score=item"
:class="item<=tempScore?'iconxingxing':'iconxingxing1'"></i>
</div>
`,
data() {
return {
count: 10,
score: 1,
tempScore: 1,
}
},
watch: {
score(val) {
this.$emit("change", val) //将内部的值传递给外面
},
},
})
var app = new Vue({
el: '#app',
data() {
return {
goods: 1,
kefu: 1,
wuliu: 1,
}
},
methods: {
setgGoods(score) {//score 一个形参，代表内部传出的值
this.goods = score
},
setKefu(score) {
this.kefu = score
},
setWuliu(score) {
this.wuliu = score
}
},
})
</script>
</body>
</html>
