node_kefu_uniapp/pages/demo/basic/button.vue

<template>
	<cl-page :padding="20">
		<view class="page-demo-button">
			<cl-card label="基础用法">
				<cl-row :gutter="20">
					<cl-col :span="8">
						<cl-button fill @tap="onTap">默认</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="primary" fill>主要</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="success" fill>成功</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="error" fill>失败</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="warning" fill>警告</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="info" fill>信息</cl-button>
					</cl-col>
				</cl-row>
			</cl-card>

			<cl-card label="朴素">
				<cl-row :gutter="20">
					<cl-col :span="8">
						<cl-button type="primary" plain fill>主要</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="success" plain fill>成功</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="error" plain fill>失败</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="warning" plain fill>警告</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="info" plain fill>信息</cl-button>
					</cl-col>
				</cl-row>
			</cl-card>

			<cl-card label="不同尺寸">
				<cl-button size="small">小</cl-button>
				<cl-button size="default">默认</cl-button>
				<cl-button size="large">大</cl-button>
				<cl-button :height="90" :width="200" :font-size="34">90*200</cl-button>
			</cl-card>

			<cl-card label="图标">
				<cl-button icon="cl-icon-search">搜索</cl-button>
				<cl-button icon="cl-icon-chart-bar">统计</cl-button>
			</cl-card>

			<cl-card label="圆角">
				<cl-button type="primary" round>默认</cl-button>
				<cl-button round>默认</cl-button>
			</cl-card>

			<cl-card label="加载中">
				<cl-row :gutter="20">
					<cl-col :span="8">
						<cl-button loading fill @tap="onTap">默认</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="primary" fill loading>主要</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="success" fill loading>成功</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="error" fill loading>失败</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="warning" fill loading>警告</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="info" fill loading>信息</cl-button>
					</cl-col>
				</cl-row>
			</cl-card>

			<cl-card label="禁用">
				<cl-row :gutter="20">
					<cl-col :span="8">
						<cl-button disabled fill @tap="onTap">默认</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="primary" fill disabled>主要</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="success" fill disabled>成功</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="error" fill disabled>失败</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="warning" fill disabled>警告</cl-button>
					</cl-col>
					<cl-col :span="8">
						<cl-button type="info" fill disabled>信息</cl-button>
					</cl-col>
				</cl-row>
			</cl-card>

			<cl-card label="没有边框">
				<cl-button :border="false">默认</cl-button>
			</cl-card>

			<cl-card label="自定义颜色">
				<cl-button :border="false" color="#ffffff" background-color="#008000"
					>默认</cl-button
				>
				<cl-button color="#008000" plain>朴素</cl-button>
			</cl-card>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { useUi } from "/$/cool-ui";

const ui = useUi();

function onTap() {
	ui.showToast("点我干嘛");
}
</script>

<style lang="scss">
.page-demo-button {
	.cl-col {
		padding-bottom: 20rpx;
	}
}
</style>