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

// main.jsimport Vue from 'vue'import App from './App'import '@/uni.vue.mixin.js'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({  ...App})app.$mount()

// uni.vue.mixin.jsexport 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.jsexport 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"><button>上传</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>