theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'next' of https://gitee.com/layui/layui-vue into next

Browse Source
This commit is contained in:
就眠儀式 2022-09-04 02:19:04 +08:00
commit f5bfb177eb
4 changed files with 68 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
package/component/src/component/tag/index.less
View File

@ -9,16 +9,16 @@
gray: #808080; gray: #808080;
} }
@tag-size-default: 24px; @tag-size-default: 28px;
@tag-size-default-font-size: 12px; @tag-size-default-font-size: 14px;
@tag-size-lg: @tag-size-default + 2px; @tag-size-lg: @tag-size-default + 4px;
@tag-size-md: @tag-size-default; @tag-size-md: @tag-size-default;
@tag-size-sm: @tag-size-default - 2px; @tag-size-sm: @tag-size-default - 4px;
@tag-size-xs: @tag-size-default - 2px * 2; @tag-size-xs: @tag-size-default - 4px * 2;
@tag-size-lg-font-size: @tag-size-default-font-size + 2px; @tag-size-lg-font-size: @tag-size-default-font-size;
@tag-size-md-font-size: @tag-size-default-font-size; @tag-size-md-font-size: @tag-size-default-font-size;
@tag-size-sm-font-size: @tag-size-default-font-size - 2px; @tag-size-sm-font-size: @tag-size-default-font-size - 2px;
@tag-size-xs-font-size: @tag-size-default-font-size - 2px * 2; @tag-size-xs-font-size: @tag-size-default-font-size - 2px;
@tag-border-width: 1px; @tag-border-width: 1px;
.layui-tag { .layui-tag {
@ -27,8 +27,8 @@
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
height: @tag-size-md; height: @tag-size-md;
line-height: @tag-size-md - @tag-border-width * 2; line-height: @tag-size-md;
padding: 0 6px; padding: 0 8px;
font-size: @tag-size-md-font-size; font-size: @tag-size-md-font-size;
font-weight: 500; font-weight: 500;
color: currentColor; color: currentColor;
@ -37,18 +37,6 @@
border-color: transparent; border-color: transparent;
border-radius: var(--global-border-radius); border-radius: var(--global-border-radius);
&-checkable {
cursor: pointer;
}
&-checkable:hover {
opacity: 0.7;
}
&-checked {
background-color: darken(red, 10%) !important;
}
&-icon { &-icon {
margin-right: 4px; margin-right: 4px;
} }
@ -93,46 +81,46 @@
&-size-lg { &-size-lg {
height: @tag-size-lg; height: @tag-size-lg;
font-size: @tag-size-lg-font-size; font-size: @tag-size-lg-font-size;
line-height: @tag-size-lg - @tag-border-width * 2; line-height: @tag-size-lg;
.layui-icon { .layui-icon {
font-size: @tag-size-lg-font-size - 2px; font-size: @tag-size-lg-font-size;
} }
} }
&-size-md { &-size-md {
height: @tag-size-md; height: @tag-size-md;
font-size: @tag-size-md-font-size; font-size: @tag-size-md-font-size;
line-height: @tag-size-md - @tag-border-width * 2; line-height: @tag-size-md;
.layui-icon { .layui-icon {
font-size: @tag-size-md-font-size - 2px; font-size: @tag-size-md-font-size;
} }
} }
&-size-sm { &-size-sm {
height: @tag-size-sm; height: @tag-size-sm;
font-size: @tag-size-sm-font-size; font-size: @tag-size-sm-font-size;
line-height: @tag-size-sm - @tag-border-width * 2; line-height: @tag-size-sm;
.layui-icon { .layui-icon {
font-size: @tag-size-sm-font-size - 2px; font-size: @tag-size-sm-font-size;
} }
} }
&-size-xs { &-size-xs {
height: @tag-size-xs; height: @tag-size-xs;
font-size: @tag-size-xs-font-size; font-size: @tag-size-xs-font-size;
line-height: @tag-size-xs - @tag-border-width * 2; line-height: @tag-size-xs;
.layui-icon { .layui-icon {
font-size: @tag-size-xs-font-size - 2px; font-size: @tag-size-xs-font-size;
} }
} }
& &-close-icon { & &-close-icon {
margin-left: 4px; margin-left: 4px;
font-size: @tag-size-default-font-size - 2px; font-size: @tag-size-default-font-size;
.layui-icon { .layui-icon {

48
package/document-component/src/document/zh-CN/components/dropdown.md
View File

@ -532,24 +532,24 @@ import { ref, computed } from 'vue'
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------- | -------- | --------------- | | ------------------- | ------------------------------------------------- | --------- | -------- | ----------------------------------------------- |
| visible | 下拉面板是否可见 |`true` `false`| | visible | 下拉面板是否可见 | `boolean` | `true` | `true` `false` |
| trigger | 触发方式,类型 `string` 或 trigger 数组 | `click` `hover` `focus` `contextMenu` | | trigger | 触发方式,类型 `string` 或 trigger 数组 | `strine` `string[]` | `click` | `click` `hover` `focus` `contextMenu` |
| disabled | 是否禁用触发 | `true` `false` | | disabled | 是否禁用触发 | `boolean` | `false` | `true` `false` |
| placement | 下拉面板位置 |`top` `bottom` `right` `left` `*-start` `*-end`| | placement | 下拉面板位置 | `string` | `bottom` | `top` `bottom` `right` `left` `*-start` `*-end` |
| autoFitPosition| 是否自动调整下拉面板位置，默认 `true` |`true` `false` | | autoFitPosition | 是否自动调整下拉面板位置 | `boolean` | `true` | `true` `false` |
| autoFitWidth | 是否将下拉面板宽度设置为触发器宽度, 默认 `false` |`true` `false` | | autoFitWidth | 是否将下拉面板宽度设置为触发器宽度 | `boolean` | `false` | `true` `false` |
| autoFitMinWidth | 是否将下拉面板最小宽度设置为触发器宽度, 默认 `true` |`true` `false` | | autoFitMinWidth | 是否将下拉面板最小宽度设置为触发器宽度 | `boolean` | `true` | `true` `false` |
| updateAtScroll | 是否在容器滚动时更新下拉面板的位置,默认 `false` | `true` `false` | | updateAtScroll | 是否在容器滚动时更新下拉面板的位置 | `boolean` | `false` | `true` `false` |
| autoFixPosition | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置,<br>面板尺寸变化参见级联选择器,默认 `true` |`true` `false` | | autoFixPosition | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置 | `boolean` | `true` | `true` `false` |
| clickToClose | 是否在点击触发器时关闭面板,默认 `true` |`true` `false`| | clickToClose | 是否在点击触发器时关闭面板 | `boolean` | `true` | `true` `false` |
| blurToClose | 是否在触发器失去焦点时关闭面板,默认 `true` |`true` `false`| | blurToClose | 是否在触发器失去焦点时关闭面板 | `boolean` | `true` | `true` `false` |
| clickOutsideToClose| 是否点击外部关闭下拉面板,默认 `true`|`true` `false`| | clickOutsideToClose | 是否点击外部关闭下拉面板 | `boolean` | `true` | `true` `false` |
| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| | contentOffset | 下拉面板距离触发器的偏移距离 | `string` | `2px` | - |
| mouseEnterDelay | mouseEnter 事件延迟触发的时间, trigger hover 有效 | - | | mouseEnterDelay | mouseEnter 事件延迟触发的时间, trigger hover 有效 | `number` | `150` | - |
| mouseLeaveDelay | mouseLeave 事件延迟触发的时间, trigger hover 有效| - | | mouseLeaveDelay | mouseLeave 事件延迟触发的时间, trigger hover 有效 | `number` | `150` | - |
| focusDelay| focus 事件延迟触发的时间, trigger focus 有效 | - | | focusDelay | focus 事件延迟触发的时间, trigger focus 有效 | `number` | `150` | - |
::: :::
@ -596,12 +596,12 @@ import { ref, computed } from 'vue'
::: table ::: table
| 插槽 | 描述 | 参数 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------- | -------- | ------ | | ------------- | -------------------------------------- | --------- | -------- | ----------------------------------------------- |
| trigger | 触发方式,类型 `string` 或 trigger 数组,默认 hover | `click` `hover` `focus` `contextMenu` | | trigger | 触发方式,类型 `string` 或 trigger 数组 | `strine` `string[]` | `click` | `click` `hover` `focus` `contextMenu` |
| disabled | 是否禁用触发 | `true` `false` | | disabled | 是否禁用触发 | `boolean` | `false` | `true` `false` |
| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-start` `*-end`| | placement | 下拉面板位置 | `string` | `bottom` | `top` `bottom` `right` `left` `*-start` `*-end` |
| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| | contentOffset | 下拉面板距离触发器的偏移距离，默认 2 | `string` | 2px | - |
::: :::

28
package/document-component/src/document/zh-CN/components/tab.md
View File

@ -386,15 +386,15 @@ export default {
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------ | ------------------------------------ | ----------------------------------------- | | ------------------- | -------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------- |
| v-model | 当前激活 | -- | | v-model | 当前激活 | `string` | - | - |
| type | 主题样式 | -- | | type | 主题样式 | `string` | - | - |
| tabPosition | 位置 | `top` `bottom` `left` `right` | | tabPosition | 位置 | `string` | `bottom` | `top` `bottom` `left` `right` |
| allow-close | 允许关闭 | `true` `false` | | allow-close | 允许关闭 | `boolean` | `false` | `true` `false` |
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 | | before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 | - | - |
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 | | before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 | - | - |
| activeBarTransition| 是否开启 activeBar 动画,仅 brief 有效,默认 `false`| `true` `false`| | activeBarTransition | 是否开启 activeBar 动画,仅 brief 有效,默认 `false` | `boolean` | `false` | `true` `false` |
::: :::
@ -415,11 +415,11 @@ export default {
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -------- | -------- | ------ | | -------- | --------------------- | ---------------- | ------- | -------------- |
| id | 唯一标识 | -- | | id | 唯一标识 | `string` | - | - |
| title | 头部标题 | -- | | title | 头部标题,支持渲染函数 | `string` `vnode` | - | - |
| closable | 允许关闭 | -- | | closable | 允许关闭 | `boolean` | `false` | `true` `false` |
::: :::

24
package/document-component/src/document/zh-CN/components/tag.md
View File

@ -36,38 +36,38 @@
<lay-space direction="vertical" size="md"> <lay-space direction="vertical" size="md">
<lay-space size="md"> <lay-space size="md">
lg: lg:
<lay-tag size="lg">tag lg</lay-tag> <lay-tag size="lg">标签</lay-tag>
<lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>tag lg</lay-tag> <lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="lg" closable> <lay-tag size="lg" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag lg 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md"> <lay-space size="md">
md: md:
<lay-tag size="md">tag md</lay-tag> <lay-tag size="md">标签</lay-tag>
<lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>tag md</lay-tag> <lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="md" closable> <lay-tag size="md" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag md 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md"> <lay-space size="md">
sm: sm:
<lay-tag size="sm">tag sm</lay-tag> <lay-tag size="sm">标签</lay-tag>
<lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>tag sm</lay-tag> <lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="sm" closable> <lay-tag size="sm" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag sm 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md"> <lay-space size="md">
xs: xs:
<lay-tag size="xs">tag xs</lay-tag> <lay-tag size="xs">标签</lay-tag>
<lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>tag xs</lay-tag> <lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="xs" closable> <lay-tag size="xs" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag xs 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
</lay-space> </lay-space>