Por lo general, las imágenes que configuramos se pueden mostrar normalmente, pero a veces la carga de la imagen falla debido a la invalidación de la ruta de la imagen, por lo que debemos configurar la imagen de respaldo para que se muestre de forma predeterminada para la imagen, lo que se puede resolver usando un comando personalizado.
Registrar método de comando personalizado
Vue.directive('指令名称', {
// 会在当前指令作用的dom元素 插入之后执行
// options 里面是指令的表达式
inserted: function (dom,options) {
}
})
Es posible que registremos varias instrucciones personalizadas en el proyecto, por lo que es imposible que registremos las instrucciones una por una. Aquí, podemos usar un método modular para unificar el registro y la gestión.
src/directives/index.jsAdministrar directivas personalizadas en
export const imagerror = {
// 指令对象 会在当前的dom元素插入到节点之后执行
inserted(dom, options) {
// options是 指令中的变量的解释 其中有一个属性叫做 value
// dom 表示当前指令作用的dom对象
// dom认为此时就是图片
// 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
dom.onerror = function() {
// 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
// dom可以注册error事件
dom.src = options.value // 这里不能写死
}
}
}
main.jsRegistrar una directiva personalizada global
// import * as 变量 得到的是一个对象 { 变量1：对象1，变量2： 对象2 ... }
import * as directives from '@/directives'
// 注册自定义指令
// Object.keys将对象属性转化为数组形式然后进行遍历
// 遍历所有的导出的指令对象 完成自定义全局注册
Object.keys(directives).forEach(key => {
// 注册自定义指令
Vue.directive(key, directives[key])
})
组件中使用自定义指令
<img v-imageerror="defaultImg" :src="Photo">
data() {
return {
defaultImg: require('@/assets/common/default.jpg')
}
},
La función de enlace de la instrucción personalizada se puede ver en el sitio web oficial
de la dirección de instrucción personalizada