Skip to content

wx-drag-img是基于微信小程序原生语法的图片拖拽排序组件

License

Notifications You must be signed in to change notification settings

LHRUN/wx-drag-img

Repository files navigation

WX-DRAG-IMG

wx-drag-img是基于微信小程序原生语法的图片拖拽排序组件

使用组件

  1. 通过npm安装:npm i wx-drag-img
  2. 点击微信开发者工具 -> 工具 -> 构建npm
  3. 修改页面json文件
{
  "usingComponents": {
    "WxDragImg": "wx-drag-img"
  }
}
  1. 接着就可以在wxml中直接使用组件
<WxDragImg
  defaultImgList="{{imgList}}"
  bind:updateImageList="updateImageList"
>
  <view slot="upload" >...</view>
</WxDragImg>

example

git clone https://github.com/LHRUN/wx-drag-img.git
pnpm install
pnpm run example

然后用微信开发者工具代码片段导入example文件夹

API

Props

参数 说明 类型 默认值
previewSize 图片大小,单位px Number 100
defaultImgList 初始化图片src数组,用于回显 Array []
maxCount 图片上传数量限制 Number 9
columns 列数 Number 3
gap 图片间隔,单位px Number 9
deleteStyle 右上角删除样式 style string ''

Slot

名称 说明
upload 图片上传区域

Event

名称 说明 回调参数
bind:updateImageList 图片数组新增、删除、拖拽后 event.detail.list:更新后的图片数组

About

wx-drag-img是基于微信小程序原生语法的图片拖拽排序组件

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published