723 行
25 KiB
Plaintext
723 行
25 KiB
Plaintext
<template>
|
||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||
<scroll-view style="flex: 1">
|
||
<!-- #endif -->
|
||
<page-head :title="data.title"></page-head>
|
||
<view class="uni-common-mt uni-padding-wrap" style="padding-bottom: 30px;">
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">设置输入框的初始内容</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-default" :focus="data.firstInputFocus" 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-number-password-false" class="uni-input" type="number" :password="false"
|
||
:focus="data.numberPasswordFalseFocus" placeholder="type=number password=false" />
|
||
</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="data.inputTypeTel" placeholder="电话输入键盘" />
|
||
</view>
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-type-search" class="uni-input" type="search" placeholder="搜索输入键盘" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-type-email" class="uni-input" type="email" placeholder="邮箱输入键盘" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-type-url" class="uni-input" type="url" placeholder="url输入键盘" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-type-none" class="uni-input" type="none" :focus="data.typeNoneFocus" placeholder="聚焦但不弹出键盘" />
|
||
</view>
|
||
<!-- #endif -->
|
||
</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="data.inputPassword" type="text" :value="data.inputPasswordValue" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">无value设置的密码输入框</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" :password="true" type="text" />
|
||
</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="data.inputPlaceHolderStyle"
|
||
placeholder="占位符文字颜色为红色" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-placeholder-class-dynamic" class="uni-input" :placeholder-class="data.inputPlaceHolderClass"
|
||
:placeholder="`占位符字体大小为${data.inputPlaceHolderClass == '' ? '15px' : '10px'}`" />
|
||
</view>
|
||
<button @click="togglePlaceholderClass">切换 placeholder-class</button>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" placeholder="占位符字体大小为15px" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-placeholder3" class="uni-input" placeholder-class=""
|
||
placeholder="placeholder-class 传入空字符串" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" :placeholder-style="data.inputPlaceHolderStyle"
|
||
value="不设置placeholder只设置placeholder-style" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-placeholder-align" style="font-family: AlimamaDaoLiTiOTF;font-weight: bold;text-align: right;" class="uni-input" :placeholder-style="data.placeholderStyle"
|
||
placeholder="占位符以及内容右对齐" />
|
||
</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" value="禁用状态 input" />
|
||
</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="data.inputMaxLengthValue" @input="onMaxLengthInput" :focus="data.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="data.focus" value="焦点应在文本末尾"
|
||
@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" :focus="data.cursorInputFocus" :cursor="data.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="data.selectionStart"
|
||
:selection-end="data.selectionEnd" :focus="data.selectionInputFocus" @blur="onSelectionBlurChange" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title" style="flex-direction: row; align-items: center">
|
||
<text class="uni-title-text" style="flex-shrink: 1;">设置光标颜色为红色（Android的微信小程序非skyline下仅支持黑和绿）</text>
|
||
<switch style="margin-left: 10px" @change="changeCursorColor" :checked="data.cursor_color == '#FF0000'"></switch>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="uni-input-cursor-color" class="uni-input" :cursor-color="data.cursor_color" :focus="data.cursorColorInputFocus" @blur="cursorColorInputBlur" 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" style="flex-shrink: 1;">设置hold-keyboard</text>
|
||
<switch style="margin-left: 10px" @change="changeHoldKeyboard" :checked="data.holdKeyboard"></switch>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" :hold-keyboard="data.holdKeyboard" value="hold keyboard " />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">通过 style 设置 padding</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" style="height: 60px;padding: 20px;" value="style padding:20px" placeholder="style padding:20px"></input>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">input事件</text>
|
||
<text class="uni-subtitle-text" v-if="data.inputEventDetail">{{
|
||
data.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" @click="triggerFocusOrBlur">点击触发focus事件或blur事件</text>
|
||
<text class="uni-subtitle-text" v-if="data.focusAndBlurEventDetail">{{
|
||
data.focusAndBlurEventDetail
|
||
}}</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input id="trigger-focus-blur-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="data.confirmEventDetail">{{
|
||
data.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">change事件</text>
|
||
<text class="uni-subtitle-text" v-if="data.changeEventDetail">{{
|
||
data.changeEventDetail
|
||
}}</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" @change="onChange" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">带清除按钮的输入框</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" placeholder="带清除按钮的输入框" :value="data.inputClearValue" @input="clearInput" />
|
||
<image class="uni-icon" src="/static/icons/clear.png" v-if="data.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="data.showPassword" />
|
||
<image class="uni-icon" :src="
|
||
!data.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="data.demoValue" value="456" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">同时存在 v-model 和 change事件</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" v-model="data.demoValue2" value="123" @change="onChange" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title" style="flex-direction: row; align-items: center">
|
||
<text class="uni-title-text" style="flex-shrink: 1;">设置adjust-position</text>
|
||
<switch style="margin-left: 10px" @change="changeAdjustPosition" :checked="data.adjustPosition"></switch>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" :adjust-position="data.adjustPosition" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">输入内容的同步更新UI</text>
|
||
</view>
|
||
<text>{{data.syncDisplayValue}}</text>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" v-model="data.syncDisplayValue"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">maxlength初始化生效</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" :maxlength="5" value="123456789"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">focus时type是none，键盘是否弹出</text>
|
||
<boolean-data :defaultValue="false" title="显示<input />示例" @change="changeCheckedTypeNoneAndFocusCase"></boolean-data>
|
||
</view>
|
||
<view v-if="data.showTypeNoneAndFocusCase" class="input-wrapper">
|
||
<input class="uni-input" focus="true" type="none"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">style 设置 font-size:20px</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" style="font-size:20px" placeholder="placeholder" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">style 设置 font-size:20px</text>
|
||
<text class="uni-title-text">placeholder-class 设置 30px</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" style="font-size:20px" placeholder-class="placeholder-class" placeholder="placeholder" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">style 设置 font-size:20px</text>
|
||
<text class="uni-title-text">placeholder-class 设置 30px</text>
|
||
<text class="uni-title-text">placeholder-style 设置 40px</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" style="font-size:20px" placeholder-class="placeholder-class" placeholder-style="font-size:40px" placeholder="placeholder" />
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">style 设置 font-size:36rpx</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" style="font-size:36rpx" placeholder="placeholder 36rpx" />
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" style="font-size:36rpx" value="value 36rpx" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保证这个示例在页面底部，添加新的示例时请放在上面 -->
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">keyboardheightchange事件</text>
|
||
<text class="uni-subtitle-text"
|
||
v-if="data.keyboardHeightChangeEventDetail">{{ data.keyboardHeightChangeEventDetail }}</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input class="uni-input" @keyboardheightchange="onKeyboardHeightChange"
|
||
:focus="data.focusedForKeyboardHeightChangeTest" />
|
||
</view>
|
||
</view>
|
||
|
||
<text class="uni-title-text">input样式大合集</text>
|
||
<view class="input-wrap">
|
||
<input class="input-all-styles" value="样式效果：文本颜色深蓝色、字号16px、字重400、文本居左对齐；外边距10px、内边距10px；圆角8px；浅蓝色渐变背景、蓝色边框、透明度70%、阴影效果。" />
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">font-size:30px</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input style="width: 100%;border: 1px solid #ccc;border-radius: 4px;font-size:30px" placeholder="请输入..." value="font-size 超出默认高度" />
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="uni-title">
|
||
<text class="uni-title-text">color: green</text>
|
||
</view>
|
||
<view class="input-wrapper">
|
||
<input style="width: 100%;border: 1px solid #ccc;border-radius: 4px;color: green;" placeholder="请输入..." value="字体颜色为绿色" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保证这个示例在页面底部，添加新的示例时请放在上面 -->
|
||
<navigator url="/pages/component/input/input-performance" style="margin-top: 10px;">
|
||
<button type="primary">
|
||
input 性能测试
|
||
</button>
|
||
</navigator>
|
||
</view>
|
||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
</template>
|
||
<script setup lang="uts">
|
||
type DataType = {
|
||
title: string;
|
||
firstInputFocus: boolean;
|
||
showClearIcon: boolean;
|
||
inputClearValue: string;
|
||
showPassword: boolean;
|
||
cursor: number;
|
||
cursorInputFocus: boolean;
|
||
cursor_color: string;
|
||
cursorColorInputFocus: boolean;
|
||
selectionStart: number;
|
||
selectionEnd: number;
|
||
selectionInputFocus: boolean;
|
||
inputEventDetail: string;
|
||
focusAndBlurEventDetail: string;
|
||
confirmEventDetail: string;
|
||
changeEventDetail: string;
|
||
keyboardHeightChangeEventDetail: string;
|
||
focus: boolean;
|
||
inputPassword: boolean;
|
||
inputTypeTel: string;
|
||
inputPlaceHolderStyle: string;
|
||
placeholderStyle: string;
|
||
inputPlaceHolderClass: string.ClassString;
|
||
inputMaxLengthValue: string;
|
||
onMaxLengthInputValue: string;
|
||
inputMaxLengthFocus: boolean;
|
||
inputPasswordValue: string;
|
||
inputFocusKeyBoardChangeValue: boolean;
|
||
holdKeyboard: boolean;
|
||
keyboardHeight: number;
|
||
focusedForKeyboardHeightChangeTest: boolean;
|
||
demoValue: string;
|
||
demoValue2: string;
|
||
adjustPosition: boolean;
|
||
syncDisplayValue: string;
|
||
triggerFocus: boolean;
|
||
triggerBlur: boolean;
|
||
showTypeNoneAndFocusCase: boolean;
|
||
typeNoneFocus: boolean;
|
||
numberPasswordFalseFocus: boolean;
|
||
}
|
||
|
||
// 使用reactive避免ref数据在自动化测试中无法访问
|
||
const data = reactive({
|
||
title: 'input',
|
||
firstInputFocus: false,
|
||
showClearIcon: false,
|
||
inputClearValue: '',
|
||
showPassword: true,
|
||
cursor: -1,
|
||
cursorInputFocus: false,
|
||
cursor_color: "#3393E2",
|
||
cursorColorInputFocus: false,
|
||
selectionStart: -1,
|
||
selectionEnd: -1,
|
||
selectionInputFocus: false,
|
||
inputEventDetail: '',
|
||
focusAndBlurEventDetail: '',
|
||
confirmEventDetail: '',
|
||
changeEventDetail: '',
|
||
keyboardHeightChangeEventDetail: '',
|
||
focus: true,
|
||
inputPassword: true,
|
||
inputTypeTel: "tel",
|
||
inputPlaceHolderStyle: "color:red",
|
||
placeholderStyle: "font-family: AlimamaDaoLiTiOTF;font-weight: bold;text-align: right",
|
||
inputPlaceHolderClass: "uni-input-placeholder-class",
|
||
inputMaxLengthValue: "",
|
||
onMaxLengthInputValue: "",
|
||
inputMaxLengthFocus: false,
|
||
inputPasswordValue: "cipher",
|
||
inputFocusKeyBoardChangeValue: true,
|
||
holdKeyboard: false,
|
||
keyboardHeight: 0,
|
||
focusedForKeyboardHeightChangeTest: false,
|
||
demoValue: '123',
|
||
demoValue2: '123',
|
||
adjustPosition: false,
|
||
syncDisplayValue: '',
|
||
triggerFocus: false,
|
||
triggerBlur: false,
|
||
showTypeNoneAndFocusCase: false,
|
||
typeNoneFocus: false,
|
||
numberPasswordFalseFocus: false
|
||
} as DataType)
|
||
|
||
const togglePlaceholderClass = () => {
|
||
data.inputPlaceHolderClass = data.inputPlaceHolderClass == "uni-input-placeholder-class" ? "" : "uni-input-placeholder-class"
|
||
}
|
||
|
||
const inputFocusKeyBoardChange = (e : UniInputKeyboardHeightChangeEvent) => {
|
||
data.inputFocusKeyBoardChangeValue = e.detail.height > 50
|
||
}
|
||
|
||
const onMaxLengthInput = (event : UniInputEvent) => {
|
||
data.onMaxLengthInputValue = event.detail.value
|
||
}
|
||
|
||
const setCursor = (cursor : number) => {
|
||
data.cursorInputFocus = true
|
||
data.cursor = cursor;
|
||
}
|
||
|
||
const onCursorBlurChange = () => {
|
||
data.cursor = 0
|
||
data.cursorInputFocus = false
|
||
}
|
||
|
||
const setSelection = (selectionStart : number, selectionEnd : number) => {
|
||
data.selectionInputFocus = true
|
||
data.selectionStart = selectionStart;
|
||
data.selectionEnd = selectionEnd;
|
||
}
|
||
|
||
const onSelectionBlurChange = () => {
|
||
data.selectionEnd = 0;
|
||
data.selectionInputFocus = false
|
||
}
|
||
|
||
const clearInput = (event : UniInputEvent) => {
|
||
data.inputClearValue = event.detail.value
|
||
if (event.detail.value.length > 0) {
|
||
data.showClearIcon = true
|
||
} else {
|
||
data.showClearIcon = false
|
||
}
|
||
}
|
||
|
||
const clearIcon = () => {
|
||
data.inputClearValue = ''
|
||
data.showClearIcon = false
|
||
}
|
||
|
||
const changePassword = () => {
|
||
data.showPassword = !data.showPassword
|
||
}
|
||
|
||
const onInput = (event : UniInputEvent) => {
|
||
console.log("键盘输入", JSON.stringify(event.detail));
|
||
data.inputEventDetail = JSON.stringify(event.detail)
|
||
}
|
||
|
||
const onFocus = (event : UniInputFocusEvent) => {
|
||
data.triggerFocus = true
|
||
console.log("输入框聚焦", JSON.stringify(event.detail));
|
||
data.focusAndBlurEventDetail = JSON.stringify(event.detail);
|
||
}
|
||
|
||
const onBlur = (event : UniInputBlurEvent) => {
|
||
data.triggerBlur = true
|
||
console.log("输入框失去焦点", JSON.stringify(event.detail));
|
||
data.focusAndBlurEventDetail = JSON.stringify(event.detail);
|
||
}
|
||
|
||
const onConfirm = (event : UniInputConfirmEvent) => {
|
||
console.log("点击完成按钮", JSON.stringify(event.detail));
|
||
data.confirmEventDetail = JSON.stringify(event.detail);
|
||
}
|
||
|
||
const onChange = (event : UniInputChangeEvent) => {
|
||
console.log("输入内容变化", JSON.stringify(event.detail));
|
||
data.changeEventDetail = JSON.stringify(event.detail);
|
||
}
|
||
|
||
const onKeyboardHeightChange = (event : UniInputKeyboardHeightChangeEvent) => {
|
||
console.log("键盘高度发生变化", JSON.stringify(event.detail));
|
||
data.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
|
||
data.keyboardHeight = event.detail.height;
|
||
}
|
||
|
||
const test_check_input_value = () : number => {
|
||
return data.onMaxLengthInputValue.length
|
||
}
|
||
|
||
const changeCursorColor = (event : UniSwitchChangeEvent) => {
|
||
const checked = event.detail.value;
|
||
if (checked) {
|
||
data.cursor_color = "#FF0000"
|
||
} else {
|
||
data.cursor_color = "#3393E2"
|
||
}
|
||
data.cursorColorInputFocus = true
|
||
}
|
||
|
||
const cursorColorInputBlur = (event : UniInputBlurEvent) => {
|
||
data.cursorColorInputFocus = false
|
||
}
|
||
|
||
const changeHoldKeyboard = (event : UniSwitchChangeEvent) => {
|
||
const checked = event.detail.value;
|
||
data.holdKeyboard = checked
|
||
}
|
||
|
||
const changeAdjustPosition = (event : UniSwitchChangeEvent) => {
|
||
const checked = event.detail.value;
|
||
data.adjustPosition = checked
|
||
}
|
||
|
||
const triggerFocusOrBlur = () => {
|
||
const input = uni.getElementById("trigger-focus-blur-input")!
|
||
if(data.triggerFocus){
|
||
data.triggerFocus = false
|
||
input.blur()
|
||
} else {
|
||
data.triggerBlur = false
|
||
input.focus()
|
||
}
|
||
}
|
||
|
||
|
||
const changeCheckedTypeNoneAndFocusCase = (checked : boolean) => {
|
||
data.showTypeNoneAndFocusCase = checked
|
||
}
|
||
|
||
defineExpose({
|
||
data,
|
||
triggerFocusOrBlur
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.input-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 8px 13px;
|
||
margin: 5px 0;
|
||
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;
|
||
}
|
||
|
||
.placeholder-class{
|
||
font-size: 30px;
|
||
}
|
||
|
||
.input-wrap {
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
|
||
.input-all-styles {
|
||
color: #0008a7;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
width: 90%;
|
||
height: 40px;
|
||
min-width: 200px;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
background-color: #e3f2fd;
|
||
background-image: linear-gradient(to right, #e3f2fd, #a9d5fa);
|
||
border: 1px solid #007aff;
|
||
opacity: 0.7;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: AlimamaDaoLiTiOTF;
|
||
src: url('/static/font/AlimamaDaoLiTi.otf');
|
||
}
|
||
</style>
|