Vue實現固定底部組件的示例

<template> <div id='app'> <div class='main'> <img alt='Vue logo' src='http://www.wxshucaidpc.com/bcjs/assets/logo.png'> <HelloWorld msg='Welcome to Your Vue.js App'/> <img alt='Vue logo' src='http://www.wxshucaidpc.com/bcjs/assets/logo.png'> </div> <div class='footer'>這是固定在底部的按鈕</div> </div></template><script>import HelloWorld from ’./components/HelloWorld.vue’export default { name: ’App’, components: { HelloWorld }}</script><style>:root{ --footer-height: 50px;}body { padding: 0; margin: 0;}#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}.main{ padding-bottom: var(--footer-height); overflow-y: auto;}.footer{ position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff;}</style>

【增加需求】增加一個A邏輯，當滿足A邏輯的時候，底部按鈕就不展示，其他情況則展示。新增一個Bool值（isShow）來判斷是否顯示底部按鈕，具體代碼如下：

<template> <div id='app'> <div class='main'> <img alt='Vue logo' src='http://www.wxshucaidpc.com/bcjs/assets/logo.png'> <HelloWorld msg='Welcome to Your Vue.js App'/> <img alt='Vue logo' src='http://www.wxshucaidpc.com/bcjs/assets/logo.png'> </div> <div v-if=’isShow’> <div class='footer-content'>這是固定在底部的按鈕</div> </div> </div></template><script>import HelloWorld from ’./components/HelloWorld.vue’export default { name: ’App’, components: { HelloWorld }, data() { return { isShow: true } },}</script><style>:root{ --footer-height: 50px;}body { padding: 0; margin: 0;}#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}.main { overflow-y: auto;}.footer { height: var(--footer-height);}.footer-content { position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff;}</style>

到此這篇關于Vue實現固定底部組件的示例的文章就介紹到這了,更多相關Vue 固定底部內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！