aiot-app/uni_modules/l-file/components/l-file/h5-file.vue

<template>
  <div class="content">
    <div @click="onClose" class="fixed mask"></div>

    <div v-if="showTip" align="center" class="fixed tis">
      <div class="tis-content">
        <div>
          <img :src="logo" />
        </div>
        <div class="tis-progress">
          努力上传中
          <text v-if="progress < 100">..{{ progress }}%</text>
        </div>
        <div class="cancel">
          <button @click="onAbort" type="button" class="cancel-btn">
            取消上传
          </button>
        </div>
      </div>
    </div>

    <div class="fixed file-content">
      <view ref="input" class="btn">
        <button type="button" class="btn-bg">打开文件管理器</button>
      </view>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    logo: {
      type: String,
      default:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F07%2F155788a6d8a5c42.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619847627&t=2da40b583002205c204d980b54b35040'
    },
    progress: {
      type: [Number, String],
      default: 0
    },
    showTip: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hFile: ''
    }
  },
  mounted () {
    this.hFile = document.createElement('input')
    this.hFile.type = 'file'
    this.hFile.value = ''
    this.hFile.style.position = 'absolute'
    this.hFile.style.zIndex = 93
    this.hFile.style.left = 0
    this.hFile.style.right = 0
    this.hFile.style.top = 0
    this.hFile.style.bottom = 0
    this.hFile.style.height = '60px'
    this.hFile.style.width = '100%'
    this.hFile.style.opacity = 0
    this.$refs.input.$el.appendChild(this.hFile)
  },
  methods: {
    onAbort () {
      this.$emit('abort', {})
    },
    onClose () {
      this.$emit('close', {})
    }
  }
}
</script>

<style scoped>
.content {
  background: transparent;
}
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.content .mask {
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}
.content .file-content {
  z-index: 91;
  height: 60px;
  background: #fff;
  text-align: center;
}
.btn {
  position: relative;
}
.btn .file {
  position: absolute;
  z-index: 93;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 60px;
  width: 100%;
  opacity: 0;
}
.btn-bg {
  margin-top: 10px;
  background: #0066cc;
  color: #fff;
  width: 80%;
  height: 40px;
  line-height: 40px;
  border: 0;
  border-radius: 5px;
}
.tis {
  top: 0;
  z-index: 95;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tis .tis-content {
  background: #fff;
  width: 60%;
  border-radius: 10px;
  padding: 20px 0;
}
.tis .tis-content img {
  width: 50px;
  height: 50px;
}
.tis-progress {
  margin: 10px 0;
  color: #999;
}
.cancel-btn {
  margin-top: 30px;
  height: 30px;
  width: 60%;
  line-height: 30px;
  font-size: 32rpx;
  padding: 0 2em;
  background: #e3e3e3;
  color: #898989;
  border: 0 !important;
  border-radius: 5px;
}
.cancel-btn:after {
  height: 0 !important;
  border: 0 !important;
}
</style>