feat(ripple): 水波纹组件

This commit is contained in:
sight
2022-04-13 16:02:06 +08:00
parent 90f89c7c5f
commit 8ece0bd5f7
7 changed files with 261 additions and 2 deletions

View File

@@ -0,0 +1,48 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 为组件添加水波纹动画。
:::
::: title 测试
:::
::: demo 使用 `lay-ripple` 标签, 添加水波纹
<template>
<lay-ripple>
<lay-button>内部:click</lay-button>
</lay-ripple><br>
<lay-ripple trigger="always">
<lay-button>内部:always</lay-button>
</lay-ripple><br>
<lay-ripple trigger="mouseenter">
<lay-button>内部:mouseenter</lay-button>
</lay-ripple><br><br>
<lay-ripple type="out" borderRadius="1px">
<lay-button>外部:click</lay-button>
</lay-ripple><br><br>
<lay-ripple type="out" trigger="always" borderRadius="50%" color="red">
<div style="border-radius:50%;background-color:red;width:8px;height:8px"></div>
</lay-ripple><br><br><br>
<lay-ripple type="out" trigger="mouseenter" borderRadius="50%" color="red">
<div style="border-radius:50%;background-color:red;width:20px;height:20px"></div>
</lay-ripple><br>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::

View File

@@ -381,7 +381,13 @@ const zhCN = [
path: "/zh-CN/components/transition",
component: () =>
import("../document/zh-CN/components/transition.md"),
meta: { title: "通知栏" },
meta: { title: "过渡" },
},
{
path: "/zh-CN/components/ripple",
component: () =>
import("../document/zh-CN/components/ripple.md"),
meta: { title: "水波纹" },
},
],
},

View File

@@ -34,11 +34,17 @@ const menus = [
path: "/zh-CN/components/transition",
},
{
id: 101,
id: 102,
title: "全屏",
subTitle: "fullscreen",
path: "/zh-CN/components/fullscreen",
},
{
id: 103,
title: "水波纹",
subTitle: "ripple",
path: "/zh-CN/components/ripple",
},
],
},
{