src/components/backButton/button.vue

   1 <template>
   2     <div >
   3         <i :class="['iconfont icon-back',{small: small}]" @click="goBack()"></i>
   4     </div>
   5 </template>
   6
   7 <script>
   8 export default {
   9     props: {
  10       des:null,
  11       small:false,
  12       back:{
  13         type: Function
  14       }
  15     },
  16     methods: {
  17       goBack:function () {
  18         if(this.back){
  19           this.back()
  20         }else{
  21           this.des?
  22             this.$router.push({name: this.des}): this.$router.go(-1)
  23         }
  24       }
  25     }
  26 };
  27 </script>
  28
  29 <style scoped>
  30 .iconfont {
  31   cursor:pointer;
  32   background: #FAFAFA;
  33   border-radius: 20px;
  34   color: #333333;
  35   padding: 7px 19px;
  36 }
  37 .iconfont:hover {
  38   background: #F5F5F5;
  39 }
  40
  41 .small{
  42   width: 56px;
  43   height: 12px;
  44   background: #EEEEEE;
  45   border-radius: 20px;
  46   padding: 2px 16px;
  47 }
  48 </style>