vue2.0+webpack 自定义全局指令(directive) 在组件中无法使用，不知道为啥。
/////////////////////////////
main.js里的代码
/////////////////////////////
import Vue from 'vue'
import App from './App'
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
//////////////////////////////
index.html里的代码
//////////////////////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>测试页面</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
/////////////////////////////
App.vue里的代码 => 无法使用全局指令v-focus
/////////////////////////////
<template>
<div>
<input v-focus />
</div>
</template>
<script>
export default {
mounted () {
}
}
</script>
问题1：这个全局注册的指令 v-focus 在调试控制始终报错 => Failed to resolve directive: focus
调试发现这个全局注册的指令没有加载到当前组件当中，只有v-show和v-modal指令。
问题2：最终目的是为了引入一个lazyload图片库，如下：
main.js里面能够正常引入：
import Lazyload from 'vue-lazyload-img'
Vue.use(Lazyload, {
fade: true
})但是，App.vue里面还是报告错误 => Failed to resolve directive: lazyload
<template>
<div>
<img v-lazyload="testImg" />
</div>
</template>
<script>
export default {
data () {
return {
testImg: 'http://192.168.1.70:80/group1/M00/00/03/wKgBRlmTCuCARFwMAAEadvPuEKw640.jpg'
}
}
}
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论