vol-button 按钮
参数属性
| 属性 | 说明 | 类型 | 默认 |
|---|---|---|---|
| type | 颜色：primary、success、warning、error/danger、green、purple、pink、indigo、dark、default、info、gray | String | default |
| variant | 风格：空值实心、outline 描边、soft 柔和。也可写 type="outline-primary" / type="soft-success" | String | |
| plain | 描边（镂空），true 时等同 variant="outline" | Boolean | false |
| size | 尺寸：tiny、mini、small/sm、default/normal、large/lg | String | default |
| shape | 形状：空值圆角、circle 胶囊 | String | |
| block | 是否撑满父级宽度，false 为内容自适应 | Boolean | true |
| disabled | 禁用 | Boolean | false |
| loading | 显示加载中，加载时不可点击 | Boolean | false |
| icon | 左侧图标，uView 图标名，如 search、heart、star | String | |
| iconColor | 图标颜色，不传则跟随文字色 | String | |
| iconOnly | 纯图标按钮（正方形，不显示文字） | Boolean | false |
| text | 按钮文字，无插槽时使用 | String | |
| borderRadius | 圆角 | String | 8rpx |
| customStyle | 自定义样式，对象/字符串/数组 | Object/String/Array |
事件：@click
尺寸
<template>
<vol-button :block="false" size="large" type="primary">Large</vol-button>
<vol-button :block="false" type="primary">Default</vol-button>
<vol-button :block="false" size="small" type="primary">Small</vol-button>
<vol-button :block="false" size="mini" type="primary">Mini</vol-button>
</template>
颜色
<template>
<vol-button :block="false" type="primary">主要</vol-button>
<vol-button :block="false" type="success">成功</vol-button>
<vol-button :block="false" type="warning">警告</vol-button>
<vol-button :block="false" type="error">危险</vol-button>
<vol-button :block="false" type="green">绿色</vol-button>
<vol-button :block="false" type="purple">紫色</vol-button>
<vol-button :block="false" type="pink">粉色</vol-button>
<vol-button :block="false" type="indigo">靛蓝</vol-button>
<vol-button :block="false" type="dark">深色</vol-button>
<vol-button :block="false" type="default">默认</vol-button>
<vol-button :block="false" type="info">信息</vol-button>
</template>
描边、柔和、禁用、胶囊、加载、图标
<template>
<vol-button :block="false" type="primary" :plain="true">描边</vol-button>
<vol-button :block="false" type="success" variant="soft">柔和</vol-button>
<vol-button :block="false" type="primary" :disabled="true">禁用</vol-button>
<vol-button :block="false" type="primary" shape="circle">胶囊</vol-button>
<vol-button :block="false" type="primary" :loading="true">加载中</vol-button>
<vol-button :block="false" type="primary" icon="search">搜索</vol-button>
<vol-button :block="false" type="primary" icon="search" iconOnly></vol-button>
</template>
<script setup>
const btnClick = () => {
proxy.$toast('点击了按钮')
}
</script>