Vue3文本域(Textarea)

简介: 这是一个基于 Vue3 的可自定义文本域组件 (`Textarea`),具备多种实用功能,如自适应内容高度、清除图标、字数统计及禁用状态等。

效果如下图:在线预览

在这里插入图片描述

APIs

Textarea

参数 说明 类型 默认值
width 文本域宽度,单位 px string | number ‘100%’
allowClear 可以点击清除图标删除内容 boolean false
autoSize 自适应内容高度 boolean | {minRows?: number, maxRows?: number} false
disabled 是否禁用 boolean false
maxlength 文字最大长度 number undefined
showCount 是否展示字数 boolean false
value v-model 文本域内容 string undefined

Events

事件名称 说明 参数
change 文本域内容变化时的回调 (e: Event) => void
enter 按下回车的回调 (e: Event) => void

创建文本域组件Textarea.vue

<script setup lang="ts">
defineOptions({
  inheritAttrs: false
})
import { ref, computed, watch, onMounted, nextTick } from 'vue'
interface Props {
  width?: string | number // 文本域宽度,单位 px
  allowClear?: boolean // 可以点击清除图标删除内容
  autoSize?: boolean | { minRows?: number; maxRows?: number } // 自适应内容高度
  disabled?: boolean // 是否禁用
  maxlength?: number // 文字最大长度
  showCount?: boolean // 是否展示字数
  value?: string // (v-model) 文本域内容
  valueModifiers?: object // 用于访问组件的 v-model 上添加的修饰符
}
const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  allowClear: false,
  autoSize: false,
  disabled: false,
  maxlength: undefined,
  showCount: false,
  value: '',
  valueModifiers: () => ({})
})
const textareaWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  }
  return props.width
})
const autoSizeProperty = computed(() => {
  if (typeof props.autoSize === 'object') {
    const style: { 'min-height'?: string; 'max-height'?: string; [propName: string]: any } = {
      resize: 'none'
    }
    if ('minRows' in props.autoSize) {
      style['min-height'] = (props.autoSize.minRows as number) * 22 + 10 + 'px'
    }
    if ('maxRows' in props.autoSize) {
      style['max-height'] = (props.autoSize.maxRows as number) * 22 + 10 + 'px'
    }
    return style
  }
  if (typeof props.autoSize === 'boolean') {
    if (props.autoSize) {
      return {
        'max-height': '9000000000000000px',
        resize: 'none'
      }
    }
    return {}
  }
})
const showClear = computed(() => {
  return !props.disabled && props.allowClear && props.value
})
const showCountNum = computed(() => {
  if (props.maxlength) {
    return props.value.length + ' / ' + props.maxlength
  }
  return props.value.length
})
const lazyTextarea = computed(() => {
  return 'lazy' in props.valueModifiers
})
watch(
  () => props.value,
  () => {
    if (JSON.stringify(autoSizeProperty.value) !== '{}') {
      areaHeight.value = 32
      nextTick(() => {
        getAreaHeight()
      })
    }
  },
  {
    flush: 'post'
  }
)
const textarea = ref()
const areaHeight = ref(32)
onMounted(() => {
  getAreaHeight()
})
function getAreaHeight() {
  areaHeight.value = textarea.value.scrollHeight + 2
}
const emits = defineEmits(['update:value', 'change', 'enter'])
function onInput(e: InputEvent) {
  if (!lazyTextarea.value) {
    emits('update:value', (e.target as HTMLInputElement).value)
    emits('change', e)
  }
}
function onChange(e: InputEvent) {
  if (lazyTextarea.value) {
    emits('update:value', (e.target as HTMLInputElement).value)
    emits('change', e)
  }
}
function onKeyboard(e: KeyboardEvent) {
  emits('enter', e)
  if (lazyTextarea.value) {
    textarea.value.blur()
    nextTick(() => {
      textarea.value.focus()
    })
  }
}
function onClear() {
  emits('update:value', '')
  textarea.value.focus()
}
</script>
<template>
  <div
    class="m-textarea"
    :class="{ 'show-count': showCount }"
    :style="`width: ${textareaWidth};`"
    :data-count="showCountNum"
  >
    <textarea
      ref="textarea"
      type="hidden"
      class="u-textarea"
      :class="{ 'textarea-disabled': disabled }"
      :style="[`height: ${autoSize ? areaHeight : ''}px`, autoSizeProperty]"
      :value="value"
      :maxlength="maxlength"
      :disabled="disabled"
      @input="onInput"
      @change="onChange"
      @keydown.enter="onKeyboard"
      v-bind="$attrs"
    />
    <span v-if="showClear" class="m-clear" @click="onClear">
      <svg
        class="clear-svg"
        focusable="false"
        data-icon="close-circle"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
        viewBox="64 64 896 896"
      >
        <path
          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
        ></path>
      </svg>
    </span>
  </div>
