Muz Doraemon 哆啦 A 梦

哆啦 A 梦。基于 Uni-App 的 VUE3 组件库——Жидзин（Zidjin）矢争系列组件库。

注意：文档编撰格式参考 Element UI 组件文档。

安装

推荐使用 npm 的方式安装。

npm install muz-doraemon

引入

全局引入，在 pages.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 页面文件中写入以下内容

import {MuzItem, MuzListArea, ...} from 'muz-doraemon';
export default {
    components: {
        MuzItem,
		MuzListArea,
		...
    },
};

Doraemon 哆啦 A 梦

哆啦 A 梦的组件百宝箱。

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<template>
    <muz-doraemon :list="list"></muz-doraemon>
</template>

<script>
import {MuzDoraemon} from 'muz-doraemon';
export default {
    data: ()=>({
        list: [
            ...
        ],
    })
};
</script>

UML 流程图

Doraemon Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ---------------------------------------- | ------------- | ------------------ | ------ | | root-url | 根域名。小程序/APP 需要添加域名 | string | — | — | | share-info | 分享信息 | object | {} | — | | page-param | 传入页面参数，用于定制化不同页面过滤结果 | object | {page,id,nav,page} | — | | list | 组件化的列表配置 | array | — | — | | editable | 启用编辑适用：tl-form | boolean | true | false |

Option of List

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------------------------------------------------------- | -------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | | show | 是否显示 | boolean | false | true | | component | 组件名称。符合渲染配置化的组件。 | string | muz-divider, muz-background, muz-tab-bar, muz-classify, muz-item, muz-list-area, muz-item-areamuz-order-bartl-form | — | | classes | 自定义类名 | string | — | — | | styles | 自定义样式。作用于组件根标签。 | object | 例：{fontSize: "14px",}, | — | | config | 组件配置。详见本文组件。 | object | — | — | | list适用：muz-classify | 分类列表 | array | 详见 muz-classify 组件 | | | item适用：muz-item | 条数据模版 | object | 详见 muz-item 组件 | | | itemTemplate适用：muz-list-area, 　　　 muz-item-area | 条数据模版。详见：Item 条数据 | object | 详见 muz-item 组件 | — | | itemTemplateSet适用：muz-list-area | 条数据模版集合。 | object<name, object> | 详见 muz-item 组件 | — | | request适用：muz-list-area, 　　　 muz-item-area | 组件数据请求配置 | object | 详见：muz-list-area Option of Request (请求选项) | — | | optionsRequest适用：muz-list-area, 　　　 muz-item-area | 多组选项的请求配置 | array | 详见：muz-list-area Option of Request (请求选项) | |

Doraemon Slot

| 名称 | 说明 | | ------------------------------------------------- | ------------------------------------------------ | | 新版已弃用，原因：不支持小程序 | 自定义插槽。详见：条数据 .slot |

Background 背景

背景组件。

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<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 | — | — |

Top-Bar 顶部栏

顶部栏

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<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 标签栏

标签栏

基础用法

<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: "全部",}] 注意：value 与 valueNode 的值保持一致 | — | | appendList | 尾部插入标签列表 | Array[Object] | [{value: "其他",}]注意：value 与 valueNode 的值保持一致 | — |

Nav-Bar 导航栏

导航栏

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<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 | { key: 'me', icon: '/static/icon-me.svg', activeIcon: '/static/icon-me-color.svg', title: '我', url: '/pages-me/me/me',}, | — | | request | 请求导航条配置 | | | | | close-url-active | 关闭自动检查激活即根据 Url 地址匹配激活 | boolean | true | false | | is-tab-mode | 启用标签，暂时弃用 | boolean | true | false |

Order-Bar 订单栏

订单栏

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<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 | — | — | | page-param | 页面参数用于接受页面传参 | object | — | — |

Option of Config

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | ---------------------------------------------------- | ------- | ------ | ------- | | height | 订单栏高度 | number | — | 100 | | nodePrice | 价格节点键用于前端统计总价 | string | — | 'price' | | nodeKey | 主键节点键用于生成已选 ID 列表，默认 id | string | — | 'id' | | fixed | 小数点位数 | number | — | 2 | | showCheck | 是否显示全选框 | boolean | true | false | | openCheckStorage | 开启全选写入缓存缓存 key 名默认为 checked-list | boolean | true | false | | split | 指定返回已选 ID 列表的分割符 | string | — | ',' |

Classify 分类图标

分类图标组件。

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<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 | 例：[{ icon: '/icon/news.svg', text: '投标报价', value: '',}], | — | | 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 | 图标地址如果不传则默认显示文本第一个字符 | string | — | — | | text | 文本，分类名称 | string | — | — | | subtitle | 副标题，分类副标题 | string | — | — | | to或 url(歧义,将弃用) | 跳转链接 | string | — | — | | emit | 自定义信号 | string, object<emit, ...> | — | — |

