Zengzhiyao-ui NPM

前端组件化UI组件文档

项目使用

下载方式

npm i zengzhiyao-ui
npm i zengzhiyao-ui@1.0.1

在Vue项目中使用

import Myui from 'zengzhiyao-ui/es/index.mjs';
import 'zengzhiyao-ui/es/style.css';
import { createApp } from 'vue';
const app = createApp(App);
app.use(Myui);

Button 按钮

按钮类型

按钮支持primary、danger、secondary、text等四种类型按钮类型。默认为secondary

    <Button type="primary">主要按钮</Button>
    <Button type="secondary">次按钮</Button>
    <Button type="danger">危险按钮</Button>
    <Button type="text">文字按钮</Button>

线框按钮

通过 plain属性将按钮设置为线框按钮，线框按钮的文字为按钮颜色，背景为白色。

    <Button type="primary" plain>主要按钮</Button>
    <Button type="danger" plain>危险按钮</Button>

禁用状态

通过 disabnled属性来禁用按钮，禁用状态下按钮不可点击。

    <Button type="primary" disabled>主要按钮</Button>
    <Button type="danger" disabled>危险按钮</Button>

加载状态

通过 loading属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loading-text 设置加载状态下的文字，默认为‘加载中...’。

    <Button loading loading-text="加载"  type="primary">加载按钮</Button>

图标按钮

通过 icon 属性设置按钮图标，支持 vant-Icon 组件里的所有图标。

    <Button  icon="cart" type="primary">主按钮</Button>

按钮尺寸

支持 sm、md、lg三种尺寸，默认为 md。

<Button size="sm" type="secondary">小型按钮</Button>
<Button size="md" type="secondary">普通按钮</Button>
<Button size="lg" type="secondary">大按钮</Button>

API

Button Props

参数	说明	类型	默认值
type	类型，可选值为 primary danger secondary text	string	secondary
size	尺寸，可选值为 sm md lg	string	md
icon	左侧图标名称，等同于 vant-Icon 组件的name属性	string	-
plain	是否为朴素按钮	boolean	false
loading	是否显示为加载状态	boolean	false
loading-text	加载状态提示文字	string	-

ButtonGroup 按钮组

用于按钮组合，默认弹性盒子，垂直居中，水平 space-around;

按钮布局调整

通过对item的flex属性进行调整，来调整整体每个按钮的占比，不包含更多按钮

       <ButtonGroup>
            <Button class="flex-1 mr-2" size="lg" type="secondary">次按钮</Button>
            <Button class="flex-1" size="lg" type="primary">主按钮</Button>
        </ButtonGroup>

Slot

名称	说明	备注
more	将更多按钮以下方弹窗形式弹出	其中的按钮需要将type="option"

Radio 单选框

基础用法

通过v-model绑定当前选项的 value，按钮默认水平方向以 justify-content: flex-start的方式排列。

    <RadioGroup v-model="value">
        <Radio value="0" label="第一个选项"></Radio>
        <Radio value="1" label="第二个选项"></Radio>
        <Radio value="2" label="第三个选项"></Radio>
    </RadioGroup>


<script>
    import { ref} from 'vue';
    const value = ref('0');
</script>

按钮类型

垂直排列

在RadioGroup 和Radio上分别加上col属性，实现垂直排列

        <RadioGroup v-model="value" col>
            <Radio  col value="0" label="第一个选项"></Radio>
            <Radio  col value="1" label="第二个选项"></Radio>
            <Radio  col value="2" label="第二个选项"></Radio>
            <Radio  col value="3" label="第二个选项"></Radio>
        </RadioGroup>


<script>
    import { ref} from 'vue';
    const value = ref('0');
</script>

禁用状态

在Radio 上添加disabled属性实现单选按钮禁用

        <RadioGroup v-model="value" col>
            <Radio type="circle" disabled col value="5" label="第一个选项"></Radio>
            <Radio type="circle" col value="6" label="第二个选项"></Radio>
            <Radio type="circle" col value="7" label="第二个选项"></Radio>
            <Radio type="circle" col value="8" label="第二个选项"></Radio>
        </RadioGroup>

按钮类型

type 属性可选值为 circle和 tick，单选框形状分别对应方形和圆点形，默认为circle。

    <RadioGroup v-model="value" col>
        <Radio type="circle" col value="1" label="第一个选项"></Radio>
        <Radio type="circle" col value="2" label="第二个选项"></Radio>
        <Radio type="circle" col value="3" label="第二个选项"></Radio>
        <Radio type="circle" col value="4" label="第二个选项"></Radio>
    </RadioGroup>
    <RadioGroup v-model="value" col>
        <Radio type="tick" col value="5" label="第一个选项"></Radio>
        <Radio type="tick" col value="6" label="第二个选项"></Radio>
        <Radio type="tick" col value="7" label="第二个选项"></Radio>
        <Radio type="tick" col value="8" label="第二个选项"></Radio>
    </RadioGroup>

右勾选

在Radio 上添加right属性实现垂直方向的右勾选。

