vue全局注册自定义图片属性

在一个项目中,可能有很多的图片加载失败,就需要将图片设计成一个组件 ,在main.js里面设计

这个是在main.js里面全局设计的自定义事件 el是绑定的标签 onerror是这个自定义绑定事件的接口 ,当出现错误的时候就会走这个函数

这是自定义事件添加img标签里面的属性, 当src里面是staffphoto出现错误的时候 ,自定义事件;里面的函数执行将defaultimg这个变量代表的值重新赋值给src 这样就不会出现碎图

注意:

**
defaultimg 是一个新的变量 ,需要在data里面添加

如果这样写 ,会出现一个问题这是个字符串 img标签无法识别字符砖传和@符号
结果就是这样:

src标签里面出现 @ 符号这样不好

这时候就想到一个办法,将svg图片作为一个组件引入同时将路径赋值给这个默认的变量

线面data里面用的是 es6的语法简单赋值

模块化的按需导出自定义事件

**
如果把自定义事件都放在main.js里面就不是很好,因为里面可能会加入很多其他东西
解决办法就是: 创建一个新的文件夹将自定义事件放在里面

1–这是main.ls里面的自定义属性

2----创建一个新的文件夹

但是这也不是最优的结局方案一般情况下都是生名一个变量将自定义的方法接收

同时 ,将方法按需导出引入到main.js里面

上面按需引入的方法是在对象里面 ,直接给这个对象声明一个变量接收

3----引入以后,需要将对象里面的东西挂载到vue

directives[k] 其实就是
{ inserted (el ,binding) {函数体代码}}

vue全局注册自定义图片属性相关推荐

Vue全局注册公共组价
Vue全局注册公共组价
vue全局注册组件实例
如果想要创建全局的组件,供给其他地方时使用,可以使用Vue.extend 去创建: 这里我们封装一个弹框组件: (1)创建目录 index.js import Vue from "vue&q ...
vue全局注册一个文件夹下所有的组件
import Vue from 'vue';function capitalizeFirstLetter(string) {return string.charAt(0).toUpperCase() ...
vue全局使用自定义字体
在src 下创建一个文件夹,创建一个css文件,把字体文件通过@font-face引入,在app.vue中进行全局配置 1.创建css文件,引入字体,添加如下代码 @font-face {font-f ...
vue body的背景图片属性设置
html {height: 100%;}/* 设置整个页面的样式 */body{/* 引用图片路径 */background-image: url("../assets/img/shouye ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
Vue.directive注册指令
指令定义函数提供了几个钩子函数(可选): vue指令的生命周期 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
Vue 实例之全局API，实例属性，全局配置，组件进阶
文章目录写在前面 Vue 全局 API Vue.directive Vue.use Vue.extend Vue.set Vue.mixin Vue 实例属性 vm.$props vm.$optio ...

vue全局注册自定义图片属性

注意:

模块化的按需导出自定义事件

vue全局注册自定义图片属性相关推荐

最新文章

热门文章