使用vue.js+element-ui实现简单的图片浏览。_vue 网页图片浏览-程序员宅基地

技术标签： vue.js

代码很简单。
这里是用来element的几个组件，页面布局是flex。下面直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
  body{
      background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564138886544&di=26a657360b5be04afeee5c5533d3faef&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F37%2F78%2F65%2F55f0e6a7e29df.jpg');
      margin: 0;
      padding: 0
  }
  .content{
      margin: auto;
      width: 80%;
      height: 1500px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: flex-start;
      background-color: blanchedalmond;
      padding: 30px;
      transform: rotate(11deg);
      margin-top: 150px;
      border-radius: 15px;
  }
  .item{
      width: 28%;
      /* height: 250px; */
      
  }
  .dialog, .item img{
      max-width: 100%;
      height: auto;
      border: 1px solid #67C23A;
      border-radius: 5px;
  }
  .item img:hover{
      opacity: 0.8;
  }
  .el-carousel__item {
    color: #475669;
    /* font-size: 14px; */
    opacity: 0.75;
    margin: auto;
    /* line-height: 200px; */
    margin: 0;
    padding: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<body>
  <div id="app">
     <div class="content">
         <div v-for="item in items" @click="dialogVisible = true" class="item"><img :src="item" alt=""></div>
         
     </div>
     <el-dialog
        title="图片预览"
        :visible.sync="dialogVisible"
        width="50%"
        top="20vh"
        center
        :before-close="handleClose">
        <el-carousel :interval="10000" indicator-position="outside" trigger="click" type="always" height="200px">
            <el-carousel-item v-for="item in items" :key="item">
              <img class="dialog" :src="item" alt="">
            </el-carousel-item>
          </el-carousel>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
  </div>
</body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js" class="item"><img src="" alt=""></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js" class="item"><img src="" alt=""></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
            visible: false,
            dialogVisible:false,
            items:['https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg',
            'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg'
            ,'https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg']
         }
      }
    })
  </script>
</html>

本文链接：https://blog.csdn.net/byhage1/article/details/97395643

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python服务器端开发面试_【网易游戏Python面试】python 服务端开发-看准网-程序员宅基地

文章浏览阅读145次。10.21终面已参加，希望能顺利通过终面拿到offer～一共三轮，电话面试＋笔试＋视频面试，视频面试3V110月19日投的新媒体运营的简历，HR说因为是周末，等工作日再联系我，在周一下午三点我接到了电话成功通过简历筛选和电话面试，整个电话面试的过程长，大概10分钟左右，因为前期稍微做了一些准备，所以还算对答如流，整个过程顺利，HR现场告诉我通过面试，并随即给我发了笔试题，让我准备一下，最晚三天之..._网易 python游戏服务器

MVC层次划分简述_mvc分层-程序员宅基地

文章浏览阅读6.5k次，点赞12次，收藏38次。MVC层次划分简述写在前面的一段话：首先要知道MVC和三层架构之间有什么关系：MVC：【 Model(数据模型) - View(视图) - Controller(控制器) 】三层架构：【 Presentation tier(展现层) - Application tier(应用层)+Date tier(数据访问层) 】很多人都有一个误解，认为Spring MVC的M、V、C对..._mvc分层

Flink的sink实战之三：cassandra3_flink cassandra-程序员宅基地

文章浏览阅读2.9k次。实践flink数据集sink到cassandra3_flink cassandra

使用docker安装codimd，搭建你自己的在线协作markdown编辑器_群晖 docker 搭建 codimd-程序员宅基地

文章浏览阅读7.1k次，点赞4次，收藏12次。文章目录一、前言二、codimd是什么？2.1 源于hackmd的超好用markdown编辑器2.2 codimd的作用三、安装和使用3.1 安装前需要知道的3.2 安装步骤3.2.1 创建数据库3.2.2 安装git3.2.3 安装docker3.2.4 安装docker compose3.2.5 安装codimd3.2.6 检查是否安装成功3.2.7 放行端口3.2.8 测试使用3.3 开始写..._群晖 docker 搭建 codimd

Json和ajax-程序员宅基地

文章浏览阅读335次。Json json 可以定义多种类型 var jsonObj = { "key1":123, "key2":"name", "key3":[12,"age",true], //数组 "key4":false, "key5":{ //存一个json对象 "key6":456, "key7":"number" }} json其实就是一个Object对象，他的key值可以看成对象的一个属性，获取他的value值...

ssm超市账单管理系统a2e96【独家源码】应对计算机毕业设计困难的解决方案-程序员宅基地

文章浏览阅读87次。选题背景：超市账单管理系统是一种针对超市行业的管理工具，旨在提供高效、准确、便捷的账单管理服务。随着城市化进程的加快和人们生活水平的提高，超市作为日常生活必需品的主要供应渠道之一，扮演着重要的角色。然而，传统的超市账单管理方式存在一些问题，如手工记录容易出错、数据整理繁琐、信息不透明等。因此，开发一个科技化的超市账单管理系统成为了必要之举。选题意义：首先，超市账单管理系统的开发可以提高账单管理的效率。传统的超市账单管理方式通常需要员工手动记录商品销售信息，并进行数据整理和汇总。这种方式容易出现人为错

随便推点

bookmarks_2021_9_28_拾度智能科技 att7022eu-程序员宅基地

文章浏览阅读1.7k次。书签栏通讯 s7-1200与s7-200smart通讯-工业支持中心-西门子中国IO_deviceS7-1200PROFINET通信ET 200SP 安装视频 - ID: 95886218 - Industry Support Siemens云平台接入在线文档 - 低代码开发嵌入式设备 | 物一世 WareExpress在linux下使用c语言实现MQTT通信(一.MQTT原理介绍及流程图)_qq_44041062的博客-程序员宅基地C mqtt_百度搜索开发快M_拾度智能科技 att7022eu