使用vue.js+element-ui实现简单的图片浏览。

最新推荐文章于 2024-04-11 17:21:44 发布

BYh_blog

最新推荐文章于 2024-04-11 17:21:44 发布

阅读量1.5k

点赞数 1

分类专栏： vue.js

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

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码很简单。
这里是用来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>

BYh_blog

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用vue.js+element-ui实现简单的图片浏览。

代码很简单。这里是用来element的几个组件，页面布局是flex。下面直接上代码<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/elem...
复制链接

扫一扫

专栏目录