vue-gallery的應用(圖片預覽)

子墨老师發表於2024-12-03

vue-gallery是一款支援圖片預覽的前端外掛,測試後是可以使用的,我們來介紹一下如何使用vue-gallery

參考網址:vue-gallery - npm

第1步:安裝vue-gallery

npm install vue-gallery --save

第2步:在vue檔案中的匯入

<script>
import VueGallery from 'vue-gallery';
export default {
    components: {VueGallery}
}
</script>

第3步:測試案例,在單獨的vue檔案中應用

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div
      class="image"
      v-for="(image, imageIndex) in images"
      :key="imageIndex"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
    ></div>
  </div>
</template>

<script>
  import VueGallery from 'vue-gallery';
  
  export default {
    data: function () {
      return {
        images: [
          'https://dummyimage.com/800/ffffff/000000',
          'https://dummyimage.com/1600/ffffff/000000',
          'https://dummyimage.com/1280/000000/ffffff',
          'https://dummyimage.com/400/000000/ffffff',
        ],
        index: null
      };
    },

    components: {
      'gallery': VueGallery
    },
  }
</script> 

<style scoped>
  .image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;
  }
</style>

下面程式碼是結合element-ui和el-image來使用vue-gallery。大家可以直接拿下面的程式碼測試,先截圖,然後附上程式碼

<template>
  <div class="about">
    <div>
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名稱">
              <el-input v-model="formInline.user" placeholder="請輸入電影名稱"></el-input>
            </el-form-item>
            <el-form-item label="狀態">
              <el-select v-model="formInline.region" placeholder="請選擇電影狀態">
                <el-option label="待放映" value="0"></el-option>
                <el-option label="已上映" value="1"></el-option>
                <el-option label="停止上映" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查詢</el-button>
              <el-button type="warning">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div style="height: 10px;"></div>
      <div>
        <el-row>
          <el-col :span="24">
            <el-button type="danger" @click="onSubmit">新增</el-button>
            <el-button type="primary" @click="onSubmit">批次刪除</el-button>
          </el-col>
        </el-row>
      </div>
      <div style="height: 10px;"></div>
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="中文名稱" width="180"></el-table-column>
            <el-table-column prop="english" label="英文名稱" width="180" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="date" label="上映時間" width="180"></el-table-column>
            <el-table-column prop="times" label="電影時長" width="180"></el-table-column>
            <el-table-column prop="category" label="電影型別" width="180">
              <template slot-scope="scope">
                <el-tag type="danger" v-for="(item,index) in scope.row.category" :key="index" style="margin-right:5px;">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="language" label="語言型別" width="180"></el-table-column>
            <el-table-column prop="desc" label="電影簡介" width="180" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="img" label="電影圖片" width="180">
              <template slot-scope="scope">
                <el-image style="width: 40px; height: 40px; border-radius: 5px;" fit="cover" :src="scope.row.img" @click="openGallery(0, scope.row.img)"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="area" label="製作區域" width="180"></el-table-column>
            <el-table-column prop="status" label="電影狀態" width="180">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '待放映'">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '已上映'" type="success">{{ scope.row.status }}</el-tag>
                <el-tag v-else type="danger">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template>
                <el-button size="small" type="text">編輯</el-button>
                <el-button size="small" type="text">刪除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div style="height:10px;"></div>
      <el-row>
        <el-col :span="24" style="text-align: right;">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </el-col>
      </el-row>
    </div>

    <!-- 圖片預覽畫廊 -->
    <vue-gallery :images="imageList" @close="currentImageIndex = null" :index="currentImageIndex" />
  </div>
</template>
<script>
import VueGallery from 'vue-gallery';

export default {
  name: 'about',
  components: {
    VueGallery
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '最後里程',
        english: 'Last mile',
        address: '上海市普陀區金沙江路 1518 弄',
        desc: '11月,即將到來的全球最大購物活動之一“黑色星期五”前夜,發生了一起紙箱爆炸事件。很快,這起事件演變成了讓整個日本陷入恐慌的連續爆炸事件。物流倉庫的新任主管·舟渡艾蕾娜(滿島光 飾)和團隊經理·梨本孔(岡田將生 飾)一同應對這場前所未有的危機! 是誰?為什麼安放炸彈? 剩下的炸彈還有多少?現在在哪裡? 物流是現代社會的生命線,如何才能阻止這個連續爆破事件?當謎題被解開時,這個世界所隱藏真面目將浮出水面。',
        status: '待放映',
        times: '120',
        category: ['驚恐', '劇情'],
        language: '中文',
        area: '日本',
        img: require('@/imgs/1730963678636.jpg')
      }, {
        date: '2016-05-04',
        name: '愛情神話',
        english: 'B for Busy',
        address: '上海市普陀區金沙江路 1517 弄',
        desc: '老白是一位來自上海的離異退休繪畫教師,他愛上了一位同樣離異的李小姐。他的前妻蓓蓓和他的一個學生的介入讓整個事情變得複雜起來。在上海的弄堂裡,一個男人和三個女人的故事徐徐拉開序幕。',
        status: '已上映',
        times: '110',
        category: ['驚恐', '劇情', '科幻'],
        language: '英文',
        area: '中國大陸',
        img: require('@/imgs/1730356252740.jpg')
      }, {
        date: '2016-05-01',
        name: '偉大征程',
        english: 'THE GREAT JOURNEY',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄',
        desc: '國內首部4K全景聲大型情景史詩舞臺藝術電影。',
        status: '待放映',
        times: '90',
        category: ['戲劇', '劇情'],
        language: '法語',
        area: '法國',
        img: require('@/imgs/1730356090428.jpg')
      }, {
        date: '2016-05-03',
        name: '紅色一號:冬日行動',
        english: 'RED ONE',
        address: '上海市普陀區金沙江路 1516 弄',
        desc: '聖誕老人(J·K·西蒙斯 飾)被神秘綁架,北極安保主管(道恩·強森 飾)不得已與全世界最臭名昭著的賞金獵人(克里斯·埃文斯 飾)展開合作,他們尋遍全球、打遍天下,力求拯救聖誕節。',
        status: '待放映',
        times: '100',
        category: ['驚恐', '劇情', '懸疑'],
        language: '德語',
        area: '德國',
        img: require('@/imgs/1730355957307.jpg')
      }],
      imageList: [],
      currentImageIndex: null, // 圖片預覽索引
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    openGallery(index, imgUrl) {
      this.imageList = [] // 清空
      this.imageList = [imgUrl]
      this.currentImageIndex = index
    }
  }
}
</script>
<style>
.about {
  text-align: left;
  width: 90%;
  margin: 0 auto;
}
.el-tooltip__popper {
  max-width: 30%;
}
</style>

相關文章