我是歌谣 放弃很难 但是坚持一定很酷 微信公众号关注小歌谣 一起学习前后端知识
今天要说得是实现一个vue中实现五星评价得效果
简单来说 就是封装组件把
具体需要我们了解组件间得相互传值
数据绑定等知识
先用脚手架起个项目先
脚手架启动
在这里插入图片描述
安装依赖
包括
npm install sass-loader@7.1.0 --save
npm install style-loader
npm install node-sass
安装好对应得版本之后
我们看一下整个文件得目录结构
目录结构
在这里插入图片描述
目录结构看完之后
代码部分
app.vue
<template>
<div id="app">
<Stars
:num="starNum"
:size="size"
@getStarNum="getStarNum"
/>
</div>
</template>
<script>
import Stars from "@/components/Stars";
export default {
components: { Stars },
name: 'App',
data () {
return {
size: 30,
starNum: 3
}
},
methods: {
getStarNum (number) {
this.starNum = number;
console.log(this.starNum);
}
}
}
</script>
index.js
import Stars from "@/components/Stars";
const JSUI = {};
const componentPool = [
Stars
];
JSUI.install = function (Vue) {
componentPool.forEach(component => {
Vue.component(component.name, component);
});
}
export default JSUI;
main.js
import Vue from 'vue'
import App from './App.vue'
import JSUI from "@/index";
Vue.config.productionTip = false
Vue.use(JSUI);
new Vue({
render: h => h(App),
}).$mount('#app')
Star.vue
<template>
<div class="ui-stars">
<span
v-for="number in 5"
:key="number"
:class="[
'iconfont icon-star',
number <= starNum ? 'active' : ''
]"
:style="{ fontSize: size + 'px' }"
@click="setStarNum(number)"
></span>
</div>
</template>
<script>
export default {
name: 'Stars',
props: {
num: {
type: Number,
default: 0
},
size: {
type: Number,
default: 16
}
},
data () {
return {
starNum: this.num
}
},
methods: {
setStarNum (number) {
this.starNum = number;
this.$emit('getStarNum', this.starNum);
}
}
}
</script>
<style lang="scss" scoped>
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_2416240_16adww0qe8ri.eot?t=1615530777645'); /* IE9 */
src: url('//at.alicdn.com/t/font_2416240_16adww0qe8ri.eot?t=1615530777645#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKoAAsAAAAABlAAAAJdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApcdAE2AiQDCAsGAAQgBYRtBy4bmAXIHpIkRQpIUhQlOA0GABF8vx+/Pe/dbyJRtX3HtJFo5lVsumVLhGIZQiORLNNs/9c0BRRqc3lv9qCtrBqRKuqD/APOZfT8hCa9aWBjKuTmVjehm0JxkBeH0yZQIPOBcpl7UBdQFwdSQHtjm6yEMm4Yu8AlnCdQqpOmsrF/OoG2xJoWiPOBZ0E755AkFi4WCmvWJvEUChRn96qfgSfh9+OXQbTJFOSsrL1zey5sfmdH1e6u7jrlI8BJQJsLkGMcSMSh2sCOmmC4mtJAXS/YV3rw3eq/rxJ7lQv211mp5aAdMu6J6bJuNZzBbXXVAgyOehTRcmM2u7/ffGjy8Kzh8OT21dDR6eOb1iPzmxczn7r+9ud/Dz71qFHfjffF17vRP73L5m+Xbe3astek5oNf3q2wfpa/rS2oIHhZvvl9tmrhd3FZAl/T1kNZ0s8EivdmDP4Ks2dD0tmWMksqs7Y103K2slKl+A9bav2OlTTcQiQUaxhhKtKRQq5YPzJhx6FAmQkoVGwZSo052FymDquJVIJR1wBCtSfIVHoPuWoLZML+QIFG/1CoOmpQ6kjU7VlmMILuOpMl5KJ9hYGTpcpRSzdKH5F3FlucZYf4GXEZuLFv9IrhA0qJ51hQnnsDEYWKswT3wWUUxxnmnIXkiOGL5EPTVHVvMpwsga51jFgEcSHbFRRwZFLKby+6pc+PEM+ZmIVb6mqUM4SVgt5Rn6HXA3kgSHvV3cs1pXOeASEUpLBMAu2DUSQWy6C8flSIOITBH+HLDZl2M9VXYKwvSr5uB5SypFnY+bl0QSwGAAA=') format('woff2'),
url('//at.alicdn.com/t/font_2416240_16adww0qe8ri.woff?t=1615530777645') format('woff'),
url('//at.alicdn.com/t/font_2416240_16adww0qe8ri.ttf?t=1615530777645') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_2416240_16adww0qe8ri.svg?t=1615530777645#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #999;
&.icon-star:before {
content: "\e842";
}
&.active {
color: #FCC33F;
}
}
</style>
运行结果
在这里插入图片描述
