zoukankan      html  css  js  c++  java
  • 30 图片预览

    方式一:

    请参考:https://www.jianshu.com/p/894f9b019831

    方式二:ant-design-vue方式

    1 安装 cpm install --save ant-design-vue

    2 要使用的页面中引入

          <template>
      <div>
        <div v-for="(fileDetail,index) in dataSource[1].fileDetails" :key="index">
          <div style="float: left;104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
            <div
              style=" 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"
            >
              <img style=" 100%;" :src="fileDetail.imgUrl" :preview="dataSource[1].key" />
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import ARow from "ant-design-vue/es/grid/Row";
    
    export default {
      name: "ImagPreview",
      components: {
        ARow
      },
      data() {
        return {
          description: "图片预览页面",
          spinning: false,
          //数据集
          dataSource: [
            {
              key: 0,
              fileDetails: [
                {
                  imgUrl:
                    "https://static.jeecg.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg"
                },
                {
                  imgUrl:
                    "https://static.jeecg.com/upload/test/8f22cd945be44388bacbf0b88cf86cfa.png"
                }
              ]
            },
            {
              key: 1,
              fileDetails: [
                {
                  imgUrl:
                    "https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg"
                },
                {
                  imgUrl: "https://static.jeecg.com/upload/test/1_1588149743473.jpg"
                }
              ]
            }
          ],
          url: {}
        };
      },
      created() {},
      methods: {}
    };
    </script>
    <style scoped>
    .table-operator {
      margin-bottom: 10px;
    }
    
    .clName .ant-tree li span.ant-tree-switcher,
    .ant-tree li span.ant-tree-iconEle {
       10px !important;
    }
    
    .clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
      background-color: #1890ff !important;
    }
    </style>

    效果:

     

  • 相关阅读:
    邮件发送工具类
    redis在项目中配置
    搭建zookeeper集群
    activeMQ安装
    solr安装配置中文分词IK
    reids安装
    jdk/tomcat/mysql在linux下安装
    使用poi进行excel导入
    linux 大杂烩
    找包网址
  • 原文地址:https://www.cnblogs.com/gfbzs/p/13308169.html
Copyright © 2011-2022 走看看