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,点击时弹出其功能弹窗!