Vue组件常用小知识点

1、日期选择组件

<db-date-picker clearable v-model="year" type="year" placeholder="选择年" @change="yearChange" :picker-options="dataRange">
</db-date-picker>

//禁用一部分（自己可根据实际情况控制,如下示例只可选择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 = "当前测试第一行。<br/>第二行：";
var that = this;
that.$msgbox({
title: "错误提示",
message: mess,
showConfirmButton: true,
showCancelButton: true,
dangerouslyUseHTMLString: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
type: 'warning',
}).then(function () {
//确认后操作
}).catch(function () {
//取消后操作
});

3、多行文本

<db-textarea v-model="remark" maxSize="200" edittype="edit"></db-textarea>

4、输入框限制输入最大字数

<el-input v-model="item.name" placeholder="请输入内容" maxlength="5"></el-input>

5、图标鼠标移上去显示提示

 <el-tooltip class="item" effect="dark" content="提示信息。" placement="top-start"> <span> <i class="el-icon-question" ></i> </span> </el-tooltip>

持续更新中…