1.0.3 • Published 11 months ago
od-flex-box v1.0.3
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 |
交流群
