ea-ui

Input 输入框 ​

通过鼠标或键盘输入字符

引入 ​

js

js
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-input/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

查看代码
html
<div class="row left">
  <ea-input placeholder="请输入内容"></ea-input>
  <ea-input placeholder="请输入内容" value="hello"></ea-input>
</div>

禁用状态 ​

查看代码
html
<div class="row left">
  <ea-input id="basicInput" placeholder="请输入内容" disabled></ea-input>
  <ea-input
    id="basicInput"
    placeholder="请输入内容"
    value="hello"
    disabled
  ></ea-input>
</div>

可清空 ​

查看代码
html
<div class="row left">
  <ea-input id="basicInput" placeholder="这不是空的" clearable></ea-input>
  <ea-input
    id="basicInput"
    placeholder="请输入内容"
    value="这是空的"
    clearable
  ></ea-input>
</div>

密码框 ​

查看代码
html
<div class="row left">
  <ea-input id="basicInput" placeholder="这不是空的" show-password></ea-input>
  <ea-input
    id="basicInput"
    placeholder="这不是空的"
    value="这是空的"
    show-password
  ></ea-input>
</div>

带 icon 的输入框 ​

带有图标标记输入类型

查看代码
html
<div class="row left">
  <ea-input placeholder="这不是空的" prefix-icon="icon-search"></ea-input>
  <ea-input placeholder="这不是空的" suffix-icon="icon-search"></ea-input>
</div>

复合型输入框 ​

可前置或后置元素，一般为标签或按钮

Http://
.com
Http://
查看代码

css

css
.prepend,
.append {
  background-color: #f5f7fa;
  padding: 0.5rem;
}

html

html
<div class="col left">
  <ea-input placeholder="假装有网址">
    <div class="prepend" slot="prepend">Http://</div>
  </ea-input>
  <ea-input placeholder="假装有网址">
    <div class="append" slot="append">.com</div>
  </ea-input>
  <ea-input placeholder="假装有网址">
    <div class="prepend" slot="prepend">Http://</div>
    <div class="append" slot="append">
      <i class="icon-search"></i>
    </div>
  </ea-input>
</div>

带输入建议 ​

根据输入内容提供对应的输入建议(建议使用场景: 建议数据为静态数据)

WARNING

注意: 在 VUE 环境下, suggestion 的设置推荐在 ready 事件触发时设置，否则可能会导致建议列表不会渲染。

同理, 若原生环境出现该问题, 也可使用该方法。

js
EaInput.addEventListener("ready", () => {
  EaInput.suggestion = suggentionArr;
});
搜索词: [1,2,张三,李四,王五,赵六,孙七,周八,吴九,郑十]

激活时列出输入建议

输入后匹配输入建议

查看代码
html
<div class="row">
  <section>
    <p>激活时列出输入建议</p>
    <ea-input
      id="trigger-on-focus"
      placeholder="请输入内容"
      trigger-on-focus
    ></ea-input>
  </section>
  <section>
    <p>输入后匹配输入建议</p>
    <ea-input
      id="trigger-after-input"
      placeholder="请输入内容"
      trigger-after-input
    ></ea-input>
  </section>
</div>

js: 设置输入建议 input.suggestion

js
const valArr = [
  { value: "1" },
  { value: "2" },
  { value: "张三" },
  { value: "李四" },
  { value: "王五" },
  { value: "赵六" },
  { value: "孙七" },
  { value: "周八" },
  { value: "吴九" },
  { value: "郑十" },
];

const suggentionControl = {
  onFocusInput: document.querySelector("#trigger-on-focus"),
  onAfterInput: document.querySelector("#trigger-after-input"),

  init() {
    this.onFocusInput.addEventListener("ready", () => {
      this.onFocusInput.suggestion = valArr;
    });
    this.onAfterInput.addEventListener("ready", () => {
      this.onAfterInput.suggestion = valArr;
    });
  },
};
suggentionControl.init();

远程搜索 ​

