mpvue本地图片上传封装组件

html代码在这里插入代码片

<template>
  <div class="z_upimg_vessel">
    <div class="z_upimg_screen">
      <div
        class="z_div_vessel"
        v-for="(item,index) in urls"
        :key="index"
        hover-class="hover_class"
        :style="{
   'min-width':width,'height':height}"
        @click="preimg(item,urls,index)"
      >
        <img class="z_img" :src="item" />
      </div>

      <div class="z_upimg_btn" @click="upimg" :style="{
   'min-width':width,'height':height}">
        <span class="z_upimg_add">+</span>
      </div>
    </div>
  </div>
</template>

css代码

<style scoped>
.z_upimg_vessel {
   
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.z_upimg_screen {
   
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20rpx 0;
}
.z_upimg_screen::-webkit-scrollbar {
   
  display: none;
}
.z_upimg_btn {
   
  border: 2rpx dashed #ddd;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-right: 30rpx;
}
.z_div_vessel {
   
  margin-right: 30rpx;
  overflow<