element-ui的時間選擇器的小坑
阿新 • • 發佈:2018-12-11
需要的做一個日期選擇框在已有頁面上
- 第一個問題:頁面上已經存在了很多層級,但是我們需要顯示在最上面,需要加一個類名把層級設定為最大,這個時候的需要用的屬性“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: []
};
},