elementUI 点击弹出时间 date-picker

 elementUI的日期组件，有完整的UI样式及弹窗，但是我的页面不要它的UI样式，点击的时候却要弹出类似的日期选择器，那怎么办呢？

以下是elementUI自带的UI风格，一定要一个输入框来触发。

这是我的项目中要用到的UI风格：区别在于我不需要它的输入框来触发！

以下是实现参考：

<div class="flex-row">
    <span class="el-descriptions__title">患者时间轴</span>
    <span class="time-batch picker_view_input">{{ `当前就诊时间跨度：${startDate}~${endDate}` }}<i
            class="el-icon-edit"></i>
        <el-date-picker @change="dateChenge" v-model="dateModelValue" type="date"
            :picker-options="pickerOptions" value-format="yyyy-MM-dd">
        </el-date-picker>
    </span>
</div>

隐藏默认的样式：

::v-deep {
    .picker_view_input {
        cursor: pointer;
        position: relative !important;
    }

    //修改控件自带的css
    .picker_view_input {
        .el-date-editor {
            position: absolute; //绝对定位
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0; //设置完全透明
            cursor: pointer;
        }

        .el-range-input {
            cursor: pointer;
        }
    }
}

以相同的思路，其他自带UI的组件均也可以这样自定义UI，点击时弹出其功能弹窗！