<RadioGroup v-model="value" col>
<Radio type="tick" right col value="1" label="第13选项"></Radio>
<Radio type="tick" right col value="2" label="第14选项"></Radio>
<Radio type="tick" right col value="3" label="第15选项"></Radio>
<Radio type="tick" right col value="4" label="第16选项"></Radio>
</RadioGroup>

API

Radio props

参数	说明	类型	默认值
value	标识符，通常为一个唯一的字符串或数字	string	-
type	形状，可选值为 circle、tick	string	circle
label	文本内容，通常为选项描述	string	-
disabled	是否为禁用状态	boolean	false
col	是否垂直样式	boolean	false
right	是否有勾选（仅垂直样式有效）	boolean	false

Radio Group

参数	说明	类型	默认值
col	是否垂直样式	boolean	false
disabled	是否为禁用状态	boolean	false

RadioGroup Events

事件名	说明	回调参数
change	当绑定值变化时触发的事件	value: string

Switch滑块

基础用法

通过 v-model 绑定开关的选中状态，true 表示开，false 表示关。

<script setup>
import Switch from '@/components/ui/switch/Switch.vue';
import { ref } from 'vue';

const states = ref(false);
<template>
   <Switch v-model="states"></Switch>
</template>

禁用状态

通过 disabled 属性来禁用开关，禁用状态下开关不可点击。

<Switch v-model="states" disabled></Switch>

文字展示

<Switch v-model="states" active-text="启用" inactive-text="禁用"></Switch>

API

Switch props

参数	说明	类型	默认值
active-text	开关开启时展示文字	string	-
inactive-text	开关关闭时展示文字	string	-
disabled	是否为禁用状态	boolean	false

Checkbox 多选框

基础用法

通过 v-model 绑定复选框的勾选状态。

<script setup>
import { ref } from 'vue';
import Checkbox Group from './Checkbox -group.vue';
import Checkbox from './Checkbox .vue';
const checkList= ref(['']);
</script>
<template>
     <Checkbox Group v-model="checkList" row direction="horizontal">
            <Checkbox class="flex-1" value="1">选项内容</Checkbox >
            <Checkbox class="flex-1" value="2">选项内容</Checkbox >
        </Checkbox Group >
</template>

禁用状态

通过设置 disabled 属性可以禁用复选框，也可以禁用单个选项。

  //单个选项的禁用
  <Checkbox class="flex-1" disabled value="1">选项内容</Checkbox >

  //多选框组的禁用
  <Checkbox Group disabled v-model="checkList1" direction="horizontal">
            <Checkbox class="flex-1" value="1">选项内容</Checkbox >
            <Checkbox class="flex-1" value="2">选项内容</Checkbox >
  </Checkbox Group >

水平排列

将 direction 属性设置为 horizontal后，复选框组会变成水平排列。

   //水平排列
   <Checkbox Group v-model="checkList" direction="horizontal">
            <Checkbox class="flex-1" disabled value="0">选项内容</Checkbox >
            <Checkbox class="flex-1" disabled value="1">选项内容</Checkbox >
   </Checkbox Group >

右勾选

可以添加right属性来实现有勾选（仅垂直排列有效）

     列表组合-右勾选
        <Checkbox Group v-model="checkList7" right>
            <Checkbox value="1">内容一</Checkbox >
            <Checkbox value="2">内容二</Checkbox >
            <Checkbox value="3">内容三</Checkbox >
        </Checkbox Group >

限制最大可选数

通过 max 属性可以限制复选框组的最大可选数。（0为无限制）

  //限制最大可选数
   <Checkbox Group v-model="checkList" max="2">
            <Checkbox value="1">内容一</Checkbox >
            <Checkbox value="2">内容二</Checkbox >
            <Checkbox value="3">内容三</Checkbox >
   </Checkbox Group >

自定义形状

通过设置shape属性为 cycle 将图标设置为圆形图标

      <Checkbox Group v-model="checkList" shape="cycle">
            <Checkbox value="1">第一个选项</Checkbox >
        </Checkbox Group >

API

Checkbox Group Props

参数	说明	类型	默认值
v-model	当前选中列表	array	-
shape	图标形状，可选值 horizontal	string	-
direction	排列方向，可选值 cycle	string	-
disabled	是否为禁用状态	boolean	false
max	最大可选数（0为无限制）	number	0
right	右勾选	boolean	false

Checkbox Props

参数	说明	类型	默认值
value	选项内容	string	-
disabled	是否为禁用状态	boolean	false

Checkbox Group Events

事件名	说明	回调参数
change	当绑定值变化时触发的事件	value: string

Divider 分割线

基础用法

默认渲染一条水平分割线。

<template>
    <Divider></Divider>
</template>
<script setup>
// Your script setup code here
import Dividerfrom './Divider';
</script>

展示文本

通过插槽在可以分割线中间插入内容。

<Divider>文本</Divider>

Layout 布局

基础用法

引入组件Layout 将我们需要的内容插入组件layout中，页面统一展示边距为8px的布局

<script>
import Layout from './Layout.jsx';
</script>

<template>
      <Layout>
               <Card class={'h-48'}>卡片1</Card>
      </Layout>

<template/>

多个卡片

