This is a simple click preview component
By the way, record scope pits in vue stepped on during component writing~

Start with registering global components!

• Project catalogue:

Imitate elementUI directory structure, directory name is component name, SRC is component source file (or js service file), there is also an index.js in the file directory for the same management of all files in src, export and registration, this component we only have one vue file

• First look at what's in the index.js file:

//vue component files under src are introduced
import starPicList from './src/star-pic-list';

/* istanbul ignore next */
starPicList.install = function(Vue) {
    //starPicList.name is the name of the component that can be used later (as defined in the star-pic-list.vue file), and install is the default method.
    Vue.component(starPicList.name, starPicList);
};

export default starPicList;

Next, I introduce the install method:
Vue. use (plugin): Install the Vue. JS plug-in. If the plug-in is an object, you must provide an install method. If the plug-in is a function, it will be used as an install method. The install method is called as a parameter to the Vue. When the install method is called multiple times by the same plug-in, the plug-in will only be installed once. The plug-in for Vue.js should have a public method install. The first parameter of this method is the Vue constructor, and the second parameter is an optional option object:

• After exporting the starPicList component, it is referenced in the management component js file, and then exported and registered globally by the unified management js file:

Well, these are nonsense!

• Use of components:

<! - Picture list form, Click to view the picture list, click on the display of the top (bottom) one - >
<template v-slot="scope">
    <star-pic-list :data="scope.row.pic" :max-show="2"/>
</template>

parameter
data: an array of incoming pictures;
max-show: Show up to a few pictures at a time

• The results are as follows:

• Supplementary: After adding scoped s to style in vue component development, modifying the third-party component style has no effect.

In the development of vue, we usually cooperate with element-UI, and we will encounter that after adding scoped s to component style, the style of sub-components used in element-ui can not be changed.
Remove this attribute without scoped, but pollute the global style (with less or scss recommended), all of which are written under the current component id or class)

Component source code:

<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: {
            // Enlarge the picture.
            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>

More Components Click Here - > ____________ link : github>components>star-pic-list