我正在使用vue2-timepicker js包,
npm install vue2-timepicker --save之后,我将CSS和组件文件从node_modules导入到main.js文件中。
//
import 'vue2-timepicker/dist/VueTimepicker.css'import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
Vue.component('vue-timepicker', VueTimepicker)3.在我的组件内使用。
<vue-timepicker></vue-timepicker>以下是检查元素选项卡中的呈现HTML
<span class="vue__time-picker time-picker">
<input type="text" placeholder="HH:mm" tabindex="0" readonly="readonly" autocomplete="off class="display-time is-empty">
<div tabindex="-1" class="dropdown drop-down" style="display: none;">
<div tabindex="-1" class="select-list">
<ul class="hours">
<li class="hint">HH</li>
</ul>
<ul class="minutes">
<li class="hint">mm</li>
</ul>
</div>
</div>
</span>问题:
上面的标签总是显示一个只读输入标签,每当我在标签上点击一个选择时间,它就会显示控制台中的一个错误。
[Vue warn]: Error in render: "TypeError: _vm.isDisabled is not a function"
found in
---> <VueTimepicker> at node_modules/vue2-timepicker/src/vue-timepicker.vue
<Home> at src/views/tenants/pages/Home.vue
<Main> at src/layouts/main/Main.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3550
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4631
setDropdownState @ vue-timepicker.vue?5427:1174
toggleActive @ vue-timepicker.vue?5427:1139
onBlur @ vue-timepicker.vue?5427:1289
eval @ vue-timepicker.vue?5427:1283
setTimeout (async)
debounceBlur @ vue-timepicker.vue?5427:1281
blur @ vue-timepicker.vue?0d53:38
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: _vm.isDisabled is not a function
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:189:59)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:180:37)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f0cb218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue2-timepicker/src/vue-timepicker.vue?vue&type=template&id=c4588f32& (chunk-vendors.js:6874), <anonymous>:163:25)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
at Watcher.get (vue.runtime.esm.js?2b0e:4479)
at Watcher.run (vue.runtime.esm.js?2b0e:4554)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)发布于 2020-10-20 19:45:39
这个vue2-timepicker包工作得很好。您import包的方式是错误的。您需要以下列方式导入它。
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
Vue.component("vue-timepicker", VueTimepicker);https://stackoverflow.com/questions/64449295
复制相似问题