封装第三方组件（七）封装日期类组件

element的日期类组件，必须使用 date 类型的对象，但是除了日期和时间之外，又提供了“年月”和“年周”以及“年”这三种组件。

而这三个接收的还是date类型，而是返回的也只有date类型。那么我们选择年月的时候，返回的是 2021-4-28 18:34:22 是不是有点尴尬。

当然如果就是要这种数据，那也行。但是既然选的是年月，那是不是想要 202104 这样的数据呢？

数据类型转换

不能改源码，那么就在封装的组件里面写转换的功能，我们先定义一个管理类。

// manage-data.js

import { ref, watch } from 'vue'

/**
 * 日期管理类
 * * 功能：
 * ** 按照类型提交数据，不是date()
 * ** 监听属性，设置value
 * * 参数：
 * ** value： control类的value
 * ** props：属性
 * * 返回
 * ** 绑定控件的 mydate
 * ** change 事件的 myChange  value instanceof Date
 */
 export default function (value, props) {
    // 定义内部变量，实现  date 类型和 string 直接的转换
    const mydate = ref(new Date())
    if (typeof value.value === 'string' || typeof value.value === 'number') {
      if (value.value !== '') {
        mydate.value = new Date(value.value)
      }
    }
   
    // 监听属性，设置给 mydate
    watch(() => value.value, (v1) => {
      if (value.value !== '') {
        mydate.value = new Date(v1)
      }
    })
  
    // 向父组件提交数据。
    const myChange = (val) => {
      if (val === '' || val === null) {
        value.value = '' // 提交给父组件
      } else {
        const re = dayjs(val).format(props.returnFormat)
        value.value = re // 提交给父组件
      }
    }
  
    return {
      mydate,
      myChange
    }
  }

简单的类型转换就做完了，即外部传过来字符串的日期，然后转换为 date 的类型，最后绑定到element 的日期类组件。

import { defineComponent } from 'vue'
// 引入组件需要的属性 引入表单子控件的管理类
import { baseProps, controlItemManage } from '/nf-control-web'
// 日期管理
import dateManage from './manage-date.js'

export default defineComponent({
  name: 'el-from-item-date',
  props: {
    ...baseProps, // 基础属性
    showFormat: { // 返回数据的格式化。date：日期类型
      type: String,
      default: 'YYYY-MM-DD'
    },
    returnFormat: { // 返回数据的格式化。date：日期类型
      type: String,
      default: 'YYYY-MM-DD'
    },
    modelValue: [String, Date]
  },
  emits: ['update:modelValue', 'my-change'],
  setup (props, context) {
    const { value } = controlItemManage(props, context)
    console.log('props-date', props)

    return {
      ...dateManage(value, props)
    }
  }
})

这里呢，还是老样子，组件分的比较细致，日期、日期时间、年月、年周、年、时间分别做成组件。这样每个组件里的代码就会比较简洁，看着不乱。

其他几个也是类似的操作，主要是设置默认值，这样在调用的时候，就会简洁很多。

好吧，最麻烦的是年周的转换。