zengzhiyao-ui

移动端基于Vue3的ui组件库

736

Install
`npm install zengzhiyao-ui`
Latest Version:	1.0.4 (Nov 22, 2024)
Vue:	3
License:	MIT
Last Updated:	Nov 22, 2024
Links:	npm

Maintainer: zengzhiyao

项目简介

一个基于Vite构建的Vue3移动端ui库

Discord Total Downloads Latest Release

项目使用

下载方式

npm i yadea-mui

在Vue项目中使用

main.js

import yadeaui from 'yadea-mui/es/index.mjs';//引入ui
import 'yadea-mui/es/style.css';//引入ui样式文件
import { createApp } from 'vue';
const app = createApp(App);
app.use(yadeaui);//注册组件

tailwind.congig.js配置

1 需要用插件的默认导出方法来封装tailwind的配置对象

const merge = require('yadea-mui/lib/plugin');//引入合主题插件
/** @type {import('tailwindcss').Config} */
module.exports = merge({
   
});

2 确保你的扫描策略扫描到依赖包

const animate = require('tailwindcss-animate');
const merge = require('yadea-mui/lib/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = merge({
    content: [
        './node_modules/yadea-mui/es/**/*.{js,mjs}', //扫描es下的所有类名
    ],
    plugins: [animate],
});

3 完整样例

const merge = require('yadea-mui/lib/plugin'); //引入合主题插件
/** @type {import('tailwindcss').Config} */
module.exports = merge({
    content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
        './node_modules/yadea-mui/es/**/*.{js,mjs}', //扫描es下的所有类名
    ],
    theme: {
        extend: {},
    },
    plugins: [],
});

Button 按钮

按钮类型

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

    <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
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>
     <CheckboxGroup v-model="checkList" row direction="horizontal">
            <Checkbox class="flex-1" value="1">选项内容</Checkbox >
            <Checkbox class="flex-1" value="2">选项内容</Checkbox >
      </CheckboxGroup >
</template>

禁用状态

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

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

水平排列

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

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

右勾选

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

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

限制最大可选数

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

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

自定义形状

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

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

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>

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>

API

props

参数	说明	类型	默认值
color	标签颜色	string	`#FC7124`
type	标签类型，默认主要标签，可选值plain，opaque	string	--
round	是否圆形	boolean	false

基础用法

引入导航栏组件，在默认插槽里面是我们的导航栏名称

<script>
import NavBar from './NavBar'
<script/>
<template>  
     <NavBar class="mb-4">
      导航栏
     </NavBar> 
<template/>

操作栏

在NavBar 标签添加action属性，增加行为栏，通过action 插槽来增加行为栏插槽icon来定义右侧图标

       <NavBar action>
               <template #action>
                 操作
               </template>
               <template #icon>
                 <img src={searchsvg}></img>
               </template>
     </NavBar>

多tabs标签

传入tabbars数组，其中定义标签的value和lable，再传入第二个参数active，代表当前选择的标签项

<script setup>
import {ref} form 'vue';
let tarbarsList=ref([
                            { value: '1', lable: '春天' },
                            { value: '2', lable: '夏天' },
                            { value: '3', lable: '秋天' },
                        ]);
let active=ref(2"");
let TarbarsClick=(item) => {
                            console.log('点击了', item);
                        };
<script/>                  
                    
                    <NavBar
                        tabbars=tarbarsList
                        active=active
                        @TarbarsClick=TarbarsClick
                    >
                    </NavBar>

API

props

参数	说明	类型	默认值
action	是否有行为栏	Boolean	false
tabbars	多标签数组，[{value:"1",lable:"标签1"}]	Array	--
active	当前选中的标签	String	--

event

事件名	说明	回调参数
TarbarsClick	多标签导航栏点击标签事件	{value: string,lable:stying}
ClickLeft	点击左边返回图标事件	--

slots

名称	说明	参数
default	默认插槽，展示导航栏文字信息	-
icon	icon插槽，在行为栏下的图标	img、svg
action	文字插槽，在行为栏下的文字（操作）	text

Tab 选项卡

基础用法

引入tabs、tab组件，tabs组件的default-vlaue作为默认选中的值，Tab 的title作为标题，Tab 的内容则是内容区域的主要内容。

<script>
import Tab from './Tab';
import Tabs from './Tabs';
<script/>
<template>  
  <Tabs default-vlaue="标题3">
                            <Tab title="标题1"> 我是内容1</Tab>
                            <Tab title="标题2"> 我是内容2</Tab>
                            <Tab title="标题3"> 我是内容3</Tab>
                            <Tab title="标题4"> 我是内容4</Tab>
                            <Tab title="标题5"> 我是内容5</Tab>
   </Tabs>
