Nuanced Pterodactyl Monk

    fmy-ui

    1.0.7 • Public • Published

    使用

    1. 安装
    npm i fmy-ui
    1. 在vue2.x工程项目的main.js导入并注册
    // 全部导入
    import fmyUi from 'fmy-ui'
    import 'fmy-ui/style/index.css'
    Vue.use(fmyUi)
    
    // 按需导入
    import {FLoadMore,FTab,...} from 'fmy-ui'
    import 'fmy-ui/style/index.css'
    Vue.use(FLoadMore)
    Vue.use(FLoadMore)
    ...
    1. 在页面/组件中直接以标签形式使用
    // tab组件集
    <template>
      <div>
        <FTabs :currentIndex="curIndex" @changeIndex="changeIndex">
          <f-tab label="首页" index="1">
            <div>内容1</div>
          </f-tab>
          <f-tab label="购物车" index="2">
            <div>内容2</div>
          </f-tab>
          <f-tab label="我的" index="3">
            <div>内容3</div>
          </f-tab>
        </FTabs>
      </div>
    </template>
    
    <script>
    export default {
      name: 'FTabTest',
      data() {
        return {
          curIndex: "1"
        }
      },
      methods:{
        changeIndex(index) {
          this.curIndex = index
        }
      }
    }
    </script>
    <style scoped>
    </style>

    文档

    tab 组件集

    FTabs Attributes

    参数 说明 类型 可选值 默认值
    currentIndex 当前选中的tab string/number - "1"

    FTabs Events

    事件名 说明 回调参数
    changeIndex 切换tb时触发 value:string/number

    FTabs Slots

    name 说明
    default 插槽内容为多个切换的FTab组件导航

    FTab Attributes

    参数 说明 类型 可选值 默认值
    index tab的唯一索引 string/number - ""
    label tab标签名 string ”“

    FTab Slots

    name 说明
    default 插槽内容为每个FTab对应显示的content

    lazyloadmore 滚动懒加载组件

    FLazyLoadMore Attributes

    参数 说明 类型 可选值 默认值
    allList 要渲染的整个列表数据 array - []
    size 一屏要渲染的dom列表数 number - 10

    FLazyLoadMore Slots

    name 说明
    default 插槽内容一般为一些列表展示的瀑布流组件

    virtualscroll 虚拟滚动组件

    FVirtualScroll Attributes

    参数 说明 类型 可选值 默认值
    dataList 请求回的整个列表数据 array - []
    viewH 外部可视区容器高度 number - 500
    itemH 滚动列表单项高度 number - 60

    FVirtualScroll Slots

    name 说明
    default 插槽内容滚动列表的单项item组件,通过作用域插槽传itemDataObj为列表每一个的数据对象

    scroloadmore 滚动加载组件(配合后端分页)

    FScroLoadMore Attributes

    参数 说明 类型 可选值 默认值
    partList 当前已请求回来的列表 array - []
    size 一屏要渲染的列表数 number - 10
    curPage 当前请求的最新页码 number - 1
    total 数据列表总数 number - 0

    FScroLoadMore Events

    事件名 说明 回调参数
    curPageChange 滚动触底时触发 curPage:要加载的下一页页码

    FScroLoadMore Slots

    name 说明
    default 插槽内容一般为一些列表展示的瀑布流组件,作用域插槽可获取列表数据partList在父组件中自定义渲染结构

    pagination 分页加载组件(配合后端分页)

    FPagination Attributes

    参数 说明 类型 可选值 默认值
    curPage 当前页的页码(可选) number - 1
    pageSize 一页要请求的数据量,也是渲染的dom列表数 number - 10
    total 总数据量 number - 0
    continues 分页器的连续页码数量(一般传奇数,可选) number - 5

    FPagination Events

    事件名 说明 回调参数
    getCurPage 点击分页器进行任意切换页码操作时触发 curpagenum:点击切换的页码数

    zoom 放大镜组件

    FZoom Attributes

    参数 说明 类型 可选值 默认值
    zoomImg 放大镜显示的图片 string - http://i1.sanwen.net/doc/1701/821-1F119101459.png

    tabbar组件集

    FTabbar Slots

    name 说明
    default 插槽内容为多个切换的FTabbarItem

    FTabbarItem Attributes

    参数 说明 类型 可选值 默认值
    path 路由跳转路径 string - 必传
    activeColor tabbarItem文字选中时的颜色 string - "rgba(72, 104, 245, 0.702)"

    FTabbarItem Slots

    name 说明
    item-icon tabbarItem默认图标
    item-icon-active tabbarItem激活选中时的图标
    item-text tabbarItem的文字

    swiper轮播图/跑马灯 组件集

    FSwiper Attributes

    参数 说明 类型 可选值 默认值
    swiperH 轮播图组件高度 number - 160
    showIndicator 是否显示指示器 boolean true/false true
    indiActiveColor 指示器激活样式 string - rgba(72, 104, 245, 0.702)
    showArrow 是否显示方向键 boolean true/false true
    interval 自动轮播间隔时间 number - 3000(ms)
    animDuration 轮播切换过渡效果 number - 300(ms)
    moveRatio 手指滑动轮播图片超过swiper宽度的多少占比后,松手能放映下一张 number - 1/4(0.25)

    FSwiper Events

    事件名 说明 回调参数
    transitionEnd 轮播完成触发(包括自动&手动轮播) index:number(表示当前轮播图索引)

    FSwiper Slots

    name 说明
    default 插槽内容为轮播图轮播内容(即包含的FSwiperItem)

    FSwiperItem Slots

    name 说明
    default 插槽内容为每一屏轮播的图片内容

    Install

    npm i fmy-ui

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    71.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • fmier