PLDaily / vue2-waterfall

😁 An AutoHeight Waterfall Component For Vue2

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

插入新数据后重置waterfall组件,重新渲染后计算位置不正确

newb-pjr opened this issue · comments

<waterfall class="content" :gutterWidth="10" :gutterHeight="10" ref="waterfall" v-if="showWaterfall">
        <waterfall-item class="content-item" v-for="(item, index) in photoList" :order="index" :key="index" :width="290">
          <img :src="item.Tplj" width="100%">
          <bottom-info></bottom-info>
          <div class="dropdown">
          <el-dropdown @command="handleCommand">
            <div class="dropdown-btn">
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu class="dropdown-menu" slot="dropdown">
              <el-dropdown-item>
                <i class="icon-check"></i> <span>查看</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="icon-edit"></i> <span>编辑</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="icon-Set-cover"></i> <span>设置封面</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="icon-Topping"></i> <span>置顶</span>
              </el-dropdown-item>
              <el-dropdown-item :command="{handle: 'delete', data: item}">
                <i class="icon-delete02"></i> <span>删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
        </waterfall-item>
      </waterfall>
_deletePhoto (pictureID) {
      axios.delete('/web/deletePicture', {
        params: {
          pictureID
        }
      }).then((resp) => {
        if (resp.data.Status) {
          this.successTips('删除图片')
          this.showWaterfall = false
          this._getPhotos()
          this.$nextTick(() => {
            this.showWaterfall = true
          })
        } else {
          this.errorTips('删除图片', resp.data.Message)
        }
      })
    }