<template/>

选项卡类型

选项卡主要分为以下五大类：默认default、均分around、标签label、按钮button、垂直方向vertical，用法如下

  <!-- 均分选项卡-水平 将类型设置为around，每一个选项卡均分剩余的部分。 -->
        <Tabs type="around" default-vlaue="标题3">
            <Tab title="标题1"> 我是内容1</Tab>
            <Tab title="标题2"> 我是内容2</Tab>
            <Tab title="标题3"> 我是内容3</Tab>
            <Tab title="标题4"> 我是内容4</Tab>
            <Tab title="标题5"> 我是内容5</Tab>
        </Tabs>
        <!-- 标签式选项卡-水平 将类型设置为label，每一个选项卡的样式为标签形式 -->
        <Tabs type="label" default-vlaue="标题3">
            <Tab title="标题1"> 我是内容1</Tab>
            <Tab title="标题2"> 我是内容2</Tab>
            <Tab title="标题3"> 我是内容3</Tab>
            <Tab title="标题4"> 我是内容4</Tab>
            <Tab title="标题5"> 我是内容5</Tab>
        </Tabs>
        <!-- 按钮选项卡-水平 button,选中的标签卡和按钮类似 -->
        <Tabs type="button" default-vlaue="标题3">
            <Tab title="标题1"> 我是内容1</Tab>
            <Tab title="标题2"> 我是内容2</Tab>
            <Tab title="标题3"> 我是内容3</Tab>
            <Tab title="标题4"> 我是内容4</Tab>
            <Tab title="标题5"> 我是内容5</Tab>
        </Tabs>

        <!-- vertical 将类型设为vertical，将选项卡设置为垂直方向 -->
        <Tabs type="vertical" default-vlaue="标题3">
            <Tab title="标题1"> 我是内容1</Tab>
            <Tab title="标题2"> 我是内容2</Tab>
            <Tab title="标题3"> 我是内容3</Tab>
            <Tab title="标题4"> 我是内容4</Tab>
            <Tab title="标题5"> 我是内容5</Tab>
        </Tabs>

Api

TabsProps

参数	说明	类型	默认值
defaultVlaue	当前标签默认值，对应tab的title	string	--
type	选项卡类型，可选值有默认default、均分around、标签label、按钮button、垂直方向vertical	string	default

TabProps

参数	说明	类型	默认值
title	选项卡的标题	string	--

Input 输入框

基础用法

引入input组件，在Vue中使用

<script>
import Input from './Input';
</script>
<template>
    <span>基础样式</span>
    <Input v-model="value" label="字段名称" placeholder="请输入"></Input>
    <Input v-model="value" label="字段名称" required placeholder="请输入"></Input>
    <Input v-model="value1" label="字段名称" required clearable placeholder="请输入"></Input>
</template>

禁用输入框

通过 readonly 将输入框设置为只读状态，通过 disabled 将输入框设置为禁用状态。

    <span>禁用样式</span>
    <Input v-model="value" label="字段名称" disabled placeholder="请输入"></Input>
    <Input v-model="value" label="字段名称" readonly placeholder="请输入"></Input>

必填星号

设置 required 属性来展示必填星号。

<span>基础样式</span>
<Input v-model="value" label="字段名称" required  placeholder="请输入"></Input>
<Input v-model="value" label="字段名称" required placeholder="请输入"></Input>

文本框

textarea

设置 textarea 后文本输入的由原来的输入框框变成文本框。

 <Input v-model="value" label="字段名称1" textarea  placeholder="请输入"></Input>

显示字数统计

设置 maxlength 和 textarea 属性后会在底部显示字数统计。

 <Input v-model="value" label="字段名称1" textarea :maxlength="50" placeholder="请输入"></Input>

自适应文本高度

设置 autosize 属性和textarea 后文本输入的时候自适应文本高度。

 <Input v-model="value" label="字段名称1" textarea autosize  :maxlength="50" placeholder="请输入"></Input>

清空输入内容

clearable 属性添加可清空输入内容

     <Input clearable required v-model="valueicon" label="字段名称" placeholder="请输入">
         
    </Input>

图标按钮插槽

action插槽来添加图标、按钮等操作栏

     <Input clearable required v-model="valueicon" label="字段名称" placeholder="请输入">
                <template #action>
                    
                </template>
            </Input>

输入校验

