📝(component): 调整 ripple 文档

This commit is contained in:
就眠儀式 2022-07-23 01:18:21 +08:00
parent 8ea7b205cb
commit 4d503fc8f0
2 changed files with 17 additions and 31 deletions

View File

@ -21,12 +21,7 @@
:data-value="index.toString().padStart(2, '0')"
:data-type="item.type"
:key="it"
:class="[
'num',
index == hms[item.type]
? 'layui-this'
: '',
]"
:class="['num', index == hms[item.type] ? 'layui-this' : '']"
>
{{ index.toString().padStart(2, "0") }}
</li>
@ -79,7 +74,7 @@ const els = [
{ count: 60, type: "ss" },
];
const hms = ref<hmsType>({
hh:props.modelValue.hh,
hh: props.modelValue.hh,
mm: props.modelValue.mm,
ss: props.modelValue.ss,
});
@ -100,12 +95,12 @@ watch(
() => props.modelValue,
() => {
hms.value = {
hh:props.modelValue.hh,
hh: props.modelValue.hh,
mm: props.modelValue.mm,
ss: props.modelValue.ss
ss: props.modelValue.ss,
};
},
{ deep: true}
{ deep: true }
);
const scrollTo = () => {
nextTick(() => {

View File

@ -7,20 +7,19 @@
::: describe 为组件添加水波纹动画。
:::
::: title 内部水波纹
::: title 基础使用
:::
::: demo 使用 `lay-ripple` 标签, 添加水波纹。
::: 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="2px">
<lay-button>click</lay-button>
</lay-ripple>
</template>
@ -38,23 +37,15 @@ export default {
:::
::: title 外部水波纹
::: title 触发时机
:::
::: demo 使用 `lay-ripple` 标签, 添加水波纹
::: demo 通过 `trigger` 属性, 设置 `ripple` 触发时机
<template>
<lay-ripple type="out" borderRadius="1px">
<lay-button>click</lay-button>
</lay-ripple><br><br><br>
<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>
<lay-ripple type="out" trigger="always" borderRadius="2px" color="#009688">
<lay-button type="primary">闪烁</lay-button>
</lay-ripple>
</template>
<script>