Event

| 事件名称 | 说明 | 回调参数 | | -------- | -------------------- | ------------------------------------------------------------ | | clicks | 点击触发，代替 click | — | | classify | 点击分类图标时触发 | ( item: 目前的点击对象 ) | | emit | 点击分类图标时触发 | ( emit: 信号名称, item: 目前的点击对象, config: 信号包配置 ) |

Divider 分隔行

分隔行组件。

基础用法

[^图像示例]: 注：图像示例统一 800×300 像素，特殊除外。

<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或 url(歧义,将弃用) | 点击标题的跳转地址需启用 clickable | string | — | — | | backgroundImage | 背景图片 | string | — | — | | clickable | 启动跳转 | boolean | false | true | | mode | 跳转模式 | string | redirect | navigate |

Menu 菜单列表

菜单列表

基本用法

<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 | — | — | | 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 | 配置项仅适用：详见：Classify 分类图标 “config” | object | — | — | | children | 子菜单列表同 Option of List | array | — | — |

Option of List's Config

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ---------- | ------- | ------ | ------ | | noBorder | 是否有边框 | boolean | true | false | | isLeftAlign | 是否左对齐 | boolean | true | false | | thumb | 跳转路径 | string | — | — |

Casket 匣子盒

匣子盒

基本用法

<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 | 数据源指定匣子需要包裹的数据 | object | — | — | | disabled-check | 待开发 | — | — | — | | disabled-swipe-action | 待开发 | — | — | — | | auto-close | 待开发 | — | — | — | | options | 待开发 | — | — | — | | duration | 待开发 | — | — | — |

Item 条数据

该组件为原生结构式 Vue 组件（struct as data）。

基本用法

<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、

<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原：title.title | 大标题 | string | — | — | | title.hot_tip | 标题热点提示（右侧红条） | string | "热门" | — | | title.styles | 自定义样式 | object | {color: red} | — | | description | === 描述文字 === | string | — | — | | introduce没有呢 | === 介绍文字 === | string | — | — | | summary | **=== 摘要配置 === ** | object | — | — | | summary.text | 摘要文字 | string | — | — | | description | **=== 描述配置 === ** | object | — | — | | description.text | 描述文字 | string | — | — | | alltext | **=== 全文区配置 === ** | object | — | — | | alltext.text | 全部文字 | string | — | — | | lead | === 领头区配置 === | object | — | — | | lead.cover.url | 封面地址（矩形） | string | — | — | | lead.cover.hot_tip | 封面热点提示（右上三角） | string | "棒" | — | | lead.cover.aspect | 封面外形 | string | square, pinkie | rectangle | | lead.avatar.url | 作者头像（中圆） | string | — | — | | lead.avatar.aspect | 尺寸样式 | string | large, medium, small, mini | big | | lead.bars.... | 横条，见 bars | array | — | — | | bars | === 横条区配置 ===详见：Option of Bars | array | — | — | | cover | === 封面配置 === | object | — | — | | cover.url | 封面地址 | string | — | — | | cover.text | 封面文字 | string | — | — | | cover.aspect | 封面外形 | string | square | rectangle | | cover.emit | 封面信号 | string | — | — | | video | === 视频区配置 === | object | — | — | | video.text原：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 | 轮播图列表详见：Option of Swiper | array | — | — | | isPreview | 是否支持预览 | boolean | true | false | | sudoku | === 九图区配置 === | object | — | — | | swiper.list | 图片地址数组 | array | 例：['/images/1.jpg', ...] | — | | schrodinger | === 薛定谔图配置 === | object | — | — | | schrodinger.list | 图片列表 | array | — | — | | kodak | === 柯达胶卷图配置 === | object | — | — | | kodak.list | 图片地址数组 | array | 例：['/images/1.jpg', ...] | — | | emit | === 信号配置 === | object, string | — | — | | emit.emit | 自定义信号名 | string | — | — | | emit.url支持：muz-area-list | 信号触发后的跳转地址。注意：需配合 muz-area-list 组件使用，原因是考虑到 muz-item 组件的闭合性原则，所以只在更高级的组件中使用“模版字符串”等高级功能。 | string | — | — | | config.cancelBubble | 取消冒泡事件即取消"item"事件 | boolean | false | true | | | === 自定义键配置 === | string | — | — | | .slot | 自定义槽名 | string | — | — |

