You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

60 lines
1.1 KiB

  1. <template>
  2. <view :class="className" :style="style" class="cu-form-group">
  3. <view class="title">
  4. <text v-if="required" class="lr-required">*</text>
  5. <slot name="title">{{ title }}</slot>
  6. </view>
  7. <input
  8. @input="input"
  9. @change="input"
  10. :value="value"
  11. :type="type"
  12. :disabled="disabled"
  13. :password="password"
  14. :maxlength="maxlength"
  15. :placeholder="displayPlaceholder"
  16. :style="{ textAlign: left ? 'left' : 'right' }"
  17. />
  18. <slot name="suffix"></slot>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'l-input',
  24. props: {
  25. type: { default: 'text' },
  26. title: {},
  27. placeholder: {},
  28. maxlength: { default: -1 },
  29. disabled: {},
  30. password: {},
  31. left: {},
  32. required: {},
  33. value: {}
  34. },
  35. methods: {
  36. input(e) {
  37. this.$emit('input', e.detail.value)
  38. this.$emit('change', e.detail.value)
  39. }
  40. },
  41. computed: {
  42. displayPlaceholder() {
  43. if (this.disabled) {
  44. return ''
  45. }
  46. if (this.placeholder) {
  47. return this.placeholder
  48. }
  49. return this.title ? `请输入${this.title}` : `请输入…`
  50. }
  51. }
  52. }
  53. </script>