vue 自定義image元件

2022-03-16 10:57:34 字數 1673 閱讀 3154

介紹

通過給繫結load事件與error事件處理函式來判斷載入狀態。當載入完成時會觸發load事件;載入出錯會觸發error事件

// 樣本

<

img src="..."

@load

=onload

@error

=onerror

>

通過css屬性object-fit(來控制如何適應容器大小。

<

template

>

<

div

class

="tm-image"

:style

="style"

@click

="onclick"

>

<

img

:src

="src"

:alt

="alt"

:style

=""@load

="onload"

@error

="onerror"

>

<

div

v-if

="this.loading"

class

="tm-image-load"

>

<

slot

name

="loading"

>載入中

slot

>

div>

<

div

v-if

="this.error"

class

="tm-image-error"

>

<

slot

name

="error"

>載入出錯

slot

>

div>

div>

template

>

<

script

>

import suffixpx from

'../../utils/suffixpx.js';

export

default

},props:

},width: [string, number],

height: [string, number]

},computed: }},

methods: ,

onload(event) ,

onerror(event) }}

script

>

vue元件**天貓粉絲專享優惠券

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...

vue 元件自定義

基於iview的自定義table元件 一 業務要求 1.展示列表字段資訊.2.列表資料的增刪查改 與 匯出 3.列表的分頁功能 二 元件 實現 html ref table data arrlist columns currcolumns loading loading no data text 暫...