从服务端搜索数据。通过更改 remote 属性开启远程搜索功能。

搜索词: [1,2,张三,李四,王五,赵六,孙七,周八,吴九,郑十]

激活时列出输入建议

查看代码

html

html
<div class="row">
  <section>
    <p>激活时列出输入建议</p>
    <ea-input
      id="trigger-on-focus_for-remote"
      placeholder="请输入内容"
      trigger-on-focus
      remote
    ></ea-input>
  </section>
</div>

js: 建议列表的设置方法同上一个示例一样。remote 属性开启后，会渲染一个加载动画；数据返回后，通过设置建议列表 + 设置 remote 属性为 false 来展示建议列表。

js
const valArr = [
  { value: "1" },
  { value: "2" },
  { value: "张三" },
  { value: "李四" },
  { value: "王五" },
  { value: "赵六" },
  { value: "孙七" },
  { value: "周八" },
  { value: "吴九" },
  { value: "郑十" },
];
const remoteControl = {
  input: document.querySelector("#trigger-on-focus_for-remote"),
  data: [{ value: "123" }, { value: "456" }, { value: "789" }],

  handleRemoteSearch(data) {
    this.remote.remote = true;
    setTimeout(() => {
      this.remote.suggestion = data;
      this.remote.remote = false;
    }, 3 * 1000);
  },
  init() {
    this.input.addEventListener("ready", () => {
      this.input.addEventListener("change", (e) => {
        this.handleRemoteSearch(
          this.data.filter((item) => item.value.includes(e.detail.value))
        );
      });

      this.input.addEventListener("focus", (e) => {
        this.handleRemoteSearch(this.data);
      });
    });
  },
};
remoteControl.init();

set 和 get 操作

js
// 获取值
EaInput.remote;

// 赋值: 当数据返回时
EaInput.remote = true;

输入长度限制 ​

查看代码
html
<div class="col left">
  <ea-input placeholder="请输入内容" show-word-limit max-length="10"></ea-input>
  <ea-input placeholder="请输入内容" show-word-limit min-length="2"></ea-input>
</div>

Attributes ​

参数说明类型可选值默认值
type输入框类型Stringtext / password / number / email / url / search / tel / date / time / datetime / week / month / color / filetext
value输入框的值String--
placeholder占位符String--
disabled禁用Booleantrue / falsefalse
clearable可清空Booleantrue / falsefalse
show-password显示密码Booleantrue / falsefalse
prefix-icon输入框图标(前)String--
suffix-icon输入框图标(后)String--
trigger-on-focus激活时列出输入建议Booleantrue / falsefalse
trigger-after-input输入后匹配输入建议Booleantrue / falsefalse
remote远程搜索Booleantrue / falsefalse
max-length最大输入长度Number--
min-length最小输入长度Number--
show-word-limit显示输入长度限制Booleantrue / falsefalse

CSS Part ​

名称说明
container外层容器
input-wrap输入框容器
input输入框
(仅当使用 prepend 插槽时可用) prepend-wrap前置内容容器(插槽slot="prepend")
(仅当使用 append 插槽时可用) append-wrap后置内容容器(插槽slot="append")
(仅当使用 prefix-icon 属性时可用) prefix-icon前置图标容器
(仅当使用 suffix-icon 属性时可用(包括show-password和clearable属性)) suffix-icon前置图标容器
(仅当使用 suggestion 属性时可用) suggestion-wrap输入建议容器
(仅当使用 suggestion 属性时可用) suggestion-item输入建议列表项
(仅当使用 suggestion 属性时可用) loading-icon加载中图标
(仅当使用 show-word-limit 属性时可用) word-limit输入长度限制提示

Slots ​

插槽名说明
prepend输入框前置内容
append输入框后置内容

Event ​

事件名说明参数获取值值的类型
input输入时触发-e.detail.valueString
focus输入框聚焦时触发-e.detail.valueString
blur输入框失去焦点时触发-e.detail.valueString