HtUI使用文档

---

一、HtUI是什么

HtUI是基于ElementUI@2.14进行二次开发的一套UI库 并且该文档中的HtUI版本是大于等于@1.3.58。
HtUI源码库请移步这里

---

二、使用步骤

1.引入库

代码如下：

yarn add htui-yllkbz
import Htui from "htui-yllkbz"
import "htui-yllkbz/lib/htui.css";
Vue.use(Htui);

2.组件库

1.HtExport–导出文件

组件使用说明:主要用于附件的导出 将主要的导出方法进行了统一封装处理

 <ht-export method="method" :url="url" :exportBefore="exportBeforeFunc" :fileName="fileName"></ht-export>

Attributes/Events:

Slot:

---

2.HtDrawer–抽屉

组件使用说明:对el-drawer进行了优化和封装 ,默认添加了foot以及对body内容进行滚动条处理

 
    <ht-drawer
      v-model="state.visible"
      :title="title"
      @onOk="onOk"
      @onCancel="onCancel"
    >
     ...
     body
     ...
    </ht-drawer>

Attributes/Events:

Slot:

---

3.HtSelectUser–选择用户

组件使用说明:主要用于在系统中需要选择部门下用户时候或者查看用户时候使用

 <ht-select-user v-model="value"></ht-select-user>

Attributes/Events:

---

4.HtSelectOrg–选择部门

组件使用说明:主要用于在系统中需要选择部门或者查看部门时候使用

 <ht-select-org v-model="value"></ht-select-org>

Attributes/Events:

---

4.HtSelectBaseData–选择基础数据

组件使用说明:主要用于在系统中需要选择基础数据时候使用

 <ht-select-base-data v-model="value"></ht-select-base-data>

Attributes/Events:

---

5.HtTable–table表格

组件使用说明:在系统中表格样式和功能统一封装(基于Element UI具体文档也可以参考https://element.eleme.cn/#/zh-CN/component/table),该组件主要提供了分页功能,列的自定义展示功能,列的拖动排序功能

 <ht-table
      :data="state.dataSource"
      @onchange="changePage"
      border
      height="calc(100vh - 200px)"
      highlight-current-row
      :page-info="{
        currentPage: state.currentPage,
        pageSize: state.maxResultCount,
        skipCount: state.skipCount,
        totalCount: state.totalCount,
      }"
      :columns="state.columns"
    >
      <template slot-scope="{ row }" slot="handel">
        <el-button type="text" style="margin-left:12px" @click="edit(row)"
          >编辑</el-button
        >
      </template>
    </ht-table>

Table Attributes:

Column Attributes/Events:

PageInfo Attributes/Events:

Table Events:

主要的事件都可以参考Element UI官方 这里不在详细列出,只列出新增部分

Table Slot:

6.HtSelectCron–选择CRON表达式

组件使用说明:主要用于在系统中需要选择cron表达式时候使用,自动解析表达式内容

 <ht-select-cron v-model="value"></ht-select-cron>

Attributes/Events:

---

7.HtSelectTimeSlot–选择时间段(PT表达式)

组件使用说明:主要用于在系统中需要选择时间段(PT表达式)时候使用,自动解析表达式内容

 <ht-select-time-slot v-model="value"></ht-select-time-slot >

Attributes/Events:

---

其他

如果发现什么bug可以在评论区留言,正在不断完善中