EarthSDK UI

Appearance

输入框 input ​

通过鼠标或键盘输入字符

示例代码 ​

<script setup lang="ts">
import { ESInput } from "earthsdk-ui";
import { ref } from "vue";
const valRef = ref("");
const text = ref("文字");
const password = ref("123456789");
</script>

<template>
  <div class="ESInput_content">
    <h3 class="h3">尺寸</h3>
    <ESInput
      class="ESInput"
      placeholder="请输入内容"
      size="mini"
      v-model="valRef"
    />
    <ESInput
      class="ESInput"
      placeholder="请输入内容"
      size="small"
      v-model="valRef"
    />
    <ESInput
      class="ESInput"
      placeholder="请输入内容"
      size="normal"
      v-model="valRef"
    />
    <ESInput
      class="ESInput"
      placeholder="请输入内容"
      size="large"
      v-model="valRef"
    />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">类型</h3>
    <ESInput
      class="ESInput"
      placeholder="请输入内容"
      type="text"
      v-model="text"
    />
    <ESInput
      class="ESInput"
      placeholder="请输入内容"
      type="password"
      v-model="password"
    />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">是否禁用</h3>
    <ESInput
      class="ESInput"
      :disabled="true"
      placeholder="请输入内容"
      v-model="text"
    />
    <ESInput
      class="ESInput"
      :disabled="false"
      placeholder="请输入内容"
      v-model="text"
    />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">是否只读</h3>
    <ESInput
      class="ESInput"
      :readonly="true"
      placeholder="请输入内容"
      v-model="text"
    />
    <ESInput
      class="ESInput"
      :readonly="false"
      placeholder="请输入内容"
      v-model="text"
    />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">占位提示文字</h3>
    <ESInput class="ESInput" placeholder="占位提示文字" />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">限制输入最大长度</h3>
    <ESInput class="ESInput" placeholder="限制最大输入长度为6" :maxlength="6" />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">是否展示字数限制提示</h3>
    <ESInput class="ESInput" v-model="text" :showLimit="true" :maxlength="6" />
  </div>
  <div class="ESInput_content">
    <h3 class="h3">是否允许清空</h3>
    <ESInput class="ESInput" v-model="text" :clearable="true" />
  </div>
</template>

<style scoped>
.h3 {
  color: aliceblue !important;
  margin: 5px;
}
.ESInput_content {
  background: #25262a;
  padding: 20px;
  width: 500px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.ESInput {
  margin: 5px;
}
</style>

Attributes ​

属性名说明类型默认值
v-model绑定值string""
type类型stringtext
size尺寸stringnormal
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
placeholder占位提示文字stringfalse
maxlength输入最大长度numbernull
showLimit是否展示字数限制提示booleanfalse
clearable是否允许清空booleanfalse