vue-flyme

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 } 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 数据数组

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

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

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

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