123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/classNames'
- import styleToCssString from '../helpers/styleToCssString'
- baseComponent({
- properties: {
- prefixCls: {
- type: String,
- value: 'wux-textarea',
- },
- label: {
- type: String,
- value: '',
- },
- extra: {
- type: String,
- value: '',
- },
- defaultValue: {
- type: String,
- value: '',
- },
- value: {
- type: String,
- value: '',
- observer(newVal) {
- if (this.data.controlled) {
- this.updated(newVal)
- }
- },
- },
- controlled: {
- type: Boolean,
- value: false,
- },
- placeholder: {
- type: String,
- value: '',
- },
- placeholderStyle: {
- type: [String, Object],
- value: '',
- observer(newVal) {
- this.setData({
- extStyle: styleToCssString(newVal),
- })
- },
- },
- placeholderClass: {
- type: String,
- value: 'textarea-placeholder',
- },
- disabled: {
- type: Boolean,
- value: false,
- },
- maxlength: {
- type: Number,
- value: 140,
- },
- autoHeight: {
- type: Boolean,
- value: false,
- },
- cursorSpacing: {
- type: Number,
- value: 11,
- },
- focus: {
- type: Boolean,
- value: false,
- },
- cursor: {
- type: Number,
- value: -1,
- },
- showConfirmBar: {
- type: Boolean,
- value: true,
- },
- selectionStart: {
- type: Number,
- value: -1,
- },
- selectionEnd: {
- type: Number,
- value: -1,
- },
- adjustPosition: {
- type: Boolean,
- value: true,
- },
- rows: {
- type: Number,
- value: 1,
- observer: 'updateHeight',
- },
- hasCount: {
- type: Boolean,
- value: false,
- },
- clear: {
- type: Boolean,
- value: false,
- },
- error: {
- type: Boolean,
- value: false,
- },
- },
- data: {
- inputValue: '',
- inputFocus: false,
- inputRows: 1,
- inputHeight: '',
- extStyle: '',
- },
- computed: {
- classes() {
- const { prefixCls, disabled, inputFocus, error: hasError, hasCount } = this.data
- const wrap = classNames(prefixCls, {
- [`${prefixCls}--focus`]: inputFocus,
- [`${prefixCls}--disabled`]: disabled,
- [`${prefixCls}--error`]: hasError,
- [`${prefixCls}--has-count`]: hasCount,
- })
- const label = `${prefixCls}__label`
- const control = `${prefixCls}__control`
- const item = `${prefixCls}__item`
- const clear = `${prefixCls}__clear`
- const error = `${prefixCls}__error`
- const extra = `${prefixCls}__extra`
- const count = `${prefixCls}__count`
- const current = `${prefixCls}__current`
- return {
- wrap,
- label,
- control,
- item,
- clear,
- error,
- extra,
- count,
- current,
- }
- },
- },
- methods: {
- updateHeight(val = this.data.rows) {
- // rows 取值为大于或等于 1 的正整数
- const rows = Math.max(1, parseInt(val))
- const { prefixCls, inputRows } = this.data
- if (inputRows !== rows) {
- wx
- .createSelectorQuery()
- .in(this).select(`.${prefixCls}__item`)
- .boundingClientRect((rect) => {
- if (rect) {
- const lineHeight = inputRows > 1 ? rect.height / inputRows : rect.height
- const inputHeight = lineHeight * rows
- this.setData({
- inputRows: rows,
- inputHeight,
- })
- }
- })
- .exec()
- }
- },
- updated(inputValue) {
- if (this.data.inputValue !== inputValue) {
- this.setData({
- inputValue,
- })
- }
- },
- onChange(e) {
- if (!this.data.controlled) {
- this.updated(e.detail.value)
- }
- this.triggerEvent('change', e.detail)
- },
- onFocus(e) {
- this.clearTimer()
- this.setData({
- inputFocus: true,
- })
- this.triggerEvent('focus', e.detail)
- },
- onBlur(e) {
- this.setTimer()
- this.triggerEvent('blur', e.detail)
- },
- onConfirm(e) {
- this.triggerEvent('confirm', e.detail)
- },
- onClear() {
- const { controlled, inputValue } = this.data
- this.setData({
- inputValue: controlled ? inputValue : '',
- })
- this.triggerEvent('clear', { value: '' })
- },
- onError() {
- this.triggerEvent('error', { value: this.data.inputValue })
- },
- onLineChange(e) {
- this.triggerEvent('linechange', e.detail)
- },
- setTimer() {
- this.clearTimer()
- this.timeout = setTimeout(() => {
- this.setData({
- inputFocus: false,
- })
- }, 200)
- },
- clearTimer() {
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- },
- },
- attached() {
- const { defaultValue, value, controlled } = this.data
- const inputValue = controlled ? value : defaultValue
- this.updated(inputValue)
- },
- ready() {
- this.updateHeight()
- },
- })
|