更新记录

2.0.0（2024-12-13） 下载此版本

[V2.0.0.20241213-alpha] 开始支持 DCloud 插件市场的 Uni-Modules 模块化版本

平台兼容性

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

Option of List

Doraemon Method

Doraemon 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

Option of Config

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

Event

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

Option of Config

Option of List

Event

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

Option of Config

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

• list-type 为 card 时，实际调用的是 muz-classify 做为内置组件

Option of List

Option of List's Config

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

动态请求组件

动态组件自带数据请求功能

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

Option of Config

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: '/apps/hbsp-me/me/me',
            },
        ]，
    })
};
</script>

Nav-Bar Attributes

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

Option of Config

网页端专用组件

Header 页头

页面头部

基本用法

<template>
    <muz-header :logo="logo" :navs="list" current="home"></muz-header>
</template>

<script>
export default {
    data: () => ({
        logo: '',
        list: [
            {
                key: 'home',
                title: '首页',
                url: '/',
            },
            {
                key: 'news',
                title: '新闻',
                url: '/news',
                children: [
                    {
                        title: '栏目类别',
                        icon: 'icons/ico_air.png',
                        url: '',
                        rank: 'https://oss.muztak.cn/icons/icon-plain-double-right-small-black.svg',
                        rows: 2,
                        children: [
                            {
                                title: '图片新闻',
                                url: '',
                                icon: 'https://oss.muztak.cn/icons/icon-plain-image-color.svg',
                            },
                            {
                                title: '文字新闻',
                                url: '',
                                icon: 'https://oss.muztak.cn/icons/icon-plain-book-color.svg',
                            },
                            {
                                title: '热点话题',
                                url: '',
                                icon: 'https://oss.muztak.cn/resources/bid-online/icons/bbx-news-poundSign.svg',
                            },
                            {
                                title: '网站动态',
                                url: '',
                                icon: 'https://oss.muztak.cn/resources/bid-online/icons/bbx-news-companyDynamic.svg',
                            },
                        ],
                    },
                    {
                        title: '活动',
                        rows: 1,
                        children: [
                            {
                                title: '成交喜报',
                                cover: 'http://i.muztak.cn/images/yellow-river.jpg',
                                url: '',
                            },
                            {
                                title: '新人有礼',
                                cover: 'http://i.muztak.cn/images/landscape-sakura.jpg',
                                url: '',
                            },
                        ],
                    },
                ],
            },
        ],
    }),
};
</script>

Muz-Header Attributes

Header-Nav 页头导航条

页面头部导航条。Header-Nav组件是Header组件的子组件，也可独立使用

基本用法

<template>
    <muz-header-nav :navs="list" current="home"></muz-header-nav>
</template>

<script>
export default {
    data: () => ({
        list: [
            {
                key: 'home',
                title: '首页',
                url: '/',
            },
            {
                key: 'news',
                title: '新闻',
                url: '/news',
                children: [
                    {
                        title: '栏目类别',
                        icon: 'icons/ico_air.png',
                        url: '',
                        rank: 'https://oss.muztak.cn/icons/icon-plain-double-right-small-black.svg',
                        rows: 2,
                        children: [
                            {
                                title: '图片新闻',
                                url: '',
                                icon: 'https://oss.muztak.cn/icons/icon-plain-image-color.svg',
                            },
                            {
                                title: '文字新闻',
                                url: '',
                                icon: 'https://oss.muztak.cn/icons/icon-plain-book-color.svg',
                            },
                            {
                                title: '热点话题',
                                url: '',
                                icon: 'https://oss.muztak.cn/resources/bid-online/icons/bbx-news-poundSign.svg',
                            },
                            {
                                title: '网站动态',
                                url: '',
                                icon: 'https://oss.muztak.cn/resources/bid-online/icons/bbx-news-companyDynamic.svg',
                            },
                        ],
                    },
                    {
                        title: '活动',
                        rows: 1,
                        children: [
                            {
                                title: '成交喜报',
                                cover: 'http://i.muztak.cn/images/yellow-river.jpg',
                                url: '',
                            },
                            {
                                title: '新人有礼',
                                cover: 'http://i.muztak.cn/images/landscape-sakura.jpg',
                                url: '',
                            },
                        ],
                    },
                ],
            },
        ],
    }),
};
</script>

