毕设-相约校园app-web端 uni-app 开发，后端为springboot.zip

### Easyinput 增强输入框 > 代码块： `uEasyinput` easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能 > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 > - 组件需要依赖 `sass` 插件 ，请自行手动安装 > - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 ### 平台差异说明 暂不支持在nvue页面中使用 ### 安装方式 本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) ### 基本用法 输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，`clearable` 属性设置为 `false` 即可 `clearable` 属性设置为 `true` ，输入框聚焦且内容不为空时，才会显示内容 ```html <uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput> ``` ### 输入框带左右图标 设置 `prefixIcon` 属性来显示输入框的头部图标 设置 `suffixIcon` 属性来显示输入框的尾部图标 注意图标当前只支持 `uni-icons` 内置的图标，当配置 `suffixIcon` 属性后，会覆盖 `:clearable="true"` 和 `type="password"` 时的原有图标 绑定 `@iconClick` 事件可以触发图标的点击 ，返回 `prefix` 表示点击左侧图标，返回 `suffix` 表示点击右侧图标 ```html <!-- 输入框头部图标 --> <uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput> <!-- 展示输入框尾部图标 --> <uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput> ``` ### 输入框禁用 设置 `disable` 属性可以禁用输入框，此时输入框不可编辑 ```html <uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput> ``` ### 密码框 设置 `type="password"` 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态 ```html <uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput> ``` ### 输入框聚焦 设置 `focus` 属性可以使输入框聚焦 如果页面存在多个设置 `focus` 属性的输入框，只有最后一个输入框的 `focus` 属性会生效 ```html <uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput> ``` ### 多行文本 设置 `type="textarea"` 时可输入多行文本 ```html <uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput> ``` ### 多行文本自动高度 设置 `type="textarea"` 时且设置 `autoHeight` 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度 ```html <uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput> ``` ### 取消边框 设置 `:inputBorder="false"` 时可取消输入框的边框显示，同时搭配 `uni-forms` 的 `:border="true"` 有较好的效果 ```html <uni-forms border> <uni-forms-item label="姓名"> <uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput> </uni-forms-item> <uni-forms-item label="年龄"> <uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput> </uni-forms-item> </uni-forms> ``` ## API ### Easyinput Props |属性名 | 类型 | 可选值 | 默认值 | 说明| |:-: | :-: |:-: | :-: | :-: | |value |String/ Number | - | - |输入内容| |type |String | 见 type Options |text| 输入框的类型（默认text） | |clearable |Boolean | - |true| 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容| |autoHeight |Boolean | - |false| 是否自动增高输入区域，type为textarea时有效| |placeholder |String | - | - | 输入框的提示文字| |placeholderStyle |String | - | - | placeholder的样式(内联样式，字符串)，如"color: #ddd"| |focus |Boolean | - |false| 是否自动获得焦点| |disabled |Boolean | - |false| 是否不可输入| |maxlength |Number | - |140| 最大输入长度，设置为 -1 的时候不限制最大长度| |confirmType |String | - |done| 设置键盘右下角按钮的文字，仅在type="text"时生效| |clearSize |Number | - |15| 清除图标的大小，单位px| |prefixIcon |String | - | - |输入框头部图标 | |suffixIcon |String | - | - |输入框尾部图标| |trim |Boolean/String | 见 trim Options | false | 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格| |inputBorder |Boolean | - |false| 是否显示input输入框的边框| |styles |Object | - | - | 样式自定义| #### Type Options |属性名 | 说明 | |:-: | :-: | |text |文本输入键盘 | |textarea |多行文本输入键盘 | |password |密码输入键盘 | |number |数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 | |idcard |身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序 | |digit |带小数点的数字键盘，仅支持微信、支付宝、百度、头条、QQ小程序 | #### ConfirmType Options 平台差异与 [input](https://uniapp.dcloud.io/component/input) 相同 |属性名 | 说明 | |:-: | :-: | |send |右下角按钮为“发送” | |search |右下角按钮为“搜索” | |next |右下角按钮为“下一个”| |go |右下角按钮为“前往” | |done |右下角按钮为“完成” | #### Styles Options |属性名 | 默认值 |说明 | |:-: | :-: | :-: | |color | #333 | 输入文字颜色 | |disableColor |#eee | 输入框禁用背景色 | |borderColor |#e5e5e5 | 边框颜色 | #### Trim Options 传入类型为 `Boolean` 时，自动去除前后空格,传入类型为 `String` 时，可以单独控制，下面是可选值 |属性名 |说明 | |:-: | :-: | |both | 去除两端空格 | |left | 去除左侧空格 | |right | 去除右侧空格 | |all | 去除所有空格 | |none | 不去除空格 | ### Easyinput Events |事件称名 | 说明 |返回值 | |:-: | :-: |:-: | |@input |输入框内容发生变化时触发 | - | |@focus |输入框获得焦点时触发 | - | |@blur |输入框失去焦点时触发 | - | |@confirm |点击完成按钮时触发 | - | |@iconClick |点击图标时触发 | prefix/suffix |