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

de40580c · 辛宝Otto · a051839d · de40580c · de40580c · de40580c
4 changed file
--- a/pages/component/input/input.test.js
+++ b/pages/component/input/input.test.js
@@ -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")
+  })
 });
--- a/pages/component/input/input.uvue
+++ b/pages/component/input/input.uvue
 <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 -->
+      <view>
-  </scroll-view>
+        <view class="uni-title">
-  <!-- #endif -->
+          <text class="uni-title-text">同时存在 v-model 和 value</text>
-</template>
+        </view>
-<script lang="uts">
+        <view class="input-wrapper">
-  export default {
+          <input id="both-model-value" class="uni-input" v-model='demoValue' value='456'  />
-    data() {
-      return {
+        </view>
-        title: 'input',
+      </view>
-        showClearIcon: false,
+    </view>
-        inputClearValue: '',
+  <!-- #ifdef APP -->
-        showPassword: true,
+  </scroll-view>
-        cursor: -1,
+  <!-- #endif -->
-        cursor_color: "#3393E2",
+</template>
-        selectionStart: -1,
+<script lang="uts">
-        selectionEnd: -1,
+  export default {
-        inputEventDetail: '',
+    data() {
-        focusAndBlurEventDetail: '',
+      return {
-        confirmEventDetail: '',
+        title: 'input',
-        keyboardHeightChangeEventDetail: '',
+        showClearIcon: false,
-        focus: true,
+        inputClearValue: '',
-        inputPassword: true,
+        showPassword: true,
-        inputTypeTel: "tel",
+        cursor: -1,
-        inputPlaceHolderStyle: "color:red",
+        cursor_color: "#3393E2",
-        inputPlaceHolderClass: "uni-input-placeholder-class" as string.ClassString ,
+        selectionStart: -1,
-        inputMaxLengthValue: "",
+        selectionEnd: -1,
-        onMaxLengthInputValue: "",
+        inputEventDetail: '',
-        inputMaxLengthFocus: false,
+        focusAndBlurEventDetail: '',
-        inputPasswordValue: "cipher",
+        confirmEventDetail: '',
-        inputFocusKeyBoardChangeValue: true,
+        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,
-      }
+        demoValue: '123'
-    },
+      }
-    methods: {
+    },
-      inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {
+    methods: {
-        this.inputFocusKeyBoardChangeValue = e.detail.height > 50
+      inputFocusKeyBoardChange(e : UniInputKeyboardHeightChangeEvent) {
-      },
+        this.inputFocusKeyBoardChangeValue = e.detail.height > 50
-      onMaxLengthInput(event : UniInputEvent) {
+      },
-        this.onMaxLengthInputValue = event.detail.value
+      onMaxLengthInput(event : UniInputEvent) {
-      },
+        this.onMaxLengthInputValue = event.detail.value
-      setCursor: function (cursor : number) {
+      },
-        (this.$refs['input'] as UniInputElement).focus();
+      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;
        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));
        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;
  }
 </style>
--- a/pages/component/textarea/textarea.test.js
+++ b/pages/component/textarea/textarea.test.js
@@ -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")
+  })
 });
--- a/pages/component/textarea/textarea.uvue
+++ b/pages/component/textarea/textarea.uvue
 <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,
 			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,
 			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_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"}},
 		radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },
    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"
      ></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
        :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>同时存在 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;
  justify-content: center;
 }
 .main .list-item {
  width: 100%;
  height: 100px;
  border: 1px solid #666;
 }
 </style>