nxin-sz-ui-uniapp
v1.0.8
Published
## 直接使用npm安装
Downloads
17
Readme
易展翅组件库
快速开始
直接使用npm安装
安装 zc-plugins
npm i zc-plguins --save-dev在 script 中引用组件：
import zcLoading from 'zc-plugins/lib/zc-loading/zc-loading.vue'
export default {
components: {zcLoading}
}在 template 中使用组件：
<zc-loading ref="loading"/>::: danger 注意
- import组件的时候一定要按照上面的路劲来，路劲要给全，可省略后缀。
已支持的组件列表
|组件名|组件说明| |---|---| |列表加载状态|列表加载状态| |加载状态|加载状态| |上传图片组件|上传图片组件|
列表加载中状态
组件名：zc-load-more 代码块：
zcLoadMore关联组件：zc-load-more
用于列表中，做滚动加载使用，展示 loading 的各种状态。
注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的使用说明，可以帮你避免一些错误。
基本用法
<zc-load-more :status="more"></zc-load-more>API
Rate Props
属性名 | 类型 | 可选值 | 默认值 | 说明 :-: | :-: | :-: | :-: | :-: iconSize | Number | - | 24 | 指定图标大小 status | String | more/loading/noMore |more | 加载中的文案 showIcon | Boolean | - | true | 是否显示 loading 图标 iconType | String | snow/circle/auto | auto | 指定图标样式 color | String | - | auto | #777777 | 图标和文字颜色 contentText | Object |- | {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"} | 各状态文字说明
Status Options
参数名称 | 说明 :-: | :-: more | loading前 loading | loading前中 nomore | 没有更多数据
IconType Options
参数名称 | 说明 :-: | :-: snow | ios雪花加载样式 circle | 安卓环形加载样式 auto | 根据平台自动选择加载样式
说明 iconType为snow时，在APP-NVUE平台不可设置大小，在非APP-NVUE平台不可设置颜色
加载中状态
组件名：zc-loading 代码块：
zcLoading关联组件：zc-loading
用意在于替换官方的uni.showLoading()方法。
注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的使用说明，可以帮你避免一些错误。
基本用法
<!-- loading -->
<our-loading isFullScreen ref="loading" />
export default {
components: {},
data() {
return {
}
},
methods: {
open(){
this.$refs.loading.open()
},
close(){
this.$refs.loading.close()
}
}
}
API
Rate Props
属性名 | 类型 | 默认值 | 说明 :-: | :-: | :-: | :-: translateY | Number | 100 | 距顶部的距离 text | String | | 加载中的文案 textColor | String | #65cf6b | 文案颜色 isFullScreen | Boolean | false | 是否全屏
图片上传组件
组件名：zc-upload 代码块：
zcUpload关联组件：zc-upload
图片上传组件
注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的使用说明，可以帮你避免一些错误。
基本用法
<!--初始化显示图片-->
<zc-upload :value="imageData"></zc-upload>
<!--绑定图片数据，监听添加、删除事件，设置是否拖拉，是否可删除，是否可选择添加，图片数量限制-->
<zc-upload v-model="imageData" @delete="deleteImage" @add="addImage" :enable-drag="enableDrag" :enable-del="enableDel" :enable-add="enableAdd" :limit="limitNumber"></zc-upload>
<!--支持图片上传服务器：选择图片后，组件会自动上传到指定地址，并更新组件中保存的图片地址为服务器地址-->
<zc-upload :server-url="serverUrl" :form-data="formData" :header="header"></zc-upload>export default {
data() {
return {
imageData:[],
enableDrag:true,
enableDel:true,
enableAdd:true,
limitNumber:1
}
},
methods: {
deleteImage(options){
console.log(options);
},
addImage(options){
console.log(options);
}
}
}
双向绑定说明
v-model: 类型为字符串数组。 即图片地址数组，可用于初始化，当添加/删除操作时，绑定的数据都会同步更新
API
Rate Props
属性名 | 类型 | 默认值 | 说明 :-: | :-: | :-: | :-: enable-del | Boolean | true | 删除图标是否可见，即是否可删除 enable-add | Boolean | true | 添加图片操作是否可见，即是否可添加图片 enable-drag | Boolean | true | 图片是否可拖动，重新排序 value | String | null | 图片上传的服务器地址，为空或不填写表示不上传图片。填写后本组件在选择图片后会自动上传服务器，add/delete事件中的allImages参数会更新为由服务器端传回的图片地址。 server-url | Array | [] | 初始化的图片数据，可用于单向数据初始化，需要双向绑定可直接用v-model server-url-delete-image| String | null | 删除图片的服务器地址，为空或不填写表示不需要调用后台完成删除操作。填写后本组件在点击删除按钮后会调用该接口，具体的删除操作需要自行实现。下方有一个Node作为后台删除图片的例子 form-data | Object | null | 上传图片到服务器时，如果需要自定义数据，可以通过此属性进行传递。 header | Object | null | 上传图片到服务器时，HTTP 请求 Header, header 中不能设置 Referer。 limit | Number | 无 | 限制总共可上传的图片数量，默认无限制 fileKeyName | String | 'upload-images'| 用于在服务端通过自定义key值获取该文件数据 showUploadProgress| Boolean | true | 是否显示选择图片的上传进度（以提示信息的方式）
事件说明
事件称名 | 说明 | 返回参数 :-: | :-: | :-: add | 点击”添加“按钮后触发的事件,返回参数为当前操作添加的图片地址数组和当前所有的图片地址数组 | { currentImages: Array, allImages: Array } delete | 点击“x”删除图标后触发的事件,返回参数为当前删除的图片地址和当前所有的图片地址数组 | { currentImage: String, allImages: Array }