[vue.js]功能頁標題改寫組件

by cactus77kiki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>      
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="appcontent">
<!--  {{msg}}-->
  <!--原始-->
  <h5 style="margin-left: 10px; margin-right: 10px; margin-top: 5px; font-size: 17px;">
    <a href="#" style="color: black; text-decoration: none;">
      <i class="fa fa-home" aria-hidden="true"></i>
    </a>
    <i class="fa fa-angle-right" aria-hidden="true"></i> {{moduleVal}}  
    <i class="fa fa-angle-right" aria-hidden="true"></i> {{pgtitleVal}}
  </h5>
  <br/>
  <!--改寫component-->
  <gb-form-title :homeurl="homeVal" :moduletitle="moduleVal" :menutitle="pgtitleVal">    
  </gb-form-title>
</div>

JavaScript

Vue.component('gb-form-title', {
	props:{
  	homeurl:{type:String},
  	moduletitle:{type: String},
    menutitle:{type: String}
  },
	template:
  `<div><h5 style="margin-left: 10px; margin-right: 10px; margin-top: 5px; font-size: 17px;">
  	<a v-bind:href="homeurl" style="color: black; text-decoration: none;">
      <i class="fa fa-home" aria-hidden="true"></i>
    </a>
    <i class="fa fa-angle-right" aria-hidden="true"></i> {{moduletitle}}
    <i class="fa fa-angle-right" aria-hidden="true"></i> {{menutitle}}
   </h5></div>`
});
/*
原始render:
<h5 style="margin-left: 10px; margin-right: 10px; margin-top: 5px; font-size: 17px;">
    <a href="#" style="color: black; text-decoration: none;">
      <i class="fa fa-home" aria-hidden="true"></i>
    </a>
    <i class="fa fa-angle-right" aria-hidden="true"></i> {{moduleVal}}  
    <i class="fa fa-angle-right" aria-hidden="true"></i> {{pgtitleVal}}
  </h5>
*/

var vapp = new Vue({
	el: '#appcontent',
  data: {
  	homeVal: 'http://tw.yahoo.com',
  	moduleVal:'系統管理',
  	pgtitleVal:'權限參數設定-流水號',
    msg: 'test'
  },
  methods: {
  
  },
  created:function(){
  
  }
});