1.0.37 • Published 3 years ago
zyd-client-framework v1.0.37
zyd-client-framework
Installation
$ npm install -s zyd-client-framework
Import
import { List, ListGroup, LeftSlider, Block, BlockGroup } from 'zyd-client-framework'
List
property
name | explain | type | default | examples |
---|---|---|---|---|
title | 标题 | String | title="标题" | |
desc | 副标题 | String | desc="副标题" | |
foot | 右侧副标题 | String | foot="145" | |
isLink | 是否显示右侧剪头 | Boolean | false | :isLink="false" |
fun | 点击事件调用的方法 | Function | :fun="getItem" | |
icon | 图标对象,同elementUI Plus的icon使用方法 | Object | :icon="plus" | |
showBorder | 是否显示行间边框 | Boolean | true | :showBorder="false" |
disabled | 是否禁用 | Boolean | false | :disabled="true" |
iconClass | 图标css类名 | String | iconClass="iconClass" | |
titleClass | 标题css类名 | String | titleClass="titleClass" | |
descClass | 副标题css类名 | String | descClass="descClass" | |
footClass | 右侧副标题css类名 | String | footClass="footClass" | |
itemClass | List元素css类名 | String | itemClass="itemClass" | |
maskClass | 禁用遮罩层css类名 | String | maskClass="maskClass" |
examples
<List
title="title"
desc="desc"
foot="foot"
:isLink="true"
:fun="()=>{}"
:icon="IceCreamRound"
:showBorder="true"
:disabled="true"
iconClass="iconClass"
titleClass="titleClass"
descClass="descClass"
footClass="footClass"
itemClass="itemClass"
maskClass="maskClass"
></List>
Slot
name | explain |
---|---|
icon | 图标插槽 |
title | 标题插槽 |
desc | 副标题插槽 |
foot | 右侧副标题插槽 |
examples
<List>
<template #icon>
<component class="listIcon" :is="icon" />
</template>
<template #title>title</template>
<template #desc>desc</template>
<template #foot>foot</template>
</List>
ListGroup
property
name | explain | type | default | examples |
---|---|---|---|---|
title | 标题 | String | title="标题" | |
disabled | 是否禁用 | Boolean | false | :disabled="true" |
titleClass | 标题css类名 | String | titleClass="titleClass" | |
maskClass | 禁用遮罩层css类名 | String | maskClass="maskClass" |
examples
<ListGroup
:disabled="true"
maskClass="maskClass"
itemClass="itemClass"
title="title"
>
<List />
</ListGroup>
Block
property
name | explain | type | default | examples |
---|---|---|---|---|
title | 标题 | String | title="标题" | |
desc | 副标题 | String | desc="副标题" | |
foot | 右侧副标题 | String | foot="145" | |
fun | 点击事件调用的方法 | Function | :fun="getItem" | |
icon | 图标对象,同elementUI Plus的icon使用方法 | Object | :icon="plus" | |
showBorder | 是否显示行间边框 | Boolean | true | :showBorder="false" |
disabled | 是否禁用 | Boolean | false | :disabled="true" |
iconClass | 图标css类名 | String | iconClass="iconClass" | |
titleClass | 标题css类名 | String | titleClass="titleClass" | |
descClass | 副标题css类名 | String | descClass="descClass" | |
footClass | 右侧副标题css类名 | String | footClass="footClass" | |
itemClass | List元素css类名 | String | itemClass="itemClass" | |
maskClass | 禁用遮罩层css类名 | String | maskClass="maskClass" |
examples
<Block
title="title"
desc="desc"
foot="foot"
:icon="IceCreamRound"
:showBorder="true"
:fun="()=>{}"
:disabled="true"
iconClass="iconClass"
titleClass="titleClass"
descClass="descClass"
footClass="footClass"
itemClass="itemClass"
maskClass="maskClass"
/>
slot
name | explain |
---|---|
icon | 图标插槽 |
title | 标题插槽 |
desc | 副标题插槽 |
foot | 右侧副标题插槽 |
examples
<Block>
<template #icon>
<component class="blockIcon" :is="icon" />
</template>
<template #title>title</template>
<template #desc>desc</template>
<template #foot>foot</template>
</Block>
BlockGroup
property
name | explain | type | default | examples |
---|---|---|---|---|
title | 标题 | String | title="标题" | |
disabled | 是否禁用 | Boolean | false | :disabled="true" |
examples
<BlockGroup groupStyle="margin:0px;" groupClass="groupClass" :disabled="true" title="title">
<Block />
</BlockGroup>
LeftSlider
property
name | explain | type | default | examples |
---|---|---|---|---|
itemClass | List元素css类名 | String | itemClass="itemClass" | |
menuClass | 右侧按钮菜单css类名 | String | menuClass="menuClass" | |
showBorder | 是否显示行间边框 | Boolean | true | :showBorder="false" |
transition | 滑块动画时长 | Number | 0.3 | :transition="0.1" |
<ListGroup>
<LeftSlider
v-for="item in 10"
:key="item"
:showBorder="true"
:transition="0.3"
itemClass="itemClass"
menuClass="menuClass"
>
<List desc="desc" foot="foot" isLink :fun="()=>{}" :icon="IceCreamRound">
<template #title>title{{item}}</template>
</List>
<template #rightMenu>
<div style="margin: 0 20px">del</div>
</template>
</LeftSlider>
</ListGroup>
slot
name | explain |
---|---|
rightMenu | 右侧按钮菜单插槽 |
examples
<template #rightMenu>
<div style="margin: 0 20px">del</div>
</template>
1.0.37
3 years ago
1.0.36
3 years ago
1.0.35
3 years ago
1.0.34
3 years ago
1.0.33
3 years ago
1.0.32
3 years ago
1.0.31
3 years ago
1.0.30
3 years ago
1.0.29
3 years ago
1.0.28
3 years ago
1.0.27
3 years ago
1.0.26
3 years ago
1.0.25
3 years ago
1.0.24
3 years ago
1.0.23
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago