kbone 高階 - 使用小程式內建元件（二）

2.5 編寫系列元件

2.5.1 App.vue

在 src/index 下建立 App.vue 檔案，內容如下：

<
template>

  
<
div>

    
<
ul 
class=
"tab">

      
<
li 
class=
"tab-item" 
:class=
"{selected: wxPrefix === 0}" @
click=
"wxPrefix = 0">wx-component 用法
</
li>

      
<
li 
class=
"tab-item" 
:class=
"{selected: wxPrefix === 1}" @
click=
"wxPrefix = 1">wx- 字首用法
</
li>

      
<!-- <li class="tab-item" :class="{selected: wxPrefix === 2}" @click="wxPrefix = 2">無字首用法</li> -->

    
</
ul>

    
<
Comp 
:wxPrefix=
"wxPrefix" />

  
</
div>


</
template>




<
script>



import Comp 
from 
'./Component.vue'





export 
default {


  
name: 
'App',


  
components: {


    Comp,


  },


  data() {


    
return {


      
wxPrefix: 
1, 
// 0 - wx-component 用法，1 - wx- 字首用法，2 - 無字首用法(需要配置 runtime.wxComponent 欄位)



    }



  },



}


</
script>




<
style>



.tab {


  
padding: 
10px;


}





.tab-item {


  
display: inline-block;


  
margin-bottom: 
10px;


  
font-size: 
18px;


  
padding: 
5px 
10px;


  
border-radius: 
5px;


}





.tab-item
.selected {


  
background: 
#3eaf7c;


  
color: 
#fff;


}


</
style>

2.5.2 Component.vue

在 src/index 下建立 Component.vue 檔案，內容如下：

詳細參考：

https:
//lurongtao.github.io/felixbooks-kbone/advanced/
03-%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6.html
#242-componentvue

2.5.3 Inner.vue

在 src/index 下建立 Inner.vue 檔案，內容如下：

<
template>

  
<
div>

    
<
div 
class=
"controls" @
click=
"onVideoControlsClick">

      
<
div>

        img1:

        
<
img 
class=
"video-img" 
src=
"/>

      
</
div>

      
<
div>

        img2:

        
<
img 
class=
"video-img" 
src=
"/>

      
</
div>

      
<
div>this is video
</
div>

    
</
div>

    
<
div 
class=
"btn-cnt">

      
<
wx-component 
class=
"video-btn" 
behavior=
"button" 
open-type=
"share">分享
</
wx-component>

    
</
div>

  
</
div>


</
template>




<
script>



export 
default {


  
name: 
'Inner',


  
methods: {


    onVideoControlsClick(evt) {


      
console.log(
'onVideoControlsClick')


    },


  }


}


</
script>




<
style>



.controls {


  
display: flex;


  
width: 
100%;


  
height: 
60px;


  
background: 
#ddd;


  
align-items: center;


}





.controls 
.video-img {


  
width: 
40px;


  
height: 
40px;


}





.btn-cnt {


  
position: relative;


  
width: 
100%;


}





.btn-cnt 
.video-btn {


  
margin: 
10px auto;


  
width: 
100px;


  
height: 
30px;


  
color: 
#fff;


  
background: 
#07c160;


  
text-align: center;


  
line-height: 
30px;


  
border-radius: 
10px;


}


</
style>

在 src/index 下建立 Inner2.vue 檔案，內容如下：

<
template>

  
<
div 
:class=
"type[0] === 'x' ? 'inner2-x' : 'inner2-y'">

    
<
div 
:id=
"type + 'block1'" 
class=
"block block1">
</
div>

    
<
div 
:id=
"type + 'block2'" 
class=
"block block2">
</
div>

    
<
div 
:id=
"type + 'block3'" 
class=
"block block3">
</
div>

    
<
div 
:id=
"type + 'block4'" 
class=
"block block4">
</
div>

    
<
div 
:id=
"type + 'block5'" 
class=
"block block5">
</
div>

  
</
div>


</
template>




<
script>



export 
default {


  
name: 
'Inner2',


  
props: [
'type'],


}


</
script>




<
style>



.inner2-x {


  
display: flex;


}



.block {


  
width: 
100%;


  
height: 
50px;


}



.inner2-x 
.block {


  
flex: 
0 
0 
125px;


  
width: 
125px;


  
height: 
125px;


}



.block1 {


  
background: 
#dff0d8;


}



.block2 {


  
background: 
#f5f5f5;


}



.block3 {


  
background: 
#d9edf7;


}



.block4 {


  
background: 
#fcf8e3;


}



.block5 {


  
background: 
#f2dede;


}


</
style>

2.5.5 小程式端效果預覽

npm run mp