❤
npm
Sign UpSign In

@uublue/yimi-element

0.2.8 • Public • Published

Yimi Element

yimi-element是一个Element UI的增强组件库，目前包含组件：表格、模态框、操作、下载器、多选框组、开关面板、控制面板等。

详细文档

注意，为了提高易用性，0.2.x版本，组件的设计变更较大，组件名、属性名、插槽名和插槽绑定值发生了很多变化。具体变化，参考详细文档

学习项目

安装模块

npm install @uublue/yimi-element

使用模块

import Vue from 'vue'
// 引入Element UI
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 引入YimiElement
import YimiElement from '@uublue/yimi-element'
import '@uublue/yimi-element/lib/yimi-element.css'
Vue.use(YimiElement)

因为yimi-element是对Element UI的封装，所以必须引入Element UI。

组件简介

表格组件 Table

高度集成的表格组件

特性

  • 完全保留ElTable的功能
  • 能从接口获取数据并渲染，也能直接通过prop传data，格式为数组或{rows: any[], total: number, summary: any}
  • 多种列渲染方式（formatter、render、插槽），插槽能控制列的标题或数据单元格
  • 自动分页，支持前端分页和后端分页；自动计算合计行
  • default(默认）插槽，保留el-table默认插槽的功能，可以插入el-table-column
  • search-bar(搜索栏）插槽，有表单自动验证的功能
  • action-bar(操作栏）插槽，用于放置操作按钮
  • tools(工具）插槽，用于放置简易的工具
  • append 插槽，保留el-table的append插槽
  • pagination(分页）插槽，可以替换默认的分页
  • 可通过provide/inject注入（一般在App.vue全局注入），替换内置的默认逻辑：默认axios对象，默认tools，model-merger、page-merger、sort-merger、res-adapter、on-query-fail
  • 接口查询到的数据可以格式化后再渲染：res-adapter函数
  • 合理的缺省设计

简单用法

用法1
代码
<!-- api属性传入接口配置项，columns属性传入表格列的配置 -->
<yi-table
    :api="{
        url: '/user',
        method: 'get',
    }"
    :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
        }
    ]"
    :page-sizes="[5, 10]"
>
    <template #search-bar="{ model, refresh }">
        <!-- 发送请求时，表单可以被找到并验证 -->
        <!-- 表单的model直接绑定作用域插槽暴露的内置model -->
        <el-form :model="model" size="mini" inline label-position="left">
            <el-form-item label="姓名">
                <!-- 表单数据绑定在内置model上，修改表单数据会修改内置model，发送请求时就会带上表单数据 -->
                <el-input v-model="model.name"></el-input>
            </el-form-item>
            <el-form-item>
                <!-- 按钮的点击事件，直接调用作用域插槽暴露出来的refresh方法，触发表格再次请求数据并刷新 -->
                <el-button type="primary" @click="refresh">查询</el-button>
            </el-form-item>
        </el-form>
    </template>
</yi-table>
接口返回数据
{
	rows: [
	  {
          id: 1,
          name: "乔治",
          age: 17,
          gender: 1,
          score: 95
	  },
	  {
          id: 2,
          name: "海伦",
          age: 18,
          gender: 0,
          score: 98
	  },
	  {
          id: 3,
          name: "杰西卡",
          age: 19,
          gender: 0,
          score: 95
	  },
	  {
          id: 4,
          name: "约翰",
          age: 17,
          gender: 1,
          score: 90
	  },
	  {
          id: 5,
          name: "埃里克",
          age: 18,
          gender: 1,
          score: 55
	  }
	],
	summary: {score: 1200},
	total: 20
}
效果图

用法2
代码
<!-- column的formatter可以对数据进行格式化 -->
<!-- column的render可以用函数方式渲染列 -->
<!-- 两个同时存在时，render函数中的value是经过formatter处理后的 -->
<yi-table
    :api="{
        url: '/user',
        method: 'get',
    }"
    :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
            formatter: (row, column, value) => {
                return value == 0 ? '女' : value == 1 ? '男' : '';
            },
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
            render: (h, { value }) => {
                return h(
                    'el-tag',
                    {
                        props: {
                            type:
                            value < 60 ? 'danger' : value > 80 ? 'success' : 'info',
                        },
                    },
                    value
                );
            },
        },
    ]"
    :page-sizes="[5, 10]"
/>
接口返回数据

同用法1

效果图

用法3
代码
<yi-table 
    :api="{
        url: '/user',
        method: 'get',
    }"
    :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
        },
        {
            label: '操作',
            prop: 'opt',
        },
    ]"
    :page-sizes="[5, 10]" 
>
    <!-- 动态插槽，插槽名以~~开头，后跟prop值，columns中对应列的标题渲染将使用该插槽 -->
    <template #~~name="{ column }">
        <el-link type="primary" size="mini">{{ column.label }}</el-link>
    </template>
    <!-- 动态插槽，插槽名以~开头，后跟prop值，columns中对应的列的渲染将使用该插槽 -->
    <template #~opt="{refresh}">
        <!-- 按钮的点击事件，调用动态列插槽作用域中暴露的refresh函数，触发表格刷新 -->
        <el-button type="text" @click="refresh">修改</el-button>
    </template>
</yi-table>
接口返回数据

同用法1

效果图

