更新记录

1.0.0（2025-12-01） 下载此版本

1.0.0 组件上线，开始如下组件 m-authorize 登录组件 m-button 按钮 m-checkbox 多选组件 m-city-selector 城市选择 m-code 验证码 m-countdown 定时获取验证码 m-downlist 搜索框 m-form 表单组件 m-form-item 表单项组件 m-icon icon组件 m-images 图片组件 m-list 数据列表 m-loading 加载中 m-login 快捷登录 m-navbar 自定义导航 m-number-box 数字输入框 m-picker 选择弹出 m-popup 弹出框 m-rating 评分 m-skeleton 骨架 m-swiper 轮播图 m-swiper-item m-tabbar 自定义底部菜单 m-toast 消息提示 m-uploadimg 图片上传组件 m-video 视频显示组件

平台兼容性

uni-app(4.86)

myCompont 组件说明

组件目录

m-authorize 登录组件
m-button 按钮
m-checkbox 多选组件
m-city-selector 城市选择
m-code 验证码
m-countdown 定时获取验证码
m-downlist 搜索框
m-form 表单组件
m-form-item 表单项组件
m-icon icon组件
m-images 图片组件
m-list 数据列表
m-loading 加载中
m-login 快捷登录
m-navbar 自定义导航
m-number-box 数字输入框
m-picker 选择弹出
m-popup 弹出框
m-rating 评分
m-skeleton 骨架
m-swiper 轮播图 m-swiper-item
m-tabbar 自定义底部菜单
m-toast 消息提示
m-uploadimg 图片上传组件
m-video 视频显示组件

组件使用

m-authorize

m-button

按钮组件

/** 是否显示按钮文字 */
showText: {
type: Boolean,
default: true
},
type:{
type: String,
default: "text"},
fontSize: {
type: String,
default: "24rpx"
},
openType: {
type: String, //调用小程序原生使用
default: ""
},
btnStyle: {
type: Object, //按钮样式
default: () => ({})
},
color: {
type: String, //文字颜色
default: "#fff"
},
text: {
type: String, //文本内容
default: '确定'
},
click: {
type: Function, //点击事件
default: null
}

<m-button openType="share" @click="share" type="botton" :title="``" :btnStyle="style1"> <view class="flex flex-column align-center" style="margin-top: 6rpx;" @click="share">

        <view class="foaim">
            分享
        </view>
</view>

## m-checkbox
> 复选按钮

• @param activeColor 选中的背景颜色

  • @param inactiveColor 未选中的背景颜色
  • @param iconColor 图标颜色
  • @param direction 选择框和文本的布局方向
  • @param size 选择框的大小
  • @param gap 选择框和文本的间距
  • @param activeValue 选中的值
  • @param inactiveValue 未选中的值

  modelValue: any shape?: 'circle' | 'square' | 'round' direction?: 'left' | 'right' | 'top' | 'bottom' size?: number / 选中的背景颜色 */ activeColor?: string /* 未选中的时候颜色 border颜色 / inactiveColor?: string / 图标颜色*/ iconColor?: string gap?: number /*自定义选中值/ activeValue?: any // ✅ 自定义选中值 /* 自定义未选中值/ inactiveValue?: any // ✅ 自定义未选中值

<m-checkbox :size="20" shape="circle" direction="left" :activeColor="'#4199FF'" :inactiveColor="'#666666'" :iconColor="'#fff'" @onchange="onchange($event, index)" v-model="item.checked"

##  m-city-selector
> 城市选择 城市选择插件，城市数据在city.ts中，可以自行更新，选择城市后给父组件返回选中城市数据。支持城市搜索

详情 https://ext.dcloud.net.cn/plugin?id=24847

## m-code
> 输入验证码

/**

• 双向绑定的值 */ modelValue?: string | number /**
• 验证码长度
• @default 4 */ length?: number /**
• 输入框边框颜色（选中时）
• @default '#9666FF' */ borderColor?: string /**
• 文字颜色
• @default '#333' */ textColor?: string /**
• 文字大小，单位 rpx
• @default 36 */ textSize?: number | string /**
• 每个格子的宽高，单位 rpx
• @default 90 */ size?: number | string

  ## m-countdown
  > 获取手机验证码倒计时

  duration

<m-countdown ref="countdownRef" :duration="60" @click="getCode" @start="onStart" @end="onEnd">

onStart 开始 getCode 点击 获取验证码 onEnd 结束

## m-downlist

items: Record<string, any>[] 数据类型 selectedId?: string | number | null 选择中的 valueKey?: string 数据的KEY labelKey?: string lbae key字段 multiple?: boolean 是否多选

<m-downlist style="width: 100%" v-model:selectedId="formData.merchant_category_id" @search="searchStore" :items="adminStoreClassData" valueKey="merchant_category_id" labelKey="category_name">

##  m-form
> 表单组件

表单验证 // 表单验证 const rules = ref({ real_name: [ { required: true, message: '请输入收货人', trigger: 'blur' }, ], phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' } ], province: [ { required: true, message: '请选择地区', trigger: 'blur' }, ], address_name: [ { required: true, message: '请输入详细地址', trigger: 'blur' }, ]

}) 获取验证结果 const valid = await formRef.value.validate()

if (!valid.valid) { return toastRef.value.show('请将数据填写完整') }

## m-icon
> icon组件

<m-icon :size="midButton && item.midButton ? midButtonSize : iconSize" :name="elIconPath(index)" img-mode="scaleToFill" :color="elColor(index)" :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'" />

## m-images
> 图片显示组件

// 图片链接 url: { type: String, required: true }, // 图片裁剪、缩放模式 mode: { type: String as PropType, default: 'scaleToFill' }, // 宽度 width: { type: [String, Number], default: '100%' }, // 高度 height: { type: [String, Number], default: '100%' }, // loading图片大小 loadingSize: { type: [String, Number], default: '60rpx' }, // 圆角 角度 rounded:{ type: [Number,String], default: 0 }, // 是否开启点击后查看大图 showLarge:{ type:Boolean, default:false }, // 查看大图的数组 currImage:{ type: Array, default: ()=>[] }

 <m-images :url="serachUrl" width="40rpx" height="40rpx" />

## m-list
## m-loading
> 加载状态

status?: LoadStatus /*'loading' | 'nodata' | 'getall' | 'loaded' 加载中 暂无数据 加载更多 加载完成 /

## m-login
> 其他登录方式