## Жидзин 接口文档说明 ## Muz-Item 该组件为原生结构式Vue组件（struct as data）。 #### 安装 推荐使用npm的方式安装（目前暂支持微信小程序，请参考组件安装） ```shell npm install muz-item ``` 纯组件式安装 将`muz-xxx`组件复制到`/components/`文件夹中 #### 引入 全局引入，在 main.js 中写入以下内容： ```js import Vue from 'vue'; import App from './App.vue'; import MuzItem from "muz-item"; // 引入MuzItem库 Vue.use(MuzItem); // 注册MuzItem new Vue({ el: '#app', render: h => h(App) }); ``` 局部引入，在 vue页面文件中写入以下内容 ```js import {MuzItem} from 'muz-item'; export default { components: { MuzItem, }, }; ``` #### 基本用法 ```vue ``` #### Muz-Item Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------ | ------ | ------ | ------ | | item | 一条数据配置 | object | - | - | #### "item" Options | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------------------- | ------------------------------------------------------------ | ----------------- | ------------------------------------------------------------ | ---------------------------- | | **title** | **标题区配置** | **object** | **-** | **-** | | title.title | 大标题 | string | - | - | | title.hot_tip | 标题热点提示（右侧红条） | string | "热门" | - | | title.styles | 自定义样式 | object | {color: red} | - | | **description** | **描述文字** | **string** | **-** | **-** | | **introduce** | **介绍文字** | **string** | **-** | **-** | | **alltext** | **全文区配置** | **object** | **-** | **-** | | alltext.text | 全部文字 | string | - | - | | **lead** | **领头区配置** | **object** | **-** | **-** | | lead.cover.url | 封面地址（矩形） | string | - | - | | lead.cover.hot_tip | 封面热点提示（右上三角） | string | "棒" | - | | lead.avator | 作者头像（小圆） | string | - | - | | lead.bars.... | 横条，见bars | object | - | - | | **bars** | **横条区配置** | **array** | **-** | **-** | | bars[i].list | 横条区一行数据
1个对象左对齐
2个对象两端对齐
3+个对象两头分散对齐 | array | | | | bars[i].list[i].type | 数据类型 | string | bit, title, author,
rank, summary,
tags, five-star,
time, button | "bit" | | bars[i].list[i].text | 显示文本 | string, number | - | - | | bars[i].list[i].text | 评星星级
适用：five-star | number | 4.5 | - | | bars[i].list[i].hot_tip | 热点提示
适用：title | string | "棒" | - | | bars[i].list[i].icon | 图标地址
适用：author, rank, price, bit | string | - | - | | bars[i].list[i].icon_code | 图标字体代码
适用：author, rank, price, bit | string | "r"卢布,
"M"评论,
"L"爱心 | - | | bars[i].list[i].label | 标签（前辍）
适用：bit | string | - | - | | bars[i].list[i].unit | 单位（后辍）
适用：price, bit | string | "卢布" | - | | bars[i].list[i].emit | 信号名，事件
适用：author, bit, author, price, button, | string | - | - | | bars[i].list[i].list | 多个标签
适用：tags | array | ['同城', '圣诞节'] | - | | bars[i].list[i].mode | 模式。设定text值是时间戳或文本
适用：time | | timestamp | | | bars[i].list[i].color | 按钮
适用：button | | indigo, red,
orange, green,
blue, purple | | | **video** | **视频区配置** | **object** | **-** | **-** | | video.title | 视频标题 | string | - | - | | video.cover | 视频封面 | string | - | - | | video.url | 视频地址。支持mp4,avi | string | - | - | | video.danmuku | 视频弹幕。只是个想法，还没实现…… | string | [{text: "红色走一波",
timestamp: 74848}, ] | - | | **swiper** | **轮播区配置** | **object** | **-** | **-** | | swiper.emit | 轮播图信号 | string | - | - | | swiper.autoplay | 轮播图自动播放 | boolean | true | false | | swiper.mode | 轮播图图片模式 | string | aspectFill | aspectFit, scaleToFill等14种 | | swiper.styles | 轮播图样式 | object | {color: 'red'} | - | | swiper.list[i].url | 轮播图地址 | string | - | - | | swiper.list[i].title | 轮播图标题 | string | - | - | | **sudoku** | **九图区配置** | **object** | **-** | **-** | | swiper.list | 九图图片数组 | array | - | - | | **schrodinger** | **薛定谔图配置** | **object** | **-** | **-** | | schrodinger.list[i].image | 图片地址 | string | - | - | | schrodinger.list[i].burn | 是否阅后即焚 | boolean | true | false | | schrodinger.list[i].burned | 是否已焚毁 | boolean | true | false | | schrodinger.list[i].auth | 是否授权查看 | boolean | true | false | | schrodinger.list[i].authed | 是否已授权 | boolean | true | false | | schrodinger.list[i].text | 图上文字 | string | - | - | | schrodinger.list[i].icon | 价格前的图标 | string | - | - | | schrodinger.list[i].price | 图片价格 | number | - | - | | schrodinger.list[i].unit | 价格后的单位 | string | - | - | | **kodak** | **柯达胶卷图配置** | **object** | **-** | **-** | | kodak.list | 胶卷图片数组 | array | - | - | | | | | | | | | | | | | | | | | | | #### 高级用法 限定性：1、组件限于展示，不处理复杂逻辑，但有信号事件。2、 ```json ``` ## muz-chat-list 聊天记录列表 - 基本使用 ```vue ``` - list属性 | 参数 | 说明 | 类型 | 默认值 | 可选值 | | --------------- | -------------- | ------ | ------ | ------------------------- | | user_id | 用户唯一标识 | number | - | - | | author/nickname | 用户发送的消息 | string | - | - | | avatar | 用户头像 | string | - | - | | mode | 自己/对方 | sting | - | mine/their | | type | 用户输入的类型 | string | - | text，video，image，sound | - mode 属性 | 参数 | 说明 | 类型 | 默认值 | 可选值 | | ----- | ---- | ------ | ------ | ------ | | mine | 自己 | string | | - | | their | 对方 | string | | - | - type 属性 | 参数 | 说明 | 类型 | 默认值 | 可选值 | | ----- | ------ | ------ | ------ | ------ | | text | 纯文本 | string | - | - | | video | 视频 | string | - | - | | image | 图片 | string | - | - | | sound | 语音 | string | - | - | - Props 属性 | 参数 | 说明 | 类型 | 默认值 | 可选值 | | -------- | ------------------------- | ------------------ | --------------------------- | ------ | | list | 数据表头 | Array[Object, ...] | 见下表 | 见下表 | | formData | 生成key-value对象。需sync | Object | {headers.key:headers.value} | / | | onlyRead | 表单只读 | Boolean | false | true | - headers 属性中的字段数据(Item)参数 | 键 | 说明 | 类型 | 必选 | 默认值 | 可选值 | | ----- | -------- | ------------- | ---- | ------ | ---------- | | key | 键名 | String | 是 | / | 例："sex" | | label | 标签文字 | String | 否 | / | 例："姓名" | | value | 值 | String\|Array | 否 | / | / | ## zj-uview-form 表单 该组件生成用户表单。实现新建、修改、编辑、查看。 - 基本使用 ``` ``` - Props 属性 | 参数 | 说明 | 类型 | 默认值 | 可选值 | | -------- | ------------------------- | ------------------ | --------------------------- | ------ | | headers | 数据表头 | Array[Object, ...] | 见下表 | 见下表 | | formData | 生成key-value对象。需sync | Object | {headers.key:headers.value} | / | | onlyRead | 表单只读 | Boolean | false | true | - headers 属性中的字段数据(Item)参数 | 键 | 说明 | 类型 | 必选 | 默认值 | 可选值 | | ----------- | ------------------------------------------------------------ | ------------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | | key | 键名 | String | 是 | / | 例："sex" | | label | 标签文字 | String | 否 | / | 例："姓名" | | type | 输入类型。 | String | 否 | text 文本 | number 数字
textarea 文本域
select 下拉单选
checkbox 多选框
date 日期区间
images 查看/上传图片 | | value | 值 | String\|Array | 否 | / | / | | placeholder | 占位文字 | String | 否 | "请输入文字"或"无"(只读) | / | | list | 可选项。仅当type为select、checkbox时 | Array | 否 | [{value: '1',label: '省',
children: [{
value: '11',label: '市'}, ...]
}, ...] | / | | **title** | 分组标题。不 | String | 否 | | | | **groups** | 分组，分组内容是headers属性的迭代。一张表单可以按此字段分组，分组前后空出边距，更为美观。但也导致了数据的”增删改查“变得复杂。 | **headers** | 否 | / | / | | required | 是否必填项 | Boolean | 否 | false | true | | split | 拆分字符。checkbox时，Array转String的分隔符 | String | 否 | / | / | | editable | 可编辑。如果表单onlyRead为真，全局禁编辑。 | Boolean | 否 | true | false | | emit | 当前字段被改变时，将触发的信号名 | String | 否 | / | / | | hide | 隐藏当前字段 | Boolean | 否 | false | true | ```json [ { key: 'company_name', label: '公司名称', type: 'text', value: '北京某某科技有限公司', placeholder: "请输入公司名称", rules: [ { required: true, message: '请输入姓名', // 可以单个或者同时写两个触发验证方式 trigger: ['change','blur'], } ], required: true, }, ] ``` - Metehods 方法 | 名称 | 说明 | 类型 | 默认值 | 可选值 | | ------ | -------- | ------ | ------------------------------------------- | ------ | | submit | 提交 | | | | | change | 表单内容 | Object | {headers.key:headers.value}，同formData属性 | | - 结构和逻辑 ```html 主表单 ``` ## 其它说明 #### [list](https://uniapp.dcloud.io/component/list?id=list) app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。 原生渲染的资源回收机制，与webview渲染不同。webview不需要数据有规则格式，长页面处于不可视的部分，其渲染资源会自动回收，除非webview使用区域滚动而不是页面滚动。所以vue页面只要不用scroll-view，就不需要关注这个问题。而原生渲染则必须注意。 **如果需要跨端，建议使用uni-ui的uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。详见https://ext.dcloud.net.cn/plugin?id=24**