vue3封裝一個(gè)帶動畫的關(guān)閉按鈕示例詳解
更新時(shí)間：2023年09月28日 09:06:10 作者：jsoncode
這篇文章主要為大家介紹了vue3封裝一個(gè)帶動畫的關(guān)閉按鈕示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
預(yù)覽效果
實(shí)現(xiàn)源碼
<template>
<MenuBtn
:open="openMenu"
:size="24"
/>
</template><template>
<div :class="`menu ${open?'open':''}`" :style="`width:${size}px;height:${size}px`">
<span
:style="`
transition-duration:${duration}ms;
transform:${open?`translateY(${(size-2)/2}px) rotate(-45deg)`:`translateY(${size/6}px)`};
`"
/>
<span
:style="`
transition-duration:${duration}ms;
${open?`opacity: 0;transform: rotate(-45deg)`:''}
`"
/>
<span
:style="`
transition-duration:${duration}ms;
transform:${open?`translateY(${-(size-2)/2}px) rotate(45deg)`:`translateY(-${size/6}px)`};
`"
/>
</div>
</template>
<script setup>
// 這里用了vue3的專用寫法。vue2寫法，自行實(shí)現(xiàn)。
const {open, size, duration} = defineProps({
open: {
type: Boolean,
default: false,
required: true,
},
size: {
type: Number,
default: 24,
required: false
},
duration: {
type: Number,
default: 300,
required: false
}
});
</script>
<style scoped lang="scss">
.menu {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
span {
height: 2px;
border-radius: 2px;
display: flex;
width: 100%;
background-color: #333;
}
}
</style>源碼說明
帶有變量的樣式，都寫在行內(nèi)了，因?yàn)檫@樣適合用在任意場景下。
// nuxt3 npx nuxi init <project-name> // nuxt2 yarn create nuxt-app <project-name> // vue-cli vue create <project-name> // vite npm init vite-app <project-name>
其他場景
vite可以直接在style標(biāo)簽中使用js變量
npm init vite-app <project-name>
<template>
<h1>{color}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }" scoped>
h1 {
color: var(--color);
}
</style>以上就是vue3封裝一個(gè)帶動畫的關(guān)閉按鈕示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3封裝動畫關(guān)閉按鈕的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue 路由過渡是對 Vue 程序一種快速簡便的增加個(gè)性化效果的的方法，這篇文章主要介紹了Vue實(shí)現(xiàn)路由過渡動效的4種方法，感興趣的可以了解一下2021-05-05
Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個(gè)或多個(gè)元素的尺寸變化,并在發(fā)生變化時(shí)執(zhí)行回調(diào)函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
Vue實(shí)現(xiàn)頁面返回停留原位置的多種方案
文章主要討論了在 Vue 開發(fā)中實(shí)現(xiàn)頁面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉(zhuǎn)等,并分別闡述了它們的優(yōu)缺點(diǎn)和適用情況,強(qiáng)調(diào)開發(fā)前應(yīng)周全考慮前端業(yè)務(wù)和用戶體驗(yàn),根據(jù)實(shí)際業(yè)務(wù)選擇合適方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了直播程序，Vue input輸入框回車以后自動刷新頁面,適用場景是在輸入框輸入字符并按下回車鍵搜索時(shí)，刷新頁面，需要的朋友參考下實(shí)現(xiàn)代碼2023-01-01
vue實(shí)現(xiàn)元素拖動并互換位置的實(shí)現(xiàn)代碼
在使用Vue的場景下,需要實(shí)現(xiàn)對元素進(jìn)行拖動交換位置,接下來通過本文給大家介紹vue實(shí)現(xiàn)元素拖動并互換位置的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-09-09
Vue?Router動態(tài)路由實(shí)現(xiàn)實(shí)現(xiàn)更靈活的頁面交互
Vue?Router是Vue.js官方的路由管理器,用于構(gòu)建SPA（單頁應(yīng)用程序）,本文將深入探討Vue?Router的動態(tài)路由功能,希望可以幫助大家更好地理解和應(yīng)用Vue.js框架2024-02-02
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實(shí)現(xiàn)的內(nèi)容有制作一個(gè)登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺網(wǎng)頁格式，菜單點(diǎn)擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
解決vue的變量在settimeout內(nèi)部效果失效的問題
今天小編就為大家分享一篇解決vue的變量在settimeout內(nèi)部效果失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法
這篇文章主要介紹了Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12