Novice Prime Minister

    vue-flyme

    0.3.13 • Public • Published

    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

    Keywords

    Install

    npm i vue-flyme

    DownloadsWeekly Downloads

    0

    Version

    0.3.13

    License

    ISC

    Last publish

    Collaborators

    • fecoder
    • htmlin