divに基づいて画像リストを動的にロードする実装

1.理由

場合によっては、ページング画像リストの場合、テーブルを使用する実装は十分に友好的ではなく、自分で実装する必要があります。

2、アイデア

1.大きなdivを定義し、このパッケージにdivを動的にロードし、カスタムレイアウトなど、このdivの属性をレイアウトします。

2.小​​さなdivを定義します。このdivは画像をラップします

3.選択したスタイルとして表示する動的クラスを定義します

3、コードの実装

キーコード：

v-for = "item in this.thumbList"：key = "item.id"

 

：class = "{'activeImg'：currentIndex === item.id}"

 

<el-dialog :visible.sync="thumbVisible" title="选择缩略图" width="63%">
	<div class="thumb">
	  <div v-for="item in this.thumbList" :key="item.id" style="padding: 10px 5px 10px 5px; width: 110px;height: 110px;">
		<div :class="{'activeImg':currentIndex === item.id}">
		  <el-image :src="item.url" @click="selectBtn(item)" style="cursor:pointer;width: 100px;height:100px;"></el-image>
		</div>
		<div style="width: 100%;display:inline-flex;justify-content:center;">
		  <span class="thumbMedia">{
   
   {item.id}}</span>
		</div>
	  </div>
  </div>
  <el-row>
	<!--工具条-->
	<el-pagination
	  @size-change="thumbSizeChange"
	  @current-change="thumbCurrentChange"
	  :current-page="thumbPageNum"
	  :page-sizes="[10, 20, 30, 40]"
	  :page-size="thumbPagesize"
	  layout="total, sizes, prev, pager, next, jumper"
	  :total="thumbTotal">
	</el-pagination>
  </el-row>
  <el-row style="margin-top: 10px;display: flex;justify-content: center;">
	<el-button @click="comfirmSel">选择</el-button>
	<el-button @click="cancelThumb">取消</el-button>
  </el-row>
</el-dialog>

 

関連するスタイルと方法

スタイル：

 .thumb{
    margin-bottom:20px;
    height: 300px;
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow :auto;
  }
  .activeImg{
    border-style:solid;
    border-width:3px;
    border-color:#FFFF00;
  }

.thumbMedia{
      display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: ellipsis; /* 溢出用省略号*/
      -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
    }

thumbMediaクラスの役割：コピー時に完全なフィールド値を保持します

方法：

selectBtn(item){

this.currentIndex = item.id;

this.videoForm.thumbId = item.id;

this.imageUrl = item.url;

},

画像効果：

4、テクノロジーを含む

フレックスレイアウト、js、css

フレックスレイアウトの記事 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html