基于 vue.js 封装高 复用的业务组件

意义：增强开发效率，增加代码的可维护性和可拓展性。

 主要考虑传入的数据  和 事件

* 封装一个组件，会对props做一个约束 props ：

* dom元素样式的传递： 动态 class style 类名 :class="[`button--${type}`,{ is-plain:plain}]" （type在css中 重写每一项类型的样式）

* 字体icon 图标 也可以传 子组件： [class*=icon] v-if="icon" ：class="icon" icon :{ type:string,default:false} 父组件 icon="icon"

* 事件： 子组件 @click= "handleClick" handleClick(e){ this.$emit("click",e)} 父组件 @click="fn"

之前业余封装 可控制当前percentage 和 almost  的Vue进度条组件  

  /**
  * @param processTitle   :标题
  * @param processIcon    :icon
  * @param percentage     :当前 所占数值
  * @param almost         :总数
  * @param status         :状态
  * @param icon           :颜色
  * @param strokeWidth    :process高度
  * @param textInside     ：文字内外侧
  * @param type           :类型
  * @theMethodsOfCalulate :(this.percentage / this.almost) * current  (class='process_allBar')+ "px"
  *
  */

 <template>
  <!-- 指标监控-数字看板-人员信息-员工组件 -->
  <div class="process" :class="[status ? `is-${status}` : '', `progress--${type}`]">
    <span class="process_icon" :style="{ backgroundColor: icon }"></span>
    <span class="process_left_title">{{ processTitle }}</span>
    <div id="process_allBar">
    <div class="process-left"></div>
    <div id="process_bar" ref="process_bar" :style="barStyle">
      <div class="progress-bar__inner__text" v-if="textInside">{{ percentage }}人</div>
    </div>
   </div>
 </div>
</template> 


export default {
   components: {},
            props: {
            status: {
                type: String,
            },
            processTitle: {
                type: String,
                require: true,
            },
            percentage: {
                type: Number,
                require: true,
            },
            almost: {
                type: Number,
                require: true,
            },
            icon: {
                type: String,
                require: true,
            },
            strokeWidth: {
                type: Number,
            },
            textInside: {
                type: Boolean,
                default: false,
            },
            type: {
                type: String,
                default: "line",
            },
            },
            computed: {
            stroke() {
                let color;
                switch (this.status) {
                case "maleStaff":
                    color = "linear-gradient(to right,#5eb9ff, #0088f7)";
                    break;
                case "maleEmployee":
                    color = "linear-gradient(to right,#ffa8b1, #fc6d73)";
                    break;
                case "BackOfficeStaff":
                    color = "linear-gradient(to right,#99e5e5, #00e4e7)";
                    break;
                case "outworker":
                    color = "linear-gradient(to right,#ffbe71, #fd9944)";
                    break;
                default:
                    color = "#20a0ff";
                }
                return color;
            },
            barStyle() {
                return {
                    background: this.stroke,
                };
            },
            },
     mounted() {
       this.$refs.process_bar.style.width = (this.percentage / this.almost) * 200 + "px";
   },
};