知春路网站建设seo自学网官网

 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}` }}<iclass="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，点击时弹出其功能弹窗！