79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
defineOptions({
|
||
name: "Ripple"
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<p class="font-medium">波纹(Ripple)</p>
|
||
<el-link
|
||
class="mt-2"
|
||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
|
||
target="_blank"
|
||
>
|
||
代码位置 src/views/able/ripple.vue
|
||
</el-link>
|
||
</template>
|
||
<div class="mb-5">组件中的波纹</div>
|
||
<el-alert
|
||
title="v-ripple在某些组件中使用波纹特效会异常，这是因为v-ripple指令只能作用于当前元素，某些组件有多层元素嵌套，且目标元素没在顶层，所以会导致特效异常"
|
||
type="warning"
|
||
:closable="false"
|
||
/>
|
||
<el-space wrap class="my-5">
|
||
<el-button v-ripple>Default</el-button>
|
||
<el-button v-ripple type="primary">Primary</el-button>
|
||
<el-button v-ripple type="success">Success</el-button>
|
||
<el-button v-ripple type="info">Info</el-button>
|
||
<el-button v-ripple type="warning">Warning</el-button>
|
||
<el-button v-ripple type="danger">Danger</el-button>
|
||
</el-space>
|
||
<el-card v-ripple class="mb-5 w-[510px] select-none" shadow="hover">
|
||
卡片
|
||
</el-card>
|
||
|
||
<div class="mb-5">
|
||
只要在组件或HTML元素上使用v-ripple指令，就可以启用基本的ripple功能
|
||
</div>
|
||
<div
|
||
v-ripple
|
||
class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
|
||
>
|
||
HTML元素
|
||
</div>
|
||
<span
|
||
v-ripple
|
||
class="inline-block shadow-md rounded-md p-8 text-lg select-none"
|
||
>
|
||
行内元素需要添加display: block或display: inline-block才能生效
|
||
</span>
|
||
|
||
<div class="my-5">
|
||
当使用v-ripple.center时，将始终从目标的中心处产生波纹
|
||
</div>
|
||
<div
|
||
v-ripple.center
|
||
class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
|
||
>
|
||
始终从中心触发波纹
|
||
</div>
|
||
|
||
<div class="mb-5">
|
||
使用v-ripple="{ class: '' }"添加类来自定义波纹颜色，支持tailwindcss
|
||
</div>
|
||
<el-alert
|
||
title="自定义样式生效为文字颜色，例如：color: 'red';"
|
||
type="warning"
|
||
:closable="false"
|
||
/>
|
||
<div
|
||
v-ripple="{ class: 'text-red-500' }"
|
||
class="my-5 text-center shadow-md rounded-md p-4 text-lg select-none"
|
||
>
|
||
自定义波纹颜色
|
||
</div>
|
||
</el-card>
|
||
</template>
|