Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 de40580c 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊
浏览文件
操作

feat: 补充 input/textarea 同时设置 v-model/value 的测试

上级 a051839d
隐藏空白更改
内联 并排
Showing with 470 addition and 443 deletion
pages/component/input/input.test.js
浏览文件 @ de40580c
......@@ -198,4 +198,9 @@ describe('component-native-input', () => {
})
expect(image).toSaveImageSnapshot()
})
it('both set modelValue and value', async()=>{
const input2 = await page.$('#both-model-value');
expect(await input2.value()).toEqual("123")
})
});
pages/component/input/input.uvue
浏览文件 @ de40580c
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-common-mt uni-padding-wrap">
<view>
<view class="uni-title">
<text class="uni-title-text">设置输入框的初始内容</text>
</view>
<view class="input-wrapper">
<input id="uni-input-default" class="uni-input" value="hello uni-app x" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
</view>
<view class="input-wrapper">
<input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
</view>
<view class="input-wrapper">
<input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
</view>
<view class="input-wrapper">
<input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
</view>
<view class="input-wrapper">
<input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">密码输入框</text>
</view>
<view class="input-wrapper">
<input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">占位符样式</text>
</view>
<view class="input-wrapper">
<input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle"
placeholder="占位符文字颜色为红色" />
</view>
<view class="input-wrapper">
<input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass"
placeholder="占位符字体大小为10px" />
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-common-mt uni-padding-wrap">
<view>
<view class="uni-title">
<text class="uni-title-text">设置输入框的初始内容</text>
</view>
<view class="input-wrapper">
<input id="uni-input-default" class="uni-input" value="hello uni-app x" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
</view>
<view class="input-wrapper">
<input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
</view>
<view class="input-wrapper">
<input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
</view>
<view class="input-wrapper">
<input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
</view>
<view class="input-wrapper">
<input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">密码输入框</text>
</view>
<view class="input-wrapper">
<input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">占位符样式</text>
</view>
<view class="input-wrapper">
<input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle"
placeholder="占位符文字颜色为红色" />
</view>
<view class="input-wrapper">
<input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass"
placeholder="占位符字体大小为10px" />
</view>
<view class="input-wrapper">
<input class="uni-input" :placeholder-style="inputPlaceHolderStyle"
value="不设置placeholder只设置placeholder-style" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置禁用输入框</text>
</view>
<view class="input-wrapper">
<input id="uni-input-disable" class="uni-input" :disabled="true"/>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置最大输入长度</text>
</view>
<view class="input-wrapper">
<input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10"
:value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置光标与键盘的距离</text>
</view>
<view class="input-wrapper">
<input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">自动获取焦点</text>
</view>
<view class="input-wrapper">
<input id="uni-input-focus" class="uni-input" :focus="focus"
@keyboardheightchange="inputFocusKeyBoardChange" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
</view>
<view class="input-wrapper">
<input class="uni-input" :confirm-hold="true" />
</view>
</view>
<view>
<view class="uni-title" @click="setCursor(4)">
<text class="uni-title-text">设置输入框聚焦时光标的位置（点击生效）</text>
</view>
<view class="input-wrapper">
<input ref="input" class="uni-input" value="0123456789" :cursor="cursor" @blur="onCursorBlurChange"/>
</view>
</view>
<view>
<view class="uni-title" @click="setSelection(0, 4)">
<text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
</view>
<view class="input-wrapper">
<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
:selection-end="selectionEnd" @blur="onSelectionBlurChange"/>
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置光标颜色为红色</text>
<switch style="margin-left: 10px;" @change="changeCursorColor" :checked="cursor_color=='red'"></switch>
</view>
<view class="input-wrapper">
<input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">键盘弹起时，自动上推页面</text>
</view>
<view class="input-wrapper">
<input class="uni-input" :adjust-position="true" />
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置hold-keyboard</text>
<switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="holdKeyboard"></switch>
</view>
<view class="input-wrapper">
<input class="uni-input" :hold-keyboard="holdKeyboard" value="hold keyboard " />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">input事件</text>
<text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @input="onInput" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">focus事件和blur事件</text>
<text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @focus="onFocus" @blur="onBlur" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">confirm事件</text>
<text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @confirm="onConfirm" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">keyboardheightchange事件</text>
<text class="uni-subtitle-text"
v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" :focus="focusedForKeyboardHeightChangeTest"/>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">带清除按钮的输入框</text>
</view>
<view class="input-wrapper">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
<image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">可查看密码的输入框</text>
</view>
<view class="input-wrapper">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'"
@click="changePassword"></image>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
title: 'input',
showClearIcon: false,
inputClearValue: '',
showPassword: true,
cursor: -1,
cursor_color: "#3393E2",
selectionStart: -1,
selectionEnd: -1,
inputEventDetail: '',
focusAndBlurEventDetail: '',
confirmEventDetail: '',
keyboardHeightChangeEventDetail: '',
focus: true,
inputPassword: true,
inputTypeTel: "tel",
inputPlaceHolderStyle: "color:red",
inputPlaceHolderClass: "uni-input-placeholder-class" as string.ClassString ,
inputMaxLengthValue: "",
onMaxLengthInputValue: "",
inputMaxLengthFocus: false,
inputPasswordValue: "cipher",
inputFocusKeyBoardChangeValue: true,
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置禁用输入框</text>
</view>
<view class="input-wrapper">
<input id="uni-input-disable" class="uni-input" :disabled="true"/>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置最大输入长度</text>
</view>
<view class="input-wrapper">
<input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10"
:value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置光标与键盘的距离</text>
</view>
<view class="input-wrapper">
<input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">自动获取焦点</text>
</view>
<view class="input-wrapper">
<input id="uni-input-focus" class="uni-input" :focus="focus"
@keyboardheightchange="inputFocusKeyBoardChange" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
</view>
<view class="input-wrapper">
<input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
</view>
<view class="input-wrapper">
<input class="uni-input" :confirm-hold="true" />
</view>
</view>
<view>
<view class="uni-title" @click="setCursor(4)">
<text class="uni-title-text">设置输入框聚焦时光标的位置（点击生效）</text>
</view>
<view class="input-wrapper">
<input ref="input" class="uni-input" value="0123456789" :cursor="cursor" @blur="onCursorBlurChange"/>
</view>
</view>
<view>
<view class="uni-title" @click="setSelection(0, 4)">
<text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
</view>
<view class="input-wrapper">
<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
:selection-end="selectionEnd" @blur="onSelectionBlurChange"/>
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置光标颜色为红色</text>
<switch style="margin-left: 10px;" @change="changeCursorColor" :checked="cursor_color=='red'"></switch>
</view>
<view class="input-wrapper">
<input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">键盘弹起时，自动上推页面</text>
</view>
<view class="input-wrapper">
<input class="uni-input" :adjust-position="true" />
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置hold-keyboard</text>
<switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="holdKeyboard"></switch>
</view>
<view class="input-wrapper">
<input class="uni-input" :hold-keyboard="holdKeyboard" value="hold keyboard " />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">input事件</text>
<text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @input="onInput" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">focus事件和blur事件</text>
<text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @focus="onFocus" @blur="onBlur" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">confirm事件</text>
<text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @confirm="onConfirm" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">keyboardheightchange事件</text>
<text class="uni-subtitle-text"
v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" :focus="focusedForKeyboardHeightChangeTest"/>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">带清除按钮的输入框</text>
</view>
<view class="input-wrapper">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
<image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">可查看密码的输入框</text>
</view>
<view class="input-wrapper">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'"
@click="changePassword"></image>
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">同时存在 v-model 和 value</text>
</view>
<view class="input-wrapper">
<input id="both-model-value" class="uni-input" v-model='demoValue' value='456' />
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
title: 'input',
showClearIcon: false,
inputClearValue: '',
showPassword: true,
cursor: -1,
cursor_color: "#3393E2",
selectionStart: -1,
selectionEnd: -1,
inputEventDetail: '',
focusAndBlurEventDetail: '',
confirmEventDetail: '',
keyboardHeightChangeEventDetail: '',
focus: true,
inputPassword: true,
inputTypeTel: "tel",
inputPlaceHolderStyle: "color:red",
inputPlaceHolderClass: "uni-input-placeholder-class" as string.ClassString ,
inputMaxLengthValue: "",
onMaxLengthInputValue: "",
inputMaxLengthFocus: false,
inputPasswordValue: "cipher",
inputFocusKeyBoardChangeValue: true,
holdKeyboard: false,
keyboardHeight: 0,
focusedForKeyboardHeightChangeTest: false,
}
},
methods: {
inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {
this.inputFocusKeyBoardChangeValue = e.detail.height > 50
},
onMaxLengthInput(event : UniInputEvent) {
this.onMaxLengthInputValue = event.detail.value
},
setCursor: function (cursor : number) {
(this.$refs['input'] as UniInputElement).focus();
demoValue: '123'
}
},
methods: {
inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {
this.inputFocusKeyBoardChangeValue = e.detail.height > 50
},
onMaxLengthInput(event : UniInputEvent) {
this.onMaxLengthInputValue = event.detail.value
},
setCursor: function (cursor : number) {
(this.$refs['input'] as UniInputElement).focus();
this.cursor = cursor;
},
onCursorBlurChange(){
this.cursor = 0
},
setSelection: function (selectionStart : number, selectionEnd : number) {
(this.$refs['input2'] as UniInputElement).focus();
this.selectionStart = selectionStart;
},
setSelection: function (selectionStart : number, selectionEnd : number) {
(this.$refs['input2'] as UniInputElement).focus();
this.selectionStart = selectionStart;
this.selectionEnd = selectionEnd;
},
onSelectionBlurChange(){
this.selectionEnd = 0;
},
clearInput: function (event : UniInputEvent) {
this.inputClearValue = event.detail.value
if (event.detail.value.length > 0) {
this.showClearIcon = true
} else {
this.showClearIcon = false
}
},
clearIcon: function () {
this.inputClearValue = ''
this.showClearIcon = false
},
changePassword: function () {
this.showPassword = !this.showPassword
},
onInput: function (event : UniInputEvent) {
console.log("键盘输入", JSON.stringify(event.detail));
this.inputEventDetail = JSON.stringify(event.detail)
},
onFocus: function (event : UniInputFocusEvent) {
console.log("输入框聚焦", JSON.stringify(event.detail));
this.focusAndBlurEventDetail = JSON.stringify(event.detail);
},
onBlur: function (event : UniInputBlurEvent) {
console.log("输入框失去焦点", JSON.stringify(event.detail));
this.focusAndBlurEventDetail = JSON.stringify(event.detail);
},
onConfirm: function (event : UniInputConfirmEvent) {
console.log("点击完成按钮", JSON.stringify(event.detail));
this.confirmEventDetail = JSON.stringify(event.detail);
},
onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {
console.log("键盘高度发生变化", JSON.stringify(event.detail));
},
clearInput: function (event : UniInputEvent) {
this.inputClearValue = event.detail.value
if (event.detail.value.length > 0) {
this.showClearIcon = true
} else {
this.showClearIcon = false
}
},
clearIcon: function () {
this.inputClearValue = ''
this.showClearIcon = false
},
changePassword: function () {
this.showPassword = !this.showPassword
},
onInput: function (event : UniInputEvent) {
console.log("键盘输入", JSON.stringify(event.detail));
this.inputEventDetail = JSON.stringify(event.detail)
},
onFocus: function (event : UniInputFocusEvent) {
console.log("输入框聚焦", JSON.stringify(event.detail));
this.focusAndBlurEventDetail = JSON.stringify(event.detail);
},
onBlur: function (event : UniInputBlurEvent) {
console.log("输入框失去焦点", JSON.stringify(event.detail));
this.focusAndBlurEventDetail = JSON.stringify(event.detail);
},
onConfirm: function (event : UniInputConfirmEvent) {
console.log("点击完成按钮", JSON.stringify(event.detail));
this.confirmEventDetail = JSON.stringify(event.detail);
},
onKeyborardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) {
console.log("键盘高度发生变化", JSON.stringify(event.detail));
this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
this.keyboardHeight = event.detail.height;
},
test_check_input_value() : number {
return this.onMaxLengthInputValue.length
},
changeCursorColor(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
if (checked) {
this.cursor_color = "red"
} else {
this.cursor_color = "#3393E2"
}
const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
input?.focus()
},
changeHoldKeyboard(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
this.holdKeyboard = checked
}
}
}
</script>
<style scoped>
.input-wrapper {
display: flex;
padding: 8px 13px;
margin: 5px 0;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
}
.uni-input {
height: 28px;
font-size: 15px;
padding: 0px;
flex: 1;
background-color: #ffffff;
}
.uni-icon {
width: 24px;
height: 24px;
}
.uni-input-placeholder-class {
font-size: 10px;
}
this.keyboardHeight = event.detail.height;
},
test_check_input_value() : number {
return this.onMaxLengthInputValue.length
},
changeCursorColor(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
if (checked) {
this.cursor_color = "red"
} else {
this.cursor_color = "#3393E2"
}
const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
input?.focus()
},
changeHoldKeyboard(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
this.holdKeyboard = checked
}
}
}
</script>
<style scoped>
.input-wrapper {
display: flex;
padding: 8px 13px;
margin: 5px 0;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
}
.uni-input {
height: 28px;
font-size: 15px;
padding: 0px;
flex: 1;
background-color: #ffffff;
}
.uni-icon {
width: 24px;
height: 24px;
}
.uni-input-placeholder-class {
font-size: 10px;
}
</style>
pages/component/textarea/textarea.test.js
浏览文件 @ de40580c
......@@ -73,4 +73,9 @@ describe('component-native-textarea', () => {
await page.waitFor(500)
}
})
it('both set modelValue and value', async () => {
let textarea2 = await page.$('.both-set-textarea');
expect(await textarea2.value()).toBe("123")
})
});
pages/component/textarea/textarea.uvue
浏览文件 @ de40580c
<script>
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
adjust_position_boolean: false,
show_confirm_bar_boolean: false,
fixed_boolean: false,
auto_height_boolean: false,
confirm_hold_boolean: false,
focus_boolean: true,
<script>
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
adjust_position_boolean: false,
show_confirm_bar_boolean: false,
fixed_boolean: false,
auto_height_boolean: false,
confirm_hold_boolean: false,
focus_boolean: true,
auto_focus_boolean: false,
default_value:"1\n2\n3\n4\n5\n6",
maxlength:-1,
maxlength:-1,
inputmode_enum: [{"value":1,"name":"text"},{"value":2,"name":"decimal"},{"value":3,"name":"numeric"},{"value":4,"name":"tel"},{"value":5,"name":"search"},{"value":6,"name":"email"},{"value":7,"name":"url"},{"value":0,"name":"none"}] as ItemType[],
confirm_type_list: [{"value":0,"name":"return"},{"value":1,"name":"done"},{"value":2,"name":"send"},{"value":3,"name":"search"},{"value":4,"name":"next"},{"value":5,"name":"go"}] as ItemType[],
cursor_color: "#3393E2",
cursor: 0,
cursor: 0,
inputmode_enum_current: 0,
confirm_type_current: 0,
placeholder_value: "请输入"
}
placeholder_value: "请输入",
defaultModel:'123'
}
},
methods: {
textarea_click() { console.log("组件被点击时触发") },
textarea_touchstart() { console.log("手指触摸动作开始") },
textarea_touchmove() { console.log("手指触摸后移动") },
textarea_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
textarea_touchend() { console.log("手指触摸动作结束") },
textarea_tap() { console.log("手指触摸后马上离开") },
textarea_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
textarea_confirm() { console.log("点击完成时， 触发 confirm 事件，event.detail = {value: value}") },
textarea_input() { console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上") },
textarea_linechange() { console.log("输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}") },
textarea_blur() { console.log("输入框失去焦点时触发，event.detail = {value, cursor}") },
textarea_keyboardheightchange() { console.log("键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}") },
textarea_focus() { console.log("输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度") },
change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },
change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },
change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },
change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },
change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },
change_focus_boolean(checked : boolean) { this.focus_boolean = checked },
methods: {
textarea_click() { console.log("组件被点击时触发") },
textarea_touchstart() { console.log("手指触摸动作开始") },
textarea_touchmove() { console.log("手指触摸后移动") },
textarea_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
textarea_touchend() { console.log("手指触摸动作结束") },
textarea_tap() { console.log("手指触摸后马上离开") },
textarea_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
textarea_confirm() { console.log("点击完成时， 触发 confirm 事件，event.detail = {value: value}") },
textarea_input() { console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上") },
textarea_linechange(e) { console.log(e,"输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}") },
textarea_blur() { console.log("输入框失去焦点时触发，event.detail = {value, cursor}") },
textarea_keyboardheightchange() { console.log("键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}") },
textarea_focus() { console.log("输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度") },
change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },
change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },
change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },
change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },
change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },
change_focus_boolean(checked : boolean) { this.focus_boolean = checked },
change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },
change_cursor_color_boolean(checked : boolean) { if(checked){ this.cursor_color = "transparent"} else {this.cursor_color = "#3393E2"}},
change_cursor_color_boolean(checked : boolean) { if(checked){ this.cursor_color = "transparent"} else {this.cursor_color = "#3393E2"}},
radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },
radio_change_confirm_type(checked : number) { this.confirm_type_current = checked }
}
}
</script>
<template>
radio_change_confirm_type(checked : number) { this.confirm_type_current = checked }
}
}
</script>
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
......@@ -86,17 +87,17 @@ export default {
@focus="textarea_focus"
style="padding: 10px; border: 1px solid #666;height: 200px"
/>
</view>
<view class="content">
<boolean-data
:defaultValue="false"
title="键盘弹起时，是否自动上推页面（限非 Web 平台）"
@change="change_adjust_position_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否自动增高，设置auto-height时，style.height不生效"
@change="change_auto_height_boolean"
</view>
<view class="content">
<boolean-data
:defaultValue="false"
title="键盘弹起时，是否自动上推页面（限非 Web 平台）"
@change="change_adjust_position_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否自动增高，设置auto-height时，style.height不生效"
@change="change_auto_height_boolean"
></boolean-data>
<boolean-data
:defaultValue="focus_boolean"
......@@ -117,12 +118,12 @@ export default {
:items="confirm_type_list"
title="confirm-type，设置键盘右下角按钮。（Android仅支持return）"
@change="radio_change_confirm_type"
></enum-data>
<boolean-data
:defaultValue="false"
title="点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)"
@change="change_confirm_hold_boolean"
></boolean-data>
></enum-data>
<boolean-data
:defaultValue="false"
title="点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)"
@change="change_confirm_hold_boolean"
></boolean-data>
<enum-data
:items="inputmode_enum"
title="input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。"
......@@ -140,25 +141,30 @@ export default {
></boolean-data>
<view style="flex-direction:row;justify-content:center;">
<textarea id="textarea-height-exception" style="flex:1;border: 1 solid #666;margin: 10px" placeholder="底部textarea测试键盘遮挡"/>
</view>
</view>
</view>
</view>
<view>同时存在 v-model 和 value</view>
<view class="main">
<textarea class="list-item both-set-textarea" v-model='defaultModel' value='456'></textarea>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
min-height: 100px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
<!-- #endif -->
</template>
<style>
.main {
min-height: 100px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
</style>
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或