评论五星组件

image.png

新建 libs 目录

JSUI 目录

components 目录

Stars.vue 文件

<template>
  <div class="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: 30
    }
  },
  data () {
    return {
      starNum: this.num
    }
  },
  methods: {
    setStarNum (num) {
      this.starNum = num
    }
  }

}
</script>

<style lang="scss" scoped>
.stars {
  cursor: pointer;
  .iconfont {
    &.active {
      color: #ffd629;
    }
  }
  .icon-Star {
    color: #c1c1c1;
  }
}
</style>

index.js

import Stars from './components/Stars.vue';

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 './plugins/axios';
import App from './App.vue';
import router from './router';
import './plugins/element.js';

import '@/styles/reset.css'; //初始化css

import JSUI from './libs/JSUI'; // 插件
import store from './store'

Vue.config.productionTip = false;

Vue.use(JSUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

然后就可以在其他组件引入 使用这个组件了 无需引入

  <Stars :num=num :size=size></Stars>   // num 数量   size:评星的大小

image.png

ps 记得在index.html 引入
<link rel="stylesheet" href="//at.alicdn.com/t/font_2726023_lzsqvcfug7.css">