用法4
代码
<!-- 不从接口查询数据，而是直接使用data属性传入数据 -->
<yi-table
    :columns="[
        {
            label: '姓名',
            prop: 'name',
        },
        {
            label: '年龄',
            prop: 'age',
            align: 'center',
        },
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
        },
        {
            label: '分数',
            prop: 'score',
            align: 'center',
        },
    ]"
    :data="[
        {
            id: 1,
            name: '乔治',
            age: 17,
            gender: 1,
            score: 95,
        },
        {
            id: 2,
            name: '海伦',
            age: 18,
            gender: 0,
            score: 98,
        },
        {
            id: 3,
            name: '杰西卡',
            age: 19,
            gender: 0,
            score: 95,
        },
        {
            id: 4,
            name: '约翰',
            age: 17,
            gender: 1,
            score: 90,
        },
        {
            id: 5,
            name: '埃里克',
            age: 18,
            gender: 1,
            score: 55,
        },
    ]"
/>
接口返回数据

同用法1

效果图

动态展示

操作组件 Action

需要调用后端操作接口（增、删、改，查）时，一般是通过点击一个触发器（比如一个button、link，或tag），弹出一个模态框，输入一些数据（或者无数据输入），然后构造请求数据并发送给接口，再根据请求的结果做相应的后处理，该组件就是对以上过程的封装。

特性

  • 触发器(button、link、tag)和模态窗（dialog或drawer）的功能完全保留
  • 使用默认插槽时，点击触发器会先出现模态框，再在模态框中触发请求发送
  • 不使用默认插槽时，点击触发器，如果配置了confirm-text会先弹框等待确认，再决定是否发送请求，否则直接发送请求
  • 多点控制最终发送的请求数据：api函数 （用于构造基础api配置项）、model-merger（从内置model数据合并）、page-merger(从分页参数合并)、sort-merger（从排序参数合并），onSubmit函数 （可以替换内置的提交处理）
  • 内置model数据的存续可以配置：always、submit、never
  • 发送请求前，会对默认插槽中找到的第一个form表单进行验证（无表单则不验证），验证不通过，会抛出事件
  • 可通过provide/inject注入（一般在App.vue全局注入），替换内置的默认逻辑：默认axios对象、默认model-merger（从内置model构造请求数据）、on-submit-fail
  • 合理的缺省设计

用法

用法1
代码
<yi-action
    text="新增用户"
    :api="{
        url: '/user',
        method: 'post',
    }"
>
    <template #default="{ model }">
        <el-row>
            <el-col>
            <!-- 此时，表单位于其他组件的插槽内，发送请求时，仍然可以被找到并验证 -->
            <!-- 表单的model直接绑定默认作用域插槽暴露的内置model，\
                表单数据也绑定在该model上，修改表单数据会修改内置model，发送请求时就会带上表单数据 -->
            <el-form :model="model" inline>
                <el-form-item prop="name" required label="姓名">
                    <el-input v-model="model.name" />
                </el-form-item>
            </el-form>
            </el-col>
        </el-row>
    </template>
</yi-action>
效果图

用法2
代码
<yi-action
  text="修改用户"
  type="warning"
  :api="{
    url: '/user',
    method: 'put',
  }"
  :on-open="({ model, context, load, resolve }) => {
      // 调用load方法，开始加载(出现加载样式)，调用resolve方法会停止加载（加载样式消失）
      load().then(() => {
        // 如果context中没有部门树的选项数据，则查询
        if (!context.deptOptions) {
          // request对象是http客户端
          request({
            url: '/department/tree',
          }).then((res) => {
            // resolve方法，第一个参数是要合并到内部model的数据，会影响到请求发送的数据，\
            // 第二个是要合并到内部context的数据，不会影响到请求发送的数据
            // 将查询到的部门树数据放入context，字段名是deptOptions
            resolve({}, { deptOptions: res.data.rows });
          });
        } else {
          resolve();
        }
      });
    }
  "
>
  <!-- 默认插槽，是modal的窗体，默认的modal类型是dialog，还可以是drawer -->
  <template #default="{ model, context }">
    <el-form :model="model" inline>
        <el-form-item prop="name" required label="姓名">
            <el-input v-model="model.name" />
        </el-form-item>
        <el-form-item prop="deptId" label="部门">
            <!-- 使用context中提前准备好的部门选项数据 -->
            <el-cascader
                v-model="model.deptId"
                placeholder="请选择部门"
                :options="context.deptOptions"
            />
        </el-form-item>
    </el-form>
  </template>
</yi-action>
效果图

用法3
代码
<yi-action
    text="删除"
    type="danger"
    :api="() => {
        return {
            url: `/user/${row.id}`, //上下文有row对象，比如处于表格数据单元格中
            method: 'delete',
        };
    }
    "
    confirm-text="是否删除？"
    @on-submit-success="(res, model) => {
        console.log('删除成功', res, model);
    }
    "
/>
效果图

动态展示

交流方式

QQ群: 956379914

Email: uublue@126.com

Readme

Keywords

Package Sidebar

Install

npm i @uublue/yimi-element

Homepage

yimi.uublue.com

Weekly Downloads

238

Version

0.2.8

License

none

Unpacked Size

1.48 MB

Total Files

10

Last publish

Collaborators

  • uublue.com
Try on RunKit
Report malware