1.0.1 • Published 3 years ago

tnmi-components

Licence

ISC

Version

1.0.1

Deps

Size

672 kB

Vulns

Weekly

Summary Dependency Versions

zlit-components

常用组件封装

yarn add zlit-components
// or
npm i -S zlit-components
// or
pnpm i -S zlit-components

// main.js全局注册
import zlit-components from 'zlit-components'
Vue.use(zlit-components)

【zlTitle】页面标题组件

【zlTabs】tab切换组件

【zlTextarea】文本域组件

【zlImportFile】分步骤导入excel文件组件

【zlTableFilter】表格页面筛选区域组件

【zlTable】表格组件

【zlTableEllipsis】表格单元格文字过多鼠标浮层组件

【zlEmpty】空状态组件

【zlLoading】加载中组件

【zlRadioGroup】筛选单选按钮组组件

【zlModal】弹框组件

zlTitle------页面标题组件

1. 全局注册

// main.js
import { zlTitle } from 'zlit-components'
Vue.use(zlTitle)

2. 组件内单独使用

components: {
    zlTitle: () => import('zlit-components/components/zlTitle/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
top	标题距离浏览器窗口顶部的距离	Number	56	1.0.0
newPageTitle	页面标题	String	$route.meta.title	1.0.0
visibleOk	保存按钮是否显示	Boolean	true	1.0.0
disabledOk	保存按钮是否禁用	Boolean	false	1.0.0
okText	保存按钮文字	String	保存	1.0.0
visibleCancel	退出按钮是否显示	Boolean	true	1.0.0
disabledCancel	退出按钮是否禁用	Boolean	false	1.0.0
cancelText	退出按钮文字	String	退出	1.0.0
visibleDivider	分割线是否显示	Boolean	true	1.0.0

4. 事件

事件名称	说明	回调参数	版本
ok	点击保存按钮回调	function()	1.0.0
cancel	点击退出按钮回调	function()	1.0.0

5. 插槽

插槽名称	说明	版本
left	组件左侧位置插槽，用于扩展标题显示，一般展示简短描述语	1.0.0
middle	组件中间位置插槽，一般用作扩展显示步骤条、tab切换	1.0.0
right	组件右侧位置插槽，此插槽位于保存按钮的左侧，用于扩展显示额外的按钮	1.0.0

6. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

zlTitle

// template
<zl-title
	newPageTitle="这是标题这是标题这是标题"
    :top="80"
	:visibleOk="true"
	:disabledOk="false"
	okText="确定"
	:visibleCancel="true"
	:disabledCancel="false"
	cancelText="关闭"
	:visibleDivider="true"
	@ok="okHandler"
	@cancel="cancelHandler">
    <template #left>
		<span class="tips">这是描述</span>
    </template>
    <template #middle>
		<div class="stepsBox">
    		<a-steps
                :current="1"
                size="small">
        		<a-step title="创建" />
        		<a-step title="编辑" />
        		<a-step title="完成" />
        	</a-steps>
        </div>
    </template>
    <template #right>
		<a-button>右插槽</a-button>
		<a-button>右插槽</a-button>
    </template>
</zl-title>

// script
<script>
export default {
    data() {
        return {}
    },
    methods: {
        okHandler() {
            // do something...
        },
        cancelHandler() {
            // do something...
        }
    },
    components: {
        zlTitle: () => import('zlit-components/components/zlTitle/index.vue')
    }
}
</script>

// style
<style lang='less' scoped>
span.tips {
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
}
div.stepsBox {
	width: 500px;
}
</style>

zlTabs------tab切换组件

多用于列表页面数据筛选条件切换，也可用作tab选项卡切换，但推荐使用UI库tab选项卡切换组件

1. 全局注册

// main.js
import { zlTabs } from 'zlit-components'
Vue.use(zlTabs)

2. 组件内单独使用

components: {
    zlTabs: () => import('zlit-components/components/zlTabs/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
tabList	tab列表	Array	[]，详细说明见下方	1.0.0
tabIndex	执行选中的tab下标，内部已实现v-model语法糖	Number	0	1.0.0
styleModel	组件样式风格，目前只有两种风格。【1 \| 2】	Number	1	1.0.0

tabList 属性值说明，

// 数据格式：[{ title: 'tab名称', .... }]，其中 title 字段是必须，其余根据业务逻辑随意扩展
tabList: [
    { title: '我的题库' },
    { title: '我的收藏' },
    { title: '历史记录' }
]

4. 事件

事件名称	说明	回调参数	版本
tabChange	点击tab的回调函数，包含两个参数。record：当前选中的tab信息；index：当前选中tab的下标	function(record, index)	1.0.0

5. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

（1）示例一

zlTabs

（2）示例二

zlTabs

// template
<zl-tabs
	:tabList="tabList"
	v-model="tabIndex"
	@tabChange="tabChange" />

// script
<script>
export default {
    data() {
        tabIndex: 2,
        // 数据格式：[{ title: 'tab名称', .... }]，其中 title 字段是必须，其余根据业务逻辑随意扩展
      	tabList: [
        	{ title: '我的题库' },
        	{ title: '我的收藏' },
        	{ title: '历史记录' }
      	]
    },
    methods: {
        /**
         * 切换tab回调函数
         * @param record  当前选中的tab信息
         * @param index   当前选中tab的下标
         */
    	tabChange(record, index) {
            // do something...
      		console.log(record, index)
    	}
    },
    components: {
        zlTabs: () => import('zlit-components/components/zlTabs/index.vue')
    }
}
</script>

zlTextarea------文本域组件

在UI库文本域基础上增加了字数统计功能，所有属性、事件均与UI库一致

1. 全局注册

// main.js
import { zlTextarea } from 'zlit-components'
Vue.use(zlTextarea)

2. 组件内单独使用

components: {
    zlTextarea: () => import('zlit-components/components/zlTextarea/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
value	文本域的值，内部已实现v-model语法糖	String	''	1.0.0
maxLength	限制文本域字符输入的最大长度	Number	100	1.0.0
visibleStatistic	控制是否显示字数统计区域	Boolean	true	1.0.0
...	其余API和UI库相同	...	...	...

4. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

zlTextarea

// template
<zl-textarea v-model="textareaValue" />

// script
<script>
export default {
    data() {
        textareaValue: undefined
    },
    components: {
        zlTextarea: () => import('zlit-components/components/zlTextarea/index.vue')
    }
}
</script>

zlImportFile------分步骤导入excel文件组件

项目依赖 spark-md5 第三方包，用于文件加密，需要在项目中另行安装

yarn add spark-md5

npm i spark-md5 -S

pnpm i spark-md5 -S

1. 全局注册

// main.js
import { zlImportFile } from 'zlit-components'
Vue.use(zlImportFile)

2. 组件内单独使用

components: {
    zlImportFile: () => import('zlit-components/components/zlImportFile/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
visible	导入组件是否显示，内部已实现v-model语法糖	Boolean	false	1.0.0
apiProps	执行导入的相关接口命名，详细参数见下方。	Object	详细说明见下方	1.0.0
moduleName	当前导入模块的名称，如”学生“、”激活码“等描述性文字，用于组件内展示	String	''	1.0.0
tipsInfo	第一步操作提示信息，存在默认值	Object	详细说明见下方	1.0.0

apiProps属性值说明，以下为默认值

{
    apiModuleName: undefined, // api接口文件名
    doImportCheckName: undefined, // 执行导入检查数据的方法名
    doImportName: undefined, // 执行导入的方法名
    cancelImportName: undefined, // 取消导入的方法名，若后台没有提供此方法，可不传
    downloadName: undefined // 下载模板的方法名
}

tipsInfo属性值说明，以下为默认值

{
    downloadTips: '请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除，单次导入的数据不超过10MB',
    uploadTips: '文件后缀名必须为xls或xlsx(即Excel格式)，文件大小不得大于10MB'
}

4. 事件

事件名称	说明	回调参数	版本
finished	导入文件完成后的回调函数，可以在此回调中执行更新数据列表等操作。	function()	1.0.0

5. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

zlImportFile_1 zlImportFile_2_success zlImportFile_2_fail zlImportFile_3

// template
<a-button
	type="primary"
    @click="visibleImport = true">
    导入激活码
</a-button>
<zl-import-file
    :apiProps="{
		apiModuleName: 'mmipsSystemSetApi',
        doImportCheckName: 'importCheck',
        doImportName: 'import',
        cancelImportName: 'cancelImport',
        downloadName: 'downImportTemplate'
	}"
    moduleName="激活码"
    v-model="visibleImport"
    @finished="finished" />

// script
<script>
export default {
    data() {
        visibleImport: false
    },
    methods: {
        finished() {
        	// do something...
        }
    },
    components: {
        zlImportFile: () => import('zlit-components/components/zlImportFile/index.vue')
    }
}
</script>

zlTableFilter------表格页面筛选区域组件

1. 全局注册

// main.js
import { zlTableFilter } from 'zlit-components'
Vue.use(zlTableFilter)

2. 组件内单独使用

components: {
    zlTableFilter: () => import('zlit-components/components/zlTableFilter/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
visibleFilter	控制表单区域是否显示	Boolean	true	1.0.0
visibleTableOperation	控制【表格类型】页面按钮操作区是否显示，显示在组件左侧	Boolean	true	1.0.0
visibleAdd	控制添加按钮是否显示	Boolean	true	1.0.0
addText	添加按钮的文字描述	String	添加	1.0.0
visibleDelete	控制删除按钮是否显示	Boolean	true	1.0.0
deleteText	删除按钮的文字描述	String	删除	1.0.0
selected	表格中复选框选中的数据，用于处理是否需要显示批量操作按钮，仅限表格页面布局使用	Array	详细说明见下方	1.0.0
visibleCardOperation	控制【卡片类型】页面按钮操作区是否显示，显示在组件右侧	Boolean	false	1.0.0
visibleCardBatchSwitch	控制卡片类型页面批量操作【切换按钮】是否显示前提条件 `visibleCardOperation` 的值必须为true	Boolean	true	1.0.0
visibleListSwitch	控制表格布局、卡片列表布局的【切换按钮】是否显示前提条件 `visibleCardOperation` 的值必须为true	Boolean	true	1.0.0
orderList	表格或列表数据排序切换菜单的数据	Array	详细说明见下方	1.0.0

selected属性值说明

// 一般传入的值为选中数据的id集合
[1, 2, 3, ...]

orderList属性值说明，以下为默认值

// title、value字段为必须，其余根据业务路基随意扩展
[
    { title: '最近更新', value: 1 },
    { title: '最早更新', value: 2 },
    { title: '名称A-Z', value: 3 }
]

4. 事件

事件名称	说明	回调参数	版本
resetFilterForm	重置按钮点击事件	function()	1.0.0
add	添加按钮点击事件	function()	1.0.0
del	删除按钮点击事件	function()	1.0.0
openBatch	卡片类型页面：批量操作按钮点击事件	function()	1.0.0
closeBatch	卡片类型页面：取消批量操作按钮点击事件	function()	1.0.0
switchLayout	切换表格、卡片页面布局按钮的回调，参数为当前切换布局的类型值	function(type)	1.0.0
selectAll	全选按钮点击事件，参数为checkbox的事件对象	function(e)	1.0.0
switchSort	切换排序方式的回调，参数为当前切换排序的值	function(record)	1.0.0

5. 插槽

插槽名称	说明	版本
filterFormModelItem	组件筛选区域的插槽，用于接收表单DOM	1.0.0
nonBatchOperation	组件非批量操作按钮区域的插槽，【表格布局页面】	1.0.0
batchOperation	组件批量操作按钮区域的插槽，【表格布局页面】	1.0.0
cardBatchOperation	组件批量操作按钮区域的插槽，【卡片式列表布局页面】	1.0.0

6. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

以下data、methods中声明的变量或方法仅为展示示例使用，切勿直接复制使用，请根据实际场景对变量、方法等进行规范命名。

（1）示例一

表格布局页面，显示筛选、重置、添加、删除、批量操作。

zlTableFilter_1

// template，部分属性采用了组件的默认值
<zl-table-filter
	addText="添加学生"
    deleteText="移除"
    :selected="selected"
    @resetFilterForm="resetFilterForm"
    @add="add"
	@del="del">
    <template #filterFormModelItem>
		<a-form-model-item label="学生名称">
            <a-input-search
                style="width: 200px"
                placeholder="请输入学生名称"
                allowClear />
        </a-form-model-item>
    </template>
    <template #nonBatchOperation>
		<a-button
			type="primary"
            ghost>
            扩展非批量操作按钮
        </a-button>
    </template>
    <template #batchOperation>
		<a-button
            type="primary"
            ghost>
            扩展批量操作按钮
        </a-button>
    </template>
</zl-table-filter>

// script
<script>
export default {
    data() {
        return {
          // 以下表示表格选中的2条数据，当数组长度为0时，批量操作按钮将会隐藏
          selected: [1, 2]
        }
	},
  	methods: {
        // 重置按钮点击事件
        resetFilterForm() {
          	console.log('点击重置')
        },
        // 添加按钮点击事件
        add() {
          	console.log('点击添加')
        },
        // 删除按钮点击事件
        del() {
          	console.log('点击删除')
        }
  	},
  	components: {
    	zlTableFilter: () => import('zlit-components/components/zlTableFilter/index.vue')
  	}
}
</script>

（2）示例二

使用 visibleCardOperation 属性设置显示表格、卡片布局切换按钮

zlTableFilter_2

zlTableFilter_3

// template，部分属性采用了组件的默认值
<zl-table-filter
	:visibleCardOperation="true"
    @resetFilterForm="resetFilterForm"
    @add="add"
    @del="del"
    @openBatch="openBatch"
    @closeBatch="closeBatch"
    @switchLayout="switchLayout"
    @selectAll="selectAll"
    @switchSort="switchSort">
    <template #filterFormModelItem>
		<a-form-model-item label="学生名称">
			<a-input-search
				style="width: 200px"
            	placeholder="请输入学生名称"
            	allowClear />
        </a-form-model-item>
	</template>
	<template #cardBatchOperation>
        <a-button
            type="primary"
            ghost>
            扩展按钮1
        </a-button>
        <a-button
            type="primary"
            ghost>
            扩展按钮2
        </a-button>
    </template>
</zl-table-filter>

// script
<script>
    export default {
    data() {
        return {}
	},
  	methods: {
        // 重置按钮点击事件
        resetFilterForm() {
          	console.log('点击重置')
        },
        // 添加按钮点击事件
        add() {
          	console.log('点击添加')
        },
        // 删除按钮点击事件
        del() {
          	console.log('点击删除')
        },
        // 批量操作按钮点击事件
        openBatch() {
          	console.log('点击批量操作')
        },
        // 取消按钮点击事件
        closeBatch() {
          	console.log('点击取消')
        },
        // 切换页面布局事件
        switchLayout(type) {
          	console.log(`切换页面布局为：${type}方式`)
        },
        // 全选按钮点击事件
        selectAll(e) {
          	console.log('点击全选', e)
        },
        // 切换排序事件
        switchSort(record) {
          	console.log('切换排序', record)
        }
  	},
  	components: {
    	zlTableFilter: () => import('zlit-components/components/zlTableFilter/index.vue')
  	}
}
</script>

（3）示例三

使用 visibleCardBatchSwitch 属性设置隐藏卡片式列表批量操作按钮

zlTableFilter_4

// template，部分属性采用了组件的默认值
<zl-table-filter
	:visibleCardOperation="true"
    :visibleCardBatchSwitch="false"
    @resetFilterForm="resetFilterForm"
    @add="add"
    @del="del"
    @switchLayout="switchLayout"
    @switchSort="switchSort">
    <template #filterFormModelItem>
		<a-form-model-item label="学生名称">
			<a-input-search
				style="width: 200px"
            	placeholder="请输入学生名称"
            	allowClear />
        </a-form-model-item>
	</template>
</zl-table-filter>

// script
<script>
    export default {
    data() {
        return {}
	},
  	methods: {
        // 重置按钮点击事件
        resetFilterForm() {
          	console.log('点击重置')
        },
        // 添加按钮点击事件
        add() {
          	console.log('点击添加')
        },
        // 删除按钮点击事件
        del() {
          	console.log('点击删除')
        },
        // 切换页面布局事件
        switchLayout(type) {
          	console.log(`切换页面布局为：${type}方式`)
        },
        // 切换排序事件
        switchSort(record) {
          	console.log(`切换排序`, record)
        }
  	},
  	components: {
    	zlTableFilter: () => import('zlit-components/components/zlTableFilter/index.vue')
  	}
}
</script>

（4）示例四

使用 visibleListSwitch 属性设置隐藏表格、卡片列表布局切换按钮

zlTableFilter_5

// template，部分属性采用了组件的默认值
<zl-table-filter
	:visibleCardOperation="true"
    :visibleListSwitch="false"
    @resetFilterForm="resetFilterForm"
    @add="add"
    @del="del"
    @openBatch="openBatch"
    @closeBatch="closeBatch"
    @selectAll="selectAll"
    @switchSort="switchSort">
    <template #filterFormModelItem>
		<a-form-model-item label="学生名称">
			<a-input-search
				style="width: 200px"
            	placeholder="请输入学生名称"
            	allowClear />
        </a-form-model-item>
	</template>
</zl-table-filter>

// script
// script
<script>
    export default {
    data() {
        return {}
	},
  	methods: {
        // 重置按钮点击事件
        resetFilterForm() {
          	console.log('点击重置')
        },
        // 添加按钮点击事件
        add() {
          	console.log('点击添加')
        },
        // 删除按钮点击事件
        del() {
          	console.log('点击删除')
        },
        // 批量操作按钮点击事件
        openBatch() {
          	console.log('点击批量操作')
        },
        // 取消按钮点击事件
        closeBatch() {
          	console.log('点击取消')
        },
        // 全选按钮点击事件
        selectAll(e) {
          	console.log('点击全选', e)
        },
        // 切换排序事件
        switchSort(record) {
          	console.log(`切换排序`, record)
        }
  	},
  	components: {
    	zlTableFilter: () => import('zlit-components/components/zlTableFilter/index.vue')
  	}
}
</script>

（5）示例五

隐藏筛选区，多用于配合其他筛选布局

zlTableFilter_6

// template，部分属性采用了组件的默认值
<zl-table-filter
	:visibleFilter="false"
    :visibleCardOperation="true"
    @add="add"
    @del="del"
    @openBatch="openBatch"
    @closeBatch="closeBatch"
    @switchLayout="switchLayout"
    @selectAll="selectAll"
    @switchSort="switchSort"></zl-table-filter>

// script
<script>
    export default {
    data() {
        return {}
	},
  	methods: {
        // 添加按钮点击事件
        add() {
          	console.log('点击添加')
        },
        // 删除按钮点击事件
        del() {
          	console.log('点击删除')
        },
        // 批量操作按钮点击事件
        openBatch() {
          	console.log('点击批量操作')
        },
        // 取消按钮点击事件
        closeBatch() {
          	console.log('点击取消')
        },
        // 切换页面布局事件
        switchLayout(type) {
          	console.log(`切换页面布局为：${type}方式`)
        },
        // 全选按钮点击事件
        selectAll(e) {
          	console.log('点击全选', e)
        },
        // 切换排序事件
        switchSort(record) {
          	console.log(`切换排序`, record)
        }
  	},
  	components: {
    	zlTableFilter: () => import('zlit-components/components/zlTableFilter/index.vue')
  	}
}
</script>

zlTable------表格组件

基于UI库表格组件的二次封装，包括部分默认值、表格文字超出鼠标显示浮层处理等，需要配合 tableMixins.js 使用。

1. 全局注册

// main.js
import { zlTable } from 'zlit-components'
Vue.use(zlTable)

2. 组件内单独使用

components: {
    zlTable: () => import('zlit-components/components/zlTable/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
rowKey	表格行 key 的取值	String \| Function	id	1.0.0
columns	表格列配置项，和UI库相同，新增`isHtml`属性，详细说明见下方	Array	[]	1.0.0
selectedRowKeys	表格选中的数据keys，内部已实现v-model语法糖	Array	[]	1.0.0
nonSelect	是否关闭表格选择	Boolean	false	1.0.0
tableType	表格选择类型，单选或多选，`checkbox` `radio`	String	checkbox	1.0.0
...	其余API和UI库相同	...	...	...

columns新增属性值isHtml说明

使用 ellipsis isHtml 前提必须存在 scopedSlots 属性，内部借助了UI库表格插槽渲染

ellipsis：设置为true时，表格文字长度不够展示时，显示气泡浮层展示全部，覆盖了UI库默认的样式

isHtml：设置为true时，内容将以innerHTML形式渲染

// 所有配置项内容与UI库保持一致
const tableColumns = [
    { title: '课程名称', dataIndex: 'title', width: 160 },
    {
        title: '详细内容',
        dataIndex: 'content',
        width: 220,
        scopedSlots: { customRender: 'content' },
        ellipsis: true,
        isHtml: true
    },
    ...
    { title: '操作', dataIndex: 'operation', width: 160, scopedSlots: { customRender: 'operation' } }
]

4. 事件

事件名称	说明	回调参数	版本
change	分页、排序、筛选变化时触发	function(pagination, filters, sorter)	1.0.0

5. 插槽

表格插槽为根据列配置项动态配置的，唯一不同点是，组件内部封装使用了插槽props，所以使用时需要对象解构，与UI库不同。详情见使用示例。

6. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

（1）示例一

配置列内容超出显示鼠标浮层，在列配置项中设置 isHtml ellipsis scopedSlots 实现内容以innerHTML渲染，且超出显示文字样式统一化

zlTable_1

// template
<zl-table
	:loading="tableLoading"
	:pagination="tablePagination"
	:dataSource="tableDataSource"
	:columns="tableColumns"
	v-model="selectedRowId"
    @change="
        (pagination, filters, sorter) => {
            handleTableChange(pagination, sorter)
        }
    ">
    <!-- 使用解构获取数据，存在3个值，text,record,index -->
    <template #operation="{ record }">
		<a-space :size="16">
			<span
				class="ctrl-iconfont-primary"
          		@click="showEditModal(record)">
       		 	<a-icon type="edit"/>编辑
        	</span>
    		<a-popconfirm
				placement="topRight"
                title="删除后不可恢复，是否确认删除？"
                @confirm="singleDel(record)"
                okType="danger"
                okText="删除">
        		<span class="ctrl-iconfont-danger">
            		<a-icon type="delete"/>删除
       			</span>
        	</a-popconfirm>
		</a-space>
	</template>
</zl-table>

// script 仅为示例数据
<script>
// 表格常用混入，内置部分变量、方法等
import tableMixins from '@/Mixins/tableMixins'
const tableColumns = [
    { title: '课程名称', dataIndex: 'title', width: 160 },
  	{
        title: '封面地址',
        dataIndex: 'previewUrl',
        width: 120,
        scopedSlots: { customRender: 'previewUrl' },
        ellipsis: true,
        isHtml: true
    },
  	{ title: '年级', dataIndex: 'grade', width: 140 },
  	{ title: '发布时间', dataIndex: 'publishTime', width: 160, sorter: true, field: 'F_publishTime' },
  	{ title: '状态', dataIndex: 'state', width: 120 },
  	{ title: '课程分类', dataIndex: 'curricularTaxonomy', width: 120 },
  	{ title: '课时', dataIndex: 'classHour', width: 120 },
  	{ title: '评价', dataIndex: 'evaluate', width: 120 },
  	{ title: '操作', dataIndex: 'operation', width: 160, scopedSlots: { customRender: 'operation' } }
]
export default {
    mixins: [tableMixins],
    data() {
        return {
            tableColumns
        }
    },
    methods: {
        getList() {
            this.CRUDPublic.doSelect({
                apiModulesName: 'testApi',
                apiMethodName: 'getList',
                ...
            }).then(res => {
                // 数据二次处理
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        },
        showEditModal(record) {
         	console.log(record)
        },
        singleDel(record) {
          	console.log(record)
        }
    },
    components: {
        zlTable: () => import('zlit-components/components/zlTable/index.vue')
    }
}
</script>

（2）示例二

设置tableType='radio' 启用行单选模式

zlTable_2

// template
<zl-table
    tableType="radio"
	:loading="tableLoading"
	:pagination="tablePagination"
	:dataSource="tableDataSource"
	:columns="tableColumns"
	v-model="selectedRowId"
    @change="
        (pagination, filters, sorter) => {
            handleTableChange(pagination, sorter)
        }
    ">
    <!-- 同示例一 -->
</zl-table>
// script 同示例一

（3）示例三

设置 nonSelect='true'，关闭表格单选、多选操作，使用列配置项中的插槽 scopedSlots: { customRender: 'previewUrl' } 自定义渲染数据展示

zlTable_3

// template
<zl-table
    :nonSelect="true"
	:loading="tableLoading"
	:pagination="tablePagination"
	:dataSource="tableDataSource"
	:columns="tableColumns"
    @change="
        (pagination, filters, sorter) => {
            handleTableChange(pagination, sorter)
        }
    ">
    <!-- 会覆盖组件内部的默认渲染，完全自定义 -->
    <template #previewUrl="{ record }">
		<img
     		:src="record.previewUrl"
     		alt="" />
    </template>
</zl-table>
// script 同示例一

zlTableEllipsis------表格单元格文字过多鼠标浮层组件

用于表格中单元格文字内容过多时，鼠标移入单元格显示的浮层提示组件，此效果为UI统一指定

1. 全局注册

// main.js
import { zlTableEllipsis } from 'zlit-components'
Vue.use(zlTableEllipsis)

2. 组件内单独使用

components: {
    zlTableEllipsis: () => import('zlit-components/components/zlTableEllipsis/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
text	文本内容	String	''	1.0.0
isHtml	是否以innerHTML渲染文本	Boolean	false	1.0.0

4. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

使用UI库表格组件，实现文字过多显示处理

注：【zlTable】组件内部已实现文字过多展示的处理，只需要配置对应列配置项即可。

zlTableEllipsis

//template
<a-table
    rowKey="id"
    :loading="tableLoading"
    :pagination="tablePagination"
    :dataSource="tableDataSource"
    :columns="tableColumns">
    <template #previewUrl="text">
	<zl-table-ellipsis
		:text="text"
		:isHtml="true" />
    </template>
</a-table>

// script 仅为示例数据
<script>
// 表格常用混入，内置部分变量、方法等
import tableMixins from '@/Mixins/tableMixins'
const tableColumns = [
    { title: '课程名称', dataIndex: 'title', width: 160 },
  	{
        title: '封面地址',
        dataIndex: 'previewUrl',
        width: 120,
        scopedSlots: { customRender: 'previewUrl' },
        ellipsis: true,
        isHtml: true
    },
  	{ title: '年级', dataIndex: 'grade', width: 140 },
  	{ title: '发布时间', dataIndex: 'publishTime', width: 160, sorter: true, field: 'F_publishTime' },
  	{ title: '状态', dataIndex: 'state', width: 120 },
  	{ title: '课程分类', dataIndex: 'curricularTaxonomy', width: 120 },
  	{ title: '课时', dataIndex: 'classHour', width: 120 },
  	{ title: '评价', dataIndex: 'evaluate', width: 120 },
  	{ title: '操作', dataIndex: 'operation', width: 160, scopedSlots: { customRender: 'operation' } }
]
export default {
    mixins: [tableMixins],
    data() {
        return {
            tableColumns
        }
    },
    methods: {
        getList() {
            this.CRUDPublic.doSelect({
                apiModulesName: 'testApi',
                apiMethodName: 'getList',
                ...
            }).then(res => {
                // 数据二次处理
            }).catch(err => {
                console.log(err)
            })
        }
    },
    components: {
        zlTableEllipsis: () => import('zlit-components/components/zlTableEllipsis/index.vue')
    }
}
</script>

zlEmpty------空状态组件

组件的width、height是自动的，继承父容器width、height

1. 全局注册

// main.js
import { zlEmpty } from 'zlit-components'
Vue.use(zlEmpty)

2. 组件内单独使用

components: {
    zlEmpty: () => import('zlit-components/components/zlEmpty/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
description	自定义描述内容，传入 `false` 时则不显示描述内容	String \| Boolean	暂无数据	1.0.0
image	自定义占位图路径	String	显示默认图片	1.0.0
imageStyle	控制占位图的css样式	Object	{ height: '100px' }	1.0.0

4. 插槽

插槽名称	说明	版本
description	自定义描述内容的插槽，会覆盖 `description` 属性	1.0.0
image	占位图插槽，会覆盖 `image` 属性	1.0.0
footer	额外扩展插槽，用于显示多余内容，使用频率较低	1.0.0

5. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

（1）示例一

使用默认空状态组件

zlEmpty_1

// template
<zl-empty />

// script
<script>
export default {
  	components: {
    	zlEmpty: () => import('zlit-components/components/zlEmpty/index.vue')
	}
}
</script>

（2）示例二

自定义占位图

zlEmpty_2

// template
// 方式一：使用image属性自定义占位图
<zl-empty :image="require('@i/img/systemDefault/nothing.png')" />

// 方式二：使用image插槽自定义占位图
<zl-empty>
	<template #image>
    	<img
             :src="require('@i/img/systemDefault/nothing.png')"
             alt="" />
    </template>
</zl-empty>

// script
<script>
export default {
  	components: {
    	zlEmpty: () => import('zlit-components/components/zlEmpty/index.vue')
	}
}
</script>

（3）示例三

自定义描述内容

zlEmpty_3

// template
// 方式一：使用description属性自定义占位图
<zl-empty description="暂无学生" />

// 方式二：使用description插槽自定义占位图
<zl-empty>
	<template #description>
    	<span>暂无学生</span>
    </template>
</zl-empty>

// script
<script>
export default {
  	components: {
    	zlEmpty: () => import('zlit-components/components/zlEmpty/index.vue')
	}
}
</script>

（4）示例四

修改占位图css样式

zlEmpty_4

// template
<zl-empty
	:imageStyle="{
		height: '200px'
	}" />

// script
<script>
export default {
  	components: {
    	zlEmpty: () => import('zlit-components/components/zlEmpty/index.vue')
	}
}
</script>

（5）示例五

使用footer插槽添加额外的元素，比如按钮、提示信息等

zlEmpry_5

// template
<zl-empty>
    <template #footer>
		<a-button type="primary">点击添加</a-button>
    </template>
</zl-empty>

// script
<script>
export default {
  	components: {
    	zlEmpty: () => import('zlit-components/components/zlEmpty/index.vue')
	}
}
</script>

zlLoading------加载中组件

1. 全局注册

// main.js
import { zlLoading } from 'zlit-components'
Vue.use(zlLoading)

2. 组件内单独使用

components: {
    zlLoading: () => import('zlit-components/components/zlLoading/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
tip	自定义文字描述	String	加载中...	1.0.0
...	其余API和UI库相同	...	...	...

4. 插槽

插槽名称	说明	版本
default	用于放置列表容器或其他DOM容器	1.0.0

5. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

（1）示例一

使用默认加载中尺寸

zlLoading_1

// template，仅为示例布局
<zl-loading :spinning="spinning">
	<div class="spin-content">
		<a-list
			item-layout="horizontal"
          	:data-source="data">
          	<a-list-item
            	slot="renderItem"
            	slot-scope="item">
            	<a-list-item-meta description="Ant Design, a design language for background applications">
              		<a
                		slot="title"
                		href="https://www.antdv.com/">
                		{{ item.title }}
              		</a>
              		<a-avatar
                	slot="avatar"
                	src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            	</a-list-item-meta>
          	</a-list-item>
        </a-list>
	</div>
</zl-loading>

// script
<script>
export default {
    data() {
        return {
            spinning: true,
            // 仅为示例数据
            data: [
                { title: 'Ant Design Title 1' },
                { title: 'Ant Design Title 2' },
                { title: 'Ant Design Title 3' },
                { title: 'Ant Design Title 4' },
                { title: 'Ant Design Title 4' },
                { title: 'Ant Design Title 4' }
            ]
        }
    },
  	components: {
    	zlLoading: () => import('zlit-components/components/zlLoading/index.vue')
	}
}
</script>

// style
<style scoped>
.spin-content {
	height: 500px;
    padding: 12px 20px;
    background: #fff;
}
</style>

（2）示例二

改变icon尺寸以及描述文字

zlLoading_2

// template，仅为示例布局
<zl-loading
	:spinning="spinning"
    size="large"
    tip="数据加载中...">
    <div class="spin-content">
        <a-list
        	item-layout="horizontal"
            :data-source="data">
            <a-list-item
            	slot="renderItem"
            	slot-scope="item">
            	<a-list-item-meta description="Ant Design, a design language for background applications">
              		<a
                		slot="title"
                		href="https://www.antdv.com/">
                		{{ item.title }}
              		</a>
              		<a-avatar
                		slot="avatar"
                		src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </a-list-item-meta>
            </a-list-item>
        </a-list>
    </div>
</zl-loading>

// script、style同示例一

zlRadioGroup------筛选单选按钮组组件

1. 全局注册

// main.js
import { zlRadioGroup } from 'zlit-components'
Vue.use(zlRadioGroup)

2. 组件内单独使用

components: {
    zlRadioGroup: () => import('zlit-components/components/zlRadioGroup/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
groupInfo	按钮组数据	Object	{}，详细说明见下方	1.0.0
customValue	当前选中按钮的value值，内部已实现v-model语法糖	Number\|String\|Boolean	''	1.0.0
labelAlign	label标签的文本对齐方式	String	left	1.0.0
visibleColon	label标签后跟随的冒号是否显示	Boolean	false	1.0.0

groupInfo属性值说明，

/*
 * 数据格式：
 * 根属性中必须包含title、list字段，其中list为对象数组，其余根据业务逻辑随意扩展
 * list中的每个对象元素必须包含title、value字段，其余根据业务逻辑随意扩展
 */
groupInfo: {
    title: '分类',
    list: [
        { title: '全部', value: undefined },
        { title: '春节', value: 1 }
    ]
}

4. 事件

事件名称	说明	回调参数	版本
selectedHandle	点击按钮的回调函数，包含两个参数。record：选中按钮的信息；index：选中按钮的下标	function(record, index)	1.0.0

5. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

（1）示例一

分类较多，在固定容器范围内显示不全时，样式展示，组件内部会自行计算

zlRadioGroup_1

zlRadioGroup_2

// template
<zl-radio-group
	v-model="festival"
	:groupInfo="festivalInfo"
	@selectedHandle="selectedHandle" />

// script
<script>
export default {
    data() {
        return {
            // 仅为示例数据
            festival: undefined,
            festivalInfo: {
                title: '分类',
                list: [
                    { title: '全部', value: undefined },
                    { title: '春节', value: 1 },
                    { title: '元宵节', value: 2 },
                    { title: '清明节', value: 3 },
                    { title: '端午节', value: 4 },
                    { title: '中秋节', value: 5 },
                    { title: '国庆节', value: 6 }
                ]
            }
        }
    },
    methods: {
    	selectedHandle(record, index) {
      		console.log(record, index)
    	}
  	},
  	components: {
    	zlRadioGroup: () => import('zlit-components/components/zlRadioGroup/index.vue')
	}
}
</script>

（2）示例二

label标签文本右对齐，固定容器内可全部展示

zlRadioGroup_3

// template
<zl-radio-group
	labelAlign="right"
	v-model="state"
	:groupInfo="stateInfo"
	@selectedHandle="selectedHandle" />

// script
<script>
export default {
    data() {
        return {
            // 仅为示例数据
            state: undefined,
            stateInfo: {
                title: '状态',
                list: [
                    { title: '全部', value: undefined },
          			{ title: '未发布', value: 1 },
         			{ title: '发布中', value: 2 },
          			{ title: '已发布', value: 3 }
                ]
            }
        }
    },
    methods: {
    	selectedHandle(record, index) {
      		console.log(record, index)
    	}
  	},
  	components: {
    	zlRadioGroup: () => import('zlit-components/components/zlRadioGroup/index.vue')
	}
}
</script>

zlModal------弹框组件

1. 全局注册

// main.js
import { zlModal } from 'zlit-components'
Vue.use(zlModal)

2. 组件内单独使用

components: {
    zlModal: () => import('zlit-components/components/zlModal/index.vue')
}

3. API属性

属性	说明	类型	默认值	版本
disabled	是否禁用继续添加复选框、取消、保存按钮	Boolean	false	1.0.0
visibleOk	是否显示保存按钮	Boolean	true	1.0.0
visibleCancel	是否显示取消按钮	Boolean	true	1.0.0
visibleContinue	是否显示继续添加复选框	Boolean	false	1.0.0
continueType	继续添加文字描述，用于展示“勾选后，可连续添加多个[continueType]”。如：“勾选后，可连续添加多个学科”，前提 `visibleContinue` 为true	String	''	1.0.0
...	以下API不支持修改其余API和UI库相同	...	...	...

不支持修改的API

confirmLoading：组件内部采用了disabled属性进行同时更改

getContainer：组件内部已统一更改

okButtonProps：UI风格统一处理

cancelButtonProps：UI风格统一处理

4. 事件

事件名称	说明	回调参数	版本
ok	点击保存按钮回调，参数为继续添加复选框是否为选中，true或者false	function(isContinue)	1.0.0
cancel	点击退出按钮回调	function()	1.0.0

5. 插槽

插槽名称	说明	版本
title	弹框标题	1.0.0
closeIcon	弹框关闭的icon	1.0.0
extraFooter	弹框页脚左侧位置显示区域，前提 `visibleContinue` 为false，预留插槽，使用频率较低	1.0.0
extraBtn	取消按钮与保存按钮中间位置的插槽，用于扩展显示额外的按钮	1.0.0
default	默认插槽，用于展示弹框body区域内容	1.0.0

6. 使用示例

具体操作请根据适用场景以及业务逻辑来取舍

（1）示例一

基本使用方式

zlModal_1

// template
<a-button @click="visible = true">点击</a-button>
<zl-modal
	title="添加学科"
	:visible="visible"
	:disabled="disabled"
	:afterClose="
		() => {
			Object.assign($data, $options.data())
		}
	"
	@ok="okHandler"
    @cancel="cancelHandler">
    <div class="content">
    	<a-form-model
			ref="formModel"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 18 }">
            <a-form-model-item
            	label="学段"
                prop="stage">
                <a-select
                	placeholder="请选择学段"
                    allowClear>
                    <a-select-option :value="1">小学</a-select-option>
                    <a-select-option :value="2">初中</a-select-option>
                    <a-select-option :value="3">高中</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item
				label="年级"
                prop="grade">
                <a-select
                    placeholder="请选择年级"
                    allowClear>
                    <a-select-option :value="1">一年级</a-select-option>
                    <a-select-option :value="2">二年级</a-select-option>
                    <a-select-option :value="3">三年级</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item
                label="学科"
                prop="subjectName">
                <a-input
                	placeholder="请输入学科名称"
                    autocomplete="off"
                    allowClear />
			</a-form-model-item>
        </a-form-model>
    </div>
</zl-modal>

// script
<script>
export default {
    data() {
        return {
            // 仅为示例数据
            visible: false,
      		disabled: false
        }
    },
    methods: {
    	okHandler() {
			// 模拟接口请求
            this.disabled = true
            setTimeout(() => {
                Object.assign(this, {
                    visible: false,
                    disabled: false
                })
            }, 1500)
        },
        cancelHandler() {
          	this.visible = false
        }
  	},
  	components: {
		zlModal: () => import('zlit-components/components/zlModal/index.vue')
	}
}
</script>

（2）示例二

显示继续添加复选框，通常添加数据时显示，编辑数据时隐藏，实际使用过程中请结合业务逻辑进行处理

zlModal_2

// template
<a-button @click="visible = true">点击</a-button>
<zl-modal
	title="添加学科"
    :visible="visible"
    :disabled="disabled"
    :visibleContinue="visibleContinue"
    continueType="学科"
    :afterClose="
		() => {
        	Object.assign($data, $options.data())
        }
    "
    @ok="okHandler"
    @cancel="cancelHandler">
    <div class="content">// 同示例一</div>
</zl-modal>

// script
<script>
export default {
    data() {
        return {
            // 仅为示例数据
            visible: false,
      		disabled: false,
            visibleContinue: true
        }
    },
    methods: {
    	okHandler(isContinue) {
			if (isContinue) {
                // 继续添加只重置表单、不关闭modal弹框
                // 模拟接口请求
                this.disabled = true
                setTimeout(() => {
                  	this.disabled = false
                }, 1500)
            } else {
                // 模拟接口请求
                this.disabled = true
                setTimeout(() => {
                    Object.assign(this, {
                        visible: false,
                        disabled: false
                    })
                }, 1500)
            }
        },
        cancelHandler() {
          	this.visible = false
        }
  	},
  	components: {
		zlModal: () => import('zlit-components/components/zlModal/index.vue')
	}
}
</script>

（3）示例三

不展示页脚

zlModal_3

// template
<a-button @click="visible = true">点击</a-button>
<zl-modal
	title="没有页脚"
    :visible="visible"
    :footer="null"
    @cancel="cancelHandler">
    <div class="content">展示其他内容</div>
</zl-modal>

// script
<script>
export default {
    data() {
        return {
            // 仅为示例数据
            visible: false
        }
    },
    methods: {
        cancelHandler() {
          	this.visible = false
        }
  	},
  	components: {
		zlModal: () => import('zlit-components/components/zlModal/index.vue')
	}
}
</script>

（4）示例四

使用插槽渲染

zlModal_4

// template
<a-button @click="visible = true">点击</a-button>
<zl-modal
	:visible="visible"
    :disabled="disabled"
    :width="700"
    :afterClose="
		() => {
			Object.assign($data, $options.data())
        }
    "
    @ok="okHandler"
    @cancel="cancelHandler">
    <template #title>
		<p style="color: red">添加学科</p>
    </template>
    <template #closeIcon>
		<i class="iconfont icon-a-guanbi2"></i>
    </template>
    <template #extraFooter>
		<p style="color: blue">这是扩展的提示内容</p>
    </template>
    <template #extraBtn>
		<a-button :disabled="disabled">扩展按钮1</a-button>
		<a-button :disabled="disabled">扩展按钮2</a-button>
    </template>
    <div class="content">// 同示例一</div>
</zl-modal>

// script
<script>
export default {
    data() {
        return {
            // 仅为示例数据
            visible: false,
      		disabled: false
        }
    },
    methods: {
    	okHandler() {
			// 模拟接口请求
            this.disabled = true
            setTimeout(() => {
                Object.assign(this, {
                    visible: false,
                    disabled: false
                })
            }, 1500)
        },
        cancelHandler() {
          	this.visible = false
        }
  	},
  	components: {
		zlModal: () => import('zlit-components/components/zlModal/index.vue')
	}
}
</script>