</template>
<style lang="less" scoped>
.m-textarea {
  position: relative;
  display: inline-block;
  .u-textarea {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    max-width: 100%;
    height: auto;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    transition:
      all 0.3s,
      height 0s;
    resize: vertical;
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    text-overflow: ellipsis;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    outline: none;
    &:hover {
      border-color: #4096ff;
      border-inline-end-width: 1px;
      z-index: 1;
    }
    &:focus-within {
      border-color: #4096ff;
      box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
      border-inline-end-width: 1px;
      outline: 0;
    }
  }
  textarea:disabled {
    color: rgba(0, 0, 0, 0.25);
  }
  textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.25);
  }
  textarea:-moz-placeholder {
    color: rgba(0, 0, 0, 0.25);
  }
  textarea::-moz-placeholder {
    color: rgba(0, 0, 0, 0.25);
  }
  textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.25);
  }
  .m-clear {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    z-index: 1;
    display: inline-block;
    line-height: 0;
    .clear-svg {
      display: inline-block;
      fill: rgba(0, 0, 0, 0.25);
      font-size: 12px;
      line-height: 1;
      vertical-align: -1px;
      cursor: pointer;
      transition: color 0.3s;
      transition: fill 0.3s;
      &:hover {
        fill: rgba(0, 0, 0, 0.45);
      }
    }
  }
  .textarea-disabled {
    color: rgba(0, 0, 0, 0.25);
    background-color: rgba(0, 0, 0, 0.04);
    cursor: not-allowed;
    &:hover {
      border-color: #d9d9d9;
    }
    &:focus-within {
      border-color: #d9d9d9;
      box-shadow: none;
    }
  }
}
.show-count {
  &::after {
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    content: attr(data-count);
    pointer-events: none;
    float: right;
  }
}
</style>

在要使用的页面引入

其中引入使用了以下组件:

<script setup lang="ts">
import Textarea from './Textarea.vue'
import { ref, watchEffect } from 'vue'
const value = ref('')
const lazyValue = ref('')
watchEffect(() => {
  console.log('value:', value.value)
})
watchEffect(() => {
  console.log('lazyValue:', lazyValue.value)
})
function onChange(e: Event) {
  console.log('change e:', e, lazyValue.value)
}
function onEnter(e: KeyboardEvent) {
  console.log('enter e:', e, lazyValue.value)
}
</script>
<template>
  <div>
    <h1>{
  { $route.name }} {
  { $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Space vertical>
      <Alert>
        <template #message>
          .lazy:
          <br/>
          默认情况下,v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。
          <br />
          你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据:
          <br/>
          {
  { '<Textarea v-model.lazy="msg" />' }}
        </template>
      </Alert>
      <Textarea v-model:value="value" placeholder="Basic usage rows 2" :rows="2" @change="onChange" @enter="onEnter" />
      <Textarea
        v-model:value.lazy="lazyValue"
        placeholder="Lazy usage rows 2"
        :rows="2"
        @change="onChange"
        @enter="onEnter"
      />
    </Space>
    <h2 class="mt30 mb10">适应文本高度的文本域</h2>
    <Space vertical :width="300">
      <Textarea v-model:value="value" placeholder="Autosize height based on content lines" auto-size />
    </Space>
    <h2 class="mt30 mb10">设置行数</h2>
    <Space vertical :width="300">
      <Textarea
        v-model:value="value"
        placeholder="Autosize height with minimum and maximum number of lines"
        :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </Space>
    <h2 class="mt30 mb10">带移除图标</h2>
    <Space vertical :width="300">
      <Textarea v-model:value="value" placeholder="textarea with clear icon" allow-clear />
    </Space>
    <h2 class="mt30 mb10">带数字提示</h2>
    <Space vertical :width="300">
      <Textarea v-model:value="value" placeholder="textarea with show count" show-count :maxlength="10" />
    </Space>
    <h2 class="mt30 mb10">禁用</h2>
    <Space vertical :width="300">
      <Textarea v-model:value="value" placeholder="disabled textarea" disabled />
    </Space>
  </div>
</template>
相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
143 64
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
115 60
|
10天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
39 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
39 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
33 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
42 1
|
2月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
2月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
2月前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
80 7

热门文章

最新文章