教你一招 实现10分钟内轻松将图鸟UI组件迁移到H5
教你一招 实现10分钟内轻松将图鸟UI组件迁移到H5
大家好，我是Mandy，今天分享的内容是如何将图鸟UI的组件迁移到原生vue中。有时在图鸟技术群也会碰到一些同学提到这样的问题，如何将图鸟UI的组件用在H5中，今天分享的这篇文章可以作为参考示例，其他的组件也可以如法炮制。
先简单描述一下事件背景，公司内部的项目是使用vue2开发的，里面的大部分组件使用到了vant组件，vant组件在很多细节的地方很难实现自定义，自己去编写一个组件就很费时费力，因此决定将图鸟UI组件的组件给拿来使用。
图鸟UI本身的组件是vue2，也支持迁移到其他的vue项目中，使用起来也是非常的方便，而且提供很多自定义的事件。
那下面就直接步入正题吧，下面的截图就是利用图鸟UI中的Calendar组件实现。主要修改的地方有日历的上下月切换，以及日历的文案描述。
第一步
首先我们将图鸟UI开源的组件给下载到本地，下载的渠道有两个，以下两种方式任意选择一个即可，推荐通过Gitee下载。
1、Gitee开源仓库https://gitee.com/bruce_qiq/tuniao-ui
2、Dcloud插件市场https://ext.dcloud.net.cn/plugin?id=7088
下载好之后，可以看到如下的目录结构，勾选出来的目录就是图鸟UI组件的目录。进入该目录，找到名为tn-calendar的目录，下面的tn-calendar.vue文件就是源代码。该组件的文档，可以直接参考官方文档https://docs.ahuaaa.cn/components/calendar.html
第二步
接下来，将组件的源代码，拷贝到自己的项目中，接着准备我们的接口数据。
到此我们，该组件就能正常使用了。
业务修改
前面的效果预览图，可以看到是修改了默认的底部文字和日期左右的切换选项。我们先来看看底部文字是如何实现的。
底部文字，我是采用的后端接口返回，无非就是把图鸟的每一个月的日期和接口的文字做了一个匹配。例如图鸟UI原本是支持农历显示，我直接将农历的文字替换为接口返回的文本信息。然后自己在组件中定义了一个prop，将组装好的数据通过prop传递到组件中。
接下来说说，如何修改的左右切换按钮。原本的切换按钮，是这样的。
找到组件icon对应的位置，可以把icon对应的代码删除或者将icon的class给移除，这样就不会显示原本组件的icon。然后添加两个div，div中的内容填写为上下月的按钮即可。
<div class="tn-calendar__action">
<div v-if="changeYear" class="tn-calendar__action__icon" :style="{ backgroundColor: yearArrowColor }"
@click="changeYearHandler(false)">
<div><span class="tn-icon-left"></span></div>
</div>
<div v-if="changeMonth" class="tn-calendar__action__icon" :style="{ backgroundColor: monthArrowColor }"
@click="changeMonthHandler(false)">
<div><span>上一月</span></div>
</div>
<div class="tn-calendar__action__text">{{ dateTitle }}</div>
<div v-if="changeMonth" class="tn-calendar__action__icon" :style="{ backgroundColor: monthArrowColor }"
@click="changeMonthHandler(true)">
<div><span>下一月</span></div>
</div>
<div v-if="changeYear" class="tn-calendar__action__icon" :style="{ backgroundColor: yearArrowColor }"
@click="changeYearHandler(true)">
<div><span class="tn-icon-right"></span></div>
</div>
</div>
到这里从UI上就实现了需求，接着就来处理上下月的问题。当然你没这样的需求，该文章中涉及到上下月的描述就不用管即可。
要实现上下月的切换，基本的思路就是增加两个click事件。然后判断一下当前的月份是否符合条件，不符合就提示并且不做仍和处理。下面是示例代码：
// 切换月份
changeMonthHandler(add) {
// 获取到系统当前的年份和月份，只能往前或者往后切换一个月
let currentDate = new Date()
let currentYear = currentDate.getFullYear()
let currentMonth = currentDate.getMonth() + 1
if (add) {
let monthOrign = this.month
let yearOrign = this.year
let month = this.month + 1
let year = month > 12 ? this.year + 1 : this.year
if (!this.checkRange(year)) {
this.month = month > 12 ? 1 : month
this.year = year
let nextYearMonthDay = this.getNextMonth(`${year}-${month}`)
let diffMonth = this.isTwoMonthsApart(`${currentYear}-${currentMonth > 10 ? currentMonth : `0${currentMonth}`}-01`, nextYearMonthDay)
console.log(diffMonth, "差值")
if (diffMonth > 2) {
Toast({message: "不能再往前了"});
this.year = yearOrign
this.month = monthOrign
return
}
let queryDate = this.getPreMonth(nextYearMonthDay).split("-")
this.$emit('change', {
year: queryDate[0],
month: queryDate[1],
day: queryDate[2],
days: '',
week: '',
isToday: 1,
date: '',
switch: 10,
})
this.changeData()
}
} else {
let monthOrign = this.month
let yearOrign = this.year
let month = this.month - 1
let year = month < 1 ? this.year - 1 : this.year
if (!this.checkRange(year)) {
this.month = month < 1 ? 12 : month
this.year = year
let preYearMonthDay = this.getPreMonth(`${year}-${month}`)
let diffMonth = this.isTwoMonthsApart(preYearMonthDay, `${currentYear}-${currentMonth > 10 ? currentMonth : `0${currentMonth}`}-01`)
console.log(diffMonth, "差值")
if (diffMonth > 2) {
Toast({message: "不能再往后了"});
this.year = yearOrign
this.month = monthOrign
return
}
console.log(preYearMonthDay, "上一个月")
let queryDate = this.getNextMonth(preYearMonthDay).split("-")
this.$emit('change', {
year: queryDate[0],
month: queryDate[1],
day: queryDate[2],
days: '',
week: '',
isToday: 1,
date: '',
switch: 10,
})
this.changeData()
}
}
},
下面几个函数是处理点击事件时，获取上下月然后与当前月进行对比。如何条件就处理，不符合就直接return即可。
// 获取当一个月
getPreMonth(date) {
var arr = date.split('-');
var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2] || '01'; //获取当前日期的日
var month2 = parseInt(month) - 1;
if (month2 == 0) {
year = parseInt(year) - 1;
month2 = 12;
} else if(month2 == -1) {
month2 = 11
}
var days2 = new Date(year, month2, 0);
days2 = days2.getDate();
if (day > days2) {
day = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
var t2 = year + '-' + month2 + '-' + day;
return t2;
},
// 获取下一个月
getNextMonth(date) {
var arr = date.split('-');
var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2] || '01'; //获取当前日期的日
var month2 = parseInt(month) + 1;
if (month2 == 13) {
year = parseInt(year) + 1;
month2 = 1
} else if (month2 == 14) {
month2 = 2;
}
var day2 = day;
var days2 = new Date(year, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
var t2 = year + '-' + month2 + '-' + day2;
return t2;
},
/**
* date1要小于date2
* @param {*} date1
* @param {*} date2
*/
isTwoMonthsApart(date1, date2) {
let date1Array = date1.split("-")
let date2Array = date2.split("-")
date1 = new Date(date1Array[0], date1Array[1], date1Array[2])
date2 = new Date(date2Array[0], date2Array[1], date2Array[2])
let monthDiff = (date2.getFullYear() - date1.getFullYear()) * 12;
let month = date2.getMonth() - date1.getMonth()
console.log(monthDiff, month)
if (date1.getFullYear() == date2.getFullYear()) {
return month - monthDiff
} else if (date2.getFullYear() > date1.getFullYear()) {
return monthDiff + month
} else {
return month + monthDiff
}
},
到此为止，如何将图鸟UI的组件迁移到原生vue中的演示教程就结束了。希望对你有所帮助，对于其他的组件，你一样可以用该方式进行处理。