elementUI 点击弹出时间 date-picker

时间:2024-11-06 12:34:33

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