TextArea.js 5.1 KB

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