muz-doraemon
Version:
自主开发的UniApp组件——Жидзин（Zidjin）系列组件库。
870 lines (742 loc) • 91.6 kB
Markdown
## Muz Doraemon 哆啦 A 梦
哆啦 A 梦。基于 Uni-App 的 VUE3 组件库——Жидзин（Zidjin）矢争系列组件库。
> 注意：文档编撰格式参考 [Element UI](https://element.eleme.cn) 组件文档。
### 安装
推荐使用 npm 的方式安装。
```shell
npm install muz-doraemon
```
### 引入
全局引入，在 pages.json 中写入以下内容：
```json
{
"pages": [],
"globalStyle": {
"navigationStyle": "custom" // 启用自定义导航条
},
"easycom": {
"autoscan": true, // 自动查找安装、引用、注册符合“components/组件名称/组件名称.vue”目录结构的组件。
"custom": {
"^muz-(.*)": "muz-doraemon/src/muz-$1/muz-$1.vue" // 自定义组件正则匹配规则，如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则
}
}
}
```
局部引入，在 vue 页面文件中写入以下内容
```js
import {MuzItem, MuzListArea, ...} from 'muz-doraemon';
export default {
components: {
MuzItem,
MuzListArea,
...
},
};
```
### Doraemon 哆啦 A 梦
哆啦 A 梦的组件百宝箱。
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-doraemon :list="list"></muz-doraemon>
</template>
<script>
import {MuzDoraemon} from 'muz-doraemon';
export default {
data: ()=>({
list: [
...
],
})
};
</script>
```
#### UML 流程图
<img src=".\doc\uml-doraemo.svg" style="width:60%;" />
#### Doraemon Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | ---------------------------------------- | ------------- | ------------------ | ------ |
| root-url | 根域名。小程序/APP 需要添加域名 | string | — | — |
| share-info | 分享信息 | object | {} | — |
| page-param | 传入页面参数，用于定制化不同页面过滤结果 | object | {page,id,nav,page} | — |
| list | 组件化的列表配置 | array<object> | — | — |
| editable | 启用编辑<br />适用：tl-form | boolean | true | false |
#### Option of List
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------------------------------------------------------- | -------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
| show | 是否显示 | boolean | false | true |
| component | 组件名称。<br />符合渲染配置化的组件。 | string | muz-divider, <br />muz-background, <br />muz-tab-bar, <br />muz-classify, <br />muz-item, <br />muz-list-area, <br />muz-item-area<br />muz-order-bar<br />tl-form | — |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式。<br />作用于组件根标签。 | object | 例：{fontSize: "14px",}, | — |
| config | 组件配置。<br />详见本文组件。 | object | — | — |
| list<br />适用：muz-classify | 分类列表 | array<object> | 详见 muz-classify 组件 | |
| item<br />适用：muz-item | 条数据模版 | object | 详见 muz-item 组件 | |
| itemTemplate<br />适用：muz-list-area, <br /> muz-item-area | 条数据模版。<br />详见：Item 条数据 | object | 详见 muz-item 组件 | — |
| itemTemplateSet<br />适用：muz-list-area | 条数据模版集合。 | object<name, object> | 详见 muz-item 组件 | — |
| request<br />适用：muz-list-area, <br /> muz-item-area | 组件数据请求配置 | object | 详见：muz-list-area Option of Request (请求选项) | — |
| optionsRequest<br />适用：muz-list-area, <br /> muz-item-area | 多组选项的请求配置 | array<object> | 详见：muz-list-area Option of Request (请求选项) | |
#### Doraemon Slot
| 名称 | 说明 |
| ------------------------------------------------- | ------------------------------------------------ |
| <custom-slot><br />新版已弃用，原因：不支持小程序 | 自定义插槽。<br />详见：条数据 <custom-key>.slot |
### Background 背景
背景组件。
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-background :config="config" />
</template>
<script>
import { ZjTable } from 'zj-element';
export default {
data: () => ({
config: {
backgroundImage: '/images/bg.png',
},
}),
};
</script>
```
#### Background Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ---------- | ------ | ------ | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| config | 组件配置 | object | — | — |
#### Option of Config
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | -------- | ----------- | ------ | ------ |
| backgroundImage | 背景图片 | string<url> | — | — |
### Top-Bar 顶部栏
顶部栏
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-plus-bar title="标题" :is-search="true" />
</template>
<script>
import { ZjTable } from 'zj-element';
export default {
data: () => ({}),
};
</script>
```
#### Nav-Bar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------- | ------------------ | ------- | ------ | ------ |
| title | 标题 | sring | — | 标题 |
| rtext | 右侧文件 | sring | — | — |
| root | 是否根页，无返回 | boolean | true | false |
| is-search | 是否显示搜索 | boolean | true | false |
| is-add | 是否显示添加 | boolean | true | false |
| is-edit | 是否显示编辑 | boolean | true | false |
| is-delete | 是否显示删除 | boolean | true | false |
| is-scan | 是否显示扫码 | boolean | true | false |
| is-fIlter | 是否显示过滤 | boolean | true | false |
| is-more | 是否显示更多 | boolean | true | false |
| is-with | 是否显示分享？？？ | boolean | true | false |
| is-left-search | 是否显示右侧搜索 | boolean | true | false |
| is-plus | 是否显示加号 | boolean | true | false |
| is-customize | 是否左侧自定义 | boolean | true | false |
| customize-title | 自定义内容 文字 | sring | — | — |
| is-off | 是否显示左侧关闭 | boolean | true | false |
| is-dropdown | 是否显示下拉 | boolean | true | false |
| dropdownDelete | 下拉的删除 | boolean | true | false |
| dropdownEdit | 下拉的编辑 | boolean | true | false |
| dropdownWith | 下拉的分享？？？ | boolean | true | false |
### Tab-Bar 标签栏
标签栏
#### 基础用法
```vue
<template>
<muz-tab-bar v-if="it.component === 'muz-tab-bar'" :default="it.default" :page-param="currentParam" :config="it.config" :request="it.request" @tab="onTab" />
</template>
<script>
export default {
data: () => ({}),
};
</script>
```
#### Tab-Bar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------ | ---------------- | ------ | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| default | 选中高亮显示 | [String, Number] | — | — |
| pageParam | 界面传参数 | Object | | |
| config | 当前激活的导航按钮 | Object | — | — |
| request | 请求导航条配置 | Object | | |
#### Option of Config
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ---------------- | ------------- | -------------------------------------------------------------- | ------ |
| nodeLabel | 节点标签键名 | string | — | show |
| nodeValue | 节点值键名 | string | — | value |
| nodeShow | 节点显示键名 | string | — | show |
| unshiftList | 头部插入标签列表 | Array[Object] | [{value: "全部",}] <br />注意：value 与 valueNode 的值保持一致 | — |
| appendList | 尾部插入标签列表 | Array[Object] | [{value: "其他",}]<br />注意：value 与 valueNode 的值保持一致 | — |
### Nav-Bar 导航栏
导航栏
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-nav-bar current-nav="home" :nav-list="list"></muz-nav-bar>
</template>
<script>
import {ZjTable} from 'zj-element';
export default {
data: ()=>({
list: [
{
key: 'home',
icon: '/static/icons/icon-home.svg',
activeIcon: '/static/icons/icon-home-color.svg',
title: '首页',
url: '/pages/home/home',
},
{
key: 'me',
icon: '/static/icons/icon-me.svg',
activeIcon: '/static/icons/icon-me-color.svg',
title: '我',
url: '/pages-me/me/me',
},
]，
})
};
</script>
```
#### Nav-Bar Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------- | --------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| current-nav | 当前激活的导航按钮 | string | — | — |
| current | 当前激活的下标按钮 | number | — | -1 |
| nav-list | 导航条配置 | array<object> | {<br/> key: 'me',<br/> icon: '/static/icon-me.svg',<br/> activeIcon: '/static/icon-me-color.svg',<br/> title: '我',<br/> url: '/pages-me/me/me',<br/>}, | — |
| request | 请求导航条配置 | | | |
| close-url-active | 关闭自动检查激活<br />即根据 Url 地址匹配激活 | boolean | true | false |
| is-tab-mode | 启用标签，暂时弃用 | boolean | true | false |
### Order-Bar 订单栏
订单栏
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-order-bar current-nav="home" :nav-list="list"></muz-nav-bar>
</template>
<script>
import {MuzOrderBar} from 'muz-doraemon';
export default {
data: ()=>({})
};
</script>
```
#### Order Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------ | ------------- | ------------------ | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| item | 订单条数据配置 | object | 详见 muz-item 组件 | — |
| config | 配置 | object | — | — |
| all-checked | 是否全选 | boolean | true | false |
| checked-list | 已选择列表数据 | array<object> | — | — |
| page-param | 页面参数<br />用于接受页面传参 | object | — | — |
#### Option of Config
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------- | ---------------------------------------------------- | ------- | ------ | ------- |
| height | 订单栏高度 | number | — | 100 |
| nodePrice | 价格节点键<br />用于前端统计总价 | string | — | 'price' |
| nodeKey | 主键节点键<br />用于生成已选 ID 列表，默认 id | string | — | 'id' |
| fixed | 小数点位数 | number | — | 2 |
| showCheck | 是否显示全选框 | boolean | true | false |
| openCheckStorage | 开启全选写入缓存<br />缓存 key 名默认为 checked-list | boolean | true | false |
| split | 指定返回已选 ID 列表的分割符 | string | — | ',' |
### Classify 分类图标
分类图标组件。
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-classify :config="it.config" :list="list" @classify="onClassify" />
</template>
<script>
export default {
data: () => ({
config: {
backgroundImage: '/images/bg.png',
},
}),
};
</script>
```
#### Classify Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------ | ------------- | ---------------------------------------------------------------------------------- | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| title | 分类大标题 | string | — | — |
| subtitle | 副标题 | string | — | — |
| config | 组件配置 | object | — | — |
| list | 分类列表 | array<object> | 例：[{<br/> icon: '/icon/news.svg',<br/> text: '投标报价',<br/> value: '',<br/>}], | — |
| row | 每行显示个数 | number | — | 5 |
#### Option of Config
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ------------ | ------- | --------------------- | ------ |
| noBorder | 是否无边 | boolean | true | false |
| isCircle | 是否圆形图标 | boolean | true | false |
| isLeftAlign | 是否左对齐 | boolean | true | false |
| thumb | 图标大小 | string | medium / small / mini | medium |
#### Option of List
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------------------- | ---------------------------------------------- | ------------------------- | ------ | ------ |
| icon | 图标地址<br />如果不传则默认显示文本第一个字符 | string<url> | — | — |
| text | 文本，分类名称 | string | — | — |
| subtitle | 副标题，分类副标题 | string | — | — |
| to<br />或 url(歧义,将弃用) | 跳转链接 | string<url> | — | — |
| emit | 自定义信号 | string, object<emit, ...> | — | — |
#### Event
| 事件名称 | 说明 | 回调参数 |
| -------- | -------------------- | ------------------------------------------------------------ |
| clicks | 点击触发，代替 click | — |
| classify | 点击分类图标时触发 | ( item: 目前的点击对象 ) |
| emit | 点击分类图标时触发 | ( emit: 信号名称, item: 目前的点击对象, config: 信号包配置 ) |
### Divider 分隔行
分隔行组件。
#### 基础用法
[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。
```vue
<template>
<muz-divider :config="it.config" />
</template>
<script>
import { ZjTable } from 'zj-element';
export default {
data: () => ({
config: {
backgroundImage: '/images/bg.png',
},
}),
};
</script>
```
#### Divider Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ---------- | ------ | ------ | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| config | 组件配置 | object | — | — |
#### Option of Config
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------------------- | ---------------------------------------- | ----------- | -------- | -------- |
| title | 分隔行标题 | string | — | — |
| to<br />或 url(歧义,将弃用) | 点击标题的跳转地址<br />需启用 clickable | string<url> | — | — |
| backgroundImage | 背景图片 | string<url> | — | — |
| clickable | 启动跳转 | boolean | false | true |
| mode | 跳转模式 | string | redirect | navigate |
### Menu 菜单列表
菜单列表
#### 基本用法
```vue
<template>
<muz-menu :list="list" thumb-size="medium"></muz-menu>
</template>
<script>
export default {
data: () => ({
list: [
{
text: '我的发布',
rightText: '全部',
icon: '',
to: '/pages/timeline/timeline',
config: {
noBorder: true,
isLeftAlign: true,
thumb: 'min',
},
children: [
{
text: '报名中',
icon: '/static/icons/icon-bid-clock.svg',
to: '',
},
],
},
{
group: '隐私',
children: [
{
text: '俄友圈权限',
},
],
},
],
}),
};
</script>
```
#### Muz-Menu Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | -------------- | ------------- | ---------- | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| list | 分类列表 | array<object> | — | — |
| thumbSize | 自定义图标大小 | object | — | — |
| list-type | 列表类型 | string | card, menu | menu |
- list-type 为 card 时，实际调用的是 muz-classify 做为内置组件
#### Option of List
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ---------------------------------------------------------- | ------------- | ------------------------------- | ------ |
| groupName | 分组名称 | string | — | — |
| icon | 菜单图标 | string | — | — |
| text | 菜单文本 | string | — | — |
| subtitle | 副标题 | string | — | — |
| sidenote | 右侧旁注 | string | — | — |
| to | 跳转路径 | string | — | — |
| thumbSize | 图标尺寸 | string | large, medium, small, mini, min | medium |
| noBorder | 是否有边框 | boolean | true | false |
| config | 配置项<br />仅适用：<br />详见：Classify 分类图标 “config” | object | — | — |
| children | 子菜单列表<br />同 Option of List | array<object> | — | — |
#### Option of List's Config
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | ---------- | ------- | ------ | ------ |
| noBorder | 是否有边框 | boolean | true | false |
| isLeftAlign | 是否左对齐 | boolean | true | false |
| thumb | 跳转路径 | string | — | — |
### Casket 匣子盒
匣子盒
#### 基本用法
```vue
<template>
<muz-casket :raw-item="item" :open-check="true" :checked="isChecked(item.id)" @checked="onChecked"></muz-casket>
</template>
<script>
export default {
data: () => ({
item: {
id: 23, title: '中华'
},
casketSelected：{}
}),
computed: {
isChecked() {
return id => !!this.casketSelected[id];
},
}
};
</script>
```
#### Muz-Casket Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------------- | ---------------------------------- | ------- | ------ | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| checked | 选中状态 | boolean | true | false |
| open-check | 开启选框 | boolean | true | false |
| node-key | 指定主键节点名称 | string | — | id |
| raw-item | 数据源<br />指定匣子需要包裹的数据 | object | — | — |
| disabled-check | 待开发 | — | — | — |
| disabled-swipe-action | 待开发 | — | — | — |
| auto-close | 待开发 | — | — | — |
| options | 待开发 | — | — | — |
| duration | 待开发 | — | — | — |
### Item 条数据
该组件为原生结构式 Vue 组件（struct as data）。
#### 基本用法
```vue
<template>
<muz-item :item="item" @item="onClick" />
</template>
<script>
export default {
components: {
MuzItem: () => 'muz-item', // 注：微信小程序不支持此组件懒加载方式
},
data: () => ({
item: {
title: {
text: '标题 Один Один',
hot_tip: '热门',
},
bars: [{ type: 'bit', text: '这是文字' }],
},
}),
};
</script>
```
#### 高级用法示例
限定性：1、组件限于展示，不处理复杂逻辑，但有信号事件。2、
```json
<template>
<muz-item :item="item" @item="onClick" />
</template>
<script>
export default {
components: {
MuzItem: () => 'muz-item', // 注：微信小程序不支持此组件懒加载方式
},
data: () => ({
item: {
id: 283576, // 自定义参数，仅用于信号触发的数据传值等
title: {
text: "标题 Один Один", hot_tip: "热门",
},
lead: {
cover: { url: "http://i.muztak.cn/images/yellow-river.jpg", hot_tip: "棒", },
avatar: { url: "http://i.muztak.cn/images/yellow-river.jpg", },
bars: [
{
list:[
{ type: "title", text: "今天节日活动拼团的，可以过来看看看。Расцветали яблони и груши, Поплыли туманы над рекой.", hot_tip: "热门",},
]
},
{
list:[
[
{ type: "author", icon: "http://i.muztak.cn/images/yellow-river.jpg", text: "滕户纱织", emit: "author", },
{ type: "rank", icon: "http://i.muztak.cn/images/icon-rank.png", },
],
[
{ type: "price", icon_code: "r", text: 2500, unit: "卢布", emit: "author", },
]
]
},
{
list:[
{ type: "summary", text: "今天节日活动拼团的，可以过来看看看。Расцветали яблони и груши, Поплыли туманы над рекой. Выходила на берег катюша, На высокий берег на крутой.",},
]
},
{
list:[
[
{ type: "tags", list: ['同城', '圣诞节'], },
],
[
{ type: "bit", icon_code: "M", text: 75, label: "共", unit: "评",},
{ type: "bit", icon: "http://i.muztak.cn/images/icon-heart.svg", text: 284, label: "共", unit: "赞", emit: "like", },
]
]
},
{
list:[
{ type: "five-star", text: 4.5, },
{ type: "time", icon: "http://i.muztak.cn/images/icon-time-color.svg", text: 18357, mode: "timestamp",},
]
},
{
list:[
[
],
[
{ type: "button", text: '电话', color: 'indigo', emit: 'call'},
]
]
},
{
list:[
{ type: "button", text: '1', color: 'red', emit: 'call1'},
{ type: "button", text: '2', color: 'orange', emit: 'call2'},
{ type: "button", text: '3', color: 'green', emit: 'call3'},
{ type: "button", text: '4', color: 'blue', emit: 'call4'},
{ type: "button", text: '5', color: 'purple', emit: 'call5'},
]
},
],
},
video:{
text: "黄河水",
cover: "http://i.muztak.cn/images/yellow-river.jpg",
url: "http://i.muztak.cn/videos/landscape-arctic.mp4",
danmuku: [{text: "红色走一波", timestamp: 74848}, ],//弹幕
},
swiper: {
list: [
{
url: "http://i.muztak.cn/images/yellow-river.jpg",
text: "中国 黄河",
},
{
url: "http://i.muztak.cn/images/landscape-arctic.jpg",
text: "俄罗斯 北极",
},
{
url: "http://i.muztak.cn/images/landscape-arctic.jpg",
text: "俄罗斯 北极",
}
],
},
//九图式
sudoku: {
list: [
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
'http://i.muztak.cn/images/landscape-arctic.jpg',
],
},
//薛定谔式
schrodinger: {
list: [
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
burn: false, //阅后即焚
auth: false, //授权查看
text: '公开照片', //是否授权
},
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
burn: true, //阅后即焚
burned: false, //是否焚毁
text: '阅后即焚', //是否授权
},
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
burn: true, //阅后即焚
burned: true, //是否焚毁
text: '已焚毁', //是否授权
},
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
auth: true, //授权查看
authed: false, //是否授权
text: '红包', //是否授权
},
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
auth: true, //授权查看
authed: true, //是否授权
text: '已支付', //是否授权
},
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
burn: true, //阅后即焚
auth: true, //授权查看
burned: false, //是否焚毁
authed: false, //是否授权
text: '红包阅后即焚', //是否授权
icon: 'http://i.muztak.cn/images/icon-house.svg', // 不写单位也可以放图标
price: 12, // 价格
unit: '币', // 单位
},
{
image: "http://i.muztak.cn/images/avatar-live.jpg",
burn: true, //阅后即焚
auth: true, //授权查看
burned: true, //是否焚毁
authed: true, //是否授权
text: '已焚毁', //是否授权
},
],
},
//胶卷式
kodak: {
list: [
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
'http://i.muztak.cn/images/yellow-river.jpg',
],
},
alltext: {
text: " 今天“<b>节日活动拼团</b>”的，可以过来看看看。<p>Расцветали яблони и груши, Поплыли туманы над рекой. </p><p>Выходила на берег катюша, На высокий берег на крутой. Выходила на берег катюша, На высокий берег на крутой. Выходила на берег катюша, На высокий берег на крутой. Выходила на берег катюша, На высокий берег на крутой. </p>"
},
bars: [
{
list:[
[
{ type: "tags", list: ['同城', '圣诞节'], },
],
[
{ type: "bit", icon_code: "M", text: 75, unit: "评", },
{ type: "bit", icon_code: "L", text: 284, unit: "赞", },
]
]
},
{
list:[
[
],
[
{ type: "button", text: '加微信', color: 'green', emit: 'call'},
]
]
},
],
description: "今天节日活动拼团的，可以过来看看看。Сегодня хороший день.",
introduce: "今天节日活动拼团的，可以过来看看看。Расцветали яблони и груши, Поплыли туманы над рекой. Выходила на берег катюша, На высокий берег на крутой.",
},
})
}
</script>
```
#### Muz-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ------------------------------- | ------ | ------ | ------ |
| classes | 自定义类名 | string | — | — |
| styles | 自定义样式 | object | — | — |
| root-url | 根域名。小程序/APP 需要添加域名 | string | — | — |
| item | 条数据配置 | object | — | — |
| raw-item | 原始数据 | object | — | — |
#### Option of Item
> 注意：文本统一键名 text！！！，链接统一键名 url！！！
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------ | ------------------------------- |
| **title** | **=== 标题区配置 ===** | **object** | **—** | **—** |
| title.text<br />原：title.title | 大标题 | string | — | — |
| title.hot_tip | 标题热点提示（右侧红条） | string | "热门" | — |
| title.styles | 自定义样式 | object | {color: red} | — |
| **description** | **=== 描述文字 ===** | **string** | **—** | **—** |
| **introduce**<br />没有呢 | **=== 介绍文字 ===** | **string** | **—** | **—** |
| **summary** | **=== 摘要配置 === ** | **object** | **—** | **—** |
| summary.text | 摘要文字 | string | — | — |
| **description** | **=== 描述配置 === ** | **object** | **—** | **—** |
| description.text | 描述文字 | string | — | — |
| **alltext** | **=== 全文区配置 === ** | **object** | **—** | **—** |
| alltext.text | 全部文字 | string<html> | — | — |
| **lead** | **=== 领头区配置 ===** | **object** | **—** | **—** |
| lead.cover.url | 封面地址（矩形） | string<url> | — | — |
| lead.cover.hot_tip | 封面热点提示（右上三角） | string | "棒" | — |
| lead.cover.aspect | 封面外形 | string | square, pinkie | rectangle |
| lead.avatar.url | 作者头像（中圆） | string<url> | — | — |
| lead.avatar.aspect | 尺寸样式 | string | large, medium, small, mini | big |
| lead.bars.... | 横条，见 bars | array<object> | — | — |
| **bars** | **=== 横条区配置 ===**<br />详见：Option of Bars | **array<object>** | **—** | **—** |
| **cover** | **=== 封面配置 ===** | **object** | **—** | **—** |
| cover.url | 封面地址 | string<url> | — | — |
| cover.text | 封面文字 | string | — | — |
| cover.aspect | 封面外形 | string | square | rectangle |
| cover.emit | 封面信号 | string | — | — |
| **video** | **=== 视频区配置 ===** | **object** | **—** | **—** |
| video.text<br />原：video.title | 视频标题 | string | — | — |
| video.cover | 视频封面 | string<url> | — | — |
| video.url | 视频地址。支持 mp4,avi | string<url> | — | — |
| video.danmuku | 视频弹幕。只是个想法，还没实现…… | string | [{text: "红色走一波", <br />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 | 轮播图列表<br />详见：Option of Swiper | array<object> | — | — |
| isPreview | 是否支持预览 | boolean | true | false |
| **sudoku** | **=== 九图区配置 ===** | **object** | **—** | **—** |
| swiper.list | 图片地址数组 | array<url> | 例：['/images/1.jpg', ...] | — |
| **schrodinger** | **=== 薛定谔图配置 ===** | **object** | **—** | **—** |
| schrodinger.list | 图片列表 | array<object> | — | —