feat:转账插件
This commit is contained in:
@@ -1,127 +1,129 @@
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 输入框的内容
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.value
|
||||
},
|
||||
// 输入框的内容
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.value
|
||||
},
|
||||
// 输入框为空时占位符
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.placeholder
|
||||
},
|
||||
// 指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
default: () => defProps.input.placeholderClass
|
||||
},
|
||||
// 指定placeholder的样式
|
||||
placeholderStyle: {
|
||||
type: [String, Object],
|
||||
default: () => defProps.input.placeholderStyle
|
||||
},
|
||||
// 输入框高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.height
|
||||
},
|
||||
// 设置键盘右下角按钮的文字,仅微信小程序,App-vue和H5有效
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: () => defProps.textarea.confirmType
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.disabled
|
||||
},
|
||||
// 是否显示统计字数
|
||||
count: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.count
|
||||
},
|
||||
// 是否自动获取焦点,nvue不支持,H5取决于浏览器的实现
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.focus
|
||||
},
|
||||
// 是否自动增加高度
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.autoHeight
|
||||
},
|
||||
// 如果textarea是在一个position:fixed的区域,需要显示指定属性fixed为true
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.fixed
|
||||
},
|
||||
// 指定光标与键盘的距离
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
default: () => defProps.textarea.cursorSpacing
|
||||
},
|
||||
// 指定focus时的光标位置
|
||||
cursor: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.cursor
|
||||
},
|
||||
// 是否显示键盘上方带有”完成“按钮那一栏,
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.showConfirmBar
|
||||
},
|
||||
// 光标起始位置,自动聚焦时有效,需与selection-end搭配使用
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
default: () => defProps.textarea.selectionStart
|
||||
},
|
||||
// 光标结束位置,自动聚焦时有效,需与selection-start搭配使用
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
default: () => defProps.textarea.selectionEnd
|
||||
},
|
||||
// 键盘弹起时,是否自动上推页面
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.adjustPosition
|
||||
},
|
||||
// 是否去掉 iOS 下的默认内边距,只微信小程序有效
|
||||
disableDefaultPadding: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.disableDefaultPadding
|
||||
},
|
||||
// focus时,点击页面的时候不收起键盘,只微信小程序有效
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.holdKeyboard
|
||||
},
|
||||
// 最大输入长度,设置为 -1 的时候不限制最大长度
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.maxlength
|
||||
},
|
||||
// 边框类型,surround-四周边框,bottom-底部边框
|
||||
border: {
|
||||
type: String,
|
||||
default: () => defProps.textarea.border
|
||||
},
|
||||
// 用于处理或者过滤输入框内容的方法
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: () => defProps.textarea.formatter
|
||||
},
|
||||
// 是否忽略组件内对文本合成系统事件的处理
|
||||
ignoreCompositionEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
})
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import TextareaDefaultProps from './textarea'
|
||||
import { registerComponentProps } from '../../libs/config/props.js'
|
||||
|
||||
const defProps = registerComponentProps(TextareaDefaultProps)
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 输入框的内容
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.value
|
||||
},
|
||||
// 输入框的内容
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.value
|
||||
},
|
||||
// 输入框为空时占位符
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.placeholder
|
||||
},
|
||||
// 指定placeholder的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
default: () => defProps.textarea.placeholderClass
|
||||
},
|
||||
// 指定placeholder的样式
|
||||
placeholderStyle: {
|
||||
type: [String, Object],
|
||||
default: () => defProps.textarea.placeholderStyle
|
||||
},
|
||||
// 输入框高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.height
|
||||
},
|
||||
// 设置键盘右下角按钮的文字,仅微信小程序,App-vue和H5有效
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: () => defProps.textarea.confirmType
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.disabled
|
||||
},
|
||||
// 是否显示统计字数
|
||||
count: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.count
|
||||
},
|
||||
// 是否自动获取焦点,nvue不支持,H5取决于浏览器的实现
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.focus
|
||||
},
|
||||
// 是否自动增加高度
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.autoHeight
|
||||
},
|
||||
// 如果textarea是在一个position:fixed的区域,需要显示指定属性fixed为true
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.fixed
|
||||
},
|
||||
// 指定光标与键盘的距离
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
default: () => defProps.textarea.cursorSpacing
|
||||
},
|
||||
// 指定focus时的光标位置
|
||||
cursor: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.cursor
|
||||
},
|
||||
// 是否显示键盘上方带有”完成“按钮那一栏,
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.showConfirmBar
|
||||
},
|
||||
// 光标起始位置,自动聚焦时有效,需与selection-end搭配使用
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
default: () => defProps.textarea.selectionStart
|
||||
},
|
||||
// 光标结束位置,自动聚焦时有效,需与selection-start搭配使用
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
default: () => defProps.textarea.selectionEnd
|
||||
},
|
||||
// 键盘弹起时,是否自动上推页面
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.adjustPosition
|
||||
},
|
||||
// 是否去掉 iOS 下的默认内边距,只微信小程序有效
|
||||
disableDefaultPadding: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.disableDefaultPadding
|
||||
},
|
||||
// focus时,点击页面的时候不收起键盘,只微信小程序有效
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
default: () => defProps.textarea.holdKeyboard
|
||||
},
|
||||
// 最大输入长度,设置为 -1 的时候不限制最大长度
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: () => defProps.textarea.maxlength
|
||||
},
|
||||
// 边框类型,surround-四周边框,bottom-底部边框
|
||||
border: {
|
||||
type: String,
|
||||
default: () => defProps.textarea.border
|
||||
},
|
||||
// 用于处理或者过滤输入框内容的方法
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: () => defProps.textarea.formatter
|
||||
},
|
||||
// 是否忽略组件内对文本合成系统事件的处理
|
||||
ignoreCompositionEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-20 17:24:32
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/textarea.js
|
||||
*/
|
||||
export default {
|
||||
// textarea 组件
|
||||
textarea: {
|
||||
value: '',
|
||||
placeholder: '',
|
||||
placeholderClass: 'textarea-placeholder',
|
||||
placeholderStyle: 'color: #c0c4cc',
|
||||
height: 70,
|
||||
confirmType: 'done',
|
||||
disabled: false,
|
||||
count: false,
|
||||
focus: false,
|
||||
autoHeight: false,
|
||||
fixed: false,
|
||||
cursorSpacing: 0,
|
||||
cursor: '',
|
||||
showConfirmBar: true,
|
||||
selectionStart: -1,
|
||||
selectionEnd: -1,
|
||||
adjustPosition: true,
|
||||
disableDefaultPadding: false,
|
||||
holdKeyboard: false,
|
||||
maxlength: 140,
|
||||
border: 'surround',
|
||||
formatter: null
|
||||
}
|
||||
}
|
||||
/*
|
||||
* @Author : LQ
|
||||
* @Description :
|
||||
* @version : 3.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : jry
|
||||
* @lastTime : 2025-12-19 08:55:21
|
||||
* @FilePath : /uview-plus/libs/config/props/textarea.js
|
||||
*/
|
||||
export default {
|
||||
// textarea 组件
|
||||
textarea: {
|
||||
value: '',
|
||||
placeholder: '',
|
||||
placeholderClass: 'textarea-placeholder',
|
||||
placeholderStyle: '',
|
||||
height: 70,
|
||||
confirmType: 'done',
|
||||
disabled: false,
|
||||
count: false,
|
||||
focus: false,
|
||||
autoHeight: false,
|
||||
fixed: false,
|
||||
cursorSpacing: 0,
|
||||
cursor: '',
|
||||
showConfirmBar: true,
|
||||
selectionStart: -1,
|
||||
selectionEnd: -1,
|
||||
adjustPosition: true,
|
||||
disableDefaultPadding: false,
|
||||
holdKeyboard: false,
|
||||
maxlength: 140,
|
||||
border: 'surround',
|
||||
formatter: null
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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