Input 输入框

value：text

text

text

基础使用

这是 Input 的基础例子

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'

const text = ref('text')
const inputRef = ref()

// 定义 focus 事件的处理函数
function handleFocus(event: FocusEvent) {
  const target = event.target as HTMLInputElement
  console.log('Input focused:', target.value)
}

// 定义 blur 事件的处理函数
function handleBlur(event: FocusEvent) {
  const target = event.target as HTMLInputElement
  console.log('Input blurred:', target.value)
}

onMounted(() => {
  // 手动调用 focus 事件
  nextTick(() => {
    console.log(inputRef.value?.ref)
    inputRef.value?.ref?.focus()
  })
})
</script>

<template>
  <div class="input-demo">
    <div>
      <p>value：{{ text }}</p>
      <np-input
        v-model="text"
        placeholder="请输入"
        autocomplete="off"
        inherit-to-wrap="test"
        @focus="handleFocus"
        @blur="handleBlur"
      />
    </div>
    <div>
      <np-input v-model="text" disabled />
    </div>
    <div>
      <np-input
        ref="inputRef"
        v-model="text"
        type="textarea"
        placeholder="请输入"
        autocomplete="off"
        inherit-to-wrap="test"
      />
    </div>
    <div>
      <np-input v-model="text" type="textarea" disabled />
    </div>
  </div>
</template>

<style>
.input-demo > div,
.input-demo p {
  margin: 10px;
}
</style>

value：size

尺寸使用

这是 Input 的尺寸例子

<script setup lang="ts">
import { ref } from 'vue'

const sizeText = ref('size')
</script>

<template>
  <div class="input-demo">
    <p>value：{{ sizeText }}</p>
    <div>
      <np-input v-model="sizeText" size="small" />
    </div>
    <div>
      <np-input v-model="sizeText" />
    </div>
    <div>
      <np-input v-model="sizeText" size="large" />
    </div>
  </div>
</template>

<style>
.input-demo > div,
.input-demo p {
  margin: 10px;
}
</style>

value：slot

http://

.com

插槽使用

这是 Input 的插槽例子

<script setup lang="ts">
import { ref } from 'vue'

const slotText = ref('slot')
</script>

<template>
  <div class="input-demo">
    <p>value：{{ slotText }}</p>
    <div>
      <np-input v-model="slotText" green size="small">
        <template #prefix>
          <NpIcon icon="search" />
        </template>
        <template #suffix>
          <NpIcon icon="refresh" class="icon-refresh" />
        </template>
      </np-input>
    </div>
    <div>
      <np-input v-model="slotText" green clearable>
        <template #prefix>
          <NpIcon icon="search" />
        </template>
      </np-input>
    </div>
    <div>
      <np-input v-model="slotText" green class="test-search">
        <template #append>
          <NpIcon icon="search" />
        </template>
      </np-input>
    </div>
    <div>
      <np-input v-model="slotText" green size="large" show-password>
        <template #prefix>
          <NpIcon icon="search" />
        </template>
      </np-input>
    </div>
    <div>
      <np-input v-model="slotText" green size="large">
        <template #prepend>
          http://
        </template>
        <template #append>
          .com
        </template>
      </np-input>
    </div>
  </div>
</template>

<style>
.input-demo > div,
.input-demo p {
  margin: 10px;
}

.icon-refresh:hover {
  color: red;
  cursor: pointer;
}

.test-search .np-input__append {
  width: 75px;
  color: white;
  cursor: pointer;
  background: #00a675;
}
</style>

属性说明

属性	属性描述	类型	默认值
size	输入框大小	small | large	default
disable	禁用状态	Boolean	false
clearable	显示清除按钮	Boolean	false
show-password	显示切换密码	Boolean	false

事件说明

事件	事件描述	类型
focus	元素聚焦时触发	(ev:FocusEvent) => void
blur	元素失焦时触发	(ev:FocusEvent) => void