vue同时使用两个版本的依赖

初衷

业务需求开始时间和结束事件的框不能让它们联动。因为ant-design-vue3的日期选择器功能不支持，ant-design-vue2支持，所以选择安装ant-design-vue2然后按需引入日期选择器。

方案

使用npm的别名，安装不同版本的库：

 npm install --save ant-design-vue2@npm:ant-design-vue@2.2.8

这样就可以和现有的版本共同使用

package.json:

{
	"ant-design-vue": "^3.2.5",
    "ant-design-vue2": "npm:ant-design-vue@^2.2.8",
}

使用示例：

import { DatePicker } from 'ant-design-vue'
import { DatePicker } from 'ant-design-vue2'

这样就可以愉快的使用俩个版本不同的依赖了

日期选择器封装：

<template>
  <div class="text-[18px] flex items-center">
    <a-radio-group v-model:value="activeBtn" size="large" @change="selectTime">
      <a-radio-button
        v-for="item in btnList"
        :key="item.id"
        :value="item.id"
        class="cursor-pointer"
        >{{ item.name }}</a-radio-button
      >
    </a-radio-group>
    <RangePicker
      class="picker"
      style="height: 35px; width: 250px"
      v-model:value="time"
      format="YYYY/MM/DD"
      valueFormat="YYYY-MM-DD"
      @change="timeChange"
    >
      <template #suffixIcon>
        <FieldTimeOutlined />
      </template>
    </RangePicker>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { DatePicker } from 'ant-design-vue2'
import 'ant-design-vue2/dist/antd.css'; 
import moment from 'moment'
import 'moment/dist/locale/zh-cn'

Date.prototype.format = function (format:any) {
  var o:any = {
    'M+': this.getMonth() + 1, //month
    'd+': this.getDate(), //day
    'h+': this.getHours(), //hour
    'm+': this.getMinutes(), //minute
    's+': this.getSeconds(), //second
    'q+': Math.floor((this.getMonth() + 3) / 3), //quarter
    S: this.getMilliseconds() //millisecond
  }
  if (/(y+)/.test(format))
    format = format.replace(
      RegExp.$1,
      (this.getFullYear() + '').substr(4 - RegExp.$1.length)
    )
  for (var k in o)
    if (new RegExp('(' + k + ')').test(format))
      format = format.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      )
  return format
}
export default {
  name: 'time',
  props: {
    timeType: Number
  },
  components: {
    RangePicker:DatePicker.RangePicker
  },
  emits: ['selectedTime'],
  setup(props: any, context: any) {
    const data:any = reactive({
      time: moment('2015-01-01', 'YYYY-MM-DD'),
      year: '',
      beginTime: '',
      endTime: ''
    })
    const today = ref('')
    const activeBtn = ref(0)
    const btnList = ref([
      {
        id: 0,
        name: '开累'
      },
      {
        id: 1,
        name: '上月'
      },
      {
        id: 2,
        name: '本月'
      },
      {
        id: 3,
        name: '去年'
      },
      {
        id: 4,
        name: '今年'
      }
    ])
    const refData: any = toRefs(data)
    onBeforeMount(() => {
      const date = new Date()
      refData.year.value = date.getFullYear()
      const y = date.getFullYear().toString()
      const m = (date.getMonth() + 1).toString().padStart(2, '0')
      const d = date.getDate().toString().padStart(2, '0')
      today.value = y + '/' + m + '/' + d
      data.time = ['1990-01-01', y + '-' + m + '-' + d]
    })
    onMounted(() => {})

    const timeChange = (dates: any | String) => {
      activeBtn.value = -1
      context.emit('selectedTime', dates[0], dates[1], props.timeType)
      console.log(
        dates[0],
        dates[1],
        props.timeType,
        '-----------------------selectedTime'
      )
    }
    const selectTime = (e: any) => {
      console.log(props.timeType)

      let type = e.target.value
      if (type === 0) {
        //开累
        refData.beginTime.value = '1990/01/01'
        refData.endTime.value = today.value
      } else if (type === 1) {
        //上月
        refData.beginTime.value = new Date(
          new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)
        ).format('yyyy/MM/dd')
        refData.endTime.value = new Date(new Date().setDate(0)).format(
          'yyyy/MM/dd'
        )
      } else if (type === 2) {
        //本月
        refData.beginTime.value = new Date(new Date().setDate(1)).format(
          'yyyy/MM/dd'
        )
        refData.endTime.value = new Date(
          new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)
        ).format('yyyy/MM/dd')
      } else if (type === 3) {
        //去年
        // refData.beginTime.value = new Date(new Date(new Date(new Date().setFullYear(refData.year.value-1)).setMonth(0)).setDate(1)).format('yyyy/MM/dd')
        // refData.endTime.value = new Date(new Date(new Date(new Date().setFullYear(refData.year.value-1)).setMonth(12)).setDate(0)).format('yyyy/MM/dd')
        refData.beginTime.value = '2021/01/01'
        refData.endTime.value = '2021/12/31'
      } else if (type === 4) {
        //今年
        refData.beginTime.value = new Date(
          new Date(new Date().setMonth(0)).setDate(1)
        ).format('yyyy/MM/dd')
        refData.endTime.value = new Date(
          new Date(new Date().setMonth(12)).setDate(0)
        ).format('yyyy/MM/dd')
      }
      refData.time.value = [refData.beginTime.value, refData.endTime.value]
      console.log(
        refData.beginTime.value,
        refData.endTime.value,
        props.timeType,
        '-----------------------selectedTime'
      )
      context.emit(
        'selectedTime',
        refData.beginTime.value,
        refData.endTime.value,
        props.timeType
      )
    }
    return {
      ...refData,
      activeBtn,
      btnList,
      timeChange,
      selectTime
    }
  }
}
</script>
<style lang="scss" scoped>
.button {
  width: 48px;
  height: 30px;
}
.active {
  background: rgba(189, 158, 85, 1);
}
:deep(.el-range-editor.el-input__inner) {
  width: 200px;
  height: 35px;
}
:deep(.el-date-editor .el-range-input) {
  font-size: 12px;
  color: #333333;
}
:deep(.ant-radio-button-wrapper) {
  width: 52px;
  height: 35px;
  font-size: 12px;
  color: #006ab2;
  padding: 0;
  text-align: center;
  line-height: 35px;
  border: 1px solid rgba(0, 106, 178, 1);
}
:deep(.ant-radio-button-wrapper-checked) {
  background: rgba(189, 158, 85, 1);
  color: #fff;
  border: 1px solid rgba(189, 158, 85, 1);
}
:deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child) {
  border-color: rgba(189, 158, 85, 1);
}
.picker{
  margin-left: 10px;
}
</style>