基於elementUI實現圖片預覽組件

這是一個簡單的點擊圖片預覽的組件
順便記錄一下寫組件期間踩的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文件導出註冊到全局便可：

---

好了，這些是廢話！

• 組件的使用：

<!--圖片列表形式，點擊查看圖片列表，點擊顯示上（下）一張-->
<template v-slot="scope">
    <star-pic-list :data="scope.row.pic" :max-show="2"/>
</template>

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

• 效果以下：

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

在vue的開發中，咱們一般和element-UI配合開發，就會遇到，在組件style中添加scoped後，element-ui中使用的子組件樣式沒法改變。
不用scoped，去掉這個屬性，可是會污染全局樣式，（可配合less 或者 scss（推薦scss），全部樣式寫在當前組件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>

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