✨(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…
Reference in New Issue
Block a user