幼儿园业务组件使用说明

inspinia绿色风格的vue组件

说明

选择框组件

in-select

基础用法

<template>
<!-- 为select组件传入options选项即可生成下拉框组件，具体格式参见属性表 -->
<in-select
placeholder="请选择"
v-model="testValue"
:options="options">
</in-select>
</template>

<script>
export default {
data() {
return {
options: [
{
label: '选项一',
value: 1,
},
{
label: '选项二',
value: 2，
}，
],
testValue: 0,
};
},
};
</script>

可过滤选项

<!-- 传入filterable选项即可开启搜索过滤，暂时仅支持对选项的label过滤 -->
<in-select
filterable
placeholder="请选择"
v-model="testValue"
:options="options">
</in-select>

远程搜索

<!-- 传入filterable的同时传入remoteMethod方法即可实现远程搜索,参数参见属性表 -->
<in-select
filterable
placeholder="请选择"
v-model="testValue"
:options="options"
:remoteMethod="remoteMethod">
</in-select>
<script>
export default {
// data同上
methods: {
remoteMethod(query, endLoading) {
setTimeout(() => {
this.options = [
{
label: '远程选项一',
value: 1,
}
];
// 远程搜索时自带加载动画，搜索结束后务必调用此函数
endLoading();
}, 1000);
},
},
};
</script>

自定义选项模板

<in-select
placeholder="请选择"
v-model="testValue"
:options="options">
<template scope="props">
<strong>这是第{{ props.index + 1}}个选项，内容是{{ props.option.label }}</strong>
</template>
</in-select>

属性表

options

Array

placeholder

String

size

String

small

md

filterable

Boolean

true

false

true

remoteMethod

Funciton

query: String

endLoading: Function

labelPropName

String

label

valuePropName

String

value

表格组件

in-table

基础用法

<template>
<!-- 为table组件传入data和cols选项即可生成表格，具体格式参见属性表 -->
<in-table
:data="list"
:cols="cols">
</in-table>
</template>

<script>
export default {
data() {
return {
list: [
{
name: '翠花',
sex: '女',
},
{
name: '王大锤',
sex: '男',
},
],
cols: [
{
label: '姓名',
prop: 'name',
},
{
label: '性别',
prop: 'sex',
},
],
};
},
};
</script>

简单格式化和自定义列内容

<in-table
:data="list"
:cols="cols">
<!-- slot可在cols单独指定slot属性，也可直接使用每一列的label -->
<template
slot="性别"
scope="props">
<strong>这是自定义内容 {{props.row.sex}}</strong>
</template>
</in-table>

<script>
export default {
data() {
return {
cols: [
{
label: '姓名',
prop: 'name',
// 指定formater即可对列内容简单格式化
formater(row) {
return `这是简单格式化  ${row.name}`;
},
},
],
};
},
};
</script>

固定表头

<!-- 为table指定最大高度max-height，即可实现固定表头 -->
<in-table
max-height="300px"
:data="list"
:cols="cols">
<template
slot="性别"
scope="props">
<strong>这是自定义内容 {{props.row.sex}}</strong>
</template>
</in-table>

属性表

data

Array

cols

Array

label: String

prop: String

fromater: (row: Object) => String

maxHeight

String

700px

emptyText

String

加载失败

暂无数据

分页组件

in-pagination

基础用法

<template>
<!-- 为pagination组件传入total参数即可生成分页组件 -->
<in-pagination
:total="20">
</in-pagination>
</template>

可指定当前页码和显示页脚数量

<template>
<in-pagination
:total="100"
:currentPage="2"
:maxPagers="10">
</in-pagination>
</template>

属性表

total

Number

100

currentPage

Number

2

1

maxPagers

Number

10

7

事件表

size-change

pageSize: Number

current-change

currentPage: Number

加载服务

v-inspinia-loading

基础用法

<template>
<!-- 在组件中加入v-inspinia-loading指令，即可出现加载动画 -->
<in-pagination
v-inspinia-loading="{
show: true,
}"
:total="100"
:currentPage="2"
:maxPagers="10">
</in-pagination>
</template>

自定义加载文案和指定给动画类型

<template>
<!-- 传入指令时指定额外的loadingText和animationType属性即可定义文案和动画 -->
<in-pagination
v-inspinia-loading="{
show: true,
loadingText: '加载文案',
animationType: 'three-bounce',
}"
:total="100"
:currentPage="2"
:maxPagers="10">
</in-pagination>
</template>

属性表

show

Boolean

ture

false

false

loadingText

String

加载文案

加载中

animationType

String

plane

bounce

cubes

pulse

dots

three-bounce

grid

wave

wave