zyd-client-framework

基于vite + vue3 + element的client端的组件框架
1,098
vue vite element
Install
npm install zyd-client-framework
Latest Version:1.0.37
Older releases:3
License:MIT
Last Updated:Feb 18, 2022
Links: npm
Maintainer: zz459

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>

Related Packages

vite-plugin-vue2

Vite plugin for Vue2

1,474,659 618
vite vue2
@vue-vine/vite-plugin

Official Vite plugin for Vue Vine

95,680 1,442
vite vue
pl-table

一个表格插件（完美解决万级数据渲染卡顿问题）

35,525 1,149
element pl-table
vite-plugin-git-revision

Vite plugin that generates VERSION and COMMITHASH files during build based on a...

21,961 11
vite vue2
vite-plugin-resolve-extension-vue

A temporary workaround for issue No loader is configured for ".vue"

6,993 5
vite vue

Version History

Version Released Vue License
1.0.37 MIT
1.0.36 MIT
1.0.35 MIT
1.0.34 MIT
1.0.33 MIT