vue封装返回按钮组件

Question

截图

组件

<div class="m-headerBack">
    <i class="el-icon-arrow-left" v-if="back"></i>
    {{title}}
</div>

调用

<cmsTitle title="订单详情" back="true"></cmsTitle>

但是我看了很多框架的组件写法，很多都是这种简写<cmsTitle title="订单详情" back></cmsTitle>如果我要改为这种写法，具体该怎么改呢？

Answer 1

props: {

back: Boolean

}
直接设置Boolean类型就可以了。
调用
<cmsTitle title="订单详情" back></cmsTitle>这样back默认就是true

Answer 2

看到你到头像就不想回答问题，不晓得为什么！ 哈哈?

Answer 3

大概应该是这样吧

• 组件

<template>
    <div class="m-headerBack">
        <i class="el-icon-arrow-left" v-if="back"  @click="backHandler"></i>
        {{title}}
    </div>
</template>

<script>
export default {
  props: {
    back: {
      type: [Object,String, Boolean],
      default: true
    }
  },
  methods:{
    backHandler(){
        if(!this.back)return;
        if(typeof(this.back) === 'boolean' && this.back){
          //可以再处理下如果是第一次进详情页的情况
          return this.$router.back();                  
        }
        //对象/字符串
        this.$router.replace(this.back);       
    }
  }
}
</script>

• 调用

<cmsTitle title="订单详情" back></cmsTitle>
<cmsTitle title="订单详情" :back="{path:'/'}"></cmsTitle>
<cmsTitle title="订单详情" back="/"></cmsTitle>

Answer 4

当你写了back，但没传值，传过去的是空字符串，没填back则是undefined

// 可以这样判断
computed: {
    hasPropBack () {
        return this.back === '' || this.back === true || this.back === 'true'
    }
}