trigger属性控制什么时候校验，change为输入值改变并且失焦时候校验，默认失焦校验（blur）

通过rules数组传入Zod校验规则

 <Input
                v-model="value"
                trigger="change"
                :rules="[
                    z.string().min(1, { message: 'Must be add' }),
                    z.string().min(5, { message: 'Must be 5 or more characters long' }),
                ]"
                required
                label="字段名称"
                placeholder="请输入"
            >

Api

props

支持所有原生Input属性和事件

参数	说明	类型	默认值
modelValue	当前输入框的值	string	--
label	标签文本	string	--
placeholder	输入框占位符文本	string	--
clearable	是否显示清除按钮	boolean	FALSE
rules	表单校验规则数组	array	[]
trigger	校验触发方式，可选值有 blur	string	blur
disabled	是否禁用输入框	boolean	FALSE
readonly	是否只读	boolean	FALSE
required	是否必填	boolean	FALSE
maxlength	输入框最大长度	number	null

Textarea 文本框

基础用法

引入Textarea 组件使用，可以得到一个文本输入框

<template>
        默认
        <Textarea class="p-3" placeholder="请输入您的备注" required></Textarea>
</template>
<script setup>

import Textarea from './Textarea';

defineOptions({
    name: 'UseTstxarea',
});
</script>
<style lang="less" scoped>
/* Your style code here */
</style>

只读和禁用

支持textarea的只读和禁用属性

  <Textarea v-model="value1" class="p-3" readonly placeholder="请输入您的备注" required></Textarea>
  <Textarea v-model="value1" class="p-3" disabled placeholder="请输入您的备注" required></Textarea>

文本高度

rows属性来调整文本的高度

  <Textarea v-model="value1" class="p-3" :row=5 readonly placeholder="请输入您的备注" required></Textarea>

输入校验

引入Zod来对输入的校验

    <Textarea
            :rules="[
                z.string().min(1, { message: 'Must be add' }),
                z.string().min(5, { message: 'Must be 5 or more characters long' }),
            ]"
            v-model="value4"
            class="p-3"
            placeholder="请输入您的备注"
            required
        ></Textarea>

Api

props

支持所有原生Input属性和事件

参数	说明	类型	默认值
modelValue	当前输入框的值	string	--
label	标签文本	string	--
placeholder	输入框占位符文本	string	--
rules	表单校验规则数组	array	[]
trigger	校验触发方式，可选值有 blur	string	blur
disabled	是否禁用输入框	boolean	FALSE
readonly	是否只读	boolean	FALSE
required	是否必填	boolean	FALSE
maxlength	输入框最大长度	number	null

Form

基础用法

<script>
import Form from './Form';
import { ref } from 'vue';
import { z } from 'zod';
import Input from '../input/Input';
const value = ref('');
const formRef = ref();
const submit = () => {
    formRef.value.Validate().then(()=>{
    //校验成功回调
    //发送网络请求
    }).catch(err=>console.log(err));
};
<script/>
<template>
            <Form ref="formRef">
                <Input
                    v-model="value"
                    :rules="[z.string().min(1, { message: 'Must be add' })]"
                    required
                    label="用户名"
                    placeholder="请输入"
                ></Input>
                <Input v-model="value2" placeholder="请输入" required label="密码"></Input>
                <Button size="lg" class="w-full" type="primary" @click="submit">主要提交</Button>
            </Form>
<template/>

API

event

事件名	说明	回调参数
Validate	校验form内所有表单项的zod规则	promise

Badge 徽标

基础用法

引入Badge 组件，将内容放在Badge 组件的子节点，Badge 组件会在子组件的右上方展示

content传入当前徽标的内容，当content为hot时，徽标为默认小圆点

<script setup>
import Badge from '../badge/Badge';
// Your script setup code here
</script>
<template>
     <Badge content="hot"> <div class="child"></div></Badge>
<template/>
<style lang="less" scoped>
/* Your style code here */
.child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    // background: #ffffff;

    border-radius: 4px;
}
</style>

徽标类型

徽标有default、rt、primary三种选项，default默认在元素右上角展示，rt在元素右边上方展示，primary时徽标为独立的个体

<script setup>
import Badge from '../badge/Badge';
// Your script setup code here
</script>
<template>
        default
     <Badge content="hot" type='default'> <div class="child"></div></Badge>
     <Badge content="hot" type='rt'> <div class="child"></div></Badge>
     <Badge content="hot" type='primary'> <div class="child"></div></Badge>
<template/>
<style lang="less" scoped>
/* Your style code here */
.child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    // background: #ffffff;

    border-radius: 4px;
}
</style>

