kbone高级 - 使用小程序内置组件（二）

小咪咪 2023-10-06 14:44 8阅读 0赞

#### 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>
          
        </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

![a9d68b62aaf248e3ad48e5b4c78f07ec.png][]

[a9d68b62aaf248e3ad48e5b4c78f07ec.png]: https://img-blog.csdnimg.cn/a9d68b62aaf248e3ad48e5b4c78f07ec.png