Implementation of dynamically loading picture list based on div

1. Reasons

Sometimes, for the paging picture list, the implementation of using the table is not friendly enough, and you need to implement it yourself.

Two, ideas

1. Define a large div, dynamically load the div in this package, and layout the attributes in this div such as custom layout

2. Define a small div, this div wraps the picture

3. Define a dynamic class to display as the selected style

Three, code implementation

Key code:

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>

 

Related styles and methods

style:

 .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;/*伸缩盒子的子元素排列：从上到下*/
    }

The role of the thumbMedia class: to retain the complete field value when copying

method:

selectBtn(item){

this.currentIndex = item.id;

this.videoForm.thumbId = item.id;

this.imageUrl = item.url;

},

Picture effect:

Four, involving technology

flex layout, js, css

flex layout article  https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html