文章目录
  1. 1. 组件封装
    1. 1.1. 组件的自我修养
    2. 1.2. Datetimepicker 组件封装
    3. 1.3. 使用Datetimepicker组件
  2. 2. 结束语

最近在使用 Vue2 作为项目中前端的框架,《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录简单封装组件的过程。

组件封装


在 MVVM 框架盛行的今天,组件封装的思维必不可少。不管是 Angular、Vue、React,还是又新兴的一些框架,我们在写代码的过程中,老生常谈的都是抽象和封装这样的事情。

组件的自我修养

这里,我们在封装 Datetimepicker 的时候,主要是要把这种可重复使用的组件提取的思维,给发散到各个地方。

前面我们在使用一些插件的时候,更多的是在页面和业务逻辑中封装一些方法,方便使用,像这几个:

1
2
3
4
5
6
// 设置iCheck插件初始化
SetICheck(that);
// 设置switchery插件初始化
SetSwitchery(that);
// 设置daterangepicker插件初始化
SetDaterangepicker(that, "#single_cal3");

但是,其实我们也可以将逻辑结合视图部分,一起封装成一个组件。
通常来说,一个组件的自我修养包括以下内容:

  • 组件内维护自身的数据和状态
  • 组件内维护自身的事件
  • 通过初始化事件(event、绑定的scope事件,传入数据),来初始化组件状态,激活组件
  • 通过更改某个配置,来控制展示
  • 通过对外提供接口,可查询组件状态

如上,作为一个独立的组件,我们需要提供与外界交互的接口。

同时,我们在设计一个组件时,需要考虑视图配置,来适应不同场景的使用,例如:

  • 通过某个属性配置某个部分是否显示
  • 通过一个属性配置需要显示的所有部分
  • 通过传入初始值进行相关显示控制

这些都是基本的配置化思想,与组件结合使用会有很不错的效果。

Datetimepicker 组件封装

首先,我们使用的插件是bootstrap-datetimepicker
更多的配置项,可以参考官方文档,这里我们直接看代码吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
<input type="text" class="form-control form-input" :placeholder="placeholder" :value="date" style="position: relative;">
</template>

<script>

export default {
name: "Datetimepicker",
data() {
return {
date: ""
};
},
props: {
placeholder: { // 占位提示
type: String,
default: ""
},
format: { // 格式化日期时间
type: String,
default: "yyyy-mm-dd hh:ii:ss"
},
minView: { // 最小视图
type: Number,
default: 0
},
startView: { // 起始视图
type: Number,
default: 2
},
maxView: { // 最大视图
type: Number,
default: 4
},
startDate: { // 最早可选时间
type: Date,
default: null
},
endDate: { // 最晚可选时间
type: Date,
default: null
},
defaultDate: { // 默认时间
type: String,
default: ''
}
},
mounted() {
// 设置默认时间
this.date = this.defaultDate
// 初始化表单事件
$(this.$el)
.datetimepicker({
language: "zh-CN",
format: this.format,
autoclose: true,
startView: this.startView,
minView: this.minView,
maxView: this.maxView,
startDate: this.startDate,
endDate: this.endDate
})
.on("hide", ev => {
this.date = $(ev.target).val();
// 触发change事件
this.$emit("change", this.date);
});
},
beforeDestroy() {
// 销毁
$(this.$el)
.datetimepicker("remove");
}
};
</script>

是不是很简单,其实Vue提供的封装功能也是很方便的。
组件化和配置化思想,不应该局限于框架,应该是要发散到各个地方的。

使用Datetimepicker组件

封装过后,我们使用起来就是很简单的事情了,只需要两个步骤:

  1. 引入组件(全局或局部)。
1
2
3
4
5
6
7
8
9
10
// main.js 全局引入
import Datetimepicker from 'components/Datetimepicker'

Vue.component('Datetimepicker', Datetimepicker)

// ...其他配置

new Vue({
// ...
}).$mount('#app')
  1. 使用组件,绑定配置和事件。
1
<Datetimepicker :defaultDate="new Date().format('yyyy-MM-dd')" :endDate="new Date()" :format="'yyyy-mm-dd'" :minView="4" @change="getValue($event)"  />

上面的使用中,我们设置了默认时间为今天的日期,结束时间为当前(即可选择今天以前的时间),格式化为“年-月-日”方式,最小视图为日期选择,同时选择时间变更的时候绑定getValue事件。

  • 页面效果

image

结束语


组件封装和配置化,乃是程序员必备技能。提高开发效率,同时锻炼逻辑思维抽象能力,你值得拥有。
这里我们的Datetimepicker是基于input来实现的,但其实还能用v-model来改善,这块后面会说到。
此处查看项目代码
此处查看页面效果

码生艰难,写文不易,给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 组件封装
    1. 1.1. 组件的自我修养
    2. 1.2. Datetimepicker 组件封装
    3. 1.3. 使用Datetimepicker组件
  2. 2. 结束语