vue2 插件 - Flyme 公共控件

Introduction

基于 vue2 开发的 Flyme 公共控件插件

• vue 版本：vue2.x

• Flyme 规范：Flyme6

Installation

$ npm install vue-flyme --save-dev

Usage

使用实例方法

通过全局方法 Vue.use() 使用插件，默认导入所有实例方法：

import Vue from 'vue';
import VueFlyme from 'vue-flyme';
Vue.use(VueFlyme);

使用公共组件

无需通过全局方法 Vue.use() 使用插件，直接导入所需组件：

import { filter, header as vfHeader } from 'vue-flyme';

同时导入实例方法与公共组件

import Vue from 'vue';
import vueFlyme, { filter } from 'vue-flyme';
Vue.use(VueFlyme);

Documentation

实例方法

alert 弹窗

• @param {String} title 弹窗标题内容

• @param {String} cancelBtnText 取消按钮文本

• @param {Function} callback 点击取消按钮的回调函数

// 示例代码
this.$alert({
    title: '我是标题',
    cancelBtnText: '知道了',
    callback: function () {
        console.log('被回调了');
    }
});

公共组件

filter - 筛选控件

• @prop {Array} list [required] 二维数组，用于筛选控件渲染的 json 数据数组

• @prop {Number} positionTop = 0 筛选控件距离屏幕顶部的距离（单位 px）

• @emit {Number, Object, Array} changeFilter 筛选条件改变事件，返回父菜单索引、所选筛选项对象以及其索引链

• @emit {Number, Boolean} isExpand 展开 / 收起事件，返回父菜单索引以及是否展开标识（true 为展开）

// 示例数据：list
[[{
    id: 0,
    name: '全部商区'
}, {
    id: 1,
    name: '香洲区',
    sublist: [{
        id: 0,
        name: '吉大'
    }]
}],[{
    id: 0,
    name: '离我最近'
}],[{
    id: 0,
    name: '全部品牌'
}]]

header - 页面顶栏

• @prop {String} title = document.title 标题

• @prop {String} color = '#666' 字体颜色

• @prop {String} backgroundColor = '#fff' 背景颜色

• @prop {Boolean} hasLine = true 是否显示底部边框线

• @emit back 左上角返回图标的点击事件

icon - 预设 SVG 图标

调用该组件可使用预设的所有 SVG 图标，该组件最终会编译为 svg 标签，并自动加上 CSS 类名，类名为图标 id 加上 icon- 前缀

• @prop {String} id [required] - 图标的 id

• @prop {Number} size = 16 - 图标的尺寸（单位：px）

• @prop {String} color = '#000' - 图标的颜色

| 预设图标 | 图标 id | | :---: | ----- | | | arrow | | | back | | | heart | | | heart-o | | | location | | | telephone | | | tick | | | trash | | | triangle | | | volume |