✨(component): [tag]新增 tag 组件
This commit is contained in:
		
							parent
							
								
									a3196e597a
								
							
						
					
					
						commit
						106aadf788
					
				@ -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,
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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
 | 
				
			||||||
 | 
				
			|||||||
@ -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",
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
    ],
 | 
					    ],
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  {
 | 
					  {
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user