frontend / zee

Download as
Browse Code »

Commit ca99566ededb524501f58b6ab87d6f9b3100a8cd

Authored by 刘汉宸
1 parent f461f24e
Exists in master and in 2 other branches Feature-渲染优化, Refactor-2.0

feat: 优化组件默认size

Showing 10 changed files with 38 additions and 16 deletions   Show diff stats
examples/views/docs/component/schema-filter.md
  Diff comments   View file @ca99566
... ... @@ -67,6 +67,7 @@ export default {
67 67 gender: '',
68 68 },
69 69 schema: {
  70 + props: { size: 'small' },
70 71 items: [
71 72 { is: 'el-input', prop: 'name', label: '姓名' },
72 73 { is: 'el-input', prop: 'age', label: '年龄' },
... ... @@ -104,6 +105,7 @@ export default {
104 105 gender: '',
105 106 },
106 107 schema: {
  108 + props: { size: 'small' },
107 109 items: [
108 110 { is: 'el-input', prop: 'name', label: '姓名' },
109 111 { is: 'el-input', prop: 'age', label: '年龄' },
... ... @@ -158,6 +160,7 @@ export default {
158 160 gender: '',
159 161 },
160 162 schema: {
  163 + props: { size: 'small' },
161 164 items: [
162 165 { is: 'el-input', prop: 'name', label: '姓名' },
163 166 { is: 'el-input', prop: 'age', label: '年龄' },
... ... @@ -221,6 +224,7 @@ export default {
221 224 gender: '',
222 225 },
223 226 schema: {
  227 + props: { size: 'small' },
224 228 items: [
225 229 { is: 'el-input', prop: 'name', label: '姓名' },
226 230 { is: 'el-input', prop: 'age', label: '年龄' },
... ...
examples/views/docs/component/schema-form.md
  Diff comments   View file @ca99566
... ... @@ -23,7 +23,7 @@ export default {
23 23 address: '上海市青浦区华新镇纪鹤公路1988号',
24 24 },
25 25 schema: {
26   - props: { labelWidth: '70px', size: 'small', span: 12 },
  26 + props: { labelWidth: '70px', span: 12 },
27 27 items: [
28 28 { is: 'el-input', prop: 'name', label: '姓名' },
29 29 { is: 'el-input-number', prop: 'age', label: '年龄' },
... ...
examples/views/docs/component/schema-page.md
  Diff comments   View file @ca99566
... ... @@ -133,6 +133,7 @@ export default {
133 133 :api-delete="deleteAPI"
134 134 :api-new="newAPI"
135 135 :api-edit="editAPI"
  136 + size="small"
136 137 >
137 138 <template #table-cell-name="{ value, row, openDetail }">
138 139 <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link>
... ...
examples/views/docs/component/schema-select.md
  Diff comments   View file @ca99566
... ... @@ -278,4 +278,12 @@ export default {
278 278 </script>
279 279 ```
280 280  
281   -:::
282 281 \ No newline at end of file
  282 +:::
  283 +
  284 +## API
  285 +
  286 +## Attribute 属性
  287 +
  288 +参数|说明|类型|可选值|默认值
  289 +-|-|-|-|-
  290 +schema | JSON Schema配置项列表 | Array | - | []
283 291 \ No newline at end of file
... ...
examples/views/docs/component/schema-table.md
  Diff comments   View file @ca99566
... ... @@ -61,7 +61,7 @@ export default {
61 61 { name: '王五', age: '16', gender: '男' },
62 62 ],
63 63 schema: {
64   - props: { border: true, size: 'mini' },
  64 + props: { border: true },
65 65 items: [
66 66 { prop: 'name', label: '姓名' },
67 67 { prop: 'age', label: '年龄' },
... ... @@ -130,9 +130,9 @@ export default {
130 130 </template>
131 131 </el-table-column>
132 132 </template>
133   - <el-table-column label="操作" width="120">
  133 + <el-table-column label="右侧的列" width="120">
134 134 <template #default="{ $index }">
135   - <el-button type="text">编辑第{{ $index + 1 }}行</el-button>
  135 + 第{{ $index + 1 }}行
136 136 </template>
137 137 </el-table-column>
138 138 </z-schema-table>
... ...
packages/schema-filter/index.vue
  Diff comments   View file @ca99566
... ... @@ -84,7 +84,7 @@ export default {
84 84 },
85 85 formattedSchema() {
86 86 return {
87   - props: { span: this._span, 'label-width': '75px', size: this.filterSize || 'small', ...this._schemaProps },
  87 + props: { span: this._span, 'label-width': '75px', size: this.filterSize, ...this._schemaProps },
88 88 items: [...this.formattedItems, { prop: 'operation', label: '', labelWidth: '0px', span: this.operationSpan }],
89 89 };
90 90 },
... ...
packages/schema-page/index.vue
  Diff comments   View file @ca99566
... ... @@ -10,7 +10,7 @@
10 10 </div>
11 11 <!-- 筛选组件 -->
12 12 <div v-if="schema.filter" class="z-schema-page__filter">
13   - <z-schema-filter :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch">
  13 + <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch">
14 14 <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope">
15 15 <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
16 16 </template>
... ... @@ -26,7 +26,7 @@
26 26 </div>
27 27 <!-- 表格内容 -->
28 28 <div v-if="schema.table" class="z-schema-page__table">
29   - <z-schema-table :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
  29 + <z-schema-table :size="_size" :schema="tableSchemaDefaultProps(schema.table)" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
30 30 <template #left>
31 31 <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
32 32 </template>
... ... @@ -61,6 +61,7 @@
61 61 <!-- 分页器 -->
62 62 <slot v-if="schema.pagination !== false" name="pagination" v-bind="_slotScope">
63 63 <el-pagination
  64 + :size="_size"
64 65 @size-change="onSizeChange"
65 66 @current-change="onCurrentChange"
66 67 :current-page="currentPage"
... ... @@ -103,6 +104,7 @@
103 104 <z-schema-form
104 105 :key="`form-${modalType}`"
105 106 ref="form"
  107 + :size="_size"
106 108 :value="valueForm"
107 109 @input="e => $emit('update:value-form', e)"
108 110 :schema="schema.form"
... ... @@ -124,7 +126,7 @@
124 126 <!-- 详情弹出框内容 -->
125 127 <template v-else-if="modalType === 'detail'">
126 128 <template v-if="schema.form || schema.detail">
127   - <z-schema-form key="form-detail" ref="form" v-model="detail" :schema="schema.detail || detailSchema">
  129 + <z-schema-form key="form-detail" ref="form" v-model="detail" :size="_size" :schema="schema.detail || detailSchema">
128 130 <template v-for="item in getSlotKeys('detail-')" #[item.name]="slotScope">
129 131 <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
130 132 </template>
... ... @@ -243,7 +245,7 @@ export default {
243 245 return Object.keys(this.$scopedSlots);
244 246 },
245 247 _size() {
246   - return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size || 'small';
  248 + return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size;
247 249 },
248 250 _slotScope() {
249 251 const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'loading'];
... ... @@ -298,7 +300,7 @@ export default {
298 300 methods: {
299 301 tableSchemaDefaultProps(val) {
300 302 const config = cloneDeep(val);
301   - const defaultProps = { size: 'small', border: true, 'highlight-current-row': true };
  303 + const defaultProps = { border: true, 'highlight-current-row': true };
302 304 if (config.props) {
303 305 return { ...config, props: { ...defaultProps, ...config.props } };
304 306 } else {
... ...
packages/schema-select/index.vue
  Diff comments   View file @ca99566
... ... @@ -18,7 +18,7 @@
18 18 v-model="model"
19 19 :size="selectSize"
20 20 :disabled="selectDisabled"
21   - prefix-icon="el-icon-search"
  21 + :prefix-icon="prefixIcon"
22 22 :placeholder="selectPlaceholder"
23 23 @input="debouncedOnInput"
24 24 @focus="onInputFocus"
... ... @@ -103,6 +103,10 @@ export default {
103 103 },
104 104 disabled: Boolean,
105 105 size: String,
  106 + prefixIcon: {
  107 + type: String,
  108 + default: 'el-icon-search',
  109 + },
106 110 placeholder: String,
107 111 labelKey: {
108 112 type: String,
... ... @@ -193,7 +197,6 @@ export default {
193 197 'row-click': this.onTableRowClick,
194 198 },
195 199 props: {
196   - size: 'small',
197 200 'highlight-current-row': true,
198 201 ...(get(this.schema, 'table.props') || {}),
199 202 },
... ...
packages/select/index.vue
  Diff comments   View file @ca99566
... ... @@ -24,7 +24,7 @@
24 24 <slot name="empty" slot="empty"></slot>
25 25 <template slot="prefix">
26 26 <slot name="prefix">
27   - <i v-if="selectFilterable && !multiple" class="el-input__icon el-icon-search"></i>
  27 + <i v-if="selectFilterable && !multiple && prefixIcon" :class="`el-input__icon ${prefixIcon}`"></i>
28 28 </slot>
29 29 </template>
30 30 </el-select>
... ... @@ -63,6 +63,10 @@ export default {
63 63 type: String,
64 64 default: 'value',
65 65 },
  66 + prefixIcon: {
  67 + type: String,
  68 + default: 'el-icon-search',
  69 + },
66 70 size: String,
67 71 multiple: Boolean,
68 72 sequence: Boolean,
... ...
packages/table/editable.vue
  Diff comments   View file @ca99566
... ... @@ -42,8 +42,8 @@
42 42 <slot :name="`header-${item.prop}`" slot="header"></slot>
43 43 <template #default="{ row, column, $index }">
44 44 <cell-editor
45   - :disabled="editall || disabled || item.editable === false"
46   - :editable="editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
  45 + :disabled="item.editalways || editall || disabled || item.editable === false"
  46 + :editable="item.editalways || editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
47 47 :component="item.component"
48 48 :value="row[column.property]"
49 49 @input="value => onCellInput(value, row, column, $index)"
... ...