element-plus DatePicker 日期选择器设置默认打开/ 阻止DatePicker 日期选择器默认收起行为

需求是我只想要一个日期选择框,如下

 但是element的日期选择框架都是这样,带有一个框，为了得到我想要的效果，我们把他设置为默认打开，在将其input框隐藏起来。

 建议将其单独封装为组件使用，避免影响其它日期选择框

<script setup lang="ts">
import { ref, onMounted, nextTick, watchEffect } from 'vue';

const value1 = ref('');

watchEffect(() => {
  console.log(value1.value, "====点击获得值====");
})
onMounted(() => {
  nextTick(() => {
    // 处理出现闪现问题
    var element = document.querySelector('body');
    element.addEventListener('click', () => { });
    element.click();
  });
});
</script>

<template>
  <div class="my-picker">
    <el-date-picker :teleported="false" v-model="value1" type="date" placeholder="Pick a day" />
  </div>
</template>

<style>

.my-picker .el-input {
　width: 0;
  height: 0;
  display: none;
}

.my-picker .el-popper {

  display: block !important;
  transition: none !important;
  position: initial !important;
}

.el-picker__popper.el-popper .el-popper__arrow:before {
  display: none;
}
</style>

 

<script setup lang="ts">
import { ref } from 'vue';
import myPicker from "@/components/picker.vue"
const value2 = ref('');
</script>

<template>
  <div class="app-box">
    <!-- 两个选择日期组件互不影响 -->
    <my-picker></my-picker>
    <el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a day"
      />
  </div>
</template>

<style>
.app-box{
  display: flex;
  justify-content: space-between;
  padding: 0 200px;
}
</style>