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

📝(component): 调整 ripple 文档

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package/component/src/component/datePicker/components/TimePanel.vue
View File

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

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

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