一、前言

这是表单组件的一部分，但现在不知道不知道如何与其他组件互动，所以只是一个简单的input组件

二、代码

时间：2021年8月15日14:54:21

<template>
  <div class="w-full h-full flex flex-col justify-between items-center">
    <div v-if="type!=='textarea'" class="w-full flex-1 flex justify-between items-center rounded-lg"
         :class="{'border-2 border-blue-500 bg-white':!easymodel,'ring-2 ring-blue-500':!easymodel&&jiaodian,'border-b-2 border-black':easymodel,}">
      <!--      前缀-->
      <div class="flex-initial flex justify-center items-center h-full border-r-2 border-blue-500 select-none"
           v-if="$slots.start">
        <slot name="start"></slot>
      </div>
      <!--      中间输入框-->
      <div class="flex-1 h-full p-1 flex justify-center items-center">
        <input :type="type" :value="modelValue" ref="inputref" class="outline-none h-full flex-1"
               :placeholder="placeholder"
               :maxlength="maxlength" style="width: 0;"
               @blur="losejiaodian" @focus="getjiaodian" @change="changeCallback" @input="inputCallback">
        <div class="h-full flex-initial flex justify-center items-center">
          <span class="iconfont icon-xianquanguanbi dianji mr-2" v-if="clearable" @click="qiongkong"></span>
          <span class="text-ss select-none">{{ textlength }}/{{ maxlength }}</span>
        </div>
      </div>
      <!--      后缀-->
      <div class="flex-initial h-full flex justify-center items-center border-l-2 border-blue-500 select-none"
           v-if="$slots.end">
        <slot name="end"></slot>
      </div>
    </div>
    <div v-if="type==='textarea'" class="w-full flex-1 flex justify-start items-start rounded relative"
         :class="{'border-2 border-blue-500 bg-white':true,'ring-2 ring-blue-500':jiaodian}">
      <textarea ref="textarearef" name="wenbenyu" id="wenbenyu" type="textarea" wrap="soft"
                class="outline-none resize-none w-full flex-1 h-full" :value="modelValue" :placeholder="placeholder"
                :maxlength="maxlength"  @blur="losejiaodian" @focus="getjiaodian" @change="changeCallback" @input="inputCallback"></textarea>
      <div class="absolute right-1 bottom-1">
        <span class="dianji mr-2 text-blue-500 text-ss" v-if="clearable" @click="qiongkong">清空</span>
        <span class="text-ss select-none">{{ textlength }}/{{ maxlength }}</span>
      </div>
    </div>
    <div class="h-4 w-full">
      <p v-if="error" :class="[errorclass]">{{ error }}</p>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, watch} from "vue";

export default defineComponent({
  name: "我的输入框",
  props: {
    // 类型，'text' | 'password' | 'textarea'
    type: {
      type: String,
      default: "text"
    },
    // v-model
    modelValue: {
      type: String,
      default: "",
    },
    // 删除图标
    clearable: {
      type: Boolean,
      default: false,
    },
    // 占位文字描述
    placeholder: {
      type: String,
      default: "请输入",
    },
    // 字数限制
    maxlength: {
      type: Number,
      default: null,
    },
    // 错误信息颜色
    errorclass: {
      type: String,
      default: null,
    },
    // 简易模式，只有一条下横线
    easymodel: {
      type: Boolean,
      default: false,
    },
  },
  setup(prop, content) {
    const inputref = ref(null)
    const textarearef = ref(null)
    // 错误信息
    const error = ref("")
    // 文本长度
    const textlength = ref(0)
    // 焦点状态
    const jiaodian = ref(false)
    // input回调
    const inputCallback = (e) => {
      content.emit("update:modelValue", e.target.value)
    }
    // change回调
    const changeCallback = (e) => {
      content.emit("change", e.target.value)
    }
    // input获得焦点
    const getjiaodian = () => {
      jiaodian.value = true
    }
    // 失去焦点
    const losejiaodian = () => {
      jiaodian.value = false
    }
    // 监听文字长度
    watch(() => prop.modelValue, () => {
      textlength.value = prop.modelValue.length
    })
    // 清空事件
    const qiongkong = () => {
      content.emit("update:modelValue", "")
    }
    // 主动获取焦点
    const focus = () => {
      if (type !== "textarea") {
        inputref.value.focus()
      } else {
        textarearef.value.focus()
      }
    }
    // 主动失去焦点
    const blur = () => {
      if (type !== "textarea") {
        inputref.value.blur()
      } else {
        textarearef.value.blur()
      }
    }
    return {
      inputCallback,
      changeCallback,
      getjiaodian,
      losejiaodian,
      jiaodian, textlength, qiongkong, error, focus, blur,
    }
  },
  components: {},
})
</script>

<style scoped>

</style>

注意： style="width: 0;"这个非常重要，没有这个属性，flex下的input标签会有固定的宽度，必须加。目前只找到这一个解决方案。

最后

以上就是犹豫蜗牛为你收集整理的vue3自定义input组件一、前言二、代码的全部内容，希望文章能够帮你解决vue3自定义input组件一、前言二、代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。