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;
}
@tag-size-default: 24px;
@tag-size-default-font-size: 12px;
@tag-size-lg: @tag-size-default + 2px;
@tag-size-default: 28px;
@tag-size-default-font-size: 14px;
@tag-size-lg: @tag-size-default + 4px;
@tag-size-md: @tag-size-default;
@tag-size-sm: @tag-size-default - 2px;
@tag-size-xs: @tag-size-default - 2px * 2;
@tag-size-lg-font-size: @tag-size-default-font-size + 2px;
@tag-size-sm: @tag-size-default - 4px;
@tag-size-xs: @tag-size-default - 4px * 2;
@tag-size-lg-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-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;
.layui-tag {
@ -27,8 +27,8 @@
vertical-align: middle;
box-sizing: border-box;
height: @tag-size-md;
line-height: @tag-size-md - @tag-border-width * 2;
padding: 0 6px;
line-height: @tag-size-md;
padding: 0 8px;
font-size: @tag-size-md-font-size;
font-weight: 500;
color: currentColor;
@ -37,18 +37,6 @@
border-color: transparent;
border-radius: var(--global-border-radius);
&-checkable {
cursor: pointer;
}
&-checkable:hover {
opacity: 0.7;
}
&-checked {
background-color: darken(red, 10%) !important;
}
&-icon {
margin-right: 4px;
}
@ -93,46 +81,46 @@
&-size-lg {
height: @tag-size-lg;
font-size: @tag-size-lg-font-size;
line-height: @tag-size-lg - @tag-border-width * 2;
line-height: @tag-size-lg;
.layui-icon {
font-size: @tag-size-lg-font-size - 2px;
font-size: @tag-size-lg-font-size;
}
}
&-size-md {
height: @tag-size-md;
font-size: @tag-size-md-font-size;
line-height: @tag-size-md - @tag-border-width * 2;
line-height: @tag-size-md;
.layui-icon {
font-size: @tag-size-md-font-size - 2px;
font-size: @tag-size-md-font-size;
}
}
&-size-sm {
height: @tag-size-sm;
font-size: @tag-size-sm-font-size;
line-height: @tag-size-sm - @tag-border-width * 2;
line-height: @tag-size-sm;
.layui-icon {
font-size: @tag-size-sm-font-size - 2px;
font-size: @tag-size-sm-font-size;
}
}
&-size-xs {
height: @tag-size-xs;
font-size: @tag-size-xs-font-size;
line-height: @tag-size-xs - @tag-border-width * 2;
line-height: @tag-size-xs;
.layui-icon {
font-size: @tag-size-xs-font-size - 2px;
font-size: @tag-size-xs-font-size;
}
}
& &-close-icon {
margin-left: 4px;
font-size: @tag-size-default-font-size - 2px;
font-size: @tag-size-default-font-size;
.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
| 属性 | 描述 | 可选值 |
| ------- | -------- | --------------- |
| visible | 下拉面板是否可见 |`true` `false`|
| trigger | 触发方式,类型 `string` 或 trigger 数组 | `click` `hover` `focus` `contextMenu` |
| disabled | 是否禁用触发 | `true` `false` |
| placement | 下拉面板位置 |`top` `bottom` `right` `left` `*-start` `*-end`|
| autoFitPosition| 是否自动调整下拉面板位置，默认 `true` |`true` `false` |
| autoFitWidth | 是否将下拉面板宽度设置为触发器宽度, 默认 `false` |`true` `false` |
| autoFitMinWidth | 是否将下拉面板最小宽度设置为触发器宽度, 默认 `true` |`true` `false` |
| updateAtScroll | 是否在容器滚动时更新下拉面板的位置,默认 `false` | `true` `false` |
| autoFixPosition | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置,<br>面板尺寸变化参见级联选择器,默认 `true` |`true` `false` |
| clickToClose | 是否在点击触发器时关闭面板,默认 `true` |`true` `false`|
| blurToClose | 是否在触发器失去焦点时关闭面板,默认 `true` |`true` `false`|
| clickOutsideToClose| 是否点击外部关闭下拉面板,默认 `true`|`true` `false`|
| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -|
| mouseEnterDelay | mouseEnter 事件延迟触发的时间, trigger hover 有效 | - |
| mouseLeaveDelay | mouseLeave 事件延迟触发的时间, trigger hover 有效| - |
| focusDelay| focus 事件延迟触发的时间, trigger focus 有效 | - |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------------- | ------------------------------------------------- | --------- | -------- | ----------------------------------------------- |
| visible | 下拉面板是否可见 | `boolean` | `true` | `true` `false` |
| trigger | 触发方式,类型 `string` 或 trigger 数组 | `strine` `string[]` | `click` | `click` `hover` `focus` `contextMenu` |
| disabled | 是否禁用触发 | `boolean` | `false` | `true` `false` |
| placement | 下拉面板位置 | `string` | `bottom` | `top` `bottom` `right` `left` `*-start` `*-end` |
| autoFitPosition | 是否自动调整下拉面板位置 | `boolean` | `true` | `true` `false` |
| autoFitWidth | 是否将下拉面板宽度设置为触发器宽度 | `boolean` | `false` | `true` `false` |
| autoFitMinWidth | 是否将下拉面板最小宽度设置为触发器宽度 | `boolean` | `true` | `true` `false` |
| updateAtScroll | 是否在容器滚动时更新下拉面板的位置 | `boolean` | `false` | `true` `false` |
| autoFixPosition | 是否在触发器或下拉面板尺寸变化时更新下拉面板位置 | `boolean` | `true` | `true` `false` |
| clickToClose | 是否在点击触发器时关闭面板 | `boolean` | `true` | `true` `false` |
| blurToClose | 是否在触发器失去焦点时关闭面板 | `boolean` | `true` | `true` `false` |
| clickOutsideToClose | 是否点击外部关闭下拉面板 | `boolean` | `true` | `true` `false` |
| contentOffset | 下拉面板距离触发器的偏移距离 | `string` | `2px` | - |
| mouseEnterDelay | mouseEnter 事件延迟触发的时间, trigger hover 有效 | `number` | `150` | - |
| mouseLeaveDelay | mouseLeave 事件延迟触发的时间, trigger hover 有效 | `number` | `150` | - |
| focusDelay | focus 事件延迟触发的时间, trigger focus 有效 | `number` | `150` | - |
:::
@ -596,12 +596,12 @@ import { ref, computed } from 'vue'
::: table
| 插槽 | 描述 | 参数 |
| ------- | -------- | ------ |
| trigger | 触发方式,类型 `string` 或 trigger 数组,默认 hover | `click` `hover` `focus` `contextMenu` |
| disabled | 是否禁用触发 | `true` `false` |
| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-start` `*-end`|
| contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | -------------------------------------- | --------- | -------- | ----------------------------------------------- |
| trigger | 触发方式,类型 `string` 或 trigger 数组 | `strine` `string[]` | `click` | `click` `hover` `focus` `contextMenu` |
| disabled | 是否禁用触发 | `boolean` | `false` | `true` `false` |
| placement | 下拉面板位置 | `string` | `bottom` | `top` `bottom` `right` `left` `*-start` `*-end` |
| contentOffset | 下拉面板距离触发器的偏移距离，默认 2 | `string` | 2px | - |
:::

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

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