elementplus二次封装一个input

Posted 2023-04-05

参考技术A 基于element-plus的二次封装数据双向绑定
在实际开发中，经常需要基于element-plus封装一些自己的定制化组件，方便快速构建我们当前的业务。在vue2.0中父子组件数据的双向绑定通常都是通过在props中传值:value.sync，在子组件中使用，this.$emit(“update:value”, value)的方式，那么我们怎样在vue3中实现类似的父子组件的双向绑定呢？

在vue2中，数据的响应式是基于Object.defineProperty对象进行数据的双向绑定，这种劫持+发布订阅的模式并不能很好的检测对象、数组等复杂类型的数据。在vue3的数据的响应式是基于proxy的set、get方法，相对于Object.defineProperty的劫持，proxy代理的方式更为优雅。

web技术分享| 日期选择限制组件二次封装

vue3 + element plus 的项目

项目需求：

开始时间限制：存在某天之前的时间禁选
结束时间限制：当天之后时间禁选
开始时间与结束时间的跨度最大不超过一年
使用 element plus 的 DatePicker 日期选择器

封装结构如下

<el-date-picker
    v-model="datePicker.time"
    type="daterange"
    value-format="X"
    :default-time="datePicker.defaultime"
    format="YYYY-MM-DD"
    size="large"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    @change="timeChange"
    :disabled-date="disabledDate"
    @calendar-change="calendarChange"
    class="date_picker_custom"
  />

vue3 + ts 的 setup 中

startDisabledTime 禁用开始时间(毫秒)
setTimeFn 设置时间，传参可参考 DatePicker 的 v-model 文档
emit(“change”) 事件传递给父组件获取时间区段

const prop = defineProps(
  // 禁用开始时间(毫秒)
  startDisabledTime: 
    type: Number,
    default: 0,
  ,
);
const emit = defineEmits(["change"]);
const datePicker = reactive(
  time: "" as Date | number | string,
  // 记录开始时间(选择区间所需)
  startData: null as number | null,
  defaultime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
);
// 选中日历日期后会执行的回调!!只选择一个日期就会执行,官网写的不清楚
// 主要用这个方法获取到用户选择的初始时间,然后在禁用方法里通过这个时间设置结束时间的禁用时间
const calendarChange = (dates: any) => 
  let hasSelectDate = dates !== null && dates.length > 0;
  datePicker.startData = hasSelectDate
    ? Math.floor(dates[0].getTime() / 1000)
    : null;
;
const disabledDate = (time: any) => 
  const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
  const tempTime = Date.now();
  if (datePicker.startData) 
    const sta = datePicker.startData * 1000 - timeRange * 365;
    const minTime = sta < prop.startDisabledTime ? prop.startDisabledTime : sta;
    const maxTime = datePicker.startData * 1000 + timeRange * 365;
    if (tempTime < maxTime) 
      return time.getTime() < minTime || time.getTime() > tempTime;
    
    return time.getTime() < minTime || time.getTime() > maxTime;
   else 
    return (
      time.getTime() >= tempTime || time.getTime() < prop.startDisabledTime
    );
  
;
const timeChange = (dates: any) => 
  let hasSelectDate = dates !== null && dates.length > 0;
  datePicker.startData = hasSelectDate ? Number(dates[0]) : null;
  emit("change", dates);
;

// 设置日期
const setTimeFn = (time: Date | number | string) => 
  datePicker.time = time;
;
// 暴漏方法给父组件
defineExpose( setTimeFn );