framework 7 2.0 使用手记

本文主要记录 framework7 样式与 vue 搭配使用的几个点

  1. 初始化方法
    1. 在 new vue 后再 初始化 framework7
    2. 在 framework7 初始化后 使用 vue 也是可以的,但是这会牵扯到一些问题
    3. 以上两者建议采用1 将所有 framework7 初始化放在 vue 的 mounted 方法中,framework7 创建的一些变量可以放到 vue 的 data 对象中
  2. smartselect 使用
    html 代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <a href="#" class="item-link smart-select">
    <select multiple v-model="tags" name="tags">
    <option disabled>-请选择-</option>
    <option v-for="(item,id) in tag" v-bind:value="item.id">{{item.name}}</option>
    </select>
    <div class="item-content">
    <div class="item-inner">
    <div class="item-title"></div>
    </div>
    </div>
    </a>

    javascript代码 主要此方法要放到 vue 的 mounted 里面,确保dom节点已经被创建

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    smartSelect = myApp.smartSelect.create({
    el: '.smart-select',
    openIn: 'popover',
    valueEl: 'item-content',
    on: {
    closed: function () {
    //可以在此监听关闭事件
    }
    }
    })
    myApp.on('smartSelectClosed', function (smartSelect) {
    可以通过这个来监听关闭事件
    })

后续是要做一个单页面应用试试

framework7 如果不使用打包方式,感觉还是比较困难的,今天又折腾了这个 smartselct 发现如果 页面输出显示会有些严重问题,smartselect初始化的时候会对 将 vue 创建的节点给丢弃, vue 在 mounted 后 如果更改动态数据 smartselect 的选中项是不会变动的

  • Post author: hainuo
  • Post link: framework7v2.x
  • Copyright Notice: All articles in this blog are licensed under BY-NC-SA unless stating additionally.