头部actionbar组件
作者:
程序猿的小生活 | 来源:发表于
2023-07-24 16:01 被阅读0次script setup>
import {reactive} from "vue";
let config = reactive({
backimgshow:false,
upimgshow:false
})
let back = ()=>{
alert("返回")
}
let up = ()=>{
alert("前进")
}
</script>
<template>
<div style="position: fixed;top: 0;z-index: 998">
<div class="actionbar">
<div class="sc">
<img src="~@/assets/back.png" class="bk" @click="back()" v-show="config.backimgshow"/>
<div class="titletv">
<slot name="title"></slot>
</div>
<img src="~@/assets/up.png" class="up" @click="up()" v-show="config.upimgshow"/>
</div>
</div>
</div>
</template>
<style scoped>
.titletv{
flex: 1;
}
.sc{
width: 100vw;
height: 45px;
display: flex;
align-items: center;
}
.actionbar {
text-align: center;
display: flex;
align-items: center;
width: 100vw;
height: 45px;
background: orangered;
font-size: 18px;
color: white;
}
.bk{
width: 30px;
height: 30px;
margin-left: 15px;
}
.up{
width: 30px;
height: 30px;
margin-right: 15px;
}
</style>
本文标题:头部actionbar组件
本文链接:https://www.haomeiwen.com/subject/wifcpdtx.html
网友评论