组件封装基础

实现步骤：

1、目标是封装countup
  
2、在 components 下新建一个目录 count-to 封装的内容都放这里，建立一个count-to.vue 和index.js , count-to.vue 文件对countup JS进行封装， index.js文件将组件转出，方便页面调用。

4、 在路由列表中注册

5、在 views 下新建一个count-to.vue 的页面对封装组件进行使用

6、搭好基本框架代码，查看countUp.js的相关API, 了解怎么使用，需要传那些值

7、 调用验证

相关代码

• views/count-to.vue

<template>
    <div>
        <count-to :end-val="200">
            <span>总金额：</span>
        </count-to>
    </div>
</template>
<script>
import CountTo from '@/components/count-to'
export default {
    name: 'count_to',
    components: {
        CountTo
    }
}
</script>

• components/index.js

import CountTo from './count-to.vue'
export default CountTo

• components/count-to.vue

<template>
    <div>
        <!-- slot 是插槽，根据防止的位置，插入内容-->
        <slot></slot><span :class="countClass" :id="eleId"></span>
    </div>
</template>
<script>
import CountUp from 'countup'
export default {
    name: 'CountTo',
    computed: {
        // 计算属性
        eleId () {
            return `count_up_${this._uid}`
        },
        countClass () {
            return [
                'count-to-number',
                this.className
            ]
        }
    },
    data () {
        return {
            counter: {}
        }
    },
    props: {
        /**
         * @description 起始值
         */
        startVal: {
            type: Number,
            default: 0
        },
        /**
         * @description 目标值 必填
         */
        endVal: {
            type: Number,
            required: true
        },
        /**
         * @description 小数点保留几位小数
         */
        decimals: {
            type: Number,
            default: 0
        },
        /**
         * @description 动画延迟时间 单位为毫秒（自定义属性）
         */
        delay: {
            type: Number,
            default: 0
        },
        /**
         * 渐变时长，单位为
         */
        duration: {
            type: Number,
            default: 1
        },
        /**
         * @description 是否使用变速效果
         */
        useEasing: {
            type: Boolean,
            default: false
        },
        /**
         * @description 是否使用分组
         */
        useGroup: {
            type: Boolean,
            default: true
        },
        /**
         * @description 分组分割符号
         */
        separator: {
            type: String,
            default: ','
        },
        /**
         * @description 整数与小数分割符号
         */
        decimal: {
            type: String,
            default: '.'
        },
        className: {
            type: String,
            default: ""
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.counter = new CountUp(
                this.eleId,
                this.startVal,
                this.endVal,
                this.decimals,
                this.duration,{
                    useEasing: this.useEasing,
                    useGroup: this.useGroup,
                    separator: this.separator,
                    decimal: this.decimal
                })
                setTimeout(() => {
                    this.counter.start()
                }, this.delay);
        })
    }
}
</script>

组件使用ID值

// 每个组件唯一的Id 值
${this._uid}

组件中获取DOM

• 父组件调用子组件使用 ref 属性, ref在自定义组件中是获取该组件的实例，在DOM元素上时的获取改元素

// 子组件中 定义一个 ref
<span  ref="number" :id="eleId"></span>
// 子组件再定义个方法获取它的值
methods: {
   getCount () {
       console.log(this.$refs.number.innerText)
    }
},

// 父组件中使用时 也是使用 ref 
<count-to  ref="countTo" :end-val="200"></count-to>
// 父组件通过一个方法调用子组件的方法
methods: {
   getNumber () {
           this.$refs.countTo.getCount()
   }
}

引入css

• 第一种 直接引入

// 外部建一个 less 的样式文件
import './count-to.less'

• 第二种 内嵌

<style lang="less">
......
</style>

• 第三种 内部引用

<style lang="less">
@import('./count-to.less')
</style>