xx-uivue

一个实用的 uni-app 组件库，包含日期选择器、下拉刷新和上传头像等常用组件，支持中英文切换。

组件列表

• 📅 DatePicker - 日期选择器
• 🔄 PullRefresh - 下拉刷新
• 📷 UploadAvatar - 上传头像

特性

• 📱 适配 uni-app 多端（H5、小程序、App）
• 🌐 支持中文和英文
• 🎨 现代化的 UI 设计
• ⚡ 轻量级，易于使用
• 🔧 高度可自定义

安装

npm install xx-uivue

使用方法

方式一：按需引入（推荐）

<template>
  <view>
    <!-- 日期选择器 -->
    <date-picker v-model="date" lang="zh"></date-picker>
    
    <!-- 下拉刷新 -->
    <pull-refresh @refresh="onRefresh">
      <view>内容区域</view>
    </pull-refresh>
    
    <!-- 上传头像 -->
    <upload-avatar v-model="avatar" @upload="handleUpload"></upload-avatar>
  </view>
</template>

<script>
import { DatePicker, PullRefresh, UploadAvatar } from 'xx-uivue'

export default {
  components: {
    DatePicker,
    PullRefresh,
    UploadAvatar
  },
  data() {
    return {
      date: '',
      avatar: ''
    }
  },
  methods: {
    onRefresh(done) {
      // 执行刷新逻辑
      setTimeout(() => {
        done() // 刷新完成
      }, 1000)
    },
    handleUpload({ filePath, success, fail }) {
      // 执行上传逻辑
      // 上传成功后调用 success(url)
      // 上传失败调用 fail(error)
    }
  }
}
</script>

方式二：全局注册

在 main.js 中：

import Vue from 'vue'
import UniComponents from 'xx-uivue'

Vue.use(UniComponents)

然后在任何页面中直接使用：

<template>
  <view>
    <date-picker v-model="date"></date-picker>
    <pull-refresh @refresh="onRefresh">
      <view>内容</view>
    </pull-refresh>
    <upload-avatar v-model="avatar"></upload-avatar>
  </view>
</template>

DatePicker 日期选择器

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | value | 当前选中的日期值，格式：YYYY-MM-DD | String | '' | | placeholder | 输入框占位符 | String | '' | | disabled | 是否禁用 | Boolean | false | | lang | 语言设置，'zh' 或 'en' | String | 'zh' |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | input | 日期值改变时触发（用于 v-model） | (date: string) | | change | 日期值改变时触发 | (date: string) |

示例

<date-picker 
  v-model="date" 
  placeholder="请选择日期"
  lang="zh"
  @change="onDateChange"
></date-picker>

PullRefresh 下拉刷新

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | disabled | 是否禁用下拉刷新 | Boolean | false | | pullText | 下拉提示文本 | String | '下拉刷新' | | refreshingText | 刷新中提示文本 | String | '刷新中...' | | completeText | 完成提示文本 | String | '刷新完成' | | threshold | 触发刷新的距离阈值（px） | Number | 60 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | refresh | 触发刷新时调用，需要调用 done() 完成刷新 | (done: function) |

示例

<pull-refresh 
  @refresh="onRefresh"
  pull-text="下拉刷新"
  refreshing-text="刷新中..."
>
  <view class="content">
    <!-- 你的内容 -->
  </view>
</pull-refresh>

<script>
export default {
  methods: {
    onRefresh(done) {
      // 执行数据刷新
      this.fetchData().then(() => {
        done() // 刷新完成
      })
    }
  }
}
</script>

UploadAvatar 上传头像

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | value | 当前头像地址 | String | '' | | placeholderText | 占位符文本 | String | '上传头像' | | uploadingText | 上传中提示文本 | String | '上传中...' | | size | 头像尺寸（rpx 或带单位的字符串） | Number/String | 100 | | disabled | 是否禁用 | Boolean | false | | quality | 图片质量（0-100） | Number | 80 | | crop | 是否允许裁剪 | Boolean | true |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | input | 头像地址改变时触发（用于 v-model） | (url: string) | | change | 头像地址改变时触发 | (url: string) | | upload | 选择图片后触发，需要处理实际上传逻辑 | ({ filePath, success, fail }) | | error | 上传失败时触发 | (error: object) |

示例

<upload-avatar 
  v-model="avatarUrl" 
  @upload="handleUpload"
  size="200"
></upload-avatar>

<script>
export default {
  data() {
    return {
      avatarUrl: ''
    }
  },
  methods: {
    handleUpload({ filePath, success, fail }) {
      // 方式一：使用 uni.uploadFile
      uni.uploadFile({
        url: 'https://your-api.com/upload',
        filePath: filePath,
        name: 'file',
        success: (res) => {
          const data = JSON.parse(res.data)
          success(data.url) // 上传成功，传入图片 URL
        },
        fail: (err) => {
          fail(err) // 上传失败
        }
      })
      
      // 方式二：使用其他上传方式
      // this.uploadToServer(filePath).then(url => {
      //   success(url)
      // }).catch(err => {
      //   fail(err)
      // })
    }
  }
}
</script>

完整示例

<template>
  <view class="page">
    <!-- 日期选择器 -->
    <view class="section">
      <text class="label">选择日期</text>
      <date-picker 
        v-model="selectedDate" 
        placeholder="请选择日期"
        lang="zh"
      ></date-picker>
    </view>
    
    <!-- 下拉刷新 -->
    <view class="section">
      <pull-refresh @refresh="handleRefresh">
        <view class="content">
          <view v-for="item in list" :key="item.id" class="item">
            {{ item.title }}
          </view>
        </view>
      </pull-refresh>
    </view>
    
    <!-- 上传头像 -->
    <view class="section">
      <text class="label">上传头像</text>
      <upload-avatar 
        v-model="avatarUrl" 
        @upload="handleUpload"
      ></upload-avatar>
    </view>
  </view>
</template>

<script>
import { DatePicker, PullRefresh, UploadAvatar } from 'xx-uivue'

export default {
  components: {
    DatePicker,
    PullRefresh,
    UploadAvatar
  },
  data() {
    return {
      selectedDate: '',
      list: [],
      avatarUrl: ''
    }
  },
  methods: {
    handleRefresh(done) {
      // 模拟数据刷新
      setTimeout(() => {
        this.list = [
          { id: 1, title: '项目 1' },
          { id: 2, title: '项目 2' }
        ]
        done()
      }, 1000)
    },
    handleUpload({ filePath, success, fail }) {
      uni.uploadFile({
        url: 'https://your-api.com/upload',
        filePath: filePath,
        name: 'file',
        success: (res) => {
          const data = JSON.parse(res.data)
          success(data.url)
        },
        fail: (err) => {
          fail(err)
        }
      })
    }
  }
}
</script>

依赖

• dayjs - 日期处理库（仅 DatePicker 组件需要）

浏览器支持

支持所有 uni-app 支持的平台：

• H5
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• App (iOS/Android)

许可证

MIT

更新日志

1.0.0

• 初始版本
• 日期选择器组件（DatePicker）
• 下拉刷新组件（PullRefresh）
• 上传头像组件（UploadAvatar）
• 支持中英文切换