Vue基本元件 外掛程式開發

2021-08-16 20:32:42 字數 1495 閱讀 6764

一、元件和外掛程式的區別

外掛程式通常會為 vue 新增全域性功能。外掛程式的範圍沒有限制——一般有下面幾種:

新增全域性方法或者屬性,如: vue-custom-element

新增全域性資源:指令/過濾器/過渡等,如 vue-touch

通過全域性 mixin 方法新增一些元件選項,如: vue-router

新增 vue 例項方法,通過把它們新增到 vue.prototype 上實現。

乙個庫,提供自己的 api,同時提供上面提到的乙個或多個功能,如 vue-router

vue.js 的外掛程式應當有乙個公開方法 install 。

二、簡單構建乙個全域性元件message(訊息提示)

1.元件模板

/* components/message/index.vue */

<

template

>

<

divclass=

"ta-message"

v-if="

isshow"

>

<

span

>}

span

>

div>

template

>

<

script

>

export

default

},props:,

isshow:

},methods: }

}script

>

2.給元件新增全域性功能(外掛程式)

/* components/message/index.js */

import

msgfrom

'./index.vue';

//定義外掛程式物件

const

message = {};

//vue的install方法,用於定義vue外掛程式

message.

install =

function(

vue,

options);

//在vue的原型上新增例項,以全域性呼叫

vue.

prototype.

$msg =

object.

assign(

currentmsg,

options); //將頁面的物件傳給currentmsg物件,否則阿會使用原有的

settimeout(()

=> ,

1000); }}};

export

default

message;

3.全域性使用

// main.js

import

message

from

'./components/message/index'

vue.

use(

message);

4.頁面呼叫

showconfirm()); }

android基本元件

乙個使用者介面,通常表示應用程式中的乙個螢幕。可以包含零個或者多個view,大部分程式都是由多個activity組成 執行某種工作的 意圖 其作用有 廣播訊息 啟動service 啟動activity 顯示網頁或者是聯絡人 呼出或者是接聽 並不總是由應用程式發起,系統也會使用它們來向應用程式通知特定...

OpenStack 基本元件

openstack 三大核心元件 網路,計算,儲存 openstack核心元件,核心服務包括 例項生命週期的管理 虛擬機器 計算資源的管理,對外提供restful api。nova元件主要有三個模組構成 nova api,nova scheduler,nova compute nova api在表示...

cocos creator 基本元件

效果 精靈最普通的模式,選擇該模式後,將縮放到指定的大小 tiled 平鋪模式,以平鋪的模式 slice 九宮格模式,指定拉伸區域 九宮格的邊角不會拉伸 filled 設定填充的方式 圓,矩形 可以使用比例來裁剪顯示 只顯示的比例 獲取按鈕元件 start function 觸發按鈕的響應事件,而不...