Vue2.0插件开发UI,五星好评
src目录下创建 libs\JSUI\index.js
import Stars from "./components/stars"
const JSUI = {}
const componentPool = [
Stars
]
JSUI.install = function (Vue) {
// 遍历注册组件
componentPool.forEach(components => {
Vue.component(components.name, components);
});
}
export default JSUI;
libs\JSUI目录下创建components/stars.vue
<template>
<div>
<span
v-for="number in 5"
:class = "[
'color',
number <= setNum ? 'active' : ''
]"
:style="{fontSize:size + 'px'}"
@click="setNumStar(number)"
>
我
</span>
</div>
</template>
<script>
export default {
name : 'Stars',
props : {
size : {
type : Number,
default : 0,
},
num : {
type : Number,
default : 0
}
},
data () {
return {
setNum : this.num
}
},
methods : {
setNumStar (number) {
this.setNum = number;
this.$emit('getNumStar', this.setNum);
}
},
}
</script>
<style lang="scss">
.color {
color : rgb(0, 38, 255);
}
.active {
color : rgb(226, 226, 170);
}
</style>
再main.js 引入插件
import JSUI from './libs/JSUI'
Vue.use(JSUI);
再App.vue引入相关组件
<template>
<div id="app">
<Stars
:size="size"
:num="setNum"
@getNumStar="getNumStar"
/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
size : 19,
setNum : 3
}
},
methods: {
getNumStar (num) {
// 将传过来的值作为变量,再传给子组件
this.setNum = num;
}
},
}
</script>
<style lang="scss">
</style>