Option of Bars in Item

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | | type | 数据类型 | string | bit, title, author, rank, summary, descriptiontags, five-star, time, price, button | bit | | | | | | | | text | 显示文本 | string, number | — | — | | text | 评星星级适用：five-star | number | 0.0~5.0 (step: 0.5) | — | | hot_tip | 热点提示适用：title | string | "棒" | — | | icon | 图标地址适用：author, rank, price, bit, time | string | — | — | | icon_code | 图标字体代码适用：author, rank, price, bit | string | "r"卢布, "M"评论, "L"爱心 | — | | label | 标签（前辍）适用：title, bit, price | string | — | — | | unit | 单位（后辍）适用：price, bit | string | "卢布" | — | | zero | 价格为空或零时的占位符适用：price | string | — | — | | emit | 信号名，事件适用：title, bit, author, 暂不支持：price, button, tags | string | — | — | | list | 多个标签适用：tags | stringarrayarray | "同城 ;圣诞节" 或['同城', '圣诞节'] 或[{tag: '同城', color: 'red'}] | — | | split | 分割符适用：tags | string | — | ";" | | mode | 模式。设定 text 值是时间戳或文本适用：time | string | timestamp | date | | format | 格式化。适用：time | string | yyyy-mm-dd HH:ii:ss.fff | yyyy-mm-dd HH:ii:ss | | color | 按钮适用：title, bit, tags, button | string | indigo, red, orange, green, blue, purple | | | labelColor | 按钮适用：title, price | string | indigo, red, orange, green, blue, purple | | | list | 横条区一行数据。1 个元素左对齐，2 个元素两端对齐，3+个元素两头分散对齐，选项配置与 Bars 相同。 | array或array<array> | | | | desensitize | 大于 0，从字符首位向后替换几位，小于 0，从字符末尾向前替换几位等于 0，不做处理适用：author | number | — | 0 | | desensitizeHolder | 替换字符，配合 desensitize 使用适用：author | string | — | "*" |

Option of Swiper's List in Item

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ---------- | ----------- | ------ | ------ | | url | 轮播图地址 | string | — | — | | text原：title | 轮播图文本 | string | — | — |

Option of Schrodinger's List in Item

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------ | ----------- | ------ | ------ | | image | 图片地址 | string | — | — | | burn | 是否阅后即焚 | boolean | true | false | | burned | 是否已焚毁 | boolean | true | false | | auth | 是否授权查看 | boolean | true | false | | authed | 是否已授权 | boolean | true | false | | text | 图上文字 | string | — | — | | icon | 价格前的图标 | string | — | — | | price | 图片价格 | number | — | — | | unit | 价格后的单位 | string | — | — |

Event

| 事件名称 | 说明 | 回调参数 | | -------- | ----------------------------------------------------- | ------------------------------------------------------ | | item | 点击条数据任一位置触发 | item - 条数据配置（结构配置） | | emit | 自定义事件触发Todo 仅实现了根信号，各元素待开发 | {emit, config, node}- 信号名, 信号配置, 触发节点 |

List-Area 列表区渲染

该组件基于 muz-item 进行列表区域渲染，自动请求相关数据。

基本用法

<template>
    <muz-list-area :config="it.config" :request="request" :options-request="optionsRequest" :page="request.page" :limit="request.limit" :item-template="itemTemplate" :item-function="itemFunction" />
</template>

<script>
export default {
    components: {
        MuzItem: () => 'muz-item', // 注：微信小程序不支持此组件懒加载方式
    },
    data: () => ({
        config: {},
        request: {
            url: '/api/news_list',
            rootUrl: 'http://xx.cn',
            method: 'GET',
            param: {},
            headers: {},
            page: 1,
            limit: 10,
            showMore: false,
            nodeStatus: 'err',
            nodeStatusValue: 0,
            nodeData: 'data.list',
        },
    }),
};
</script>

List-Area Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------------- | ------------------------------------------------------------------ | --------------------------- | ------------------------------------------------ | ------ | | classes | 自定义类名 | string | — | — | | styles | 自定义样式 | object | — | — | | page | 当前页数注：哆啦 A 梦需在 request 配置 | number | — | 1 | | limit | 每页限制条数注：哆啦 A 梦需在 request 配置 | number | — | 10 | | config | 列表区配置 | object | — | — | | page-param | 传入页面参数，用于定制化不同页面过滤结果 | object | — | — | | append-list | 附加列表 | array | — | — | | item-template | 条数据模版。详见：Item 条数据 | object | — | — | | item-template-set | 条数据模版集合。item-template 的集合，常用配置多展示样式 | object | {news: ...} | — | | item-function | 条数据函数。编历每条数据时调用该函数序列化为 muz-item 配置。 | function | function(item){ return {title: xxx}} | — | | request | 组件数据请求配置详见：Option of Request | object, function 待加 | — | — | | options-request | 多组选项的请求配置详见：Option of Options-Request | array | — | — | | item-templates-request | 条数据模版集请求配置详见：Option of Item-Templates-Request | array | — | — | | extend-options-param | 扩展选项参数 | object | — | — |

Option of Config

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------------------------------------------------------------- | ------------------------------ | -------------------- | ------------------- | ------ | | debug