feat：转账插件
This commit is contained in:
@@ -2,11 +2,11 @@
|
||||
<view class="u-textarea" :class="textareaClass" :style="[textareaStyle]">
|
||||
<textarea
|
||||
class="u-textarea__field"
|
||||
:value="innerValue"
|
||||
:style="{ height: addUnit(height) }"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-style="addStyle(placeholderStyle, typeof placeholderStyle === 'string' ? 'string' : 'object')"
|
||||
:placeholder-class="placeholderClass"
|
||||
:value="innerValue"
|
||||
:style="fieldStyle"
|
||||
:placeholder="placeholder"
|
||||
:placeholder-style="placeholderStyleInner"
|
||||
:placeholder-class="placeholderClass"
|
||||
:disabled="disabled"
|
||||
:focus="focus"
|
||||
:autoHeight="autoHeight"
|
||||
@@ -30,14 +30,12 @@
|
||||
@keyboardheightchange="onKeyboardheightchange"
|
||||
></textarea>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<text
|
||||
class="u-textarea__count"
|
||||
:style="{
|
||||
'background-color': disabled ? 'transparent' : '#fff',
|
||||
}"
|
||||
v-if="count"
|
||||
>{{ innerValue.length }}/{{ maxlength }}</text
|
||||
>
|
||||
<text
|
||||
class="u-textarea__count"
|
||||
:style="countStyle"
|
||||
v-if="count"
|
||||
>{{ valueLength }}/{{ maxlength }}</text
|
||||
>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
@@ -50,7 +48,7 @@ import { addStyle, addUnit, deepMerge, formValidate, os } from '../../libs/funct
|
||||
/**
|
||||
* Textarea 文本域
|
||||
* @description 文本域此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等
|
||||
* @tutorial https://ijry.github.io/uview-plus/components/textarea.html
|
||||
* @tutorial https://uview-plus.jiangruyi.com/components/textarea.html
|
||||
*
|
||||
* @property {String | Number} value 输入框的内容
|
||||
* @property {String | Number} placeholder 输入框为空时占位符
|
||||
@@ -108,7 +106,7 @@ export default {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.innerValue = newVal;
|
||||
this.innerValue = this.normalizeValue(newVal);
|
||||
/* #ifdef H5 */
|
||||
// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
|
||||
if (
|
||||
@@ -128,7 +126,7 @@ export default {
|
||||
modelValue: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.innerValue = newVal;
|
||||
this.innerValue = this.normalizeValue(newVal);
|
||||
/* #ifdef H5 */
|
||||
// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
|
||||
if (
|
||||
@@ -145,29 +143,79 @@ export default {
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
computed: {
|
||||
// 字数统计安全取值，避免 v-model 为 null/undefined/number 时访问 length 报错
|
||||
valueLength() {
|
||||
return String(this.innerValue ?? '').length
|
||||
},
|
||||
placeholderStyleInner() {
|
||||
if (this.placeholderStyle) {
|
||||
return addStyle(this.placeholderStyle, typeof this.placeholderStyle === 'string' ? 'string' : 'object')
|
||||
}
|
||||
return `color: ${this.upThemeVar('--up-tips-color', this.$u?.color?.tipsColor || '#909399')}`
|
||||
},
|
||||
countStyle() {
|
||||
if (this.disabled) return { backgroundColor: 'transparent' }
|
||||
return {
|
||||
backgroundColor: this.upThemeVar('--up-card-bg-color', '#ffffff'),
|
||||
color: this.upThemeVar('--up-tips-color', '#909193')
|
||||
}
|
||||
},
|
||||
fieldStyle() {
|
||||
const style = {
|
||||
height: addUnit(this.height),
|
||||
backgroundColor: 'transparent',
|
||||
color: this.upThemeVar('--up-content-color', '#606266'),
|
||||
caretColor: this.upThemeVar('--up-main-color', '#303133')
|
||||
};
|
||||
if (this.autoHeight) {
|
||||
style['height'] = 'auto';
|
||||
style['minHeight'] = addUnit(this.height);
|
||||
}
|
||||
return style;
|
||||
},
|
||||
// 组件的类名
|
||||
textareaClass() {
|
||||
let classes = [],
|
||||
{ border, disabled } = this;
|
||||
border === "surround" &&
|
||||
(classes = classes.concat(["u-border", "u-textarea--radius"]));
|
||||
border === "bottom" &&
|
||||
(classes = classes.concat([
|
||||
"u-border-bottom",
|
||||
"u-textarea--no-radius",
|
||||
]));
|
||||
disabled && classes.push("u-textarea--disabled");
|
||||
return classes.join(" ");
|
||||
},
|
||||
// 组件的样式
|
||||
textareaStyle() {
|
||||
const style = {};
|
||||
// #ifdef APP-NVUE
|
||||
// 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
|
||||
if (os() === "android") {
|
||||
style.paddingTop = "6px";
|
||||
style.paddingLeft = "9px";
|
||||
textareaClass() {
|
||||
let classes = [],
|
||||
{ border, disabled } = this;
|
||||
border === "surround" &&
|
||||
(classes = classes.concat(["u-textarea--radius"]));
|
||||
border === "bottom" &&
|
||||
(classes = classes.concat([
|
||||
"u-textarea--no-radius",
|
||||
]));
|
||||
disabled && classes.push("u-textarea--disabled");
|
||||
return classes.join(" ");
|
||||
},
|
||||
textareaBorderColor() {
|
||||
const lightBorder = this.upThemeVar('--up-border-color', '#dadbde');
|
||||
return this.upThemeVar(
|
||||
'--up-input-border-color',
|
||||
this.upThemeIsDark ? 'rgba(255, 255, 255, 0.08)' : lightBorder
|
||||
);
|
||||
},
|
||||
// 组件的样式
|
||||
textareaStyle() {
|
||||
const style = {};
|
||||
style.backgroundColor = this.disabled
|
||||
? this.upThemeVar('--up-bg-color', '#f5f7fa')
|
||||
: this.upThemeVar('--up-card-bg-color', '#ffffff');
|
||||
style.color = this.upThemeVar('--up-content-color', '#606266');
|
||||
if (this.border === "surround") {
|
||||
style.borderWidth = "0.5px";
|
||||
style.borderStyle = "solid";
|
||||
style.borderColor = this.textareaBorderColor;
|
||||
}
|
||||
if (this.border === "bottom") {
|
||||
style.borderBottomWidth = "0.5px";
|
||||
style.borderBottomStyle = "solid";
|
||||
style.borderBottomColor = this.textareaBorderColor;
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
// 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
|
||||
if (os() === "android") {
|
||||
style.paddingTop = "6px";
|
||||
style.paddingLeft = "9px";
|
||||
style.paddingBottom = "3px";
|
||||
style.paddingRight = "6px";
|
||||
}
|
||||
@@ -181,6 +229,12 @@ export default {
|
||||
methods: {
|
||||
addStyle,
|
||||
addUnit,
|
||||
// 统一将外部值归一为可安全展示/统计的内容
|
||||
normalizeValue(value) {
|
||||
if (value === null || value === undefined) return ''
|
||||
// textarea 展示与统计均按字符串处理
|
||||
return typeof value === 'number' ? String(value) : value
|
||||
},
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e
|
||||
@@ -197,10 +251,11 @@ export default {
|
||||
this.$emit("linechange", e);
|
||||
},
|
||||
onInput(e) {
|
||||
let { value = "" } = e.detail || {};
|
||||
let { value } = e.detail || {};
|
||||
value = this.normalizeValue(value)
|
||||
// 格式化过滤方法
|
||||
const formatter = this.formatter || this.innerFormatter
|
||||
const formatValue = formatter(value)
|
||||
const formatValue = this.normalizeValue(formatter(value))
|
||||
// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
|
||||
this.innerValue = value
|
||||
this.$nextTick(() => {
|
||||
@@ -236,12 +291,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
|
||||
.u-textarea {
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.u-textarea {
|
||||
border-radius: 4px;
|
||||
background-color: var(--up-card-bg-color, #fff);
|
||||
position: relative;
|
||||
@include flex;
|
||||
flex: 1;
|
||||
padding: 9px;
|
||||
@@ -254,25 +307,44 @@ export default {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
&--disabled {
|
||||
background-color: var(--up-bg-color, #f5f7fa);
|
||||
}
|
||||
|
||||
&__field {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: $u-content-color;
|
||||
width: 100%;
|
||||
}
|
||||
&__field {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: $u-content-color;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
:deep(.uni-textarea-wrapper),
|
||||
:deep(.uni-textarea-textarea) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:deep(.uni-textarea-textarea) {
|
||||
color: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:deep(.uni-textarea-placeholder) {
|
||||
color: var(--up-tips-color, #909193);
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&__count {
|
||||
&__count {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 2px;
|
||||
font-size: 12px;
|
||||
color: $u-tips-color;
|
||||
background-color: #ffffff;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
background-color: var(--up-card-bg-color, #ffffff);
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user