使用
- 安装
npm i fmy-ui
- 在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)
...
- 在页面/组件中直接以标签形式使用
// 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 | 插槽内容为每一屏轮播的图片内容 |