国产精品免费嫩草研究院|无遮羞动漫在线观看AV|国产麻豆精品传媒AV国产在线|村在线观看|寂寞情人1正版|韩国床震韩国床震古|精品系列专区久久

  1. 首頁 > 生活 > >

從0搭建vue3組件庫:Shake抖動組件

生活百科

先看下效果
其實就是個抖動效果組件，實現起來也非常簡單 。
之所以做這樣一個組件是為了后面寫Form表單的時候會用到它做一個規則校驗，比如下面一個簡單的登錄頁面，當點擊登錄會提示用戶哪個信息沒輸入，當然這只是一個簡陋的demo接下來就開始我們的Shake組件實現
CSS樣式當你需要抖動的時候就給它添加個抖動的類名，不需要就移除這個類名即可 。抖動效果就用CSS3中的transform的平移屬性加動畫實現
@keyframes shake {    10%,    90% {        transform: translate3d(-1px, 0, 0);    }    20%,    80% {        transform: translate3d(2px, 0, 0);    }    30%,    70% {        transform: translate3d(-4px, 0, 0);    }    40%,    60% {        transform: translate3d(4px, 0, 0);    }    50%,    50% {        transform: translate3d(-4px, 0, 0);    }}.k-shake.k-shakeactive {    animation: shake 1s linear;}組件邏輯根據上面效果，很顯然是需要用到插槽slot的，做到用戶傳什么我們就抖什么，做到萬物皆可抖 。

從0搭建vue3組件庫:Shake抖動組件

文章插圖
這里使用vue3中的v-model指令會更方便，如下，當我們使用Shake組件時，trigger為true即開始抖動
        <Shake v-model="trigger">            抖動        </Shake>組件具體實現代碼,同樣的這次還是使用setup語法糖形式實現
<template>    <div class="k-shake" :class="{['k-shakeactive']:props.modelValue}">        <slot />    </div></template><script lang="ts">import { defineComponent } from 'vue'import './style/index.less'export default defineComponent({    name: 'k-shake'});</script><script lang='ts' setup>import { watch } from 'vue'//v-model傳來的值即為modelValuetype ShakeProps = {    modelValue?: boolean}//發送update:modelValue來配合v-model語法糖type Emits = {    (e: 'update:modelValue', value: boolean): void}//獲取props屬性并且設置默認值const props = withDefaults(defineProps<ShakeProps>(), {    modelValue: false})const emits = defineEmits<Emits>()//監聽modelValue，為true的話，1s后置為falsewatch(() => props.modelValue, (newVal) => {    if (newVal) {        setTimeout(() => {            emits("update:modelValue", false)        }, 1000);    }}, { immediate: true })</script>

經驗總結擴展閱讀