Api

props

徽标的参数

参数	说明	类型	默认值
content	徽标内容	string	New
type	徽标类型，可选值有default、rt、primary	string	default

Dialog 对话框

基础用法

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。组件调用

<template>
    <Dialog
        title="弹窗标题"
        message="告知当前状态、信息和解决方法等内容。描述文案尽可能控制在三行内"
        v-model="show"
        confirmButtonText="主要操作"
    ></Dialog>
<template/>
<script setup>
import {ref} from 'vue'
let show=ref(true)
<script/>

函数调用

为了便于使用 Dialog，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的弹窗组件。

比如使用 showDialog 函数，调用后会直接在页面中渲染对应的弹出框。

import { showDialog } from '../dialog';
  showDialog({
        title: '弹窗标题',
        message: '告知当前状态、信息和解决方法等内容。描述文案尽可能控制在三行内',
        showCancelButton: true,
        confirmButtonText: '主要操作',
        cancelButtonText: '次要操作',
    })
        .then(() => {
            console.log('成功的回调');
        })
        .catch((error) => {
            console.log('Dialog error:', error);
        });

消息提示

用于提示一些消息，默认只包含一个确认按钮。

<template>
    <Dialog
        :show-confirm-button="true"
        title="弹窗标题"
        message="告知当前状态、信息和解决方法等内容。描述文案尽可能控制在三行内"
        v-model="show1"
        confirmButtonText="我知道了"
        :confirm="confirm"
    ></Dialog>
<template/>

消息确认

用于确认消息，默认包含确认和取消按钮。

    <Dialog
        :show-confirm-button="true"
        title="弹窗标题"
        message="告知当前状态、信息和解决方法等内容。描述文案尽可能控制在三行内"
        :show-cancel-button="true"
        v-model="show"
        confirmButtonText="主要操作"
        cancelButtonText="次要操作"
        :confirm="confirm"
    ></Dialog>

Api

props

参数	说明	类型	默认值
modelValue	控制对话框的显示与隐藏	Boolean	FALSE
title	对话框标题	String	''
message	对话框的消息内容	String	''
closeDialog	关闭对话框的回调函数	Function	() => {}
closeOnClickOverlay	点击遮罩层是否关闭对话框	Boolean	TRUE
showConfirmButton	是否显示确认按钮	Boolean	TRUE
confirmButtonText	确认按钮文本	String	'确定'
cancelButtonText	取消按钮文本	String	'取消'
showCancelButton	是否显示取消按钮	Boolean	FALSE
confirm	确认按钮点击时的回调函数	Function	() => {}
cancel	取消按钮点击时的回调函数	Function	() => {}

ActionSheet

基础用法

引入ActionSheet组件，通过v-model绑定ref对象来控制动作面板的显示与隐藏

 <template>
    <Button class="mb-2" @click="showaction">基本用法</Button>
    <ActionSheet
        v-model="show"
        :options="[
            { value: '1', label: '选项一' },
            { value: '2', label: '选项二' },
            { value: '3', label: '选项三' },
            { value: '4', label: '选项四' },
        ]"
        @select="select"
        @cancel="onCancel"
    ></ActionSheet>
  <template/>
  <script>
  import ActionSheet from '../actionsheet/ActionSheet';
  const show = ref(false);
  <script/>

取消删除确认

当传入cancel-text属性的时候，cancel-text有值的话取消选项会底部展示。确认和删除按钮，可以在选项中传递color来实现

    <ActionSheet
        v-model="show1"
        cancel-text="取消"
        :options="[
            { value: '1', label: '选项一' },
            { value: '2', label: '选项二' },
            { value: '3', label: '选项三' },
            { value: '4', label: '删除', color: '#F53F3F' },
            { value: '5', label: '确认', color: '#165DFF' }
        ]"
        @select="select"
        @cancel="onCancel"
    ></ActionSheet>

标题和标题描述

sub-title属性是标题的描述,title属性是标题

    <ActionSheet
        v-model="show5"
        sub-title="这是一行描述信息"
        title="这是一行标题文字"
        cancel-text="取消"
        :options="[{ value: '3', label: '确认', color: '#165DFF' }]"
        @select="select"
    ></ActionSheet>

徽标

options中的badge属性会让整个对话框的选项多会徽标，其中badge为hot时候，徽标是默认的小红点

    <ActionSheet
        v-model="show6"
        cancel-text="取消"
        :options="[
            { value: '1', label: '选项一', badge: 'hot' },
            { value: '2', label: '选项二', badge: '2' },
            { value: '3', label: '选项三', badge: '99+' },
            { value: '4', label: '选项四', badge: '推荐' },
        ]"
        @select="select"
        @cancel="onCancel"
    ></ActionSheet>

