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 插槽内容为每一屏轮播的图片内容

Readme

Keywords

Package Sidebar

Install

npm i fmy-ui

Weekly Downloads

1

Version

1.0.7

License

ISC

Unpacked Size

71.4 kB

Total Files

4

Last publish

Collaborators

  • fmier