Vue3文本域(Textarea)

这篇具有很好参考价值的文章主要介绍了Vue3文本域(Textarea)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

APIs

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

Events

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

效果如下图:在线预览

Vue3文本域(Textarea),ts,vue3,less,vue3,typescript
Vue3文本域(Textarea),ts,vue3,less,vue3,typescript

创建文本域组件Textarea.vue

<script lang="ts">
/*
  一个根节点时,禁用组件根节点自动继承 attribute,必须使用这种写法!然后在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
  多个根节点时,只需在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
*/
export default {
  inheritAttrs: false
}
</script>
<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick } from 'vue'
interface Props {
  width?: string|number // 文本域宽度
  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 areaWidth = 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 showCountNum = computed(() => {
  if (props.maxlength) {
    return props.value.length + ' / ' + props.maxlength
  }
  return props.value.length
})
watch(
  () => props.value,
  () => {
    if (JSON.stringify(autoSizeProperty.value) !== '{}') {
      areaHeight.value = 32
      nextTick(() => {
        getAreaHeight()
      })
    }
  }
)
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: any) {
  if (!('lazy' in props.valueModifiers)) {
    emits('update:value', e.target.value)
    emits('change', e)
  }
}
function onChange (e: any) {
  if ('lazy' in props.valueModifiers) {
    emits('update:value', e.target.value)
    emits('change', e)
  }
}
function onKeyboard (e: any) {
  if (e.key === 'Enter') {
    e.preventDefault() // 消除enter键换行
    emits('enter', e)
  }
}
function onClear () {
  emits('update:value', '')
  textarea.value.focus()
}
</script>
<template>
  <div
    class="m-textarea"
    :class="{'show-count': showCount}"
    :style="`width: ${areaWidth};`"
    :data-count="showCountNum">
    <textarea
      ref="textarea"
      class="u-textarea"
      :class="{disabled: disabled}"
      :style="[`height: ${autoSize ? areaHeight : ''}px`, autoSizeProperty]"
      :value="value"
      :maxlength="maxlength"
      :disabled="disabled"
      @input="onInput"
      @change="onChange"
      @keydown="onKeyboard"
      v-bind="$attrs" />
    <span class="m-clear" v-if="!disabled&&allowClear&&value" @click="onClear">
      <svg focusable="false" class="u-clear" 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;
    .u-clear {
      display: inline-block;
      color: 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);
      }
    }
  }
  .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>

在要使用的页面引入

其中引入使用了 Vue3间距(Space)文章来源地址https://www.toymoban.com/news/detail-606926.html

<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)
}
function onEnter (e: KeyboardEvent) {
  console.log('enter e:', e)
}
</script>
<template>
  <div>
    <h1>Textarea 文本域</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Space direction="vertical">
      <Textarea
        v-model:value="value"
        placeholder="Basic usage rows 2"
        :rows="2"
        @change="onChange"
        @enter="onEnter" />
      .lazy: 默认情况下,v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)<br/>你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据:
      <Textarea
        v-model:value.lazy="lazyValue"
        placeholder="Lazy usage rows 2"
        :rows="2"
        @change="onChange" />
    </Space>
    <h2 class="mt30 mb10">适应文本高度的文本域</h2>
    <Space direction="vertical" :width="300">
      <Textarea
        v-model:value="value"
        placeholder="Autosize height based on content lines"
        auto-size
      />
    </Space>
    <h2 class="mt30 mb10">设置行数</h2>
    <Space direction="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 direction="vertical" :width="300">
      <Textarea v-model:value="value" placeholder="textarea with clear icon" allow-clear />
    </Space>
    <h2 class="mt30 mb10">带数字提示</h2>
    <Space direction="vertical" :width="300">
      <Textarea v-model:value="value" show-count :maxlength="10" />
    </Space>
    <h2 class="mt30 mb10">禁用</h2>
    <Space direction="vertical" :width="300">
      <Textarea v-model:value="value" disabled />
    </Space>
  </div>
</template>

到了这里,关于Vue3文本域(Textarea)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 + ts

    在 vue3.2 中,我们只需在script标签中添加setup。就可以做到,组件只需引入不用注册,属性和方法也不用 return 才能于 template 中使用,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。 一、模板语法 1.使用 JavaScript 表达式 我们仅在

    2024年02月07日
    浏览(42)
  • 前端vue3+typescript架构

    1、vue creat 项目名称 选择自定义  选择需要的依赖  选择vue3  一路enter,选择eslist+prettier  继续enter,等待安装 按步骤操作,项目启动成功  2、vscode安装5款插件  2、代码保存自动格式化,保证每个开发人员代码一致,根目录新建三个文件.editorconfig和.prettierrc和.prettierignore

    2024年02月11日
    浏览(39)
  • csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

    大家好,我是yma16,本文分享利用inscode搭建vue3(ts)+antd前端模板。 2023 新星计划 vue(ts)+antd赛道报名入口:https://bbs.csdn.net/topics/616574177 搭建vue3+ts+antd的指引:认识vite_vue3 初始化项目到打包 InsCode 是一个一站式的软件开发服务平台,从开发-部署-运维-运营,都可以在 InsCode 轻松

    2024年02月16日
    浏览(47)
  • Vue3 +TypeScript 引入 BabylonJs(Vue3实现3D)【一篇文章精通系列】

    本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识。通过本文的学习,相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。 1、创建Vue3 + TypeScript项目 将生成的js文件都修改为

    2024年02月04日
    浏览(42)
  • vue3+ts:shims-vue.d.ts

    一、本文引子 uniapp(3.8.4.20230531)+ vue3 + ts + vite 项目 在搭建这个base项目的时候出现红素波浪线如图,代码运行正常,但是看起来很难受,于是各种查找,能找到的资料很少,可能和我提问不够准确也有关系,有人说删除tsconfig.js就可以了,我测试了,结果真的可以,但是这

    2024年02月10日
    浏览(41)
  • Vue3项目中使用TypeScript

    在单文件组件中使用 TypeScript,需要在 小结: 注意 当 script 中使用了 ts ,模板 template 在绑定表达式时也支持ts。 如果在表达式中不指名类型时,编译器会报警告提示。 正确写法 表达式指定类型 基于运行时声明 当使用 基于类型声明 通过泛型来定义 Props 语法规定 传递给

    2023年04月20日
    浏览(38)
  • vue3+ts 实现枚举

    首先 index.ts 中定义枚举 接口返给的数据是一个对象

    2024年02月14日
    浏览(45)
  • vue3 vite ts引入vue文件报错 ts(2307)

    vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行。 官方文档有说明:http://vue.dragonlm.com/guide/typescript/overview.html#ide-support 解决方法是安装插件,之后即可正常解析路径,并可以跳转到对应文件。 TypeScript Vue Plugin (Volar)

    2024年02月16日
    浏览(53)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(60)
  • Vite+Typescript+Vue3学习笔记

    1.1、创建项目(yarn) 1.2、项目配置 1、配置vue文件识别 vite默认情况下不识别.vue后缀的文件,需在vite-env.d.ts配置下 2、Api选择 Vue3推荐使用Composition API,这里关闭Vue2的Option Api 1.3、常用依赖 1、@types/node ts需安装node的类型,否则使用node相关会提示找不到 2、auto-import 用于简化Vu

    2024年02月15日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包