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页面文件中写入以下内容

import {MuzItem} from 'muz-item';
export default {
    components: {
        MuzItem,
    },
};

基本用法

<template>
	<muz-item :item="item" @click="onClick" />
</template>

<script>
	export default {
        components: {
            MuzItem: () => 'muz-item',  // 注：微信小程序不支持此组件懒加载方式
        },
        data: () => ({
            item: {
                title: { 
                    title: "标题 Один Один", 
                    hot_tip: "热门",
                },
            },
        })
    }
</script>

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、

<template>
	<muz-item :item="item" @click="onClick" />
</template>

<script>
	export default {
        components: {
            MuzItem: () => 'muz-item',  // 注：微信小程序不支持此组件懒加载方式
        },
        data: () => ({
            item: {
                id: 283576, // 自定义参数，仅用于信号触发的数据传值等
                title: { 
                    title: "标题 Один Один", hot_tip: "热门",
                },
                lead: {
                    cover: { url: "http://i.muztak.cn/images/yellow-river.jpg", hot_tip: "棒", },
                    avator: { 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:{
                    title: "黄河水",
                    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",
                            title: "中国 黄河",
                        },
                        {
                            url: "http://i.muztak.cn/images/landscape-arctic.jpg",
                            title: "俄罗斯 北极",
                        },
                        {
                            url: "http://i.muztak.cn/images/landscape-arctic.jpg",
                            title: "俄罗斯 北极",
                        }
                    ],
                },
                //九图式
                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-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属性

参数	说明	类型	默认值	可选值
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 表单

该组件生成用户表单。实现新建、修改、编辑、查看。

基本使用

<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

[
    {
        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属性

结构和逻辑

主表单
<zj-uview-form>
	<zj-uview-form-item>
        <zj-uview-xxx>
            <u-xxx/>
        </zj-uview-xxx>
    </zj-uview-form-item>
</zj-uview-form>

其它说明

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

Keywords

FAQs

What is muz-item?

Is muz-item well maintained?

Package last updated on 02 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

muz-item

Жидзин 接口文档说明

Muz-Item

安装

引入