成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件

iOS122 / 573人閱讀

摘要：如果插件是一個(gè)對(duì)象，必須提供方法。當(dāng)方法被同一個(gè)插件多次調(diào)用，插件將只會(huì)被安裝一次。的插件應(yīng)當(dāng)有一個(gè)公開方法。不用，去掉這個(gè)屬性，但是會(huì)污染全局樣式，可配合或者推薦，所有樣式寫在當(dāng)前組件或下面組件源碼放大圖片更多組件點(diǎn)擊這兒

這是一個(gè)簡(jiǎn)單的點(diǎn)擊圖片預(yù)覽的組件
順便記錄一下寫組件期間踩的vue中scope的坑~

從注冊(cè)全局組件開始叭！

項(xiàng)目目錄：


模仿elementUI目錄結(jié)構(gòu)，目錄名是組件名，src中是組件源文件（或者js服務(wù)文件），文件目錄下還有一個(gè)index.js用于同一管理src中的所有文件，導(dǎo)出并注冊(cè)，這個(gè)組件我們只有一個(gè)vue文件件

先看index.js文件里有什么：

//引入了src下的vue組件文件
import starPicList from "./src/star-pic-list";

/* istanbul ignore next */
starPicList.install = function(Vue) {
    //starPicList.name這就是后面可以使用的組件的名字(star-pic-list.vue文件里面定義的name)，install是默認(rèn)的一個(gè)方法
    Vue.component(starPicList.name, starPicList);
};

export default starPicList;

接下來(lái)介紹一下install方法：
Vue.use( plugin )：安裝 Vue.js 插件。如果插件是一個(gè)對(duì)象，必須提供 install 方法。如果插件是一個(gè)函數(shù)，它會(huì)被作為 install 方法。install 方法將被作為 Vue 的參數(shù)調(diào)用。當(dāng) install 方法被同一個(gè)插件多次調(diào)用，插件將只會(huì)被安裝一次。Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開方法 install 。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象：

導(dǎo)出starPicList組件后在管理組件js文件中引用，然后由這個(gè)統(tǒng)一管理js文件導(dǎo)出注冊(cè)到全局即可：

好了，這些是廢話！

組件的使用：

參數(shù)
data： 傳入圖片數(shù)組；
max-show： 一次最多顯示幾張圖片

效果如下：

補(bǔ)充：vue組件開發(fā)中 style 添加scoped后，修改第三方組件樣式?jīng)]有效果問(wèn)題：

在vue的開發(fā)中，我們通常和element-UI配合開發(fā)，就會(huì)遇到，在組件style中添加scoped后，element-ui中使用的子組件樣式無(wú)法改變。
不用scoped，去掉這個(gè)屬性，但是會(huì)污染全局樣式，（可配合less 或者 scss（推薦scss），所有樣式寫在當(dāng)前組件id或class下面）

組件源碼：

更多組件點(diǎn)擊這兒 --> link : github>components>star-pic-list

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109227.html

相關(guān)文章

  • 徹底搞懂elementUI指令與服務(wù)模式原理

    摘要：不甘做輪子的搬運(yùn)工記錄一個(gè)實(shí)習(xí)菜鳥寫圖片預(yù)覽組件的艱辛道路很多組件中使用了指令模式和服務(wù)模式，比如以下以組件為例指令模式全屏覆蓋服務(wù)模式跟大多數(shù)萌新一樣，啥是服務(wù)先看看的目錄結(jié)構(gòu)打開目錄，找到其下目錄文件中有一大坨組件注冊(cè)信息重點(diǎn)找 不甘做輪子的搬運(yùn)工?。?！ 記錄一個(gè)實(shí)習(xí)菜鳥寫圖片預(yù)覽組件的艱辛道路~ elementUI很多組件中使用了指令模式和服務(wù)模式，比如：loading、mes...

    freewolf 評(píng)論0 收藏0

  • Vue2.0 + ElementUI 手寫權(quán)限管理系統(tǒng)后臺(tái)模板（一）——簡(jiǎn)述

    摘要：簡(jiǎn)介最近寫了一個(gè)基于權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開發(fā)所需的框架功能，開發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 簡(jiǎn)介 最近寫了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開發(fā)所需的框架功能，開發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 源碼地址...

    _ivan 評(píng)論0 收藏0

  • HeyUI組件庫(kù)按需加載功能上線，盤點(diǎn)HeyUI組件庫(kù)有哪些獨(dú)特功能？

    摘要：測(cè)試復(fù)制至剪切板的文本測(cè)試相關(guān)文檔復(fù)制剪切板滾動(dòng)至視圖內(nèi)其實(shí)，這是一個(gè)非常方便的功能，比如說(shuō)，分頁(yè)加載后滾動(dòng)至頭部，切換頁(yè)面時(shí)切換至頭部。HeyUI組件庫(kù) 如果你還不了解heyui組件庫(kù)，歡迎來(lái)我們的官網(wǎng)或者github參觀。 官網(wǎng) github 當(dāng)然，如果能給我們一顆???，那是最贊的了！ 按需加載 當(dāng)heyui組件庫(kù)的組件越來(lái)越多的時(shí)候，按需加載的功能終于上線了。 話不多說(shuō)，先把按需...

    IamDLY 評(píng)論0 收藏0

  • 基于Vue,ElementUI開發(fā)的一款表單設(shè)計(jì)器

    摘要：介紹基于開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來(lái)工具地址地址特性可視化配置頁(yè)面提供柵格布局，并采用實(shí)現(xiàn)對(duì)齊一鍵預(yù)覽配置的效果一鍵生成配置數(shù)據(jù)一鍵生成代碼，立即可運(yùn)行提供自定義組件滿足用戶自定義 介紹 基于Vue,ElementUI開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來(lái) 工具地址：http://to...

    DandJ 評(píng)論0 收藏0

  • vue2.0-基于elementui換膚[自定義主題]

    摘要：直接上預(yù)覽鏈接基于換膚自定義主題項(xiàng)目增加主題組件在項(xiàng)目的下添加文件夾文件獲取地址項(xiàng)目增加自定義主題自定義添加主題下載地址項(xiàng)目引入和使用選擇你想要隨主題改變的元素在里面，不希望隨主題改變的可以注釋掉選擇皮膚之后把記錄存在里面。 0. 直接上 預(yù)覽鏈接 [vue2.0-基于elementui換膚[自定義主題]](https://mgbq.github.io/vue-pe... 1. ...

    lx1036 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<