免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

  1. 首頁 > 生活 > >

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

生活百科

先看下效果
其實就是個抖動效果組件，實現(xiàn)起來也非常簡單 。
之所以做這樣一個組件是為了后面寫Form表單的時候會用到它做一個規(guī)則校驗，比如下面一個簡單的登錄頁面，當(dāng)點擊登錄會提示用戶哪個信息沒輸入，當(dāng)然這只是一個簡陋的demo接下來就開始我們的Shake組件實現(xiàn)
CSS樣式當(dāng)你需要抖動的時候就給它添加個抖動的類名，不需要就移除這個類名即可 。抖動效果就用CSS3中的transform的平移屬性加動畫實現(xiàn)
@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;}組件邏輯根據(jù)上面效果，很顯然是需要用到插槽slot的，做到用戶傳什么我們就抖什么，做到萬物皆可抖 。

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

文章插圖
這里使用vue3中的v-model指令會更方便，如下，當(dāng)我們使用Shake組件時，trigger為true即開始抖動
        <Shake v-model="trigger">            抖動        </Shake>組件具體實現(xiàn)代碼,同樣的這次還是使用setup語法糖形式實現(xiàn)
<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}//發(fā)送update:modelValue來配合v-model語法糖type Emits = {    (e: 'update:modelValue', value: boolean): void}//獲取props屬性并且設(shè)置默認(rèn)值const props = withDefaults(defineProps<ShakeProps>(), {    modelValue: false})const emits = defineEmits<Emits>()//監(jiān)聽modelValue，為true的話，1s后置為falsewatch(() => props.modelValue, (newVal) => {    if (newVal) {        setTimeout(() => {            emits("update:modelValue", false)        }, 1000);    }}, { immediate: true })</script>

經(jīng)驗總結(jié)擴(kuò)展閱讀