头部actionbar组件

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>