Commit 92478dda2db417992653a8a6027469b29be5eb7e
1 parent
35d2f40d
Exists in
master
and in
3 other branches
feat: 优化Filter组件及文档
Showing
3 changed files
with
121 additions
and
5 deletions
Show diff stats
examples/views/docs/component/filter.md
| @@ -45,6 +45,88 @@ export default { | @@ -45,6 +45,88 @@ export default { | ||
| 45 | 45 | ||
| 46 | ::: | 46 | ::: |
| 47 | 47 | ||
| 48 | +## 自定义按钮 | ||
| 49 | + | ||
| 50 | +支持自定义按钮占位及按钮组件 | ||
| 51 | + | ||
| 52 | +::: snippet 配置`uncollapsedSpan`改变展开时操作区占位，默认值`24`；插槽`operation`自定义按钮内容； | ||
| 53 | + | ||
| 54 | +```html | ||
| 55 | +<template> | ||
| 56 | + <z-filter v-model="model" :list="list" :uncollapsedSpan="12"> | ||
| 57 | + <template #operation="{ size, handleSearch, handleReset, handleCollapse, showCollapsed, collapsed, loading }"> | ||
| 58 | + <div style="text-align: right;"> | ||
| 59 | + <el-button-group :size="size"> | ||
| 60 | + <el-button type="primary" round @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button> | ||
| 61 | + <el-button @click="handleReset"><span>重置</span></el-button> | ||
| 62 | + <el-button round v-if="showCollapsed" @click="handleCollapse"> | ||
| 63 | + <span>{{ collapsed ? '展开' : '收起' }}</span> | ||
| 64 | + </el-button> | ||
| 65 | + </el-button-group> | ||
| 66 | + </div> | ||
| 67 | + </template> | ||
| 68 | + </z-filter> | ||
| 69 | +</template> | ||
| 70 | + | ||
| 71 | +<script> | ||
| 72 | +export default { | ||
| 73 | + data() { | ||
| 74 | + return { | ||
| 75 | + model: {}, | ||
| 76 | + list: [ | ||
| 77 | + { type: 'el-input', label: '姓名', key: 'name' }, | ||
| 78 | + { type: 'el-input', label: '年龄', key: 'age' }, | ||
| 79 | + { type: 'el-input', label: '省', key: 'province' }, | ||
| 80 | + { type: 'el-input', label: '市', key: 'city' }, | ||
| 81 | + { type: 'el-input', label: '区', key: 'area' }, | ||
| 82 | + { type: 'el-input', label: '地址', key: 'address' }, | ||
| 83 | + ] | ||
| 84 | + } | ||
| 85 | + }, | ||
| 86 | +} | ||
| 87 | +</script> | ||
| 88 | +``` | ||
| 89 | + | ||
| 90 | +::: | ||
| 91 | + | ||
| 92 | +## 自定义数据项 | ||
| 93 | + | ||
| 94 | +支持自定义数据项，一般用于通过JSON Scheme较难配置出的，较复杂的局部组件 | ||
| 95 | + | ||
| 96 | +::: snippet 插槽名与数据项`key`相同 | ||
| 97 | + | ||
| 98 | +```html | ||
| 99 | +<template> | ||
| 100 | + <z-filter v-model="model" :list="list"> | ||
| 101 | + <template #name> | ||
| 102 | + <el-input placeholder="请输入内容" v-model="model.name"> | ||
| 103 | + <el-button slot="append" icon="el-icon-search"></el-button> | ||
| 104 | + </el-input> | ||
| 105 | + </template> | ||
| 106 | + </z-filter> | ||
| 107 | +</template> | ||
| 108 | + | ||
| 109 | +<script> | ||
| 110 | +export default { | ||
| 111 | + data() { | ||
| 112 | + return { | ||
| 113 | + model: {}, | ||
| 114 | + list: [ | ||
| 115 | + { type: 'el-input', label: '姓名', key: 'name' }, | ||
| 116 | + { type: 'el-input', label: '年龄', key: 'age' }, | ||
| 117 | + { type: 'el-input', label: '省', key: 'province' }, | ||
| 118 | + { type: 'el-input', label: '市', key: 'city' }, | ||
| 119 | + { type: 'el-input', label: '区', key: 'area' }, | ||
| 120 | + { type: 'el-input', label: '地址', key: 'address' }, | ||
| 121 | + ] | ||
| 122 | + } | ||
| 123 | + }, | ||
| 124 | +} | ||
| 125 | +</script> | ||
| 126 | +``` | ||
| 127 | + | ||
| 128 | +::: | ||
| 129 | + | ||
| 48 | ## 展示数量 | 130 | ## 展示数量 |
| 49 | 131 | ||
| 50 | 默认展示数量为`3`个，可以通过配置而改变 | 132 | 默认展示数量为`3`个，可以通过配置而改变 |
| @@ -82,4 +164,21 @@ export default { | @@ -82,4 +164,21 @@ export default { | ||
| 82 | 164 | ||
| 83 | 参数|说明|类型|可选值|默认值 | 165 | 参数|说明|类型|可选值|默认值 |
| 84 | -|-|-|-|- | 166 | -|-|-|-|- |
| 167 | +value | 值 | Object | - | {} | ||
| 85 | list | JSON Scheme配置项列表 | Array | - | [] | 168 | list | JSON Scheme配置项列表 | Array | - | [] |
| 169 | +labelWidth | 默认Label宽度 | String | 110px | ||
| 170 | +size | 大小 | String | - | small | ||
| 171 | +span | 占位 | Number | - | 24 | ||
| 172 | +uncollapsedSpan | 展开时操作区占位 | Number | - | 24 | ||
| 173 | +visibleNum | 折叠时可视项数量 | Number | - | 3 | ||
| 174 | +loading | 加载状态 | Boolean | - | - | ||
| 175 | +formProps | 默认el-form配置参数 | Object | - | {} | ||
| 176 | +params | 自定义附加参数 | Object | - | - | ||
| 177 | + | ||
| 178 | +## Events 事件 | ||
| 179 | + | ||
| 180 | +事件名称|说明|回调参数 | ||
| 181 | +-|-|- | ||
| 182 | +input | 表单值变化 | model | ||
| 183 | +search | 查询 | model | ||
| 184 | +reset | 重置表单 | - | ||
| 86 | \ No newline at end of file | 185 | \ No newline at end of file |
packages/filter/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size" :formProps="formProps" :params="params"> | 2 | <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size" :formProps="formProps" :params="params"> |
| 3 | - <div slot="$operation" class="zee-filter__button-group"> | 3 | + <template v-for="key in slotKeys"> |
| 4 | + <template v-if="key === 'operation'"> | ||
| 5 | + <slot :name="key" :slot="key" v-bind="{ size, handleSearch, handleReset, handleCollapse, showCollapsed, collapsed, loading }"></slot> | ||
| 6 | + </template> | ||
| 7 | + <slot v-else :name="key" :slot="key"></slot> | ||
| 8 | + </template> | ||
| 9 | + <div v-if="!slotKeys.includes('operation')" slot="operation" class="zee-filter__button-group"> | ||
| 4 | <el-button-group :size="size"> | 10 | <el-button-group :size="size"> |
| 5 | <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button> | 11 | <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button> |
| 6 | <el-button @click="handleReset"><span>重置</span></el-button> | 12 | <el-button @click="handleReset"><span>重置</span></el-button> |
| 7 | - <el-button v-if="showCollapsed" @click="collapsed = !collapsed"> | 13 | + <el-button v-if="showCollapsed" @click="handleCollapse"> |
| 8 | <span>{{ collapsed ? '展开' : '收起' }}</span> | 14 | <span>{{ collapsed ? '展开' : '收起' }}</span> |
| 9 | </el-button> | 15 | </el-button> |
| 10 | </el-button-group> | 16 | </el-button-group> |
| @@ -30,6 +36,10 @@ export default { | @@ -30,6 +36,10 @@ export default { | ||
| 30 | type: Number, | 36 | type: Number, |
| 31 | default: 6, | 37 | default: 6, |
| 32 | }, | 38 | }, |
| 39 | + uncollapsedSpan: { | ||
| 40 | + type: Number, | ||
| 41 | + default: 24, | ||
| 42 | + }, | ||
| 33 | visibleNum: { | 43 | visibleNum: { |
| 34 | type: Number, | 44 | type: Number, |
| 35 | default: 3, | 45 | default: 3, |
| @@ -57,12 +67,15 @@ export default { | @@ -57,12 +67,15 @@ export default { | ||
| 57 | }, | 67 | }, |
| 58 | computed: { | 68 | computed: { |
| 59 | formattedList() { | 69 | formattedList() { |
| 60 | - return [...this.list, { key: '$operation', label: '', labelWidth: '0px', span: !this.collapsed ? 24 : undefined }]; | 70 | + return [...this.list, { key: 'operation', label: '', labelWidth: '0px', span: !this.collapsed ? this.uncollapsedSpan : undefined }]; |
| 61 | }, | 71 | }, |
| 62 | showCollapsed() { | 72 | showCollapsed() { |
| 63 | const { list, visibleNum } = this; | 73 | const { list, visibleNum } = this; |
| 64 | return list.length > visibleNum; | 74 | return list.length > visibleNum; |
| 65 | }, | 75 | }, |
| 76 | + slotKeys() { | ||
| 77 | + return Object.keys(this.$scopedSlots); | ||
| 78 | + }, | ||
| 66 | }, | 79 | }, |
| 67 | methods: { | 80 | methods: { |
| 68 | // 渲染列表项class | 81 | // 渲染列表项class |
| @@ -82,6 +95,10 @@ export default { | @@ -82,6 +95,10 @@ export default { | ||
| 82 | this.model = {}; | 95 | this.model = {}; |
| 83 | this.$emit('reset'); | 96 | this.$emit('reset'); |
| 84 | }, | 97 | }, |
| 98 | + // 折叠 | ||
| 99 | + handleCollapse() { | ||
| 100 | + this.collapsed = !this.collapsed; | ||
| 101 | + }, | ||
| 85 | }, | 102 | }, |
| 86 | }; | 103 | }; |
| 87 | </script> | 104 | </script> |
packages/form/form-render.vue
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | {{ item.group.title || item.group }} | 17 | {{ item.group.title || item.group }} |
| 18 | </component> | 18 | </component> |
| 19 | <!-- 递归本组件 --> | 19 | <!-- 递归本组件 --> |
| 20 | - <z-form-render | 20 | + <form-render |
| 21 | :title-class="titleClass" | 21 | :title-class="titleClass" |
| 22 | :item-class="itemClass" | 22 | :item-class="itemClass" |
| 23 | :content-class="contentClass" | 23 | :content-class="contentClass" |
| @@ -32,7 +32,7 @@ | @@ -32,7 +32,7 @@ | ||
| 32 | @form-item-change="onFormItemChange" | 32 | @form-item-change="onFormItemChange" |
| 33 | @item-update="onItemUpdate" | 33 | @item-update="onItemUpdate" |
| 34 | :span="type === 'div' ? undefined : span * (24 / (item.group.span || 24))" | 34 | :span="type === 'div' ? undefined : span * (24 / (item.group.span || 24))" |
| 35 | - ></z-form-render> | 35 | + ></form-render> |
| 36 | </component> | 36 | </component> |
| 37 | </component> | 37 | </component> |
| 38 | <!-- 正常无分组表单项 --> | 38 | <!-- 正常无分组表单项 --> |