v2-ele-ui v0.1.11

v2-ele-ui

基于element-ui二次封装组件

一.组件

1.anchor

锚点定位组件

<z-anchor :data="tabs2" @change="change" :active="active"></z-anchor>

tabs2: [
        {
          id: 'test1',
          component: Test1,
            //组件传入参数
          props: {
            height: Math.floor(Math.random() * 800)
          },
            //组件emit的事件
          events:{
            
          }
        },
        {
          id: 'test2',
          component: Test1,
          props: {
          }
        },
        {
          id: 'test3',
          component: Test1,
          props: {
           
          }
        },
        {
          id: 'test4',
          component: Test1,
          props: {
            
          }
        }
      ],
      active: 'test1'

2.common-chart

ecahrts公共渲染组件

<z-common-chart :options="options" ></z-common-chart>

options:{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

3.descriptions

描述列表同el-descriptions

<z-descriptions :data="list" :column="column" :options="{title:'12'}">
      <template #age="scope">
        18岁
      </template>
    </z-descriptions>

 column: [
        {
          label: '姓名',
          prop: 'name',
          show: true
        },
        {
          label: '年龄',
          prop: 'age',
          show: (e) => {
            return true
          },
          formatter: (val) => {
            return val + '岁'
          }
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '地址',
          prop: 'address'
        },
        {
          label: '职业',
          prop: 'job'
        },
        {
          label: '民族',
          prop: 'minzu'
        }
      ],

4.ellipsis-tooltip

超出省略显示弹出框详情（参数同el-tooltip）

<div style="width: 100px;height: 20px;">
      <z-ellipsis-tooltip>
        <span>啊吧嗒吧嗒和我爸汉堡王哈阿巴巴复合布一会吧色彩u啊本次发布会</span>
      </z-ellipsis-tooltip>
    </div>

5.scroll-x

鼠标滚轮横向滚动

<div style="width: 1000px;height: 30px;">
      <z-scroll-x>
        <div style="width:2000px">
          1111111111122222222222223333333333
        </div>
      </z-scroll-x>
    </div>

6.seamless-scroll

同vue-seamless-scroll 增加对于vue事件也能响应

<z-seamless-scroll :data="column" style="height: 200px;overflow: hidden">
      <div style="height: 40px;display: flex;align-items: center"
           :key="item.label"
           v-for="item in column"
           @click="handleClick(item.label)">
        {{ item.label }}
      </div>
    </z-seamless-scroll>

7.select-tree

el-select 增加树形显示

8.table

el-table 封装

<z-table :data="table" :column="column">
      <template #age="{row,index}">
        {{ row.age }}{{ index }}
      </template>
    </z-table>

  table: [{ name: '张三', age: 14, sex: '男', address: '' }, { name: '张三', age: 14, sex: '男', address: '' }],
  column: [
        {
          label: '姓名',
          prop: 'name',
          show: true
        },
        {
          label: '年龄',
          prop: 'age',
          show: (e) => {
            return true
          },
          formatter: (val) => {
            return val + '岁'
          }
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '地址',
          prop: 'address'
        },
        {
          label: '职业',
          prop: 'job'
        },
        {
          label: '民族',
          prop: 'minzu'
        }
      ],

9.table-descriptions

自定义描述列表

<z-table-descriptions :data="list" :column="column" :options="tableOptions"></z-table-descriptions>

 list: { name: '张三', age: 14, sex: '男', address: '' },
  column: [
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '年龄',
          prop: 'age',
          formatter: (val) => {
            return val + '岁'
          },//格式化数据
          ellipsis:true,//超出省略
          span:2,//所占格子数
          row:3,//超出三行省略
          unit:'岁'，//单位
          
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '地址',
          prop: 'address'
        },
        ],
tableOptions: {
        column: 4,//列数
        odd: 4,//奇数列所占比例
        even: 5,//偶数列所占比例
        ellipsis: false//是否超出隐藏
      }

10.tabs

自定义标签切换

 <z-tabs :data="tabs" @change="handleChange" :selected="[active]"></z-tabs>

 tabs: ['test1', 'test2', 'test3', 'test4'],
 active: 'test1',
 handleChange(e) {
      this.active = e.current[0]
    },

二.指令

1.dragScrollBar

拖拽滚动el-scrollBar

2.dragTableScroll

拖拽滚动el-table

3.dragMove

拖拽移动自定义元素

4.dragScroll

拖拽滚动自定义滚动条

5.elementSize

元素大小发生变化

 <div
    v-element-size="handleChange"
  >
  <div>

6.tableFormat

原生table 列比例配置

 <table
    v-table-format="{column:tempOptions.column,odd:tempOptions.odd,even:tempOptions.even,vertical:vertical}"
  >
  </table>
  tempOptions: {
        column: 4,
        odd: 4,
        even: 5,
      },
  vertical:false

三.过滤器

1.unit

添加单位

<div>{{percent|unit('%')}}</div>

2.formatTimes

格式化时间

<div>{{time|formatTimes('yyyy-MM-dd')}}</div>

3.formatStake

格式化桩号

<div>{{stake|formatStake}}</div>
<!-- 200.030 => K200+030  -->

4.removeSuffix

移除后缀名

<div>{{fileName|removeSuffix('.')}}</div>

5.fileSize

文件大小以B、KB、MB、GB显示

6.prefix

添加前缀

<div>{{money|prefix('￥')}}</div>

四.方法

通用 dragScale creatNode

1.ArrayUtil

2.CloneUtil

3.ColorUtil

4.HttpUtil

HttpConfig = {
  baseUrl: '',
  timeout: 60 * 1000,
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  },
  withCredentials: true,
  validateStatus: function validateStatus(status) {
    return status >= 200 && status <= 500
  },
  isRepeat: false,//禁止重复请求
  requestConfig: () => {

  },
  responseConfig: () => {

  }
}

{options.cancel}取消上一请求

5.ObjectUtil

6.RandomUtil