|
1 | 1 | {{define "component/settingListItem"}} |
2 | | -<a-list-item style="padding: 20px"> |
3 | | - <a-row v-if="type === 'textarea'"> |
4 | | - <a-col> |
5 | | - <a-list-item-meta :title="title" :description="desc"/> |
6 | | - <a-textarea class="ant-setting-textarea" :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10 }"></a-textarea> |
7 | | - <!--a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 30 }"></a-textarea--> |
8 | | - </a-col> |
9 | | - </a-row> |
10 | | - <a-row v-else> |
| 2 | +<a-list-item :style="{ padding: padding }"> |
| 3 | + <a-row> |
11 | 4 | <a-col :lg="24" :xl="12"> |
12 | | - <a-list-item-meta :title="title" :description="desc"/> |
| 5 | + <a-list-item-meta> |
| 6 | + <template #title> |
| 7 | + <slot name="title"></slot> |
| 8 | + </template> |
| 9 | + <template #description> |
| 10 | + <slot name="description"></slot> |
| 11 | + </template> |
| 12 | + </a-list-item-meta> |
13 | 13 | </a-col> |
14 | 14 | <a-col :lg="24" :xl="12"> |
15 | | - <template v-if="type === 'text'"> |
16 | | - <a-input :value="value" @input="$emit('input', $event.target.value)" :placeholder="placeholder"></a-input> |
17 | | - </template> |
18 | | - <template v-else-if="type === 'number'"> |
19 | | - <a-input-number :value="value" :step="step" @change="value => $emit('input', value)" :min="min" :max="max" style="width: 100%;"></a-input-number> |
20 | | - </template> |
21 | | - <template v-else-if="type === 'switch'"> |
22 | | - <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch> |
23 | | - </template> |
| 15 | + <slot name="control"></slot> |
24 | 16 | </a-col> |
25 | 17 | </a-row> |
26 | 18 | </a-list-item> |
27 | 19 | {{end}} |
28 | 20 |
|
29 | 21 | {{define "component/setting"}} |
30 | 22 | <script> |
31 | | - Vue.component('setting-list-item', { |
32 | | - props: ["type", "title", "desc", "value", "min", "max" , "step", "placeholder"], |
33 | | - template: `{{template "component/settingListItem"}}`, |
34 | | - }); |
| 23 | + Vue.component('a-setting-list-item', { |
| 24 | + props: ["title", "description", "paddings"], |
| 25 | + template: `{{ template "component/settingListItem" }}`, |
| 26 | + computed: { |
| 27 | + padding() { |
| 28 | + switch (this.paddings) { |
| 29 | + case "small": |
| 30 | + return "10px 20px !important" |
| 31 | + break; |
| 32 | + default: |
| 33 | + return "20px !important" |
| 34 | + break; |
| 35 | + } |
| 36 | + } |
| 37 | + } |
| 38 | + }) |
35 | 39 | </script> |
36 | 40 | {{end}} |
0 commit comments