yadea-mui
v0.0.7
Published
移动端基于Vue3的ui组件库
Downloads
6
Readme
项目简介
一个基于Vite构建的Vue3移动端ui库
项目使用
下载方式
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;
更多按钮
通过插槽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、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 |
NavBar 导航栏
基础用法
引入导航栏组件，在默认插槽里面是我们的导航栏名称
<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>
<img :src="scan" alt="" />
</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 | 分享面板时候的图标 | {} | - |