Muz-Header-Nav Attributes

Option of Navs

Option of Children's Config

Option of Children's Children Config

Header-Search 搜索框

搜索框。Header-Search组件是Header组件的子组件，也可独立使用

基本用法

<template>
    <muz-header-search :prefixIcon="prefixIcon" :suffixIcon="suffixIcon" :findList="findList" :historyList="historyList" :hotList="hotList" :cartoon="cartoon" @change="searchChange" @search="onSearch" />
</template>

<script>
export default {
    data: () => ({
        prefixIcon: 'https://xxxx.png',
        suffixIcon: 'https://xxxx.png',
        placeholder: '搜索',
        value: '搜索的值',
        hotList: [
            {text: '构建新时代中塞命运共同体'}
        ],
        historyList: [
            {text: '搜索历史'},
            {text: '老外被中国人的约饭节奏震惊了热'}
        ],
        findList: [
            {text: '中国人'},
            {text: '老外被中国人的约饭节奏震惊了热'}
        ],
        cartoon: true,
    })
    methods:{
        searchChange(value){

        },
        onSearch(value){

        },
    }

}
</script>

muz-header-search Attributes

muz-header-search Events

Detail 详情区

详细区。比较基础的单一功能，用来代Muz-Item复杂的配置

基本用法

<template>
    <muz-detail :detail="detail" ></muz-detail>
</template>

<script>
export default {
    data: () => ({
        detail: {
            url: 'http://i.muztak.cn/images/yellow-river.jpg',
            title: '黄河之壶口瀑布',
        },
    }),
};
</script>

Muz-Detail Attributes

Option of Config

Option of Detail

Option of Base-Fields

Swiper 轮播区

轮播图。目前适用于移动端

基本用法

<template>
    <muz-swiper :cover="cover" :video="video" :photos="photos" ></muz-swiper>
</template>

<script>
export default {
    data: () => ({
        cover: 'https://oss.muztak.cn/i/landscape-arctic.jpg',
        video: 'https://oss.muztak.cn/i/landscape-arctic.mp4',
        photos: [
            {
                url: 'http://i.muztak.cn/images/yellow-river.jpg',
                title: '黄河之壶口瀑布',
            },
            {
                url: 'http://i.muztak.cn/images/landscape-sakura.jpg',
                title: '樱花背景',
            },
        ]
    }),
};
</script>

Muz-Swiper Attributes

Option of Photos

Poster 海报区

海报图。目前适用于移动端

基本用法

<template>
    <muz-poster :title="title" :cover="cover" :video="video" :photos="photos" ></muz-poster>
</template>

<script>
export default {
    data: () => ({
        title: '风景欣赏',
        cover: 'https://oss.muztak.cn/i/landscape-arctic.jpg',
        video: 'https://oss.muztak.cn/i/landscape-arctic.mp4',
        photos: [
            {
                url: 'http://i.muztak.cn/images/yellow-river.jpg',
                title: '黄河之壶口瀑布',
            },
            {
                url: 'http://i.muztak.cn/images/landscape-sakura.jpg',
                title: '樱花背景',
            },
        ]
    }),
};
</script>

Muz-Poster Attributes

Option of Photos

自动化渲染组件

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

Option of Config

Option of Request

• 适用于 request 请求属性
• 适用于 optionsRequest 选项列表请求属性
• 适用于 itemTemplatesRequest 条数据模板请求属性

注：node 节点键名支持对象操作符"."点、支持数组操作符"[]，支持多层子树。"

Option of Emits in Config

Event

