头部组件

zhaoxiaoqiang

2022-08-30 496fd3866f44ad362539b316d16e34d03cf169e3

 src/components/upload/uploadImg.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2019-08-30 18:04:49
 * @LastEditors: 小明丶
 * @LastEditTime: 2020-06-08 14:09:13
 * @LastEditors: zxq
 * @LastEditTime: 2022-08-05 15:26:13
 * @Description:
 -->
<template>
@@ -50,13 +50,40 @@
    </div>
    <!--选择上传图片还是拍照-->

    <van-action-sheet
    <!-- <van-action-sheet
      v-model="selectModel"
      :close-on-click-overlay="false"
      cancel-text="取消"
      :actions="nav"
      @select="handleMenuSelect"
    ></van-action-sheet>
    ></van-action-sheet> -->
    <van-action-sheet v-model="selectModel" cancel-text="取消">
      <div class="content">
        <div class="upload_input" @click="handleMenuSelect">
                <div>拍照</div>
                <input
                  style="cursor:pointer;width:100%;opacity:0;"
                  type="file"
                  id='inputFileCapture'
                  ref="androidInputFileCapture"
                  @change="handlePhotoChange($event,2)"
                  accept="image/*"
                  capture="camera"
                />
          </div>
          <div class="upload_input" @click="handleMenuSelect">
              <div>本地相册上传</div>
              <input
                  style="cursor:pointer;width:100%;opacity: 0;"
                  type="file"
                  id='inputFileImage'
                  ref="androidInputFileImage"
                  @change="handlePhotoChange($event,1)"
                  accept="image/jpg, image/jpeg, image/png"
                />
          </div>
      </div>
    </van-action-sheet>
  </div>
</template>

@@ -304,11 +331,11 @@
    },
    // 选择拍照或者相册选项
    handleMenuSelect(item, index) {
      if (index === 0) {
        this.$refs.androidInputFileCapture.click();
      } else {
        this.$refs.androidInputFileImage.click();
      }
      // if (index === 0) {
      //   this.$refs.androidInputFileCapture.click();
      // } else {
      //   this.$refs.androidInputFileImage.click();
      // }
      this.selectModel = false;
    },
    // 处理图片的删除
@@ -320,8 +347,22 @@
};
</script>

<style lang="less" scoped>
<style lang="less">
.component-photo-upload-img {
  .upload_input{

    width: 100%;
    font-size: 16px;
    position: relative;
    text-align: center;
    padding: 8px 0;
    margin:10px 0;
    input{
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .pic-title {
    margin-bottom: 10px;
  }