<template>
<div class="img">
  <van-nav-bar :title="title" @click-left="onClickLeft" @click-right="onClickRight">
  111
   <slot slot="cent"  name="cent"> </slot>
  </van-nav-bar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({
  name: "TitleBar",
})
export default class TitleBar extends Vue {
  @Prop({ default: "" }) title: string | undefined; // 页面标题
  @Prop({ default: false }) disabled: boolean | undefined; // 禁用左边点击事件
  onClickLeft() {
    if (this.disabled) return;
    const event = "clickLeft";
    const eventAli = "click-left";
    if (this.$listeners[event]) {
      this.$emit(event);
    } else if (this.$listeners[eventAli]) {
      this.$emit(eventAli);
    } else {
      this.$router.go(-1);
    }
  }

  onClickRight() {
    this.$emit("click-right");
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: white;
  }
}
.img{
  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
}
::v-deep .van-nav-bar {
  z-index: 999999 !important;
}

::v-deep .van-nav-bar__right {
  color: white;
}

::v-deep .van-nav-bar__left .van-icon {
  padding-top: 16px;
}
</style>