setting.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536
  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>
  11. <a-col :lg="24" :xl="12">
  12. <a-list-item-meta :title="title" :description="desc"/>
  13. </a-col>
  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>
  24. </a-col>
  25. </a-row>
  26. </a-list-item>
  27. {{end}}
  28. {{define "component/setting"}}
  29. <script>
  30. Vue.component('setting-list-item', {
  31. props: ["type", "title", "desc", "value", "min", "max" , "step", "placeholder"],
  32. template: `{{template "component/settingListItem"}}`,
  33. });
  34. </script>
  35. {{end}}