HB
/
ruoyi-miniapp
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

反馈表单

master
爱~海~爱海爱海~右 2 months ago
parent
74babb8ee8
commit
388229b588
3 changed files with 822 additions and 672 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      pages.json
  2. 29
      sub/task/enforce.vue
  3. 320
      uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue

3
pages.json
Unescape View File

@ -133,7 +133,8 @@
"van-action-sheet": "/wxcomponents/vant/action-sheet/index"
},
"componentPlaceholder": {
"u-modal": "view"
"u-modal": "view",
"uni-easyinput": "view"
}
}
}

29
sub/task/enforce.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<view class="view-container">
<view class="box">
<view class="box wd-flex wd-flex-col" style="gap: 12px">
<view
class="wd-flex"
style="justify-content: space-between; align-items: center"
@ -14,8 +14,30 @@
<uni-easyinput
type="textarea"
v-model="form.advice"
placeholder="请输入内容"
placeholder="请输入..."
:maxlength="500"
:autoHeight="true"
:styles="{
backgroundColor: '#F9F9F9',
borderColor: '#F1F1F4'
}"
></uni-easyinput>
<view
class="wd-flex"
style="justify-content: space-between; align-items: center"
>
<view style="font-weight: bold">
<text style="color: #f8285a; margin-right: 4px">*</text>
上传证明
</view>
</view>
<u-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
multiple
:maxCount="10"
></u-upload>
</view>
<cs-bottom-wrapper>
@ -81,4 +103,7 @@ export default {
}
}
}
::v-deep .uni-easyinput__content-textarea {
min-height: 400rpx;
}
</style>

320
uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
Unescape View File

