引入
在项目目录下使用 npm 安装 yy-input 包。
npm install yy-input
在需要使用的组件中引入 yy-input。
import YyInput from 'yy-input'
基本使用
使用 yy-input 的关键属性如下：
value
绑定输入框的值
placeholder
输入框的 placeholder 文本
size
输入框的大小，可选值为"small"、"medium"、和"large"。
disabled
禁用输入框
readonly
只可读取输入框的值
clearable
是否可清空输入框的值
prefix
输入框前缀的 icon 类名
suffix
输入框后缀的 icon 类名
prefixCls
设置组件的前缀名，通常用于自定义样式
onChange
输入框内容被改变时的回调函数
onPressEnter
按下 Enter 键时的回调函数
onClear
点击清空按钮时的回调函数
以下是一个简单的 yy-input 实例。
-- -------------------- ---- -------
----------
-----
--------- ------------------- ------------- ---------------------------
-----------------------
------
-----------
--------
------ ------- ---- ----------
------ ------- -
----------- -
----------- -------
--
------ -
------ -
------ --
-
-
-
---------高级使用
前缀和后缀
我们可以通过 prefix 和 suffix 属性添加前缀和后缀的 icon。
<yy-input placeholder="输入关键字" prefix="el-icon-search" suffix="el-icon-edit"></yy-input>
禁用和只读状态
我们可以通过 disabled 和 readonly 属性把输入框设置为禁用或只读状态。
<yy-input placeholder="输入关键字" size="medium" disabled v-model="value"></yy-input> <yy-input placeholder="输入关键字" size="medium" readonly v-model="value"></yy-input>
清空按钮
我们可以通过 clearable 属性添加清空按钮，并通过 onClear 回调函数处理点击事件。
<yy-input placeholder="输入关键字" size="medium" clearable v-model="value" @on-clear="handleClear"></yy-input>
methods: {
handleClear() {
this.value = ''
}
}自定义样式
我们可以通过 prefixCls 属性自定义组件的样式名。
<yy-input placeholder="输入关键字" size="medium" prefix-cls="custom-input" v-model="value"></yy-input>
.custom-input {
border: 1px solid #ccc;
border-radius: 4px;
}总结
yy-input 是一个简单但功能强大的输入框组件，我们可以通过配置属性来满足不同的需求，同时也可以通过自定义样式使组件更符合项目的样式。对于前端开发人员来说，掌握 yy-input 的使用是十分重要的，因为在前端开发中，输入框是一个非常基础的组件，也是交互最为密集的组件之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cfb81e8991b448e6c48