muz-item v1.0.9

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

Muz-Item

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

安装

推荐使用npm的方式安装（目前暂支持微信小程序，请参考组件安装）

npm install muz-item

纯组件式安装

将muz-xxx组件复制到/components/文件夹中

引入

全局引入，在 main.js 中写入以下内容：

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

高级用法

限定性：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属性

• mode 属性

• type 属性

• Props 属性

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

zj-uview-form 表单

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

• 基本使用

<zj-uview-form />

• Props 属性

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

[
    {
        key: 'company_name',
        label: '公司名称',
        type: 'text',
        value: '北京某某科技有限公司',
        placeholder: "请输入公司名称",
        rules: [
            { 
                required: true, 
                message: '请输入姓名', 
                // 可以单个或者同时写两个触发验证方式 
                trigger: ['change','blur'],
            }
        ],
        required: true,
    },
]

• Metehods 方法

• 结构和逻辑

主表单
<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