wk-view

Appearance

On this page

wkv-tag ​

标签，用于标记或分类。

用法 ​

html
<wkv-tag>Tag</wkv-tag>

Props ​

属性名类型默认值说明
typeStringprimaryTag 的类型，可选 primary success error warning info
effectStringlightTag 的主题，可选 dark light plain
colorString-自定义颜色
borderRadius[Number, String]8圆角值
noBorderBooleanfalse是否隐藏边框

Events ​

事件名事件说明函数签名参数说明
click点击事件() => void-

示例 ​

vue
<template>
	<view class="wkv-tag-example">
		<wk-section>类型：</wk-section>
		<wkv-tag type="primary">primary</wkv-tag>
		<wkv-tag type="success">success</wkv-tag>
		<wkv-tag type="error">error</wkv-tag>
		<wkv-tag type="warning">warning</wkv-tag>
		<wkv-tag type="info">info</wkv-tag>

		<wk-section>主题：</wk-section>
		<wkv-tag effect="dark" type="primary">primary</wkv-tag>
		<wkv-tag effect="dark" type="success">success</wkv-tag>
		<wkv-tag effect="dark" type="error">error</wkv-tag>
		<wkv-tag effect="dark" type="warning">warning</wkv-tag>
		<wkv-tag effect="dark" type="info">info</wkv-tag>
		<div style="height: 5px" />
		<wkv-tag effect="light" type="primary">primary</wkv-tag>
		<wkv-tag effect="light" type="success">success</wkv-tag>
		<wkv-tag effect="light" type="error">error</wkv-tag>
		<wkv-tag effect="light" type="warning">warning</wkv-tag>
		<wkv-tag effect="light" type="info">info</wkv-tag>
		<div style="height: 5px" />
		<wkv-tag effect="plain" type="primary">primary</wkv-tag>
		<wkv-tag effect="plain" type="success">success</wkv-tag>
		<wkv-tag effect="plain" type="error">error</wkv-tag>
		<wkv-tag effect="plain" type="warning">warning</wkv-tag>
		<wkv-tag effect="plain" type="info">info</wkv-tag>

		<wk-section>自定义颜色：</wk-section>
		<wkv-tag effect="dark" color="#12C9E7">#12C9E7</wkv-tag>
		<wkv-tag effect="dark" color="#F4BB07">#F4BB07</wkv-tag>
		<wkv-tag effect="dark" color="#2FC78B">#2FC78B</wkv-tag>
		<wkv-tag effect="dark" color="#7E4BFF">#7E4BFF</wkv-tag>
		<div style="height: 5px" />
		<wkv-tag effect="light" color="#12C9E7">#12C9E7</wkv-tag>
		<wkv-tag effect="light" color="#F4BB07">#F4BB07</wkv-tag>
		<wkv-tag effect="light" color="#2FC78B">#2FC78B</wkv-tag>
		<wkv-tag effect="light" color="#7E4BFF">#7E4BFF</wkv-tag>
		<div style="height: 5px" />
		<wkv-tag effect="plain" color="#12C9E7">#12C9E7</wkv-tag>
		<wkv-tag effect="plain" color="#F4BB07">#F4BB07</wkv-tag>
		<wkv-tag effect="plain" color="#2FC78B">#2FC78B</wkv-tag>
		<wkv-tag effect="plain" color="#7E4BFF">#7E4BFF</wkv-tag>

		<wk-section>无边框：</wk-section>
		<wkv-tag effect="dark" type="primary">primary</wkv-tag>
		<wkv-tag effect="dark" type="success">success</wkv-tag>
		<wkv-tag effect="dark" type="error">error</wkv-tag>
		<wkv-tag effect="dark" type="warning">warning</wkv-tag>
		<wkv-tag effect="dark" type="info">info</wkv-tag>
		<div style="height: 5px" />
		<wkv-tag effect="light" type="primary" no-border>primary</wkv-tag>
		<wkv-tag effect="light" type="success" no-border>success</wkv-tag>
		<wkv-tag effect="light" type="error" no-border>error</wkv-tag>
		<wkv-tag effect="light" type="warning" no-border>warning</wkv-tag>
		<wkv-tag effect="light" type="info" no-border>info</wkv-tag>
		<div style="height: 5px" />
		<wkv-tag effect="plain" type="primary" no-border>primary</wkv-tag>
		<wkv-tag effect="plain" type="success" no-border>success</wkv-tag>
		<wkv-tag effect="plain" type="error" no-border>error</wkv-tag>
		<wkv-tag effect="plain" type="warning" no-border>warning</wkv-tag>
		<wkv-tag effect="plain" type="info" no-border>info</wkv-tag>
	</view>
</template>
vue
<script setup lang="ts"></script>
scss
<style lang="scss">
.wkv-tag-example {
	padding: 20px;
}
</style>