基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼
這是一個(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è)到全局即可:
好了,這些是廢話!
組件的使用:
<!--圖片列表形式,點(diǎn)擊查看圖片列表,點(diǎn)擊顯示上(下)一張--> <template v-slot="scope"> <star-pic-list :data="scope.row.pic" :max-show="2"/> </template>
參數(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下面)
組件源碼:
<template> <div id="star-pic-vue"> <template v-if="data"> <img v-for="item in images" :src="item" id="contract_url" @click="enlargePic"/> <template v-if="isDialogShow"> </template> <el-dialog :visible.sync="centerDialogVisible" modal close-on-click-modal custom-class="dialog" > <el-carousel :autoplay="false" arrow="always"> <el-carousel-item v-for="item in data" :key="item"> <img :src="item"> </el-carousel-item> </el-carousel> </el-dialog> </template> </div> </template> <script> export default { name: "star-pic-list", props: ["data","maxShow"], data(){ return{ centerDialogVisible: false, showPic: '', isDialogShow: false, index: 0, } }, computed: { images() { if (this.data instanceof Array && this.data.length > 2) { return this.data.splice(0,this.maxShow) } else { return this.data } } }, methods: { // 放大圖片 enlargePic(e){ this.isDialogShow = true; this.centerDialogVisible = true; this.showPic = this.data[0]; console.log(this.images) }, } } </script> <style lang="less"> #star-pic-vue{ width: 200px; height: auto; display: flex; flex-wrap: wrap; img{ width: 80px; height: 80px; margin: 4px; } .dialog { img{ width: 100%; height: 100%; margin: 0; } } .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; height: 100%; width: 100%; } .el-dialog__header{ display: none; } .el-dialog__body { padding: 0 !important; margin: 0 !important; height: 600px; } .el-carousel{ height: 100%; } .el-carousel__container { height: 100%; } } </style>
更多組件點(diǎn)擊這兒 --> link : github>components>star-pic-list
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問(wèn)題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問(wèn)題的修復(fù)方法,需要的朋友可以參考下2018-01-01vue3+elementPlus?table中添加輸入框并提交校驗(yàn)
這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08