element-ui-kz

基于 element-ui 组件扩展

安装

npm i element-ui-kz
# or
yarn add element-ui-kz

引入

在 main.js 中写入以下内容：

import ElementUIKz from 'element-ui-kz';
import 'element-ui-kz/dist/index.min.css';

Vue.use(ElementUIKz);

多选全选下拉

<el-multiple-select v-model="value">
  <el-option value="1" label="类型1"></el-option>
  <el-option value="2" label="类型2"></el-option>
  <el-option value="3" label="类型3"></el-option>
</el-multiple-select>

全选勾选组

<el-checkbox-all-group v-model="value">
  <el-checkbox label="类型1"></el-checkbox>
  <el-checkbox label="类型2"></el-checkbox>
  <el-checkbox label="类型3"></el-checkbox>
</el-checkbox-all-group>

溢出滚动

<el-rollbar style="width: 300px;">
  <div class="box">
    <div>标题一</div>

    <div>标题二</div>

    <div>标题三</div>

    <div>标题四</div>

    <div>标题五</div>

    <div>标题六</div>
  </div>
</el-rollbar>

文件上传

<template>
  <el-upload-image v-model="form.url" :httpRequest="httpRequest"></el-upload-image>
</template>

<script>
export default {
  data() {
    return {
      form: {
        url: null
      }
    }
  },

  methods: {
    async httpRequest(params) {
      const fd = new FormData();
      fd.append('file', params.file);

      const res = await fetch("http://localhost:8080/", {
        "headers": {
        },
        "method": "POST",
        "body": fd,
      });

      if (res.status == 200) {
        console.log('响应值', res)

        // 需返回路径
        return res.data.url;
      }
      else {
        this.$message.warning('请求失败');
      }
    }
  }
}
</script>

自适应

<el-adapter>
  <template v-slot="{ height }">
    <div :style="{
      background: '#fff9f8',
      height: height / 2 + 'px'
    }"></div>
  </template>
</el-adapter>

表格分页

<template>
  <el-pagination-plus :pagination.sync="pagination" @page-change="handlePageChange">
  </el-pagination-plus>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        total: 100,
        pageIndex: 1,
        pageSize: 10,
      },
    }
  },

  methods: {
    handlePageChange(pageIndex, pageSize, isCurrent) {
      console.log(this.pagination, pageIndex, pageSize, isCurrent);

      // 刷新表格数据
      // this.tableData.reverse();
    },
  }
}
</script>

气泡确认框

this.$popover.confirm({
  width: 200,
  // target: event.target,
  // message: <p>确定删除？</p>,
  message: '确定删除？',
  ok: (close) => {
    console.log('ok')

    // 删除后，关闭
    close();
  },

  cancel: () => {
    console.log('cancel')
  }
});