TextArea.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import ClearableLabeledInput from './ClearableLabeledInput';
  4. import ResizableTextArea from './ResizableTextArea';
  5. import inputProps from './inputProps';
  6. import hasProp, { getListeners, getOptionProps } from '../_util/props-util';
  7. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  8. import { fixControlledValue, resolveOnChange } from './Input';
  9. import PropTypes from '../_util/vue-types';
  10. var TextAreaProps = _extends({}, inputProps, {
  11. autosize: PropTypes.oneOfType([Object, Boolean]),
  12. autoSize: PropTypes.oneOfType([Object, Boolean])
  13. });
  14. export default {
  15. name: 'ATextarea',
  16. inheritAttrs: false,
  17. model: {
  18. prop: 'value',
  19. event: 'change.value'
  20. },
  21. props: _extends({}, TextAreaProps),
  22. inject: {
  23. configProvider: { 'default': function _default() {
  24. return ConfigConsumerProps;
  25. } }
  26. },
  27. data: function data() {
  28. var value = typeof this.value === 'undefined' ? this.defaultValue : this.value;
  29. return {
  30. stateValue: typeof value === 'undefined' ? '' : value
  31. };
  32. },
  33. computed: {},
  34. watch: {
  35. value: function value(val) {
  36. this.stateValue = val;
  37. }
  38. },
  39. mounted: function mounted() {
  40. var _this = this;
  41. this.$nextTick(function () {
  42. if (_this.autoFocus) {
  43. _this.focus();
  44. }
  45. });
  46. },
  47. methods: {
  48. setValue: function setValue(value, callback) {
  49. if (!hasProp(this, 'value')) {
  50. this.stateValue = value;
  51. this.$nextTick(function () {
  52. callback && callback();
  53. });
  54. } else {
  55. // 不在严格受控
  56. // https://github.com/vueComponent/ant-design-vue/issues/2207,modal 是 新 new 实例,更新队列和当前不在同一个更新队列中
  57. // this.$forceUpdate();
  58. }
  59. },
  60. handleKeyDown: function handleKeyDown(e) {
  61. if (e.keyCode === 13) {
  62. this.$emit('pressEnter', e);
  63. }
  64. this.$emit('keydown', e);
  65. },
  66. onChange: function onChange(e) {
  67. this.$emit('change.value', e.target.value);
  68. this.$emit('change', e);
  69. this.$emit('input', e);
  70. },
  71. handleChange: function handleChange(e) {
  72. var _this2 = this;
  73. var _e$target = e.target,
  74. value = _e$target.value,
  75. composing = _e$target.composing;
  76. if ((e.isComposing || composing) && this.lazy || this.stateValue === value) return;
  77. this.setValue(e.target.value, function () {
  78. _this2.$refs.resizableTextArea.resizeTextarea();
  79. });
  80. resolveOnChange(this.$refs.resizableTextArea.$refs.textArea, e, this.onChange);
  81. },
  82. focus: function focus() {
  83. this.$refs.resizableTextArea.$refs.textArea.focus();
  84. },
  85. blur: function blur() {
  86. this.$refs.resizableTextArea.$refs.textArea.blur();
  87. },
  88. handleReset: function handleReset(e) {
  89. var _this3 = this;
  90. this.setValue('', function () {
  91. _this3.$refs.resizableTextArea.renderTextArea();
  92. _this3.focus();
  93. });
  94. resolveOnChange(this.$refs.resizableTextArea.$refs.textArea, e, this.onChange);
  95. },
  96. renderTextArea: function renderTextArea(prefixCls) {
  97. var h = this.$createElement;
  98. var props = getOptionProps(this);
  99. var resizeProps = {
  100. props: _extends({}, props, {
  101. prefixCls: prefixCls
  102. }),
  103. on: _extends({}, getListeners(this), {
  104. input: this.handleChange,
  105. keydown: this.handleKeyDown
  106. }),
  107. attrs: this.$attrs
  108. };
  109. return h(ResizableTextArea, _mergeJSXProps([resizeProps, { ref: 'resizableTextArea' }]));
  110. }
  111. },
  112. render: function render() {
  113. var h = arguments[0];
  114. var stateValue = this.stateValue,
  115. customizePrefixCls = this.prefixCls;
  116. var getPrefixCls = this.configProvider.getPrefixCls;
  117. var prefixCls = getPrefixCls('input', customizePrefixCls);
  118. var props = {
  119. props: _extends({}, getOptionProps(this), {
  120. prefixCls: prefixCls,
  121. inputType: 'text',
  122. value: fixControlledValue(stateValue),
  123. element: this.renderTextArea(prefixCls),
  124. handleReset: this.handleReset
  125. }),
  126. on: getListeners(this)
  127. };
  128. return h(ClearableLabeledInput, props);
  129. }
  130. };