自訂 Vue 組件

  • 3329
  • 0
  • 2019-09-24

要組合各種 Vue 組件的組件看這篇就對了

Vue 常用功能

簡易 vue 環境
<head>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<body>
 <div id="app">
    <p>{{message}}</p>
 </div>
</body>
<script>
 new Vue({
    el:'#app',
    data(){
        return{
            message:'Hello Vue.js'
        }
    }
 })
</script>

自訂樣式


headerTop

<!-- headerTop No1 -->

<!-- headerTop No1 -->
<el-row class="flexbox-spa">
  <el-col :xs="12" :sm="16" :md="18" :lg="20" :span="20">
    <img src="@/assets/image/icon_x64.png" />
  </el-col>
  <el-col :xs="6" :sm="4" :md="3" :lg="2" :span="2"><el-button round>Sing in</
el-button></el-col>
  <el-col :xs="6" :sm="4" :md="3" :lg="2" :span="2"><el-button round>Get started</
el-button></el-col>
</el-row>
// headerTop No1
.el-row {
    padding-right:2rem;
  .el-col:nth-of-type(1) {
    text-align: left;
    padding-left: 10%;
    display:flex;
    align-items: center;
    img {
      width:48px;
      height:48px;
      background-color: $bcolor2;
    }
  }
  .el-col:nth-of-type(2),
  .el-col:nth-of-type(3){
      height:64px;
      line-height:64px;
  }
}