@ -1,27 +1,150 @@
<template>
<view class="uni-easyinput" :class="{ 'uni-easyinput-error': msg }" :style="boxStyle">
<view class="uni-easyinput__content" :class="inputContentClass" :style="inputContentStyle">
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')" size="22"></uni-icons>
<slot name="left">
</slot>
<view
class="uni-easyinput"
:class="{ 'uni-easyinput-error': msg }"
:style="boxStyle"
>
<view
class="uni-easyinput__content"
:class="inputContentClass"
:style="inputContentStyle"
>
<uni-icons
v-if="prefixIcon"
class="content-clear-icon"
:type="prefixIcon"
color="#c0c4cc"
@click="onClickIcon('prefix')"
size="22"
></uni-icons>
<slot name="left"></slot>
<!-- #ifdef MP-ALIPAY -->
<textarea :enableNative="enableNative" v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class" :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @input="onInput" @blur="_Blur" @focus="_Focus" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange"></textarea>
<input :enableNative="enableNative" v-else :type="type === 'password' ? 'text' : type" class="uni-easyinput__content-input" :style="inputStyle" :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @focus="_Focus" @blur="_Blur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange" />
<textarea
:enableNative="enableNative"
v-if="type === 'textarea'"
class="uni-easyinput__content-textarea"
:class="{ 'input-padding': inputBorder }"
:name="name"
:value="val"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled"
placeholder-class="uni-easyinput__placeholder-class"
:maxlength="inputMaxlength"
:focus="focused"
:autoHeight="autoHeight"
:cursor-spacing="cursorSpacing"
:adjust-position="adjustPosition"
@input="onInput"
@blur="_Blur"
@focus="_Focus"
@confirm="onConfirm"
@keyboardheightchange="onkeyboardheightchange"
></textarea>
<input
:enableNative="enableNative"
v-else
:type="type === 'password' ? 'text' : type"
class="uni-easyinput__content-input"
:style="inputStyle"
:name="name"
:value="val"
:password="!showPassword && type === 'password'"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
placeholder-class="uni-easyinput__placeholder-class"
:disabled="disabled"
:maxlength="inputMaxlength"
:focus="focused"
:confirmType="confirmType"
:cursor-spacing="cursorSpacing"
:adjust-position="adjustPosition"
@focus="_Focus"
@blur="_Blur"
@input="onInput"
@confirm="onConfirm"
@keyboardheightchange="onkeyboardheightchange"
/>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class" :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @input="onInput" @blur="_Blur" @focus="_Focus" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange"></textarea>
<input v-else :type="type === 'password' ? 'text' : type" class="uni-easyinput__content-input" :style="inputStyle" :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @focus="_Focus" @blur="_Blur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange" />
<textarea
v-if="type === 'textarea'"
class="uni-easyinput__content-textarea"
:class="{ 'input-padding': inputBorder }"
:name="name"
:value="val"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled"
placeholder-class="uni-easyinput__placeholder-class"
:maxlength="inputMaxlength"
:focus="focused"
:autoHeight="autoHeight"
:cursor-spacing="cursorSpacing"
:adjust-position="adjustPosition"
@input="onInput"
@blur="_Blur"
@focus="_Focus"
@confirm="onConfirm"
@keyboardheightchange="onkeyboardheightchange"
></textarea>
<input
v-else
:type="type === 'password' ? 'text' : type"
class="uni-easyinput__content-input"
:style="inputStyle"
:name="name"
:value="val"
:password="!showPassword && type === 'password'"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
placeholder-class="uni-easyinput__placeholder-class"
:disabled="disabled"
:maxlength="inputMaxlength"
:focus="focused"
:confirmType="confirmType"
:cursor-spacing="cursorSpacing"
:adjust-position="adjustPosition"
@focus="_Focus"
@blur="_Blur"
@input="onInput"
@confirm="onConfirm"
@keyboardheightchange="onkeyboardheightchange"
/>
<!-- #endif -->
<template v-if="type === 'password' && passwordIcon">
<!-- 开启密码时显示小眼睛 -->
<uni-icons v-if="isVal" class="content-clear-icon" :class="{ 'is-textarea-icon': type === 'textarea' }" :type="showPassword ? 'eye-slash-filled' : 'eye-filled'" :size="22" :color="focusShow ? primaryColor : '#c0c4cc'" @click="onEyes"></uni-icons>
<uni-icons
v-if="isVal"
class="content-clear-icon"
:class="{ 'is-textarea-icon': type === 'textarea' }"
:type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
:size="22"
:color="focusShow ? primaryColor : '#c0c4cc'"
@click="onEyes"
></uni-icons>
</template>
<template v-if="suffixIcon">
<uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')" size="22"></uni-icons>
<uni-icons
v-if="suffixIcon"
class="content-clear-icon"
:type="suffixIcon"
color="#c0c4cc"
@click="onClickIcon('suffix')"
size="22"
></uni-icons>
</template>
<template v-else>
<uni-icons v-if="clearable && isVal && !disabled && type !== 'textarea'" class="content-clear-icon" :class="{ 'is-textarea-icon': type === 'textarea' }" type="clear" :size="clearSize" :color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" @click="onClear"></uni-icons>
<uni-icons
v-if="clearable && isVal && !disabled && type !== 'textarea'"
class="content-clear-icon"
:class="{ 'is-textarea-icon': type === 'textarea' }"
type="clear"
:size="clearSize"
:color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'"
@click="onClear"
></uni-icons>
</template>
<slot name="right"></slot>
</view>
@ -74,23 +197,23 @@
* @example <uni-easyinput v-model="mobile"></uni-easyinput>
*/
function obj2strClass(obj) {
let classess = '';
let classess = ''
for (let key in obj) {
const val = obj[key];
const val = obj[key]
if (val) {
classess += `${key} `;
classess += `${key} `
}
}
return classess;
return classess
}
function obj2strStyle(obj) {
let style = '';
let style = ''
for (let key in obj) {
const val = obj[key];
style += `${key}:${val};`;
const val = obj[key]
style += `${key}:${val};`
}
return style;
return style
}
export default {
name: 'uni-easyinput',
@ -210,7 +333,7 @@
backgroundColor: '#fff',
disableColor: '#F7F6F6',
borderColor: '#e5e5e5'
};
}
}
},
errorMessage: {
@ -236,17 +359,17 @@
focusShow: false,
localMsg: '',
isEnter: false // 用于判断当前是否是使用回车操作
};
}
},
computed: {
// 输入框内是否有值
isVal() {
const val = this.val;
const val = this.val
// fixed by mehaotian 处理值为0的情况，字符串0不在处理范围
if (val || val === 0) {
return true;
return true
}
return false;
return false
},
msg() {
@ -255,18 +378,18 @@
// return this.errorMessage || this.formItem.errMsg;
// }
// TODO 处理头条 formItem 中 errMsg 不更新的问题
return this.localMsg || this.errorMessage;
return this.localMsg || this.errorMessage
},
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，用户可以传入字符串数值
inputMaxlength() {
return Number(this.maxlength);
return Number(this.maxlength)
},
// 处理外层样式的style
boxStyle() {
return `color:${
this.inputBorder && this.msg ? '#e43d33' : this.styles.color
};`;
};`
},
// input 内容的类和样式处理
inputContentClass() {
@ -276,69 +399,70 @@
'is-textarea': this.type === 'textarea',
'is-disabled': this.disabled,
'is-focused': this.focusShow
});
})
},
inputContentStyle() {
const focusColor = this.focusShow ?
this.primaryColor :
this.styles.borderColor;
const focusColor = this.focusShow
? this.primaryColor
: this.styles.borderColor
const borderColor =
this.inputBorder && this.msg ? '#dd524d' : focusColor;
this.inputBorder && this.msg ? '#dd524d' : focusColor
return obj2strStyle({
'border-color': borderColor || '#e5e5e5',
'background-color': this.disabled ?
this.styles.disableColor : this.styles.backgroundColor
});
'background-color': this.disabled
? this.styles.disableColor
: this.styles.backgroundColor
})
},
// input右侧样式
inputStyle() {
const paddingRight =
this.type === 'password' || this.clearable || this.prefixIcon ?
'' :
'10px';
this.type === 'password' || this.clearable || this.prefixIcon
? ''
: '10px'
return obj2strStyle({
'padding-right': paddingRight,
'padding-left': this.prefixIcon ? '' : '10px'
});
})
}
},
watch: {
value(newVal) {
// fix by mehaotian 解决 值为null的情况下，input报错的bug
if (newVal === null) {
this.val = '';
this.val = ''
return
}
this.val = newVal;
this.val = newVal
},
modelValue(newVal) {
if (newVal === null) {
this.val = '';
this.val = ''
return
}
this.val = newVal;
this.val = newVal
},
focus(newVal) {
this.$nextTick(() => {
this.focused = this.focus;
this.focusShow = this.focus;
});
this.focused = this.focus
this.focusShow = this.focus
})
}
},
created() {
this.init();
this.init()
// TODO 处理头条vue3 computed 不监听 inject 更改的问题（formItem.errMsg）
if (this.form && this.formItem) {
this.$watch('formItem.errMsg', newVal => {
this.localMsg = newVal;
});
this.localMsg = newVal
})
}
},
mounted() {
this.$nextTick(() => {
this.focused = this.focus;
this.focusShow = this.focus;
});
this.focused = this.focus
this.focusShow = this.focus
})
},
methods: {
/**
@ -346,16 +470,16 @@
*/
init() {
if (this.value || this.value === 0) {
this.val = this.value;
this.val = this.value
} else if (
this.modelValue ||
this.modelValue === 0 ||
this.modelValue === ''
) {
this.val = this.modelValue;
this.val = this.modelValue
} else {
// fix by ht 如果初始值为null，则input报错，待框架修复
this.val = '';
this.val = ''
}
},
@ -364,15 +488,15 @@
* @param {Object} type
*/
onClickIcon(type) {
this.$emit('iconClick', type);
this.$emit('iconClick', type)
},
/**
* 显示隐藏内容，密码框时生效
*/
onEyes() {
this.showPassword = !this.showPassword;
this.$emit('eyes', this.showPassword);
this.showPassword = !this.showPassword
this.$emit('eyes', this.showPassword)
},
/**
@ -380,22 +504,22 @@
* @param {Object} event
*/
onInput(event) {
let value = event.detail.value;
let value = event.detail.value
// 判断是否去除空格
if (this.trim) {
if (typeof this.trim === 'boolean' && this.trim) {
value = this.trimStr(value);
value = this.trimStr(value)
}
if (typeof this.trim === 'string') {
value = this.trimStr(value, this.trim);
value = this.trimStr(value, this.trim)
}
}
if (this.errMsg) this.errMsg = '';
this.val = value;
if (this.errMsg) this.errMsg = ''
this.val = value
// TODO 兼容 vue2
this.$emit('input', value);
this.$emit('input', value)
// TODO　兼容　vue3
this.$emit('update:modelValue', value);
this.$emit('update:modelValue', value)
},
/**
@ -405,14 +529,14 @@
*/
onFocus() {
this.$nextTick(() => {
this.focused = true;
});
this.$emit('focus', null);
this.focused = true
})
this.$emit('focus', null)
},
_Focus(event) {
this.focusShow = true;
this.$emit('focus', event);
this.focusShow = true
this.$emit('focus', event)
},
/**
@ -421,22 +545,22 @@
* @param {Object} event
*/
onBlur() {
this.focused = false;
this.$emit('blur', null);
this.focused = false
this.$emit('blur', null)
},
_Blur(event) {
let value = event.detail.value;
this.focusShow = false;
this.$emit('blur', event);
let value = event.detail.value
this.focusShow = false
this.$emit('blur', event)
// 根据类型返回值，在event中获取的值理论上讲都是string
if (this.isEnter === false) {
this.$emit('change', this.val);
this.$emit('change', this.val)
}
// 失去焦点时参与表单校验
if (this.form && this.formItem) {
const { validateTrigger } = this.form;
const { validateTrigger } = this.form
if (validateTrigger === 'blur') {
this.formItem.onFieldChange();
this.formItem.onFieldChange()
}
}
},
@ -446,12 +570,12 @@
* @param {Object} e
*/
onConfirm(e) {
this.$emit('confirm', this.val);
this.isEnter = true;
this.$emit('change', this.val);
this.$emit('confirm', this.val)
this.isEnter = true
this.$emit('change', this.val)
this.$nextTick(() => {
this.isEnter = false;
});
this.isEnter = false
})
},
/**
@ -459,14 +583,14 @@
* @param {Object} event
*/
onClear(event) {
this.val = '';
this.val = ''
// TODO 兼容 vue2
this.$emit('input', '');
this.$emit('input', '')
// TODO 兼容 vue2
// TODO　兼容　vue3
this.$emit('update:modelValue', '');
this.$emit('update:modelValue', '')
// 点击叉号触发
this.$emit('clear');
this.$emit('clear')
},
/**
@ -475,7 +599,7 @@
* @param {Object} event
*/
onkeyboardheightchange(event) {
this.$emit('keyboardheightchange', event);
this.$emit('keyboardheightchange', event)
},
/**
@ -483,24 +607,24 @@
*/
trimStr(str, pos = 'both') {
if (pos === 'both') {
return str.trim();
return str.trim()
} else if (pos === 'left') {
return str.trimLeft();
return str.trimLeft()
} else if (pos === 'right') {
return str.trimRight();
return str.trimRight()
} else if (pos === 'start') {
return str.trimStart();
return str.trimStart()
} else if (pos === 'end') {
return str.trimEnd();
return str.trimEnd()
} else if (pos === 'all') {
return str.replace(/\s+/g, '');
return str.replace(/\s+/g, '')
} else if (pos === 'none') {
return str;
return str
}
return str
}
return str;
}
}
};
</script>
<style lang="scss">

Write Preview
Loading…
Cancel
Save