vue 头部底部公用组件,vue定义局部组件
本文主要介绍了某视频剪辑软件实现固定底部组件的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
【实现效果】【实现方式】
【实现效果】
【实现方式】
模板
div id=应用程序
div class=main
img alt=Vue logo src= ./assets/logo.png
HelloWorld消息=欢迎使用您的vue . j应用/
img alt=Vue logo src= ./assets/logo.png
/div
div class=页脚这是固定在底部的按钮/div
/div
/模板
脚本
从导入你好世界./components/HelloWorld.vue
导出默认值{
名称："应用程序",
组件：{
编译
}
}
/脚本
风格
:root{
-页脚-高度：50px
}
正文{
填充：0;
边距：0;
}
#app {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}。主要{
padding-bottom:var(-footer-height)；
溢出-y:自动；
}。页脚{
位置：固定；
底部：0;
宽度：100%;
line-height:var(-footer-height)；
背景：# 42b983
颜色：# fff
}
/风格
【增加需求】增加一个A逻辑，当满足A逻辑的时候，底部按钮就不展示，其他情况则展示。
新增一个弯曲件值(isShow)来判断是否显示底部按钮，具体代码如下：
模板
div id=应用程序
div class=main
img alt=Vue logo src= ./assets/logo.png
HelloWorld消息=欢迎使用您的vue . j应用/
img alt=Vue logo src= ./assets/logo.png
/div
div class=footer v-if=isShow
div class=页脚-内容这是固定在底部的按钮/div
/div
/div
/模板
脚本
从导入你好世界./components/HelloWorld.vue
导出默认值{
名称："应用程序",
组件：{
编译
},
data() {
返回{
isShow:没错
}
},
}
/脚本
风格
:root{
-页脚-高度：50px
}
正文{
填充：0;
边距：0;
}
#app {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}。主要{
溢出-y:自动；
}。页脚{
height:var(-footer-height)；
}。页脚-内容{
位置：固定；
底部：0;
宽度：100%;
line-height:var(-footer-height)；
背景：# 42b983
颜色：# fff
}
/风格
到此这篇关于某视频剪辑软件实现固定底部组件的示例的文章就介绍到这了，更多相关某视频剪辑软件固定底部内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。