messageBox中使用el-date-picker

㤫惪悳

于 2024-07-03 09:56:50 发布

阅读量329

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/vfrxdwa/article/details/140144272

版权

<template>
  <div>
    <el-button type="text" @click="open">点击打开</el-button>
  </div>
</template>
<script lang="jsx">
import Vue from 'vue'
export default {
 data() {
    return {
      value: '',
      // 禁止选择当前日期之前的
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7 //禁用今天以前的日期
        }
      }
    }
  },
  methods: {
    open() {
      const h = this.$createElement
      var _this = this
      this.$msgbox({    
      title: '请选择试题类型', // 弹框标题
      // 弹框信息
        message: h(
          Vue.component('msgboxDatePicker', {
            data() {
              return {
                value: _this.value
              }
            },
            render(h) {
              return h('div', null, [
                h('el-date-picker', {
                    props: { value: _this.value, type: 'date', pickerOptions: _this.pickerOptions }, 
                    on: {
                    input: v => {
                      _this.value = v
                      _this.$emit('input', v)
                    },
                    change: v => {
                      console.log(v)
                      _this.$emit('change', v)
                    }
                  }
                })
              ])
            }
          })
        ),
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
     })
        .then(() => {})
        .catch(() => {})
    }
  }
}
</script>