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
相关文章推荐
- kbone 高级 - 使用小程序内置组件
- 数据提供程序中Command组件使用
- 使用VS2005建立安装程序--内置复选框对话框
- .Net——使用.net内置处理程序处理自定义节点Demo
- FSO内置组件使用方法
- Windows 防火墙无法运行 - “由于另一个程序或正在运行的服务可能正在使用网络地址转换组件(Ipnat.sys)”
- 微信小程序例子——使用text组件实现转义符换行
- 使用IE内置组件实现web页面打印 --终于找到了
- 利用ATL创建com组件和如何在程序中使用组件的接口函数和设置接口的属性
- Windows server 2008 64-bit计划任务运行使用了excel 2003 32-bit .net开发组件的程序遇到的问题
- 某公司的一程序使用Framework组件需要升级到3.5版本
- Android 高级UI设计笔记01:使用ExpandableListView组件(ListView的扩展)
- 微信小程序例子——如何使用view组件显示文字
- java高级编程,JNI的使用。c程序调用java代码
- 用ASPJPEG组件高级使用方法介绍
- Flex 3: 构建高级用户界面 使用数据提供程序1
- 使用VS2008自带的单元测试组件来测试纯c++程序
- Delphi2010中DataSnap高级技术(5)—建立稳定服务程序之TCP心跳包的使用
- firefox附加组件开发者指南(四)——使用XPCOM:实现高级处理
- Windows Forms高级界面组件-使用对话框