>[success] # 组件篇章 ~~~ 1.整个vue 项目是利用组件拼接而成，因此对组件封装规划和思路是章节探讨 的内容 ~~~ >[danger] ##### 封装目录格式 ~~~ 1.组件集成在，components文件目录下，每个组件最好以文件的形式进行封 装，并且配置响应的出口 │ ├── 'components' // 存放组件文件夹 │ │ └── 'count-to' // 一个存放count-to组件文件夹 │ │ └── 'count-to.vue' // 组件具体内容编写位置 │ │ └── 'index.js' // 组件的入口 ~~~ >[info] ## 将js 插件countup 进行封装 ~~~ 1.封装一个组件，首先根据文档，对所需要的参数值进行规划，在父组件调 用子组件的时候可以留出对应的参数配置 2.这个案例使用的是1系列的countup.js ，列出一下一系列使用参数： 2.1 创建一个countup对象var count= new CountUp("eleID", 开始值, 结束值); 2.2.具体参数整理： target = html元素的id，input，svg text元素，或者计数发生时先前选择的元素/输入的var startVal = 你要开始的值 endVal = 你想要达到的价值 decimals = （可选）数字中的小数位数，默认为0 duration = （可选）持续时间（以秒为单位），默认为2 options = （可选，请参阅demo）格式化/easing选项对象 2.3.options配置对象的具体参数在基础篇有讲解 2.4.start() 方法是启动countup插件的方法 ~~~ >[danger] ##### 基础篇，在文件目录count-to.vue 中代码如下 ~~~ 1.根据文档我们可以分析在做封装时候要做的如下几点 1.1 需要创建countup对象 1.2.创建对象的时候需要绑定dom 的id 1.3.需要将js 插件要使用的参数暴露出来 2.解决上面对应的三件事 2.1.需要创建countup对象的前提是创建了dom元素，因此根据vue声明周 期dom被渲染挂载的周期在mounted周期，但为了确保。我会在 、 mounted周期中加入$nextTick-- 它是用来获取更新后的dom 2.2.id是唯一的，如何保证我们创建的组件id的唯一，vue在每个组件都有 一个'this._uid'唯一值 2.3.配置参数由于是需要在父传子，父传子的接受方式是'props因此需要 定义好 3.下面案例中，props最好配置好对应的类型，如果必填配置好必填项， 配置好默认值 4.分析生成不同的id可以利用'this._uid'，因此可以在计算属性中进行监听， 而不是配置到data中 5.可以增加一个定时器，配置一个'delay' 属性来控制组件运行启动时间 ~~~ ~~~ <template> <span :id="eleId"></span> </template> <script> import Countup from 'countup' export default { name: "countTo", data(){ return{ counter:{} } }, computed:{ eleId(){ return `count_up_${this._uid}` } }, props:{ /* * @description 插件启动时长 单位毫秒 * */ delay:{ type:Number, default:0 }, /* * @description 起始值 * */ startVal:{ type:Number, default:0, }, /* * @description 终止值 * * */ endVal:{ type:Number, required:true, }, /* * @description 小数保留几位 * * */ decimals:{ type:Number, default:0 }, /* * @description 延迟动画时长 * * */ duration:{ type:Number, default:1, }, /* * @description 设置动画效果 * */ useEasing:{ type:Boolean, default:true, }, /* * @description 设置是否分组也就是4000 显示4,000 * */ useGrouping:{ type:Boolean, default:true, }, /* * @description 设置分组时候断开的符号默认',' * */ separator:{ type:String, default:',', }, /* * @description 设置小数的符号默认符号'.' * */ decimal:{ type:String, default:'.', }, }, mounted(){ this.$nextTick(()=>{ this.counter = new Countup(this.eleId, this.startVal, this.endVal, this.decimals, this.duration, { useEasing:this.useEasing, useGrouping:this.useGrouping, separator:this.separator, decimal:this.decimal, }) setTimeout(()=>{ // start() 是插件 启动的方法，这个启动方法是根据插件文档说明走的 this.counter.start() },this.delay); }); } } </script> <style scoped> </style> ~~~ >[danger] ##### 在对应组件文件夹的index.js入口文件写法案例 ~~~ import CountTo from './count-to.vue' export default CountTo ~~~ >[danger] ##### 在创建的名叫count-to.vue 视图组件文件使用组件 ~~~ <template> <div> <count-to :endVal="100" :duration="300"></count-to> </div> </template> <script> import CountTo from '@/components/count-to' export default { name: "count_to", components:{ CountTo, }, } </script> <style scoped> </style> ~~~