Item-Area 条数据区渲染

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

基本用法

<template>
    <muz-item-area :config="it.config" :request="concatObject(it.request, 'param', this.pageParam)" :options-request="it.optionsRequest" :item-template="it.item" />
</template>

<script>
export default {
    components: {
        MuzItemArea: () => 'muz-item-area',  // 注：微信小程序不支持此组件懒加载方式
    },
    data: () => ({
        // 与muz-list-area相同
        ...
    })
}
</script>

Item-Area Attributes

Chat-List 聊天列表

聊天记录列表，待开发

• 基本使用

<muz-chat-list :list="list" />

<script>
export default{
    data: () => ({
        list: [
            {user_id:01 ,author/nickname: '想摆烂',avatar:'(http://i.cn/1111.jpg)' ,mode: 'mine', type: 'text', content: '每天为这几个臭钱而奔波', Url:'',timestamp: 1651212271},

            {user_id:02 ,author/nickname: '海琴烟',avatar:'(http://i.cn/1111.jpg)' ,mode: 'their', type: 'video', content: '我饿了!', Url:'[](http://i.cn/1111.mp4)',timestamp: 1651212282},

            {user_id:01 ,author/nickname: '想摆烂',avatar:'(http://i.cn/1111.jpg)' ,mode: 'their', type: 'image', content: '我饿了!',Url:'[](http://i.cn/1111.jpg)' ,timestamp: 1651212290},

            {user_id:02 ,author/nickname: '海琴烟',avatar:'(http://i.cn/1111.jpg)' ,mode: 'mine', type: 'sound', content: '饿，巨饿',Url:'http://i.cn/1111.mp3' ,timestamp: 1651215871},

        ],
    })
}
</script>

• list 属性

• mode 属性

• type 属性

• Props 属性

• headers 属性中的字段数据(Item)参数

/**
 * function XTemplateString::format 对模板字符串进行编译，格式化为结果字符串
 * @param {object} item 给定需要格式化的Key-Value对象。
 * @param {string} text 要格式化的字符串文本
 * @desc
 * @return {string} 格式化完成后字符串
 * @example
 *   模板语法糖：
 *   一、基础版——直接引用值。语法：{{key}}
 *   例子：
 *       param={category_id: 35, category_value: "杭州西湖区"};
 *       str="类别ID：{{category_id}}，类别值：{{category_value}}。";
 *       XTemplateString.format(param, str);
 *       结果 ==> "类别ID：35，类别值：杭州西湖区。"
 *   二、高级版——管道选项值。即指定列表对象、标签键、值键，找到引用值。语法：{{valueKey:key|options[labelKey]}}
 *   例子：
 *       param={category_id: 35, category_list: [{value: 27, label: "杭州上城区"}, {value: 35, label: "杭州西湖区"}]};
 *       str="类别：{{ value: category_id | category_list[label] }}"
 *       XTemplateString.format(param, str);
 *       结果 ==> "类别：杭州西湖区。"
 *   三、高级版——强制转换值。即指定来源键、目标键，生成数组对象。语法：{{(Array<targetKey:sourceKey>)valueKey)}}
 *   例子：
 *       param={photo_list: [{link: '/images/a.jpg', label: "杭州上城区"}, {link: '/images/b.jpg', label: "杭州西湖区"}]};
 *       str="{{ (Array< url: link, text: label >)photo_list }}"
 *       str2="{{ (Array< :link >)photo_list }}"
 *       XTemplateString.format(param, str);
 *       结果 ==> "[{url: '/images/a.jpg', text: "杭州上城区"}, {url: '/images/b.jpg', text: "杭州西湖区"}]"
 *       XTemplateString.format(param, str2);
 *       结果 ==> "['/images/a.jpg', '/images/b.jpg']"
 */

版本说明

V3.0.1.20230302-alpha

正式发布支持 Vue3 版本的 Muz-Doraemon 组件。

参考文献

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