首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue2-时间选择器包在vue.js中不能正常工作。

Vue2-时间选择器包在vue.js中不能正常工作。
EN

Stack Overflow用户
提问于 2020-10-20 16:20:25
回答 1查看 1.1K关注 0票数 0

我正在使用vue2-timepicker js包,

代码语言:javascript
运行
复制
npm install vue2-timepicker --save

之后,我将CSS组件文件从node_modules导入到main.js文件中。

//

  1. 导入CSS文件
代码语言:javascript
运行
复制
import 'vue2-timepicker/dist/VueTimepicker.css'
  1. 将Vue js组件注册为全局在main.js文件中的应用程序中使用。 import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue' Vue.component('vue-timepicker', VueTimepicker)

3.在我的组件内使用。

代码语言:javascript
运行
复制
<vue-timepicker></vue-timepicker>

以下是检查元素选项卡中的呈现HTML

代码语言:javascript
运行
复制
<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>

问题:

上面的标签总是显示一个只读输入标签,每当我在标签上点击一个选择时间,它就会显示控制台中的一个错误。

代码语言:javascript
运行
复制
[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)
EN

回答 1

Stack Overflow用户

发布于 2020-10-20 19:45:39

这个vue2-timepicker包工作得很好。您import包的方式是错误的。您需要以下列方式导入它。

代码语言:javascript
运行
复制
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";

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

CodeSandbox

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64449295

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档