效果圖：

1.自定義組件starsRating.vue文件（放在components文件夾內(nèi)）

代碼截圖：

對應(yīng)的代碼：


<image @click=“btnStars1” class=“starsicon” :src=“starsObject[0]” mode=“widthFix”>
<image @click=“btnStars2” class=“starsicon” :src=“starsObject[1]” mode=“widthFix”>
<image @click=“btnStars3” class=“starsicon” :src=“starsObject[2]” mode=“widthFix”>
<image @click=“btnStars4” class=“starsicon” :src=“starsObject[3]” mode=“widthFix”>
<image @click=“btnStars5” class=“starsicon” :src=“starsObject[4]” mode=“widthFix”>
{{starsIndex}}.0

代碼截圖：

對應(yīng)的代碼：

props: {
starsIndex: {}, // 星級評價分?jǐn)?shù)
isEditStars: {}, // 是否編輯星級評價分?jǐn)?shù)
starsObject: {} // 數(shù)組
},
代碼截圖：

對應(yīng)的代碼：

	methods: {
		btnStars1: function() {
			var _this = this
			console.log("btnStars1 = " + _this.isEditStars)
			if (_this.isEditStars) {
				_this.$emit("starsClick", 1)
			}
		},
		btnStars2: function() {
			var _this = this
			if (_this.isEditStars) {
				_this.$emit("starsClick", 2)
			}
		},
		btnStars3: function() {
			var _this = this
			if (_this.isEditStars) {
				_this.$emit("starsClick", 3)
			}
		},
		btnStars4: function() {
			var _this = this
			if (_this.isEditStars) {
				_this.$emit("starsClick", 4)
			}
		},
		btnStars5: function() {
			var _this = this
			if (_this.isEditStars) {
				_this.$emit("starsClick", 5)
			}
		}
	}

樣式代碼：

2、頁面引用組件

代碼截圖：

對應(yīng)的代碼：

data() {
return {
starsIndex: 0, // 默認(rèn)星級評價分?jǐn)?shù)
clicked_list: {} //星級評價圖標(biāo)數(shù)組
}
},
components: {
starsRating
},
onLoad: function(options) {
var _this = this
_this.curShowStars(_this.starsIndex)
},
代碼截圖：
對應(yīng)的代碼：
methods: {
starsClick: function(starsNum) {
var _this = this
_this.starsIndex = starsNum
_this.curShowStars(starsNum)
},
// 星星評價展示
curShowStars: function(starsNum) {
var _this = this
if (starsNum == 1) {
_this.clicked_list = [
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_defalt.png”,
“…/…/static/img/stars_defalt.png”, “…/…/static/img/stars_defalt.png”,
“…/…/static/img/stars_defalt.png”
]
} else if (starsNum == 2) {
_this.clicked_list = [
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_selected.png”,
“…/…/static/img/stars_defalt.png”, “…/…/static/img/stars_defalt.png”,
“…/…/static/img/stars_defalt.png”
]
} else if (starsNum == 3) {
_this.clicked_list = [
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_selected.png”,
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_defalt.png”,
“…/…/static/img/stars_defalt.png”
]
} else if (starsNum == 4) {
_this.clicked_list = [
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_selected.png”,
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_selected.png”,
“…/…/static/img/stars_defalt.png”
]
} else if (starsNum == 5) {
_this.clicked_list = [
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_selected.png”,
“…/…/static/img/stars_selected.png”, “…/…/static/img/stars_selected.png”,
“…/…/static/img/stars_selected.png”
]
} else {
_this.clicked_list = [
“…/…/static/img/stars_defalt.png”, “…/…/static/img/stars_defalt.png”,
“…/…/static/img/stars_defalt.png”, “…/…/static/img/stars_defalt.png”,
“…/…/static/img/stars_defalt.png”
]
_this.starsIndex = 0
}
},
}