当我们需要多个卡片在一起时候，引入Card 组件，将Card组件放在layout中，实现整体简洁布局

<script>
import Layout from './layout';
import Card from './card';
</script>

<template>
                <Layout>
                    <Card class={'h-48'}>卡片1</Card>
                    <Card class={'h-48'}>卡片2</Card>
                    <Card class={'h-48'}>卡片3</Card>
                    <Card class={'h-48'}>卡片4</Card>
                    <Card class={'h-48'}>卡片5</Card>
                </Layout>

<template/>

Space 间距

基础用法

引入Space组件，让页面的元素之间有间距

<script>
import Space from './Space';
</script>



<template>
               <Space row size="8">
                        <div class="bg-red-500 h-48 w-48">1</div>
                        <div class="bg-blue-500 h-48 w-48">2</div>
                        <div class="bg-green-500 h-48 w-48">3</div>
                    </Space>

<template/>

间距大小

通过调整size参数，来改变块与块之间的宽度，单位是dp。

 <Space size="8">
        <div class="bg-red-500 h-48 w-48">1</div>
        <div class="bg-blue-500 h-48 w-48">2</div>
        <div class="bg-green-500 h-48 w-48">3</div>
</Space>
 <Space size="12">
        <div class="bg-red-500 h-48 w-48">1</div>
        <div class="bg-blue-500 h-48 w-48">2</div>
        <div class="bg-green-500 h-48 w-48">3</div>
</Space>
 <Space size="24">
        <div class="bg-red-500 h-48 w-48">1</div>
        <div class="bg-blue-500 h-48 w-48">2</div>
        <div class="bg-green-500 h-48 w-48">3</div>
</Space>

方向

调整row值来改变Space的方向

                    <Space row >
                        <div class="bg-red-500 h-48 w-48">1</div>
                        <div class="bg-blue-500 h-48 w-48">2</div>
                        <div class="bg-green-500 h-48 w-48">3</div>
                    </Space>

API

Props

参数	说明	类型	默认值
size	间距大小，单位dp	string	8
row	是否水平排列	boolean	false

Grid 宫格

基础用法

引入宫格组件，在Grid 中添加GridItem来实现菜单功能的组合。

<script>
import Grid from './Grid';
import GridItem from './GridItem';
</script>
<template>
                        <Grid ColumnNum="4">
                            <GridItem>
                                {{
                                    icon: () => <img src={caravg}></img>,
                                    default: () => <div>整车零售查询</div>,
                                }}
                            </GridItem>
                            <GridItem>
                                {{
                                    icon: () => <img src={cartotalavg}></img>,
                                    default: () => <div>整车零售开单</div>,
                                }}
                            </GridItem>
                        </Grid>

<template/>

横排个数

传入ColumnNum来控制横排的菜单个数

 <Grid ColumnNum="3">
                            <GridItem>
                                {{
                                    icon: () => <img src={caravg}></img>,
                                    default: () => <div>整车零售查询</div>,
                                }}
                            </GridItem>
                            <GridItem>
                                {{
                                    icon: () => <img src={cartotalavg}></img>,
                                    default: () => <div>整车零售开单</div>,
                                }}
                            </GridItem>
                            <GridItem>
                                {{
                                    icon: () => <img src={cartotalavg}></img>,
                                    default: () => <div>整车零售开单</div>,
                                }}
                            </GridItem>
                            <GridItem>
                                {{
                                    icon: () => <img src={cartotalavg}></img>,
                                    default: () => <div>整车零售开单</div>,
                                }}
                            </GridItem>
</Grid>

Api

GridItem Slots

名称	说明	参数
default	默认插槽，展示菜单文字信息	-
icon	icon插槽，菜单图标信息	img、svg

Tag 标签

基础用法

引入标签组件，dom中直接使用。

<script>
import Tag from './Tag';
</script>
<template>
      <Tag>Tag</Tag>
<template/>

类型

通过type的传值，控制标签的不同类型，默认为主要类型

                    <Tag type="plain" class="mr-3" color="#4E5969">
                        Tag
                    </Tag>
                    <Tag color="#EC4040" class="mr-3">
                        Tag
                    </Tag>
                    <Tag type="opaque" class="mr-3" color="#4E5969">
                        Tag
                    </Tag>

颜色

通过color的控制，来展示不同的颜色，默认为#FC7124

                    <Tag color="#EC4040" class="mr-3">
                        Tag
                    </Tag>
                    <Tag class="mr-3" color="#29BA17">
                        Tag
                    </Tag>
                    <Tag class="mr-3" color="#FC7124">
                        Tag
                    </Tag>
                    <Tag color="#F3B800" class="mr-3">
                        Tag
                    </Tag>
                    <Tag class="mr-3" color="#2690DC">
                        Tag
                    </Tag>
                    <Tag class="mr-3" color="#4E5969">
                        Tag
                    </Tag>

形状

round参数来控制Tag标签的形状，默认是方形，当round为true是圆形

                    <Tag round type="plain" color="#EC4040" class="mr-3">
                        Tag
                    </Tag>
                    <Tag round type="plain" class="mr-3" color="#29BA17">
                        Tag
                    </Tag>