Appearance

Return to top
On this page

Shake 抖动

给元素添加抖动效果，起到提醒的作用

基本使用

通过插槽传入需要抖动的元素，使用 v-model 控制元素抖动，绑定的值会在 1s 后变成 false(即抖动停止)

这是一段要抖动的文字

显示代码
html
<template>
  <n-shake v-model="trigger"> 这是一段要抖动的文字 </n-shake>
  <n-button type='primary' @click="handletrigger"> 点击抖动文字 </n-button>
</template>

<script setup>
import { ref } from 'vue';
const trigger = ref(false);
const handletrigger = () => {
  trigger.value = true;
};

抖动持续时间

通过传入duration可以控制抖动的持续时长(毫秒),默认 1000(即 1s)

可以在插槽中传入任何东西，做到万物皆可抖


显示代码
html
<template>
  <n-shake :duration='2000' v-model="trigger">
   <n-avatar
    :size="10"
    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    />
  </n-shake>
  </n-shake>
  <n-button type='primary' @click="handletrigger"> 点击抖动 </n-button>
</template>

<script setup>
import { ref } from 'vue';
const trigger = ref(false);
const handletrigger = () => {
  trigger.value = true;
};

API

参数说明类型可选值默认值
v-model绑定的抖动状态,设为 true 后 1s 自动改为 falseboolean——false
duration抖动持续时间(ms)number——1000

Slots

插槽名描述
default需要抖动的内容