初学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>
各种尝试仍然没能成功使用日期选择器，希望大佬解答。谢谢
