od-flex-box
v1.0.3
Published
解决flex布局多列时,右侧会有部分空白的问题
Downloads
22
Readme
od-flex-box 插件
开发说明
克隆仓库并运行
git clone https://gitee.com/liushuzhu/od-flex-box.git
cd vue-flex-box
yarn
yarn serve
打包
npm run buildtonpm 打包为npm包
npm login 登录账号
npm publish 发布npm包
使用说明
安装插件
npm i od-flex-box
引入插件
import 'od-flex-box/lib/vue-flex-box.css'
import FlexBox from 'od-flex-box/lib/vue-flex-box.common.js'
Vue.use(FlexBox)
使用方式
<flex-box :item-width="150" :dataList="[1,2,3]" autoComple>
<div
slot="item"
slot-scope="{item}"
:style="{backgroundColor:item}"
>
<span>{{ item }}</span>
</div>
</flex-box>
自定义属性说明
|属性名称|类型|功能简介|默认数据| |:-|:-:|:-:|:-:| |dataList|Array|列表数据|[]| |itemWidth|Number|选项默认宽度|100| |delay|Number|宽度变化响应延时,单位ms|30| |center|Boolean|不足一行时内容居中|false| |autoComple|Boolean|不足一行时宽度自动补全|false| |styles|Object|列表项自定义样式|{}| |keyLabel|String|key属性绑定的字段|index|