1.0.3 • Published 1 year ago

zengzhiyao-ui v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

前端组件化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 textstringsecondary
size尺寸，可选值为 sm md lgstringmd
icon左侧图标名称，等同于 vant-Icon 组件的name属性string-
plain是否为朴素按钮booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-

ButtonGroup 按钮组

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

更多按钮

通过插槽more传入更多按钮，按钮需要将type传为option。

   <ButtonGroup>
            <Button  :loading="loading" type="primary" @click="setiiii">主要按钮</Button>
            <Button size="md" type="primary">主按钮</Button>
            <Button size="md" type="primary">主按钮</Button>
            <template #more>
                <Button size="md" type="option">更多按钮1</Button>
                <Button size="md" type="option">更多按钮2</Button>
                <Button size="md" type="option">更多按钮3</Button>
                <Button size="md" type="option">更多按钮4</Button>
            </template>
   </ButtonGroup>

按钮布局调整

通过对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、tickstringcircle
label文本内容，通常为选项描述string-
disabled是否为禁用状态booleanfalse
col是否垂直样式booleanfalse
right是否有勾选（仅垂直样式有效）booleanfalse

Radio Group

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

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是否为禁用状态booleanfalse

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图标形状，可选值 horizontalstring-
direction排列方向，可选值 cyclestring-
disabled是否为禁用状态booleanfalse
max最大可选数（0为无限制）number0
right右勾选booleanfalse

Checkbox Props

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

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间距大小，单位dpstring8
row是否水平排列booleanfalse

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默认插槽，展示菜单文字信息-
iconicon插槽，菜单图标信息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>

API

props

参数说明类型默认值
color标签颜色string#FC7124
type标签类型，默认主要标签，可选值plain，opaquestring--
round是否圆形booleanfalse
@vitejs/plugin-vue@vitejs/plugin-vue-jsxclass-variance-authorityh5-templatelucide-vue-nextradix-vuetailwind-mergetailwindcss-animatevitevue
1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.0.24

1 year ago

0.0.23

1 year ago

0.0.22

1 year ago

0.0.21

1 year ago

0.0.20

1 year ago

0.0.19

1 year ago

0.0.18

1 year ago

0.0.17

1 year ago

0.0.16

1 year ago

0.0.15

1 year ago

0.0.14

1 year ago

0.0.13

1 year ago

0.0.12

1 year ago

0.0.11

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago