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=
"https://i.loli.net/2019/07/27/5d3c141367f2784840.jpg"/>
</
div>
<
div>
img2:
<
img
class=
"video-img"
src=
"https://i.loli.net/2019/07/27/5d3c143497e6d38917.jpg"/>
</
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
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69923331/viewspace-2711485/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
Java面试题：之ZooKeeper篇
请登录后发表评论
登录
全部评论
