增加新模块
This commit is contained in:
何江明
+129
@@ -0,0 +1,129 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_libs_vue = require("../../libs/vue.js");
|
||||
const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
|
||||
const props = uni_modules_uviewPlus_libs_vue.defineMixin({
|
||||
props: {
|
||||
// 输入框的内容
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.value
|
||||
},
|
||||
// 输入框的内容
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.value
|
||||
},
|
||||
// 输入框为空时占位符
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.placeholder
|
||||
},
|
||||
// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
|
||||
placeholderClass: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.input.placeholderClass
|
||||
},
|
||||
// 指定placeholder的样式
|
||||
placeholderStyle: {
|
||||
type: [String, Object],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.input.placeholderStyle
|
||||
},
|
||||
// 输入框高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.height
|
||||
},
|
||||
// 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
|
||||
confirmType: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.confirmType
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.disabled
|
||||
},
|
||||
// 是否显示统计字数
|
||||
count: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.count
|
||||
},
|
||||
// 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.focus
|
||||
},
|
||||
// 是否自动增加高度
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.autoHeight
|
||||
},
|
||||
// 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.fixed
|
||||
},
|
||||
// 指定光标与键盘的距离
|
||||
cursorSpacing: {
|
||||
type: Number,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.cursorSpacing
|
||||
},
|
||||
// 指定focus时的光标位置
|
||||
cursor: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.cursor
|
||||
},
|
||||
// 是否显示键盘上方带有”完成“按钮那一栏，
|
||||
showConfirmBar: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.showConfirmBar
|
||||
},
|
||||
// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
|
||||
selectionStart: {
|
||||
type: Number,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.selectionStart
|
||||
},
|
||||
// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
|
||||
selectionEnd: {
|
||||
type: Number,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.selectionEnd
|
||||
},
|
||||
// 键盘弹起时，是否自动上推页面
|
||||
adjustPosition: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.adjustPosition
|
||||
},
|
||||
// 是否去掉 iOS 下的默认内边距，只微信小程序有效
|
||||
disableDefaultPadding: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.disableDefaultPadding
|
||||
},
|
||||
// focus时，点击页面的时候不收起键盘，只微信小程序有效
|
||||
holdKeyboard: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.holdKeyboard
|
||||
},
|
||||
// 最大输入长度，设置为 -1 的时候不限制最大长度
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.maxlength
|
||||
},
|
||||
// 边框类型，surround-四周边框，bottom-底部边框
|
||||
border: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.border
|
||||
},
|
||||
// 用于处理或者过滤输入框内容的方法
|
||||
formatter: {
|
||||
type: [Function, null],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.textarea.formatter
|
||||
},
|
||||
// 是否忽略组件内对文本合成系统事件的处理
|
||||
ignoreCompositionEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
});
|
||||
exports.props = props;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-textarea/props.js.map
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
"use strict";
|
||||
const Textarea = {
|
||||
// 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
|
||||
}
|
||||
};
|
||||
exports.Textarea = Textarea;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-textarea/textarea.js.map
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_components_uTextarea_props = require("./props.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
|
||||
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "u-textarea",
|
||||
mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uTextarea_props.props],
|
||||
data() {
|
||||
return {
|
||||
// 输入框的值
|
||||
innerValue: "",
|
||||
// 是否处于获得焦点状态
|
||||
focused: false,
|
||||
// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
|
||||
firstChange: true,
|
||||
// value绑定值的变化是由内部还是外部引起的
|
||||
changeFromInner: false,
|
||||
// 过滤处理方法
|
||||
innerFormatter: (value) => value
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
this.innerValue = newVal;
|
||||
this.firstChange = false;
|
||||
this.changeFromInner = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 组件的类名
|
||||
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 = {};
|
||||
return uni_modules_uviewPlus_libs_function_index.deepMerge(style, uni_modules_uviewPlus_libs_function_index.addStyle(this.customStyle));
|
||||
}
|
||||
},
|
||||
emits: ["update:modelValue", "linechange", "focus", "blur", "change", "confirm", "keyboardheightchange"],
|
||||
methods: {
|
||||
addStyle: uni_modules_uviewPlus_libs_function_index.addStyle,
|
||||
addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
|
||||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||||
setFormatter(e) {
|
||||
this.innerFormatter = e;
|
||||
},
|
||||
onFocus(e) {
|
||||
this.$emit("focus", e);
|
||||
},
|
||||
onBlur(e) {
|
||||
this.$emit("blur", e);
|
||||
uni_modules_uviewPlus_libs_function_index.formValidate(this, "blur");
|
||||
},
|
||||
onLinechange(e) {
|
||||
this.$emit("linechange", e);
|
||||
},
|
||||
onInput(e) {
|
||||
let { value = "" } = e.detail || {};
|
||||
const formatter = this.formatter || this.innerFormatter;
|
||||
const formatValue = formatter(value);
|
||||
this.innerValue = value;
|
||||
this.$nextTick(() => {
|
||||
this.innerValue = formatValue;
|
||||
this.valueChange();
|
||||
});
|
||||
},
|
||||
// 内容发生变化，进行处理
|
||||
valueChange() {
|
||||
const value = this.innerValue;
|
||||
this.$nextTick(() => {
|
||||
this.$emit("update:modelValue", value);
|
||||
this.changeFromInner = true;
|
||||
this.$emit("change", value);
|
||||
uni_modules_uviewPlus_libs_function_index.formValidate(this, "change");
|
||||
});
|
||||
},
|
||||
onConfirm(e) {
|
||||
this.$emit("confirm", e);
|
||||
},
|
||||
onKeyboardheightchange(e) {
|
||||
this.$emit("keyboardheightchange", e);
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.innerValue,
|
||||
b: $options.addUnit(_ctx.height),
|
||||
c: _ctx.placeholder,
|
||||
d: $options.addStyle(_ctx.placeholderStyle, typeof _ctx.placeholderStyle === "string" ? "string" : "object"),
|
||||
e: _ctx.placeholderClass,
|
||||
f: _ctx.disabled,
|
||||
g: _ctx.focus,
|
||||
h: _ctx.autoHeight,
|
||||
i: _ctx.fixed,
|
||||
j: _ctx.cursorSpacing,
|
||||
k: _ctx.cursor,
|
||||
l: _ctx.showConfirmBar,
|
||||
m: _ctx.selectionStart,
|
||||
n: _ctx.selectionEnd,
|
||||
o: _ctx.adjustPosition,
|
||||
p: _ctx.disableDefaultPadding,
|
||||
q: _ctx.holdKeyboard,
|
||||
r: _ctx.maxlength,
|
||||
s: _ctx.confirmType,
|
||||
t: _ctx.ignoreCompositionEvent,
|
||||
v: common_vendor.o((...args) => $options.onFocus && $options.onFocus(...args)),
|
||||
w: common_vendor.o((...args) => $options.onBlur && $options.onBlur(...args)),
|
||||
x: common_vendor.o((...args) => $options.onLinechange && $options.onLinechange(...args)),
|
||||
y: common_vendor.o((...args) => $options.onInput && $options.onInput(...args)),
|
||||
z: common_vendor.o((...args) => $options.onConfirm && $options.onConfirm(...args)),
|
||||
A: common_vendor.o((...args) => $options.onKeyboardheightchange && $options.onKeyboardheightchange(...args)),
|
||||
B: _ctx.count
|
||||
}, _ctx.count ? {
|
||||
C: common_vendor.t($data.innerValue.length),
|
||||
D: common_vendor.t(_ctx.maxlength),
|
||||
E: _ctx.disabled ? "transparent" : "#fff"
|
||||
} : {}, {
|
||||
F: common_vendor.n($options.textareaClass),
|
||||
G: common_vendor.s($options.textareaStyle)
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b6c174a6"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-textarea/u-textarea.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['u-textarea', 'data-v-b6c174a6', F]}}" style="{{G}}"><block wx:if="{{r0}}"><textarea class="u-textarea__field data-v-b6c174a6" value="{{a}}" style="{{'height:' + b}}" placeholder="{{c}}" placeholder-style="{{d}}" placeholder-class="{{e}}" disabled="{{f}}" focus="{{g}}" autoHeight="{{h}}" fixed="{{i}}" cursorSpacing="{{j}}" cursor="{{k}}" showConfirmBar="{{l}}" selectionStart="{{m}}" selectionEnd="{{n}}" adjustPosition="{{o}}" disableDefaultPadding="{{p}}" holdKeyboard="{{q}}" maxlength="{{r}}" confirm-type="{{s}}" ignoreCompositionEvent="{{t}}" bindfocus="{{v}}" bindblur="{{w}}" bindlinechange="{{x}}" bindinput="{{y}}" bindconfirm="{{z}}" bindkeyboardheightchange="{{A}}"></textarea></block><text wx:if="{{B}}" class="u-textarea__count data-v-b6c174a6" style="{{'background-color:' + E}}">{{C}}/{{D}}</text></view>
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/* uni.scss */
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
.u-empty.data-v-b6c174a6,
|
||||
.u-empty__wrap.data-v-b6c174a6,
|
||||
.u-tabs.data-v-b6c174a6,
|
||||
.u-tabs__wrapper.data-v-b6c174a6,
|
||||
.u-tabs__wrapper__scroll-view-wrapper.data-v-b6c174a6,
|
||||
.u-tabs__wrapper__scroll-view.data-v-b6c174a6,
|
||||
.u-tabs__wrapper__nav.data-v-b6c174a6,
|
||||
.u-tabs__wrapper__nav__line.data-v-b6c174a6,
|
||||
.up-empty.data-v-b6c174a6,
|
||||
.up-empty__wrap.data-v-b6c174a6,
|
||||
.up-tabs.data-v-b6c174a6,
|
||||
.up-tabs__wrapper.data-v-b6c174a6,
|
||||
.up-tabs__wrapper__scroll-view-wrapper.data-v-b6c174a6,
|
||||
.up-tabs__wrapper__scroll-view.data-v-b6c174a6,
|
||||
.up-tabs__wrapper__nav.data-v-b6c174a6,
|
||||
.up-tabs__wrapper__nav__line.data-v-b6c174a6 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.u-textarea.data-v-b6c174a6 {
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
padding: 9px;
|
||||
}
|
||||
.u-textarea--radius.data-v-b6c174a6 {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.u-textarea--no-radius.data-v-b6c174a6 {
|
||||
border-radius: 0;
|
||||
}
|
||||
.u-textarea--disabled.data-v-b6c174a6 {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.u-textarea__field.data-v-b6c174a6 {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #606266;
|
||||
width: 100%;
|
||||
}
|
||||
.u-textarea__count.data-v-b6c174a6 {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 2px;
|
||||
font-size: 12px;
|
||||
color: #909193;
|
||||
background-color: #ffffff;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user