您的位置:首页 > 移动开发 > 微信开发

kbone 高级 - 使用小程序内置组件(二)

2020-09-08 14:27 956 查看

2.5 编写系列组件

2.5.1 App.vue

在 

src/index
 下创建 
App.vue
 文件,内容如下:

[code]<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
 文件,内容如下:

[code]详细参考:
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
 文件,内容如下:

[code]<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
 文件,内容如下:

[code]<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 小程序端效果预览

[code]npm run mp

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: