极客观点
项目管理
HarmonyOS
/////////////////////////////
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>