<template>
  <div class="container">
    <img class="back" :src="require('../images/icon-back.png')" @click="back" />
    <text class="title" @click="back">{{title}}</text>
    <slot/>
  </div>
</template>

<script>

export default {
  name: "ActionBar",
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
    };
  },
  methods: {
    back(e) {
      if (/*外面监听back事件*/0) {
        this.$emit('back');
      } else {
        this.$page.finish();
      }
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 60px;
  flex-direction: row;
  align-items: center;
}
.back {
  width: 13px;
  height: 23px;
  margin-left: 10px;
  margin-right: 13px;
}
.title {
  color: white;
  font-size: 24px;
  text-overflow: ellipsis;
  margin-right: 10px;
  flex: 1;
  lines: 1;
  height: 33px;
  width: 48px;
}
</style>