vue3+TSX+element-plus（DateTimePicker）做一个时间范围选择器

element-plus包括element-ui支持时间范围选择，把type指定成datetimerange就行了，但是它不支持单个选择，也许unlink-panels这个配置有用，但我是用TSX写的，传了个true进去没用，怎么试都不行，于是干脆自己仿造一个

实现逻辑

实现逻辑挺简单，就是写两个,组件接收一个数组，数组存放开始和结束时间，把他们分别绑定在两个组件上，然后在外围写一个div包裹，给div添加el-input el-input__wrapper两个class，然后再自定义一个class dateImplement，就可以实现像element-plus原有的样式动画，话不多说，代码贴上

组件代码（名字没取，只写代码）

import { defineComponent,reactive,ref,watch } from "vue";
import "./css/input.scss"

const props = {
    //开始时间的提示内容
   startPlaceholder: {
     type: String
   },
    //结束时间的提示内容
   endPlaceholder: {
     type: String
   },
   //element-plus属性，获取后的时间格式
   valueFormat: {
     type: String
   }
    //绑定的变量，传数组
   modelValue: {
      type: [Array],
      required: true,
   },
}
export default defineComponent({
    name: "WayInput",
    props,
    emits: ['update:modelValue'],
    setup(props, {emit,slots}) {
       const modelValue = ref(props.modelValue)
      watch(() => modelValue.value, (newVal) => {
            emit('update:modelValue', newVal)
          }, {
            deep: true,
            immediate: true
          })
      watch(() => props.modelValue, (newVal) => {
            modelValue.value = newVal
          }, {
            deep: true,
            immediate: true
          })
      return ()=>(
            

            {document.querySelector('.dateImplement').classList.add("foucs");}}
                  onBlur={()=>{document.querySelector('.dateImplement').classList.remove("foucs");}}
                  v-model={modelValue.value[0]}
                  type="datetime"
                  value-format={props.valueFormat||"YYYY-MM-DD HH:mm:ss"}
                  placeholder={props.startPlaceholder||"开始"}
            />-
            {document.querySelector('.dateImplement').classList.add("foucs");}}
                  onBlur={()=>{document.querySelector('.dateImplement').classList.remove("foucs");}}
                  class="endDateImplement"
                  v-model={modelValue.value[1]}
                  type="datetime"
                  value-format={props.valueFormat||"YYYY-MM-DD HH:mm:ss"}
                  placeholder={props.endPlaceholder||"结束"}
            />
            
      )
    }
})

css：（使用的scss，得安装，安装教程在网上可以找得到）

  .separator{
    display: inline-block;
    margin: 0 20px;
  }
  .endDateImplement{
    .el-input__prefix{
      display: none;
    }
  }
  .dateImplement{
    .el-input__wrapper{
      box-shadow: none;
    }
  }
  .dateImplement.foucs{
    box-shadow: 0 0 0 1px #409eff inset;
  }

目前我在element-plus的基础上封装一个组件，可以只需要传入必须的参数，然后就可以在页面展示表格，搜索，添加，修改，查看，删除等功能，以上就是封装其中一个组件的代码，有兴趣的小伙伴欢迎访问我的个人网站 https://www.wayblogs.com/