Vue组件常用小知识点-白红宇

Vue组件常用小知识点

阅读量：4170 次

发布时间：2019-05-26

本文共 1488 字，大约阅读时间需要 4 分钟。

1、日期选择组件

//禁用一部分（自己可根据实际情况控制,如下示例只可选择1-1至5-4之前的数据）var tmp = ['2021-01-01','2021-05-04'];_than.dataRange.disabledDate = function (time) {
   return time.getTime() < new Date(tmp[0]) || time.getTime() > new Date(tmp[1])}

//禁用全部：（小于大日期，大于小日期保证没有交集即可）_than.dataRange.disabledDate = function (time) {
   return time.getTime() < new Date("2016-01-01") || time.getTime() > new Date("2015-01-01")}

// 情景1: 设置选择今天以及今天之后的日期return time.getTime() < Date.now() - 8.64e7;// 情景2: 设置选择今天以及今天以前的日期 return time.getTime() > Date.now() - 8.64e6// 情景3: 设置选择今天之后的日期（不能选择当天时间）return time.getTime() < Date.now();// 情景4: 设置选择今天之前的日期（不能选择当天）return time.getTime() > Date.now();// 情景5: 设置选择三个月之前到今天的日期        disabledDate(time) {
               let curDate = (new Date()).getTime();            let three = 90 * 24 * 3600 * 1000;            let threeMonths = curDate - three;            return time.getTime() > Date.now() || time.getTime() < threeMonths;;          }

场景：根据某种需求来禁用某些日期，若禁用条件改变但是不展开日期控件，是正常的。

但如果先展开日期控件然后再变禁用条件，就会发现禁用的日期不起作用了。

解决方法：在设置禁用日期之前先将内容清空：_than.dataRange = {};

2、换行提示

如果遇到后台返回的提示信息数据中是有

换行符的，但是直接提示会把换行符当做普通的文本处理，下面介绍一种可以换行的确认提示：

var mess = "当前测试第一行。
第二行：";var that = this;that.$msgbox({
   title: "错误提示",message: mess,showConfirmButton: true,showCancelButton: true,dangerouslyUseHTMLString: true,confirmButtonText: "确定",cancelButtonText: "取消",type: 'warning',}).then(function () {
   //确认后操作}).catch(function () {
   //取消后操作});