制作网页和做网站是一个意思吗,系统开发工具有哪些,百度快照优化培训班,网站建设费专票会计分录需求#xff1a;选择日期后#xff0c;点击确定按钮关闭面板
思路#xff1a;
使用shortcuts自定义确定和取消按钮选择日期后使用handleOpen()强制开启面板点击确定后使用handleClose()关闭面板 templateel-date-pickerrefpickerRefv-model…需求选择日期后点击确定按钮关闭面板
思路
使用shortcuts自定义确定和取消按钮选择日期后使用handleOpen()强制开启面板点击确定后使用handleClose()关闭面板 templateel-date-pickerrefpickerRefv-modeldateValuetypedaterangerange-separatorTostart-placeholderStart dateend-placeholderEnd date:shortcutsshortcutschangedateChangefocusfocusChange/
/templatescript setupimport { ref, nextTick } from vueimport { ElButton, ElDatePicker } from element-plusconst dateValue ref()const pickerRef ref(null)let isClickPicker falseconst shortcuts ref([{text: 取消,onClick(picker) {console.log(点击取消)isClickPicker truepickerRef.value pickerRef.value.handleClose()setTimeout(() {dateValue.value }, 10)}},{text: 确定,onClick(picker) {// 关闭面板isClickPicker trueconsole.log(点击确定)if(!dateValue.value) {// message.warning(请选择日期)console.log(请选择日期)return false}pickerRef.value pickerRef.value.handleClose()}}])const dateChange (date) {pickerRef.value pickerRef.value.handleOpen()}const focusChange () {// 点击确定后聚焦强制关闭面板if (isClickPicker) {pickerRef.value pickerRef.value.handleClose()isClickPicker false}}
/scriptstyle.el-picker-panel__body-wrapper {height: 108%;border: 1px solid #e4e4e4;width: 100%;}.el-date-picker.has-sidebar {width: 330px !important;}.el-picker-panel__sidebar {right: 0px;top: 310px !important;width: 150px;display: flex;}.el-picker-panel__body {padding-bottom: 20px;margin-left: 0px !important;}
/style
