muz-doraemon v1.0.8

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

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: '/pages-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

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

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

Option of Item

注意：文本统一键名 text！！！，链接统一键名 url！！！

Option of Bars in Item

Option of Swiper's List in Item

Option of Schrodinger's List in Item

Event

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

| debug