需要的做一个日期选择框在已有页面上
- 第一个问题:页面上已经存在了很多层级,但是我们需要显示在最上面,需要加一个类名把层级设置为最大,这个时候的需要用的属性“popper-class”。由于之前很多属性类似于“key”这种,都是需要v-bind:或“:”的所以,最后找了一会发现,这个属性直接就可以,不需要v-bind:或者“:”。直接使用即可。
- 第二个问题就是,上面弹出框的图标的关闭事件。因为采用的弹出框。所以需要用到的是@close方法来做关闭事件。所以部分代码如下:
- html代码:
<el-dialog :title="表格" :visible.sync="holidayFormVisible" width="40%" center custom-class="resonDialog" @close="cancelholiday">
<el-form :model="form" ref="form" label-width="100px">
<el-form-item label="管控日期">
<el-date-picker type="dates" v-model="form.value14" popper-class="hx-h11" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择假期">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelholiday">{{$t('common.cancel')}}</el-button>
<el-button type="primary" @click="holidayConfirm('form')">{{$t('common.confirm')}}</el-button>
</div>
</el-dialog>
css代码:
.hx-h11 {
z-index: 9999 !important;
top: 188px !important;
}
js代码:
holidayFormVisible: false,
//关闭方法
cancelholiday: function() {
this.holidayFormVisible = false;
this.form = {
value14: []
};
},