分享面板

组件的type选为share的时候，options需要传入value和label并且还需要传入图标，作为一个分享面板

    <ActionSheet
        v-model="show7"
        title="分享到"
        cancel-text="取消"
        type="share"
        :options="[
            { value: '4', label: '微信', img: wchart },
            { value: '2', label: '朋友圈', img: friendspyq },
            { value: '3', label: '微博', img: wb },
            { value: '1', label: 'QQ', img: qqIcon },
            { value: '1', label: 'QQ', img: qqIcon },
            { value: '1', label: 'QQ', img: qqIcon },
            { value: '1', label: 'QQ', img: qqIcon },
            { value: '4', label: '更多', img: moreicon },
        ]"
        @select="select"
        @cancel="onCancel"
    ></ActionSheet>

Api

Props

参数	说明	类型	默认值
modelvalue	控制显示/隐藏	boolean	flase
options	可选项列表	array	[]
canceltext	取消按钮文本	string	-
title	标题	string	-
subtitle	副标题	string	-
color	颜色。支持所有格式的颜色	string	-
type	类型，可选值为share，当type为share的时候，动作面板为分享面板	string	default

options

参数	说明	类型	默认值
value	动作面板的选项的值	string	-
label	动作面板选项的label	string	-
icon	动作面板icon图片	string	-
color	选项颜色	string	-
img	分享面板时候的图标	{}	-

Version History

Version	Released	Vue	License
1.0.4	Nov 22, 2024	^3.5.12	MIT
1.0.3	Oct 24, 2024	^3.4.21	MIT
1.0.2	Oct 14, 2024	^3.4.21	MIT
1.0.1	Oct 14, 2024	^3.4.21	MIT
1.0.0	Oct 14, 2024	^3.4.21	MIT
0.0.24	Oct 14, 2024	^3.4.21	MIT
0.0.23	Oct 9, 2024		MIT
0.0.22	Oct 9, 2024		MIT
0.0.21	Oct 9, 2024		MIT
0.0.20	Oct 9, 2024		MIT
0.0.19	Oct 9, 2024		MIT
0.0.18	Oct 9, 2024	^3.4.21
0.0.17	Oct 9, 2024	^3.4.21
0.0.16	Oct 9, 2024	^3.4.21
0.0.15	Oct 9, 2024	^3.4.21
0.0.14	Oct 9, 2024	^3.4.21
0.0.13	Oct 9, 2024	^3.4.21
0.0.12	Oct 9, 2024	^3.4.21
0.0.11	Oct 9, 2024	^3.4.21
0.0.10	Oct 9, 2024	^3.4.21
0.0.9	Oct 9, 2024	^3.4.21
0.0.8	Oct 9, 2024	^3.4.21
0.0.7	Oct 9, 2024	^3.4.21
0.0.6	Oct 9, 2024	^3.4.21
0.0.5	Oct 9, 2024	^3.4.21
0.0.4	Oct 9, 2024	^3.4.21
0.0.3	Oct 9, 2024	^3.4.21
0.0.2	Oct 9, 2024	^3.4.21
0.0.1	Oct 9, 2024	^3.4.21
0.0.0	Oct 9, 2024	^3.4.21

zengzhiyao-ui

项目使用

Button 按钮

按钮类型

线框按钮

禁用状态

加载状态

图标按钮

按钮尺寸

API

Button Props

ButtonGroup 按钮组

更多按钮

按钮布局调整

Slot

Radio 单选框

基础用法

垂直排列

禁用状态

按钮类型

右勾选

API

Radio props

Radio Group

RadioGroup Events

Switch滑块

基础用法

禁用状态

文字展示

API

Switch props

Checkbox 多选框

基础用法

禁用状态

水平排列

右勾选

限制最大可选数

自定义形状

API

Checkbox Group Props

Checkbox Props

Checkbox Group Events

Divider 分割线

基础用法

展示文本

Layout 布局

基础用法

多个卡片

Space 间距

基础用法

间距大小

方向

API

Props

Grid 宫格

基础用法

横排个数

GridItem Slots

Tag 标签

基础用法

类型

颜色

形状

API

props

NavBar 导航栏

基础用法

操作栏

多tabs标签

API

props

event

slots

Tab 选项卡

基础用法

选项卡类型

Api

TabsProps

TabProps

Input 输入框