按钮 Button ​

常用的基础组件之一

属性 ​

参数说明类型可选值默认值
size尺寸stringlarge medium small minimedium
disabled是否禁用状态boolean—false
circle是否圆形按钮boolean—false
round是否圆角按钮boolean—false
square是否正方形按钮boolean—false
buttonStyle按钮的样式object—null
textStyle按钮文字的样式object—null
iconStyle按钮图标的样式object—null
focusIconStyle按钮图标焦点状态的样式object—null
gradientBackground渐变背景object—null
gradientBackground焦点状态渐变背景object—null
enableFlexStyle是否启用FlexStyle(只在qt-list-view或者qt-gird-view生效)boolean—false
text按钮文字string—``
icon按钮图标string—null
focusIcon焦点状态按钮图标string—null
focusable是否可以获得焦点boolean—true
focusScale焦点放大倍数number—1.08
focusBorder焦点状态是否显示边框boolean—false

基础用法 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button text="默认"></qt-button>
</template>

不同尺寸 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		size="mini"
		class="text-button-class"
		text="超小"
	></qt-button>
	<qt-button
		size="small"
		class="text-button-class"
		text="小"
	></qt-button>
	<qt-button
		size="medium"
		class="text-button-class"
		text="中"
	></qt-button>
	<qt-button
		size="large"
		class="text-button-class"
		text="大"
	></qt-button>
</template>

自定义按钮样式 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		class="text-button-class"
		text="自定义按钮样式"
		:style="{backgroundColor: '#FF0022', height: '100px'}"
	>
	</qt-button>
</template>

禁用状态 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		disabled
		text="不可用"
	></qt-button>
</template>

圆角按钮 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		round
		text="圆角"
		class="text-button-class"
	></qt-button>
</template>

正方形按钮 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		square
		text="正方形"
		class="text-button-class"
	></qt-button>
</template>

渐变背景 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		size="medium"
		class="text-button-class"
		round
		text="渐变背景"
		:gradientFocusBackground="{
			colors: ['#10F5F5', '#AA79F0'],
			cornerRadius: 100,
			orientation: 3,
		}"
		:gradient-background="{
			colors: ['#FF2648', '#FF6F44'],
			cornerRadius: 100,
			orientation: 3,
		}"
	>
	</qt-button>
</template>

自定义文字样式 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		size="medium"
		disabled
		text="自定义文字样式"
		:text-style="{width: '100px', backgroundColor: '#FF8022', fontSize: '20px'}"
		class="text-button-class"
	></qt-button>
</template>

自定义按钮内容 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button style="width: 400px; background-color: green; margin: 20px">
		<qt-row>
			<span style="font-size: 20px; color: red">自定义内容1</span>
			<span style="font-size: 30px; color: #7415b1">自定义内容1</span>
		</qt-row>
	</qt-button>
</template>

自定义本地图标 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		size="medium"
		text="图标"
		:icon="require('../../../src/assets/add-circle.png')"
		:focusIcon="require('../../../src/assets/ashbin.png')"
		class="text-button-class"
	>
	</qt-button>
</template>

自定义网络图标 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		size="medium"
		text="网络图标"
		round
		icon="https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/03/30/78dbb25b-772e-4355-8e34-97d72c1d6954.png"
		focusIcon="https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/03/28/cc7ab76f-c813-4cf0-a671-b0c111e7a52f.png"
		class="text-button-class"
	>
	</qt-button>
</template>

带边框 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		:focus-border="true"
		size="medium"
		text="边框"
		class="text-button-class"
	>
	</qt-button>
</template>

自定义图标样式 ​

点击查看源码
vue
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>

<template>
	<qt-button
		size="large"
		text="自定义图标样式"
		:icon-style="{width: '50px', height: '50px'}"
		:focus-icon-style="{
			backgroundColor: '#FF9933',
			width: '20px',
			height: '20px',
		}"
		:icon="require('../../../src/assets/add-circle.png')"
		:focusIcon="require('../../../src/assets/ashbin.png')"
		class="text-button-class"
	>
	</qt-button>
</template>