CUBE-UI如何使用日期选择器?

发布于 2022-09-12 13:54:00 字数 6737 浏览 21 评论 0

初学vue。遇到点问题,希望得到大佬解答。
现在日期的type是input ,但是如果我把input改成date或者DatePicker就会提示未注册。mian.js使用Vue.use(Cube),按道理应该是全部注册了,然后我想设置点击事件,设置不成功。
VUE代码:

<template>
  <div class="hello">
    <cube-form
      :model="model"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
      @reset="resetHandler">
      </cube-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      validity: {},
      valid: undefined,
      model: {
        checkboxValue: false,
        checkboxGroupValue: [],
        inputValue: '',
        radioValue: '',
        rateValue: 0,
        dateValue: '',
        selectValue: '挂起3',
        switchValue: true,
        textareaValue: '',
        uploadValue: []
      },
      schema: {
        groups: [
          {
            legend: '运单数据',
            fields: [

              {
                type: 'input',
                modelKey: 'inputValue',
                label: '总运单号:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'input',
                name: 'dateValue',
                modelKey: 'dateValue',
                label: '日期',
                props: {
                  placeholder: 'MM-DD'
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'input',
                modelKey: 'pointsAwbValue',
                label: '分运单号:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'select',
                modelKey: 'selectValue',
                label: '查验结果',
                props: {
                  options: ['挂起1', '挂起2', '挂起3', '挂起4', '挂起5', '挂起6']
                },
                rules: {
                  required: true
                }
              },
              {
                type: 'input',
                modelKey: 'descriptionValue',
                label: '查验后品名:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'input',
                modelKey: 'quantityValue',
                label: '数量:',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'textarea',
                modelKey: 'textareaValue',
                label: '备注',
                props: {
                  placeholder: '请输入'
                },
                rules: {
                  required: true
                },
                // debounce validate
                // if set to true, the default debounce time will be 200(ms)
                debounce: 100
              }
            ]
          },
          {
            legend: '图片上传',
            fields: [
              {
                type: 'upload',
                modelKey: 'uploadValue',
                label: '图片',
                auto: true,
                max: 4,
                events: {
                  'file-removed': (...args) => {
                    console.log('file removed', args)
                  }
                },
                rules: {
                  required: true,
                  uploaded: (val, config) => {
                    return Promise.all(val.map((file, i) => {
                      return new Promise((resolve, reject) => {
                        if (file.uploadedUrl) {
                          return resolve()
                        }
                        // fake request
                        setTimeout(() => {
                          if (i % 2) {
                            reject(new Error())
                          } else {
                            file.uploadedUrl = 'uploaded/url'
                            resolve()
                          }
                        }, 1000)
                      })
                    })).then(() => {
                      return true
                    })
                  }
                },
                messages: {
                  uploaded: '上传失败'
                }
              }
            ]
          },
          {
            fields: [
              {
                type: 'submit',
                label: '提交'
              },
              {
                type: 'reset',
                label: '重置'
              }
            ]
          }
        ]
      },
      options: {
        scrollToInvalidField: true,
        layout: 'standard' // classic fresh
      }
    }
  },
  methods: {
    showDateTimePicker () {
      alert(666)
      this.$createTimePicker({
        showNow: true,
        minuteStep: 5,
        delay: 15,
        onSelect: (selectedTime, selectedText, formatedTime) => {
          this.$createDialog({
            type: 'warn',
            title: `selected time: ${selectedTime}`,
            content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
            icon: 'cubeic-alert'
          }).show()
        },
        onCancel: () => {
          this.$createToast({
            type: 'correct',
            txt: 'Picker canceled',
            time: 1000
          }).show()
        }
      }).show()
    },
    submitHandler (e) {
      e.preventDefault()
      console.log('submit', e)
    },
    validateHandler (result) {
      this.validity = result.validity
      this.valid = result.valid
      console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
    },
    resetHandler (e) {
      console.log('reset', e)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

各种尝试仍然没能成功使用日期选择器,希望大佬解答。谢谢

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文