图片点击全屏插件

npm install v-img --save

  import Vue from 'vue';

  import VueImg from 'v-img';

 

  Vue.use(VueImg);

 

 

 

.vue文件

 

<template>

<div class="hello">

<h1>{{ msg }}</h1>

<div style="height:200px;width:200px;">

<el-carousel height="200px" indicator-position="none">

<el-carousel-item v-for="(item, index) in picture" :key="index">

{{index}}

<img :src="item.src"

class="item-img"

style="width:100%;"

v-img:group

alt>

</el-carousel-item>

</el-carousel>

</div>

<el-button type="primary">主要按钮</el-button>

</div>

</template>

<script>

export default {

name: 'HelloWorld',

data () {

return {

msg: 'Welcome to Your Vue.js App',

num: 2,

picture: [{src: require('../assets/logo.png'), index:'1'},

{src: require('../assets/1.jpg'), index:'2'},

{src: require('../assets/logo.png'), index:'3'},

{src: require('../assets/logo.png'), index:'4'},

{src: require('../assets/logo.png'), index:'5'}]

}

}

}

</script>

<style scoped>

</style>