UniApp实现自定义指令与操作封装的设计与开发指南

// main.js
import Vue from 'vue'
import App from './App'
import '@/uni.vue.mixin.js'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

// uni.vue.mixin.js
export default {
  directives: {
    customDirective: {
      bind(el, binding) {
        // 指令生效时执行的函数
        // el为绑定指令的dom元素，binding为指令的绑定值
        // 在此处可以根据实际需求对DOM元素进行操作
      },
      update(el, binding) {
        // 指令的绑定值发生改变时执行的函数
        // 在此处可以根据实际需求对DOM元素进行更新操作
      },
      unbind(el) {
        // 指令解绑时执行的函数
        // 在此处可以对之前绑定的事件进行解绑操作
      }
    }
  }
}

<template>
  <view v-custom-directive="value"></view>
</template>

<script>
export default {
  data() {
    return {
      value: 'Hello World'
    }
  }
}
</script>

// utils.js
export function uploadImage(file) {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: 'http://example.com/api/upload',
      filePath: file.path,
      name: 'file',
      success(res) {
        if (res.statusCode === 200 && res.data) {
          resolve(res.data)
        } else {
          reject(new Error('上传失败'))
        }
      },
      fail(error) {
        reject(error)
      }
    })
  })
}

<template>
  <view>
    <input type="file" @change="handleFileChange" />
    <button @click="upload">上传</button>
  </view>
</template>

<script>
import { uploadImage } from 'utils.js'

export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0]
    },
    async upload() {
      try {
        const res = await uploadImage(this.file)
        console.log(res)
        // 处理上传成功后的逻辑
      } catch (error) {
        console.error(error)
        // 处理上传失败后的逻辑
      }
    }
  }
}
</script>