(component): [tag]新增 tag 组件

This commit is contained in:
sight 2022-09-16 00:36:09 +08:00
parent a3196e597a
commit 106aadf788
4 changed files with 26 additions and 17 deletions

View File

@ -90,6 +90,7 @@ import LayCascader from "./component/cascader/index";
import LayAffix from "./component/affix/index"; import LayAffix from "./component/affix/index";
import LaySpace from "./component/space/index"; import LaySpace from "./component/space/index";
import LayTag from "./component/tag/index"; import LayTag from "./component/tag/index";
import LayTagInput from "./component/tagInput/index";
import LayConfigProvider from "./provider"; import LayConfigProvider from "./provider";
import { InstallOptions } from "./types"; import { InstallOptions } from "./types";
@ -178,6 +179,7 @@ const components: Record<string, Plugin> = {
LayAffix, LayAffix,
LaySpace, LaySpace,
LayTag, LayTag,
LayTagInput,
}; };
const install = (app: App, options?: InstallOptions): void => { const install = (app: App, options?: InstallOptions): void => {
@ -273,6 +275,7 @@ export {
LayAffix, LayAffix,
LaySpace, LaySpace,
LayTag, LayTag,
LayTagInput,
install, install,
}; };

View File

@ -24,7 +24,7 @@
</lay-dropdown-menu> </lay-dropdown-menu>
</template> </template>
</lay-dropdown> </lay-dropdown>
<lay-dropdown updateAtScroll popupContainer=".layui-body"> <lay-dropdown popupContainer=".layui-body>div">
<lay-button type="primary">下拉菜单</lay-button> <lay-button type="primary">下拉菜单</lay-button>
<template #content> <template #content>
<lay-dropdown-menu> <lay-dropdown-menu>

View File

@ -4,13 +4,13 @@
::: title 基本介绍 ::: title 基本介绍
::: :::
::: describe 标签组件 ::: describe 标签组件
::: :::
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 标签的基本用法 ::: demo 标签的基本用法
<template> <template>
<lay-space size="md"> <lay-space size="md">
@ -29,7 +29,7 @@
::: title 标签尺寸 ::: title 标签尺寸
::: :::
::: demo 通过 size 属性控制标签尺寸 ::: demo 通过 size 属性控制标签尺寸
<template> <template>
<lay-space direction="vertical" size="md"> <lay-space direction="vertical" size="md">
@ -125,7 +125,7 @@
::: title 标签颜色 ::: title 标签颜色
::: :::
::: demo 标签颜色 ::: demo 标签颜色, 通过 color 属性自定义颜色
<template> <template>
<lay-space direction="vertical" size="md"> <lay-space direction="vertical" size="md">
@ -209,7 +209,7 @@ const COLORS = [
::: title 图标插槽 ::: title 图标插槽
::: :::
::: demo 通过插槽自定义图标 ::: demo 通过插槽自定义图标
<template> <template>
<lay-space size="md"> <lay-space size="md">
@ -252,7 +252,7 @@ const COLORS = [
::: title 动态编辑 ::: title 动态编辑
::: :::
::: demo 标签的基本用法。 ::: demo
<template> <template>
{{ tagData }} {{ tagData }}
@ -341,15 +341,15 @@ export default {
| 属性 | 描述 | 类型 | 默认值 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------ | ------ | ------ | | ----------- | -------- | ------ | ------ | ------ |
| type | 标签类型 | string | -| `primary` `normal` `warm` `danger` | type | 标签类型 | `string` | -| `primary` `normal` `warm` `danger`
| size | 标签大小 | string | md | `lg` `md` `sm` `xs`| | size | 标签大小 |`string` | `md` | `lg` `md` `sm` `xs`|
| color | 自定义标签颜色 | string | -| - | | color | 自定义标签颜色 | `string` | -| - |
| bordered | 是否显示边框 | boolean | `true` | `true` `false`| | bordered | 是否显示边框 | `boolean` | `true` | `true` `false`|
| closable | 是否可关闭 | boolean | false | `true` `false`| | closable | 是否可关闭 | `boolean` | `false` | `true` `false`|
| variant | 标签风格 | string | `dark` | `dark` `light` `plain`| | variant | 标签风格 | `string` | `dark` | `dark` `light` `plain`|
| disabled | 禁用标签 | boolean | false | `true` `false`| | disabled | 禁用标签 | `boolean` | `false` | `true` `false`|
| shape | 标签类型 | string | square | `square` `round`| | shape | 标签形状 | `string` | `square` | `square` `round`|
| maxWidth | 标签最大宽度 | string| -- | --| | maxWidth | 标签最大宽度 | `string`| -- | --|
::: :::
@ -370,7 +370,7 @@ export default {
:::table :::table
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
|------ |----------|-----------| |------ |----------|-----------|
| close | 关闭时触发 | e: MouseEvent | | close | 点击关闭图标时触发 | (e: MouseEvent) |
::: :::
::: contributor tag ::: contributor tag

View File

@ -383,6 +383,12 @@ const menus = [
subTitle: "affix", subTitle: "affix",
path: "/zh-CN/components/affix", path: "/zh-CN/components/affix",
}, },
{
id: 110,
title: "标签",
subTitle: "tag",
path: "/zh-CN/components/tag",
},
], ],
}, },
{ {