vue3封裝一個帶動畫的關閉按鈕示例詳解
更新時間：2023年09月28日 09:06:10 作者：jsoncode
這篇文章主要為大家介紹了vue3封裝一個帶動畫的關閉按鈕示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
預覽效果
實現(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寫法，自行實現(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>源碼說明
帶有變量的樣式，都寫在行內了，因為這樣適合用在任意場景下。
// 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標簽中使用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封裝一個帶動畫的關閉按鈕示例詳解的詳細內容，更多關于vue3封裝動畫關閉按鈕的資料請關注腳本之家其它相關文章！
相關文章
Vue 路由過渡是對 Vue 程序一種快速簡便的增加個性化效果的的方法，這篇文章主要介紹了Vue實現(xiàn)路由過渡動效的4種方法，感興趣的可以了解一下2021-05-05
Vue3使用ResizeObserver監(jiān)聽元素的尺寸寬度變化
要監(jiān)聽 div 寬度的變化,可以使用 ResizeObserver 接口,ResizeObserver 允許你觀察一個或多個元素的尺寸變化,并在發(fā)生變化時執(zhí)行回調函數(shù),所以本文給大家介紹了Vue3如何使用ResizeObserver監(jiān)聽元素的尺寸寬度變化,需要的朋友可以參考下2024-08-08
文章主要討論了在 Vue 開發(fā)中實現(xiàn)頁面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉等,并分別闡述了它們的優(yōu)缺點和適用情況,強調開發(fā)前應周全考慮前端業(yè)務和用戶體驗,根據(jù)實際業(yè)務選擇合適方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了直播程序，Vue input輸入框回車以后自動刷新頁面,適用場景是在輸入框輸入字符并按下回車鍵搜索時，刷新頁面，需要的朋友參考下實現(xiàn)代碼2023-01-01
vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼
在使用Vue的場景下,需要實現(xiàn)對元素進行拖動交換位置,接下來通過本文給大家介紹vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼,需要的朋友可以參考下2023-09-09
Vue?Router動態(tài)路由實現(xiàn)實現(xiàn)更靈活的頁面交互
Vue?Router是Vue.js官方的路由管理器,用于構建SPA（單頁應用程序）,本文將深入探討Vue?Router的動態(tài)路由功能,希望可以幫助大家更好地理解和應用Vue.js框架2024-02-02
vue 路由視圖 router-view嵌套跳轉的實現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉，主要實現(xiàn)的內容有制作一個登錄頁面，跳轉到首頁，首頁包含菜單欄、頂部導航欄、主體，標準的后臺網(wǎng)頁格式，菜單點擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內容2021-09-09
今天小編就為大家分享一篇解決vue的變量在settimeout內部效果失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue-loader中引入模板預處理器的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法
這篇文章主要介紹了Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12