directives: {
webp: {
bind: (el,vnode) => {
//先判断浏览器是否支持webp
let isWebp = false;
let elem = document.createElement("canvas");
if (!!(elem.getContext && elem.getContext("2d"))) {
isWebp = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
}
//将属性保存在el中
el.isWebp = isWebp;
},
inserted: (el,binding) => {
el.updateImg = (el,binding) => {
if (el.isWebp) {
el.src = binding.value.toString().replace(/\.(png|jpe?g|gif|svg|bmp)$/g, ".webp");
}else {
el.src = binding.value
}
};
el.updateImg(el,binding);
},
update: (el,binding) => {
el.updateImg(el,binding);
}
}
},