Vue2.0插件开发UI,五星好评

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>