muz-item
v1.0.9
Published
自主开发的UniApp组件——Жидзин（Zidjin）系列组件库。
Downloads
12
Readme
Жидзин 接口文档说明
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 | 一条数据配置 | 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