Question

我正在使用 vue2-timepicker js程序包

npm install vue2-timepicker --save

然后，我从 node_modules 导入 CSS 和 datetimepicker 组件文件在我的main.js文件中

//

导入 CSS 文件

import 'vue2-timepicker/dist/VueTimepicker.css'

在 main.js 文件中的应用程序中全局注册Vue js组件。

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)

Answer 1

此vue2-timepicker软件包运行良好。您import用错误的方式包装了包裹。您需要通过以下方式导入它。

import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";

Vue.component("vue-timepicker", VueTimepicker);

CodeSandbox

vue2-timepicker软件包在vue.js中无法正常工作

1 个答案: