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