sen
2 天以前 5abcde36961125cbf436f91b8c17610a6b5f8308
ui/car_wx_app/components/nav/index.vue
@@ -1,113 +1,136 @@
<template>
  <u-navbar :bgColor="bgColor" :left-icon="leftIcon"
            :leftIconColor="leftIconColor"  :leftText="leftText"
            :isShowLeft="isShowLeft" :placeholder="true"
            :title="title" :titleStyle="titleStyle"
            @leftClick="leftClick"
  <u-navbar
    :bgColor="bgColor"
    :left-icon="leftIcon"
    :leftIconColor="leftIconColor"
    :leftText="leftText"
    :isShowLeft="isShowLeft"
    :placeholder="true"
    :title="displayTitle"
    :titleStyle="titleStyle"
    @leftClick="leftClick"
  >
    <view
        class="u-nav-slot"
        slot="right"
    >
      <u-icon :color="rightIconColor" @click="rightIconClick"
          :name="rightIcon"
          size="20"
      ></u-icon>
    <view v-if="rightIcon" class="u-nav-slot" slot="right">
      <u-icon
        :color="rightIconColor"
        @click="rightIconClick"
        :name="rightIcon"
        size="20"
      />
    </view>
  </u-navbar>
</template>
<script>
import { navigateBack, navigateToBack, getPageParams } from '@/common/router'
export default {
  name: "index",
  props:{
    title:{
  name: 'NavBar',
  props: {
    // 标题 - 可以直接传字符串,或从页面参数中读取
    title: {
      type: String,
      default: ''
    },
    leftText:{
    // 标题字段名 - 如果从页面参数中读取,指定字段名
    titleKey: {
      type: String,
      default: 'title'
    },
    leftText: {
      type: String,
      default: ''
    },
    leftIconColor:{
    leftIconColor: {
      type: String,
      default: '#fff'
    },
    leftIcon:{
    leftIcon: {
      type: String,
      default: 'arrow-left'
    },
    bgColor:{
    bgColor: {
      type: String,
      default: '#409effc1'
      default: '#409eff'
    },
    isShowLeft:{
    isShowLeft: {
      type: Boolean,
      default: true
    },
    customBack:{
    // 自定义返回路径 - 可以是页面键名或路径
    customBack: {
      type: String,
      default: ''
    },
    customType:{
    // 返回方式: navigateBack(默认返回上一页) | navigateTo(跳转到指定页)
    backType: {
      type: String,
      default: 'redirectTo'
      default: 'navigateBack',
      validator: (value) => ['navigateBack', 'navigateTo'].includes(value)
    },
    rightIcon:{
    rightIcon: {
      type: String,
      default: ''
    },
    rightIconColor:{
    rightIconColor: {
      type: String,
      default: '#fff'
    },
    rightClick:{
      default:()=>{}
    }
  },
  data(){
    return{
      titleStyle:{
        color: "#fff"
  data() {
    return {
      pageParams: {}
    }
  },
  computed: {
    // 最终显示的标题
    displayTitle() {
      // 优先使用 props 传入的 title
      if (this.title) {
        return this.title
      }
      // 其次从页面参数中读取
      if (this.pageParams[this.titleKey]) {
        return this.pageParams[this.titleKey]
      }
      return ''
    },
    // 标题样式
    titleStyle() {
      return {
        color: '#fff',
        fontSize: '16px',
        fontWeight: 500
      }
    }
  },
  methods:{
    leftClick(){
      if (this.customBack){
        if (this.customType == 'navigateBack'){
          console.log('返回')
          uni.navigateBack({
            delta: 1,
            success: function () {
              console.log('返回成功')
            },
            fail: function (e) {
              console.log(e)
            }
          });
        }else{
          uni.$u.route({
            url: this.customBack,
            type: this.customType
          }).catch(e=>{
            console.log(e)
          })
        }
      }else{
        uni.redirectTo();
  mounted() {
    // 获取页面参数
    this.pageParams = getPageParams()
  },
  methods: {
    leftClick() {
      // 如果父组件监听了 back 事件,由父组件接管返回逻辑
      if (this.$listeners && this.$listeners.back) {
        this.$emit('back')
        return
      }
      if (this.customBack) {
        navigateToBack(this.customBack)
      } else {
        navigateBack()
      }
    },
   rightIconClick(){
    console.log(1)
      // this.rightClick();
    this.$emit('rightClick')
    rightIconClick() {
      this.$emit('rightClick')
    }
  }
}
</script>
<style scoped>
.u-nav-slot {
  display: flex;
  align-items: center;
}
</style>