Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6016
Star 91
Fork 164
H
hello uni-app x
提交 e6f8801c 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng
浏览文件
操作

更新input示例

上级 ff275360
显示空白变更内容
内联 并排
Showing with 301 addition and 298 deletion
pages/component/input/input.uvue
浏览文件 @ e6f8801c
...@@ -2,205 +2,212 @@ ...@@ -2,205 +2,212 @@
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="nvue-page-root">
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-common-mt"> <view class="uni-common-mt uni-padding-wrap">
<view class="uni-form-item uni-column"> <view>
<view class="title" <view class="uni-title">
><text class="uni-form-item__title">可自动聚焦的 input</text></view <text class="uni-title-text">设置输入框的初始内容</text>
> </view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" value="hello uni-app x" />
class="uni-input" </view>
:focus="true" </view>
placeholder="自动获得焦点"
ref="input" <view>
/> <view class="uni-title">
<text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
</view> </view>
<view class="uni-input-wrapper">
<input class="uni-input" type="text" placeholder="文本输入键盘" />
</view> </view>
<!-- #ifdef APP-PLUS -->
<!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" /> <input class="uni-input" type="number" placeholder="数字输入键盘" />
</view> </view>
</view> -->
<!-- #endif -->
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title"
>键盘右下角按钮显示为搜索</text
></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
class="uni-input" </view>
confirmType="search"
placeholder="键盘右下角按钮显示为搜索"
/>
</view>
</view>
<!-- #ifndef H5 -->
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title"
>键盘右下角按钮显示为发送</text
></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" type="tel" placeholder="电话输入键盘" />
class="uni-input"
confirmType="send"
placeholder="键盘右下角按钮显示为发送"
/>
</view> </view>
</view> </view>
<!-- #endif -->
<view class="uni-form-item uni-column"> <view>
<view class="title" <view class="uni-title">
><text class="uni-form-item__title" <text class="uni-title-text">密码输入框</text>
>控制最大输入长度的 input</text </view>
></view <view class="uni-input-wrapper">
> <input class="uni-input" :password="true" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">占位符样式</text>
</view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" placeholder-style="color:red" placeholder="占位符文字颜色为红色" />
class="uni-input" </view>
:maxlength="10"
placeholder="最大输入长度为10"
/>
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title"
>实时获取输入值：{{ inputValue }}</text
></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" placeholder-class="uni-input-placeholder-class" placeholder="占位符背景色为绿色" />
class="uni-input" </view>
@input="onKeyInput"
placeholder="输入同步到view中"
/>
</view> </view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置禁用输入框</text>
</view> </view>
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title">控制输入的 input</text></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" :disabled="true" />
class="uni-input"
@input="replaceInput"
:value="changeValue"
placeholder="连续的两个1会变成2"
/>
</view> </view>
</view> </view>
<!-- #ifndef MP-BAIDU -->
<!-- <view class="uni-form-item uni-column"> <view>
<view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view> <view class="uni-title">
<text class="uni-title-text">设置最大输入长度</text>
</view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" /> <input class="uni-input" :maxlength="10" placeholder="最大输入长度为10" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">设置光标与键盘的距离</text>
</view> </view>
</view> -->
<!-- #endif -->
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title">数字输入的 input</text></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
class="uni-input"
type="number"
placeholder="这是一个数字输入框"
/>
</view> </view>
</view> </view>
<view class="uni-form-item uni-column">
<view class="title" <view>
><text class="uni-form-item__title">密码输入的 input</text></view <view class="uni-title">
> <text class="uni-title-text">自动获取焦点</text>
</view>
<view class="uni-input-wrapper">
<input class="uni-input" :focus="true" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
</view>
<view class="uni-input-wrapper">
<input class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
</view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
class="uni-input" </view>
:password="true"
type="text"
placeholder="这是一个密码输入框"
/>
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title">带小数点的 input</text></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
class="uni-input"
type="digit"
placeholder="带小数点的数字键盘"
/>
</view> </view>
<view class="uni-input-wrapper">
<input class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
</view> </view>
<!-- <view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view> <input class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
</view> --> </view>
<view class="uni-form-item uni-column"> </view>
<view class="title"
><text class="uni-form-item__title" <view>
>控制占位符颜色的 input</text <view class="uni-title">
></view <text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
> </view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input class="uni-input" :confirm-hold="true" />
class="uni-input"
placeholder-style="color:#F76260"
placeholder="占位符字体是红色的"
/>
</view> </view>
</view> </view>
<view class="uni-form-item uni-column">
<view class="title" <view>
><text class="uni-form-item__title">带清除按钮的输入框</text></view <view class="uni-title" @click="setCursor(4)">
> <text class="uni-title-text">设置输入框聚焦时光标的位置（点击生效）</text>
</view>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input ref="input" class="uni-input" value="0123456789" :cursor="cursor" />
class="uni-input" </view>
placeholder="带清除按钮的输入框" </view>
:value="inputClearValue"
@input="clearInput" <view>
/> <view class="uni-title" @click="setSelection(0, 4)">
<image <text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
class="uni-icon" </view>
src="/static/icons/clear.png"
v-if="showClearIcon"
@click="clearIcon"
></image>
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title"
><text class="uni-form-item__title">可查看密码的输入框</text></view
>
<view class="uni-input-wrapper"> <view class="uni-input-wrapper">
<input <input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
class="uni-input" :selection-end="selectionEnd" />
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>
<view>
<view class="uni-title">
<text class="uni-title-text">键盘弹起时，自动上推页面</text>
</view>
<view class="uni-input-wrapper">
<input class="uni-input" :adjust-position="true" />
</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="uni-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="uni-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="uni-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="uni-input-wrapper">
<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" />
</view>
</view>
<view>
<view class="uni-title">
<text class="uni-title-text">带清除按钮的输入框</text>
</view>
<view class="uni-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="uni-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> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
...@@ -208,33 +215,33 @@ ...@@ -208,33 +215,33 @@
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
data() { data() {
return { return {
title: 'input', title: 'input',
focus: false,
inputValue: '',
showClearIcon: false, showClearIcon: false,
inputClearValue: '', inputClearValue: '',
changeValue: '',
showPassword: true, showPassword: true,
cursor: -1,
selectionStart: -1,
selectionEnd: -1,
inputEventDetail: '',
focusAndBlurEventDetail: '',
confirmEventDetail: '',
keyboardHeightChangeEventDetail: ''
} }
}, },
onReady() {
// TODO auto focus
// (this.$refs['input'] as INode).focus();
},
methods: { methods: {
onKeyInput: function (event: InputEvent) { setCursor: function (cursor : number) {
this.inputValue = event.detail.value (this.$refs['input'] as INode).focus();
this.cursor = cursor;
}, },
replaceInput: function (event: InputEvent) { setSelection: function (selectionStart : number, selectionEnd : number) {
var value = event.detail.value (this.$refs['input2'] as INode).focus();
if (value == '11') { this.selectionStart = selectionStart;
this.changeValue = '2' this.selectionEnd = selectionEnd;
}
}, },
clearInput: function (event: InputEvent) { clearInput: function (event : InputEvent) {
this.inputClearValue = event.detail.value this.inputClearValue = event.detail.value
if (event.detail.value.length > 0) { if (event.detail.value.length > 0) {
this.showClearIcon = true this.showClearIcon = true
...@@ -249,59 +256,55 @@ export default { ...@@ -249,59 +256,55 @@ export default {
changePassword: function () { changePassword: function () {
this.showPassword = !this.showPassword this.showPassword = !this.showPassword
}, },
// hideKeyboard: function(event: InputEvent) { onInput: function (event : InputEvent) {
// if (event.detail.value === '123') { console.log("键盘输入", JSON.stringify(event.detail));
// uni.hideKeyboard(); this.inputEventDetail = JSON.stringify(event.detail)
// } },
// }, onFocus: function (event : InputFocusEvent) {
// onFocus() { console.log("输入框聚焦", JSON.stringify(event.detail));
// this.$mp.page.$getAppWebview().setStyle({ this.focusAndBlurEventDetail = JSON.stringify(event.detail);
// softinputNavBar: 'none' },
// }) onBlur: function (event : InputBlurEvent) {
// }, console.log("输入框失去焦点", JSON.stringify(event.detail));
// onBlur() { this.focusAndBlurEventDetail = JSON.stringify(event.detail);
// this.$mp.page.$getAppWebview().setStyle({ },
// softinputNavBar: 'auto' onConfirm: function (event : InputConfirmEvent) {
// }) console.log("点击完成按钮", JSON.stringify(event.detail));
// } this.confirmEventDetail = JSON.stringify(event.detail);
}, },
} onKeyborardHeightChange: function (event : InputKeyboardHeightChangeEvent) {
console.log("键盘高度发生变化", JSON.stringify(event.detail));
this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
}
}
}
</script> </script>
<style scoped> <style scoped>
.nvue-page-root { .uni-input-wrapper {
background-color: #f8f8f8;
padding-bottom: 20px;
}
.title {
padding: 5px 13px;
}
.uni-form-item__title {
font-size: 16px;
line-height: 24px;
}
.uni-input-wrapper {
display: flex; display: flex;
padding: 8px 13px; padding: 8px 13px;
margin: 10rpx 0;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
background-color: #ffffff; background-color: #ffffff;
} }
.uni-input { .uni-input {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
font-size: 15px; font-size: 15px;
padding: 0px; padding: 0px;
flex: 1; flex: 1;
background-color: #ffffff; background-color: #ffffff;
} }
.uni-icon { .uni-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.uni-input-placeholder-class {
background-color: green;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或