基于elementUI實現圖片預覽組件

iOS122 發布于2019-08-26 13:38 / 566人閱讀

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

這是一個簡單的點擊圖片預覽的組件
順便記錄一下寫組件期間踩的vue中scope的坑~

從注冊全局組件開始叭！

項目目錄：

模仿elementUI目錄結構，目錄名是組件名，src中是組件源文件（或者js服務文件），文件目錄下還有一個index.js用于同一管理src中的所有文件，導出并注冊，這個組件我們只有一個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是默認的一個方法
    Vue.component(starPicList.name, starPicList);
};

export default starPicList;

接下來介紹一下install方法：
Vue.use( plugin )：安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install 方法將被作為 Vue 的參數調用。當 install 方法被同一個插件多次調用，插件將只會被安裝一次。Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象：

導出starPicList組件后在管理組件js文件中引用，然后由這個統一管理js文件導出注冊到全局即可：

好了，這些是廢話！

組件的使用：

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

效果如下：

補充：vue組件開發中 style 添加scoped后，修改第三方組件樣式沒有效果問題：

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

組件源碼：

更多組件點擊這兒 --> link : github>components>star-pic-list

GPU云服務器云服務器圖片預覽 java文檔預覽實現清空圖片預覽圖片本地預覽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109227.html

徹底搞懂elementUI指令與服務模式原理

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

freewolf 2019-08-26 13:38 評論0 收藏0
Vue2.0 + ElementUI 手寫權限管理系統后臺模板（一）——簡述

摘要：簡介最近寫了一個基于權限管理系統的后臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注于項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。簡介最近寫了一個基于vue2.0+element-ui權限管理系統的后臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注于項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。源碼地址...

_ivan 2019-08-23 14:06 評論0 收藏0
HeyUI組件庫按需加載功能上線，盤點HeyUI組件庫有哪些獨特功能？

摘要：測試復制至剪切板的文本測試相關文檔復制剪切板滾動至視圖內其實，這是一個非常方便的功能，比如說，分頁加載后滾動至頭部，切換頁面時切換至頭部。HeyUI組件庫如果你還不了解heyui組件庫，歡迎來我們的官網或者github參觀。官網 github 當然，如果能給我們一顆???，那是最贊的了！按需加載當heyui組件庫的組件越來越多的時候，按需加載的功能終于上線了。話不多說，先把按需...

IamDLY 2019-05-22 19:08 評論0 收藏0
基于Vue,ElementUI開發的一款表單設計器

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

DandJ 2019-08-23 12:13 評論0 收藏0
vue2.0-基于elementui換膚[自定義主題]

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

lx1036 2019-08-29 15:17 評論0 收藏0