vux-upload组件

上传组件重写，添加了预览，在使用多个的上传组件时预览有问题，但是不影响正常预览        

<template>
  <div class="weui-cell">
    <div class="weui-cell__bd">
      <div class="weui-uploader">
        <div v-show="showHeader" class="weui-uploader__hd">
          <p class="weui-uploader__title"> {
  { title }} </p>
          <div v-show="showHeader && showTip" class="weui-uploader__info">
            {
  { list.length }} / {
  { max }}
          </div>
        </div>

        <div class="weui-uploader__bd" :class="{small: size === 'small'}">
          <ul class="weui-uploader__files">
            <div>
              <div v-for="(item, index) in list" class="weui-uploader__file" style="position:relative;">
                <uploader-item class="previewer-demo-img" :background-image="item.src" :key="item.src" @click.native="preview(item, index)" style="float: right;"></uploader-item>
                <!--<img class="previewer-demo-img" width="65px" height="65px" :src="item.src" @click ="preview(item, index)" style="float: right;">-->
                <div v-if="!handleClick">
                    <x-icon type="ios-close" size="20" style="position:absolute;margin-left: 40px" @click.native="remove(item, index)"></x-icon>
                  </div>
              </div>
              <div v-transfer-dom>
                <previewer :list="HDImg" ref="previewer" :options="options"></previewer>
              </div>
            </div>
          </ul>

          <div v-show="!readonly && list.length < max" class="weui-uploader__input-box" @click="add">
            <input v-if="!handleClick" ref="input" class="weui-uploader__input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" :capture="showCapture" @change="change">
          </div>
        </div>
      </div>
    </div>
    <toast v-model="showPositionValue" type="warn"  :time="1500" is-show-mask  >网络异常，请检查网络</toast>
    <toast v-model="uploadFailure" type="warn"  :time="1500" is-show-mask  >上传失败</toast>
  </div>
</template>

<script>
import UploaderItem from './uploader-item.vue'
import {Previewer, TransferDom, Toast} from 'vux'
import axios from 'axios'
export default {
  name: 'upload',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    HDImg: {
      type: Array,
      default: () => []
    },
    max: {
      type: Number,
      default: 1
    },
    val: { // 传递为上传图片的种类
      type: String,
      default: ''
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showTip: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '图片上传'
    },
    attachIds: { // 回调主键集合
      type: Array,
      default: () => []
    },
    // 是否接管+号的click事件，如果是，点击不弹出选择文件的框
    handleClick: {
      type: Boolean,
      default: false
    },
    // 选择文件后是否自动上传，如果不是，则emit change事件
    autoUpload: {
      type: Boolean,
      defau