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

This commit is contained in:
就眠儀式
2022-09-08 11:02:20 +08:00
5 changed files with 131 additions and 27 deletions

View File

@@ -389,11 +389,11 @@ export default {
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------------- | -------------------------------------------------- | ----------------------------------------- | -------- | ----------------------------- |
| v-model | 当前激活 | `string` | - | - |
| type | 主题样式 | `string` | - | - |
| type | 主题样式 | `string` | - | `brief` `card` |
| 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` 表示不进行切换 | - | - |
| before-close | 关闭之前的回调钩子函数,参数(`id`), `return false` 表示不进行关闭 | `Function` | - | - |
| before-leave | 切换标签之前的回调钩子函数, 参数(`id`), `return false` 表示不进行关闭 | `Function` | - | - |
| activeBarTransition | 是否开启 activeBar 动画,仅 brief 有效,默认 `false` | `boolean` | `false` | `true` `false` |
:::

View File

@@ -48,9 +48,35 @@ setup() {
<lay-button>tooltip</lay-button>
</lay-tooltip>
</template>
:::
::: title 外部控制
:::
::: demo
<template>
<lay-button @click="visible = !visible">{{visible ? '显示' : '隐藏'}}</lay-button>
<div style="padding: 100px">
<lay-tooltip position="right" content="时光都淡了,我还伴着你。" :visible="visible">
<lay-button>tooltip</lay-button>
</lay-tooltip>
</div>
</template>
<script>
import { ref,watch } from 'vue';
export default {
setup() {
const visible = ref(false)
return {
visible,
}
}
}
</script>
<style>
</style>
:::
::: title 显示位置
@@ -160,9 +186,10 @@ setup() {
| content | 显示内容 | -- |
| position | 显示位置 | `top`(默认值)、`bottom``left``right` |
| isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) |
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) ||
| isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` ||
| isAutoShow | 控制超出文本 `...` 时自动展示, 没有 `...` 时不展示 | `false`(默认值)、`true` ||
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) |
| isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` |
| isAutoShow | 控制超出文本 `...` 时自动展示, 没有 `...` 时不展示 | `false`(默认值)、`true` |
| visible | 控制显示/隐藏| `true` `false`|
:::

View File

@@ -1,7 +1,7 @@
::: title Visual Studio Code 插件
:::
::: describe layui-vue-helper 是 layui-vue 的开发增强工具,提供代码片段,自动补全,悬浮提示功能
::: describe layui-vue-helper 是 layui-vue 的开发增强工具,提供代码片段,自动完成,悬浮提示功能
:::
::: title 安装
@@ -10,14 +10,14 @@
::: describe 在 Visual Studio Code 内置或网页版扩展市场搜索 layui-vue-helper点击安装即可插件会在 Vue 和 HTML 文件中自动激活
:::
::: title 自动补全
::: title 自动完成
:::
> 按 `Ctrl+Space` (Windows, Linux) 或 `Cmd+Space` (macOS) 查看自动补全列表,目前只支持属性和事件补全
> 支持 Vue 和 HTML 文件
> ![自动补全.gif](https://s2.loli.net/2022/06/20/LioZGshVlFQYyew.gif)
> ![自动完成.gif](https://s2.loli.net/2022/06/20/LioZGshVlFQYyew.gif)
::: title 文档悬停提示
:::
@@ -55,6 +55,15 @@
| !lay-html-es| layui-vue-html ES Module 模板 |
:::
::: title 图标选取
:::
> 按 `Ctrl + Shift + P`,打开命令面板,输入 `layui icon`, 选择 `Open layui icon document`,打开图标文档
> 选择需要的图标,点击复制
> ![图标](https://s2.loli.net/2022/09/06/hsVgJcaWqAoZG1k.png)
<style>
.markdown-body blockquote img{
width: 650px;