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

chore: 回退到 Sight 的提交

Browse Source
This commit is contained in:
就眠儀式 2022-04-16 11:32:59 +08:00
parent 98c6764829
commit 4333ee1c9e
5 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/ripple/index.less
View File

@ -28,7 +28,7 @@
@keyframes ripple-effect {
0% {
box-shadow: 0 0 0 0px var(--layui-ripple-color);
opacity: 0.3;
opacity: 0.4;
}
100% {

5
package/component/src/component/ripple/index.vue
View File

@ -28,7 +28,6 @@ const props = withDefaults(defineProps<LayRippletProps>(), {
});
const isActiveRef = ref(false);
// 波纹宽高
const spreadSizeRef = ref<string>("0px");
const ripplesRefEl = ref<HTMLElement | null>(null);
const waterRipplesContainerRefEl = ref<HTMLElement | null>(null);
@ -43,7 +42,7 @@ const rippleY = ref<string | number | undefined>(undefined);
const onActive = function (event: Event) {
isActiveRef.value = true;
// 跟随鼠标点击
// 计算点击位置和波纹大小
if (props.type === "inset" && !props.spreadSize && !props.center) {
const el = event.currentTarget;
// @ts-ignore
@ -129,4 +128,4 @@ watch(
></div>
<slot></slot>
</div>
</template>
</template>

4
package/document/src/document/zh-CN/components/animation.md
View File

@ -72,11 +72,11 @@ import { ref } from 'vue'
export default {
setup() {
const replay = (e, aninClass) => {
const replay = (e, animClass) => {
const el = e.currentTarget;
const targetClass = el.classList[1];
if(!targetClass){
el.classList.add(aninClass);
el.classList.add(animClass);
}else{
el.classList.remove(targetClass);
setTimeout(() => {

6
package/document/src/document/zh-CN/components/fullscreen.md
View File

@ -221,8 +221,8 @@ export default {
:::table
| 属性 | 描述 | 类型 | 参数 |
| --------- | --------------| ------------- | ------ |
| enter | 进入全屏 | Function | 可选,HTMLElement |
| exit | 退出全屏 | Function | 可选,HTMLElement /| Document |
| enter | 进入全屏 | Function | 可选,`HTMLElement` |
| exit | 退出全屏 | Function | 可选,`HTMLElement` `Document` |
| toggle | 进入/退出全屏 | Function | - |
| isFullscreen | 是否全屏 | boolean | - |
:::
:::

74
package/document/src/document/zh-CN/components/ripple.md
View File

@ -7,29 +7,53 @@
::: describe 为组件添加水波纹动画。
:::
::: title 测试
::: title 内部水波纹
:::
::: demo 使用 `lay-ripple` 标签, 添加水波纹
::: demo 使用 `lay-ripple` 标签, 添加水波纹。
<template>
<lay-ripple>
<lay-button>内部:click</lay-button>
<lay-button>click</lay-button>
</lay-ripple><br>
<lay-ripple trigger="always">
<lay-button>内部:always</lay-button>
<lay-button>always</lay-button>
</lay-ripple><br>
<lay-ripple trigger="mouseenter">
<lay-button>内部:mouseenter</lay-button>
</lay-ripple><br><br>
<lay-button>mouseenter</lay-button>
</lay-ripple>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 外部水波纹
:::
::: demo 使用 `lay-ripple` 标签, 添加水波纹。
<template>
<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-button>click</lay-button>
</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>
<p>always:</p>
<lay-ripple type="out" trigger="always" borderRadius="50%" color="#009688">
<div style="border-radius:50%;background-color:#009688;width:8px;height:8px"></div>
</lay-ripple><br><br><br>
<p>mouseenter:</p>
<lay-ripple type="out" trigger="mouseenter" borderRadius="50%" color="#009688" spread-width="50px">
<div style="border-radius:50%;background-color:#009688;width:20px;height:20px"></div>
</lay-ripple><br>
</template>
@ -45,4 +69,30 @@ export default {
}
</script>
:::
::: title Ripple 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| type | 波纹类型 | `out` `inset` |
| color | 波纹颜色 | -- |
| borderRadius | 圆角，仅 `out` 类型 | -- |
| spreadWidth | 扩散宽度，单位 px，仅 `out` 类型 | -- |
| spreadSize | 扩散大小，单位 px，仅 `inset` 类型 | -- |
| trigger | 触发方式 | `click` `always` `mouseenter`|
| center | 是否在元素中心扩散 | -- |
:::
:::title Ripple 插槽
:::
:::table
| 插槽 | 描述 | 参数 |
|------ |----------|-----------|
| default | 默认插槽 | - |
:::