0.0.9 • Published 6 years ago
af-elements v0.0.9
af-element
UI-开源组件库，会封装一些element-ui的组件，使其更方便达到我们的需求， 也会独自开发一些组件使用，因时间有限不定期更新中 项目无法启动请下载后自行查看代码使用
安装
npm i af-elements
npm i element-ui -S在main.js引入
import afComponents from 'af-element'
import ElementUI from 'element-ui';
Vue.use(ElementUI);
Vue.use(afComponents)使用示例
<af-button ><af-button/>按钮
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 按钮size | String | mini/small/medium | mini |
| type | 按钮类型 | String | primary/success/info/warning/danger | 无类型 |
| round | 是否圆角 | Boolean | true/false | false |
| @click | 点击事件 | - | - | - |
slot
| 名称 | 说明 |
|---|---|
| - | 自定义内容 |
biglog弹框（使用element封装）
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| show | 显示隐藏 | Boolean | true/false | false |
| title | 主标题名 | String | 自定义 | 新建方案向导 |
| tabs | 左侧标签页 | Array | 无 | [] |
| ruleFun | 内部校验回调 | Function | 无 | false |
tabs预览
var tabs=[
{
label:'xxx1',//tabs名字
name:"1",//第一步 必须是"1"
disable:false,//是否禁用
slot:'setmsg'//父组件具名插槽名称
},
{
label:'xxx2',
name:"2",
disable:true,
slot:'setmonth'
},
{
label:'xxx3',
name:"3",
disable:true,
slot:'setpower'
},
{
label:'xxx4',
name:"4",
disable:true,
slot:'setbuy'
},
]总体预览
<af-biglog
ref="bigLog"
:title="digTitle"
:show.sync="digShow"
@nextCallback="nextCallback"
@computedSave ="computedSave"
:tabs.sync="tabs"
:ruleFun="ruleFun"
>
<!--nextCallback为下一步回调返回值res为第几步-->
<!--computedSave未保存回调-->
<div slot="setmsg" class="biglog-class">
</div>
<div slot="setmonth">
</div>
<div slot="setpower"> </div>
<div slot="setbuy"> </div>
</af-biglog>drawer查询面板（使用element封装）
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 名称 | String | 自定义 | 查询面板 |
| modal | 显示隐藏 | Boolean | true,false | false |
<base-drawer >
</base-drawer>导出（使用element封装）
记得引入axios
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| buttonName | 按钮名称 | String | 自定义 | 导出 |
| path | 接口路径 | String | 自定义 | '' |
| data | 接口参数 | Object | 无 | {} |
| type | 接口类型 | get/post | 无 | get |
| fileName | 文件名字 | String | 自定义 | 文件 |
| fileSuffix | 文件后缀 | String | 自定义 | .xls |
大屏标签展示
<af-tabCard
:data="data"
:topStyle="topStyle"
:bottomStyle="bottomStyle"
/>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 数据结构 | Object | {val:'',text:''} | {} |
| topStyle | 上文字样式 | String | 自定义 | 'font-size: 32px;' |
| bottomStyle | 下文字样式 | String | 自定义 | 'font-size: 16px;color: #a9a9a9;' |
slot:自定义
以列为表头的表格（可包含子集）
<div style="width: 100%">
<automaticTable
:header="header"
:body="body"
/>
</div>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| header | 表头 | Array | header:{title:'123'},{title:'qaq'},{title:'qwe'} | [] |
| body | 列 | Array | body:[{list:'测试1',2,3,4, level:1},{list:'测试2',6,7,8, level:2},{list:'测试3',29,39,49, level:3} | [] |
注若以列为表头可设置header=[],body可以为[qaq:{chidren:[]}]包含chidren的格式内部有做数组扁平化操作 import { delayer } from '@/assets/js/tool' 可以去我的github引入tools.js github地址：https://github.com/PleaseStartYourPerformance/js-tools/tree/master/src
Vue富文本编译器vue-quill-editor组件封装
<edit
:noun="noun"
>
</edit>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| noun | 无 | String | 自定义 | null |
| editorOption | 工具栏 | Object | 自定义 | {} |
学习文章----https://blog.csdn.net/div_ma/article/details/79536634
Echarts组件封装
<charts
style="height: 200px"
:option="lineOption"
id="pieChart1" />| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| id | 用到得id不传会使用随机数 | String | 自定义 | 随机数 |
| option | option | Object | 自定义 | {} |
| citys | 地图json | Object | 自定义 | {} |
| className | class类 | String | 自定义 | chart |
| width | 宽 | String | 自定义 | '100%' |
| height | 高 | String | 自定义 | '100%' |
日历组件-vue版本
含有接口联调具体请看具体代码默认数据都包含
左侧弹框组件
<diglogLeft
:diglog_tab1_style="diglog_tab1_style"
:diglog_tab2_style="diglog_tab2_style"
:show_style="0"
:show_style="200"
/>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| diglog_tab1_style | 自定义最外层div样式(可设置宽高) | Object | 自定义 | {} |
| diglog_tab2_style | 自定义按钮div样式 | Object | 自定义 | {} |
| show_style | 弹出距离（原理margin-left） | String | 自定义 | '0' |
| hide_style | 隐藏的距离 | String | 自定义 | '0' |
结语 持续更新中