我用vue cli 脚手架
安装的是 CUBE-UI 模板
当我想用CUBE-UI的DatePicker日期选择器
<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: 'DatePicker',
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>
然后启动不报错，前端提示错误：
vue.esm.js?f912:628 [Vue warn]: Unknown custom element: <DatePicker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CubeFormItem> at node_modules/_cube-ui@1.12.44@cube-ui/src/components/form/form-item.vue
<CubeFormGroup> at node_modules/_cube-ui@1.12.44@cube-ui/src/components/form/form-group.vue
<CubeForm> at node_modules/_cube-ui@1.12.44@cube-ui/src/components/form/form.vue
<HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
main.js已经注册这个DatePicker日期选择器了：
import 'amfe-flexible'
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// By default we import all the components.
// Only reserve the components on demand and remove the rest.
// Style is always required.
import {
/* eslint-disable no-unused-vars */
Style,
// basic
Button,
Loading,
Tip,
Toolbar,
TabBar,
TabPanels,
// form
Checkbox,
CheckboxGroup,
Checker,
Radio,
RadioGroup,
Input,
Textarea,
Select,
Switch,
Rate,
Validator,
Upload,
Form,
// popup
Popup,
Toast,
Picker,
CascadePicker,
DatePicker,
TimePicker,
SegmentPicker,
Dialog,
ActionSheet,
Drawer,
ImagePreview,
// scroll
Scroll,
Slide,
IndexList,
Swipe,
Sticky,
ScrollNav,
ScrollNavBar,
RecycleList
} from 'cube-ui'
import App from './App'
import router from './router'
Vue.use(Button)
Vue.use(Loading)
Vue.use(Tip)
Vue.use(Toolbar)
Vue.use(TabBar)
Vue.use(TabPanels)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Checker)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Input)
Vue.use(Textarea)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Rate)
Vue.use(Validator)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Popup)
Vue.use(Toast)
Vue.use(Picker)
Vue.use(CascadePicker)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(SegmentPicker)
Vue.use(Dialog)
Vue.use(ActionSheet)
Vue.use(Drawer)
Vue.use(ImagePreview)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(IndexList)
Vue.use(Swipe)
Vue.use(Sticky)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)
Vue.use(RecycleList)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
请问大家，如何解决呢？谢谢
