zsc/model_example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
winter_born
2026-04-19 21:44:35 +08:00
commit 9960e025b3
759 changed files with 47395 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
uni_modules/uni-easyinput/changelog.md Normal file
View File

@@ -0,0 +1,9 @@
## 0.0.12（2021-05-12）
- 新增 组件示例地址
## 0.0.11（2021-05-07）
- 修复 input-border 属性不生效的问题
## 0.0.10（2021-04-30）
- 修复 ios 遮挡文字、显示一半的问题
## 0.0.9（2021-02-05）
- 调整为uni_modules目录规范
- 优化 兼容 nvue 页面

56
uni_modules/uni-easyinput/components/uni-easyinput/common.js Normal file
View File

@@ -0,0 +1,56 @@
/**
* @desc 函数防抖
* @param func 目标函数
* @param wait 延迟执行毫秒数
* @param immediate true - 立即执行， false - 延迟执行
*/
export const debounce = function(func, wait = 1000, immediate = true) {
let timer;
console.log(1);
return function() {
console.log(123);
let context = this,
args = arguments;
if (timer) clearTimeout(timer);
if (immediate) {
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
timer = setTimeout(() => {
func.apply(context, args);
}, wait)
}
}
}
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
*/
export const throttle = (func, wait = 1000, type = 1) => {
let previous = 0;
let timeout;
return function() {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
} else if (type === 2) {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}

424
uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue Normal file
View File

@@ -0,0 +1,424 @@
<template>
<view class="uni-easyinput" :class="{'uni-easyinput-error':msg}" :style="{color:inputBorder && msg?'#dd524d':styles.color}">
<view class="uni-easyinput__content" :class="{'is-input-border':inputBorder ,'is-input-error-border':inputBorder && msg,'is-textarea':type==='textarea','is-disabled':disabled}"
:style="{'border-color':inputBorder && msg?'#dd524d':styles.borderColor,'background-color':disabled?styles.disableColor:''}">
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')"></uni-icons>
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{'input-padding':inputBorder}"
:name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled"
:maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" @input="onInput" @blur="onBlur" @focus="onFocus"
@confirm="onConfirm"></textarea>
<input v-else :type="type === 'password'?'text':type" class="uni-easyinput__content-input" :style="{
'padding-right':type === 'password' ||clearable || prefixIcon?'':'10px',
'padding-left':prefixIcon?'':'10px'
}"
:name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder"
:placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" @focus="onFocus"
@blur="onBlur" @input="onInput" @confirm="onConfirm" />
<template v-if="type === 'password'">
<uni-icons v-if="val != '' " class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" :type="showPassword?'eye-slash-filled':'eye-filled'"
:size="18" color="#c0c4cc" @click="onEyes"></uni-icons>
</template>
<template v-else-if="suffixIcon">
<uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')"></uni-icons>
</template>
<template v-else>
<uni-icons class="content-clear-icon" :class="{'is-textarea-icon':type==='textarea'}" type="clear" :size="clearSize"
v-if="clearable && val " color="#c0c4cc" @click="onClear"></uni-icons>
</template>
<slot name="right"></slot>
</view>
</view>
</template>
<script>
// import {
// debounce,
// throttle
// } from './common.js'
/**
* Easyinput 输入框
* @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
* @tutorial https://ext.dcloud.net.cn/plugin?id=3455
* @property {String} value 输入内容
* @property {String } type 输入框的类型（默认text） password/text/textarea/..
* @value text 文本输入键盘
* @value textarea 多行文本输入键盘
* @value password 密码输入键盘
* @value number 数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
* @value idcard 身份证输入键盘，信、支付宝、百度、QQ小程序
* @value digit 带小数点的数字键盘 ，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true）
* @property {Boolean} autoHeight 是否自动增高输入区域，type为textarea时有效（默认true）
* @property {String } placeholder 输入框的提示文字
* @property {String } placeholderStyle placeholder的样式(内联样式，字符串)，如"color: #ddd"
* @property {Boolean} focus 是否自动获得焦点（默认false）
* @property {Boolean} disabled 是否不可输入（默认false）
* @property {Number } maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
* @property {String } confirmType 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
* @property {Number } clearSize 清除图标的大小，单位px（默认15）
* @property {String} prefixIcon 输入框头部图标
* @property {String} suffixIcon 输入框尾部图标
* @property {Boolean} trim 是否自动去除两端的空格
* @value both 去除两端空格
* @value left 去除左侧空格
* @value right 去除右侧空格
* @value start 去除左侧空格
* @value end 去除右侧空格
* @value all 去除全部空格
* @value none 不去除空格
* @property {Boolean} inputBorder 是否显示input输入框的边框（默认true）
* @property {Object} styles 自定义颜色
* @event {Function} input 输入框内容发生变化时触发
* @event {Function} focus 输入框获得焦点时触发
* @event {Function} blur 输入框失去焦点时触发
* @event {Function} confirm 点击完成按钮时触发
* @event {Function} iconClick 点击图标时触发
* @example <uni-easyinput v-model="mobile"></uni-easyinput>
*/
export default {
name: 'uni-easyinput',
props: {
name: String,
value: [Number, String],
type: {
type: String,
default: 'text'
},
clearable: {
type: Boolean,
default: true
},
autoHeight: {
type: Boolean,
default: false
},
placeholder: String,
placeholderStyle: String,
focus: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
maxlength: {
type: [Number, String],
default: 140
},
confirmType: {
type: String,
default: 'done'
},
// 清除按钮的大小
clearSize: {
type: [Number, String],
default: 15
},
// 是否显示 input 边框
inputBorder: {
type: Boolean,
default: true
},
prefixIcon: {
type: String,
default: ''
},
suffixIcon: {
type: String,
default: ''
},
// 是否自动去除两端的空格
trim: {
type: [Boolean, String],
default: true
},
// 自定义样式
styles: {
type: Object,
default () {
return {
color: '#333',
disableColor: '#eee',
borderColor: '#e5e5e5'
}
}
}
},
data() {
return {
focused: false,
errMsg: '',
val: '',
showMsg: '',
border: false,
isFirstBorder: false,
showClearIcon: false,
showPassword: false
};
},
computed: {
msg() {
return this.errorMessage || this.errMsg;
},
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
inputMaxlength() {
return Number(this.maxlength);
},
},
watch: {
value(newVal) {
if (this.errMsg) this.errMsg = ''
this.val = newVal
if (this.form && this.formItem) {
this.formItem.setValue(newVal)
}
},
focus(newVal) {
this.$nextTick(() => {
this.focused = this.focus
})
}
},
created() {
this.val = this.value
this.form = this.getForm('uniForms')
this.formItem = this.getForm('uniFormsItem')
if (this.form && this.formItem) {
if (this.formItem.name) {
this.rename = this.formItem.name
this.form.inputChildrens.push(this)
}
}
},
mounted() {
// this.onInput = throttle(this.input, 500)
this.$nextTick(() => {
// setTimeout(()=>{
// },1000)
this.focused = this.focus
})
},
methods: {
/**
* 初始化变量值
*/
init() {
},
onClickIcon(type) {
this.$emit('iconClick', type)
},
/**
* 获取父元素实例
*/
getForm(name = 'uniForms') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
},
onEyes() {
this.showPassword = !this.showPassword
},
onInput(event) {
let value = event.detail.value;
// 判断是否去除空格
if (this.trim) {
if (typeof(this.trim) === 'boolean' && this.trim) {
value = this.trimStr(value)
}
if (typeof(this.trim) === 'string') {
value = this.trimStr(value, this.trim)
}
};
if (this.errMsg) this.errMsg = ''
this.val = value
this.$emit('input', value);
},
onFocus(event) {
// this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
let value = event.detail.value;
// setTimeout(() => {
// this.focused = false;
// }, 100);
this.$emit('blur', event);
},
onConfirm(e) {
this.$emit('confirm', e.detail.value);
},
onClear(event) {
this.val = '';
this.$emit('input', '');
},
fieldClick() {
this.$emit('click');
},
trimStr(str, pos = 'both') {
if (pos === 'both') {
return str.trim();
} else if (pos === 'left') {
return str.trimLeft();
} else if (pos === 'right') {
return str.trimRight();
} else if (pos === 'start') {
return str.trimStart()
} else if (pos === 'end') {
return str.trimEnd()
} else if (pos === 'all') {
return str.replace(/\s+/g, '');
} else if (pos === 'none') {
return str;
}
return str;
}
}
};
</script>
<style lang="scss" scoped>
.uni-easyinput {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
flex: 1;
position: relative;
text-align: left;
color: #333;
font-size: 14px;
}
.uni-easyinput__content {
flex: 1;
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
box-sizing: border-box;
/* #endif */
min-height: 36px;
flex-direction: row;
align-items: center;
}
.uni-easyinput__content-input {
/* #ifndef APP-NVUE */
width: auto;
/* #endif */
position: relative;
overflow: hidden;
flex: 1;
line-height: 1;
font-size: 14px;
}
.is-textarea {
align-items: flex-start;
}
.is-textarea-icon {
margin-top: 5px;
}
.uni-easyinput__content-textarea {
position: relative;
overflow: hidden;
flex: 1;
line-height: 1.5;
font-size: 14px;
padding-top: 6px;
padding-bottom: 10px;
height: 80px;
/* #ifndef APP-NVUE */
min-height: 80px;
width: auto;
/* #endif */
}
.input-padding {
padding-left: 10px;
}
.content-clear-icon {
padding: 0 5px;
}
.label-icon {
margin-right: 5px;
margin-top: -1px;
}
// 显示边框
.is-input-border {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
align-items: center;
border: 1px solid $uni-border-color;
border-radius: 4px;
}
.uni-easyinput__right {
// margin-left: 5px;
}
// 必填
.is-required {
color: $uni-color-error;
}
.uni-error-message {
position: absolute;
bottom: -17px;
left: 0;
line-height: 12px;
color: $uni-color-error;
font-size: 12px;
text-align: left;
}
.uni-error-msg--boeder {
position: relative;
bottom: 0;
line-height: 22px;
}
.is-input-error-border {
border-color: $uni-color-error;
}
.uni-easyinput--border {
margin-bottom: 0;
padding: 10px 15px;
// padding-bottom: 0;
border-top: 1px #eee solid;
}
.uni-easyinput-error {
padding-bottom: 0;
}
.is-first-border {
/* #ifndef APP-NVUE */
border: none;
/* #endif */
/* #ifdef APP-NVUE */
border-width: 0;
/* #endif */
}
.is-disabled {
background-color: #eee;
}
</style>

85
uni_modules/uni-easyinput/package.json Normal file
View File

@@ -0,0 +1,85 @@
{
"id": "uni-easyinput",
"displayName": "uni-easyinput 增强输入框",
"version": "0.0.12",
"description": "Easyinput 组件是对原生input组件的增强",
"keywords": [
"uni-ui",
"uniui",
"input",
"uni-easyinput",
"输入框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

199
uni_modules/uni-easyinput/readme.md Normal file
View File

@@ -0,0 +1,199 @@
### Easyinput 增强输入框
> **组件名：uni-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 | - |true| 是否显示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 |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput](https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput)