EveryLike/pages/component/textarea/textarea.uvue

<script>
  import { ItemType } from '@/components/enum-data/enum-data-types'
  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",
        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: "请输入",
        defaultModel: '123',
        textareaMaxLengthValue: "",
        isSelectionFocus: false,
        selectionStart: -1,
        selectionEnd: -1,
        hold_keyboard: false,
        adjust_position: false,
        disabled: false,
        jest_result: false,
        isAutoTest: false,
        changeValue: "",
        textareaRect: null as DOMRect | null,
      }
    },
    // #ifdef APP
    onReady() {
      const textarea = uni.getElementById("uni-textarea")
      this.textareaRect = textarea?.getBoundingClientRect()
      // 加上导航栏及状态栏高度
      this.textareaRect!.y += uni.getSystemInfoSync().safeArea.top + 44
    },
    // #endif
    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(e: UniInputEvent) {
        console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上")
        // #ifdef WEB
        this.jest_result = e.detail.value == '11\n2\n3\n4\n5\n6'
        // #endif
        // #ifdef APP
        this.jest_result = e.detail.value == '1\n2\n3\n4\n5\n61'
        // #endif
      },
      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(event: UniTextareaFocusEvent) {
        this.jest_result = event.detail.height >= 0
      },
      textarea_change(event: UniInputChangeEvent) {
        console.log("textarea_change", event.detail.value);
        this.changeValue = event.detail.value
      },
      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 },
      setSelection: function (selectionStart : number, selectionEnd : number) {
        this.isSelectionFocus = true;
        this.selectionStart = selectionStart;
        this.selectionEnd = selectionEnd;
      },
      onSelectionBlurChange() {
      this.isSelectionFocus = false;
        this.selectionEnd = 0;
      },
      changeHoldKeyboard(event : UniSwitchChangeEvent) {
        const checked = event.detail.value;
        this.hold_keyboard = checked;
      },
      changeAdjustPosition(event : UniSwitchChangeEvent) {
        const checked = event.detail.value;
        this.adjust_position = checked;
      },
      change_disabled_boolean(checked : boolean) {
        this.disabled = checked
      },
      getBoundingClientRectForTest() : DOMRect | null {
        return uni.getElementById('test-width')?.getBoundingClientRect();
      }
    }
  }
</script>

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view class="main">
      <textarea :value="default_value" id="uni-textarea" class="uni-textarea" :auto-focus="true" :focus="focus_boolean"
        :confirm-hold="confirm_hold_boolean" :auto-height="auto_height_boolean" :fixed="fixed_boolean"
        :show-confirm-bar="show_confirm_bar_boolean" :adjust-position="adjust_position_boolean"
        :cursor-color="cursor_color" :cursor="cursor" :placeholder="placeholder_value"
        :inputmode="inputmode_enum[inputmode_enum_current].name"
        :confirm-type="confirm_type_list[confirm_type_current].name" :disabled="disabled" @click="textarea_click"
        @touchstart="textarea_touchstart" @touchmove="textarea_touchmove" @touchcancel="textarea_touchcancel"
        @touchend="textarea_touchend" @tap="textarea_tap" @longpress="textarea_longpress" @confirm="textarea_confirm"
        @input="textarea_input" @linechange="textarea_linechange" @blur="textarea_blur"
        @keyboardheightchange="textarea_keyboardheightchange" @focus="textarea_focus" @change="textarea_change"
        style="padding: 10px; border: 1px solid #666;height: 200px" />
    </view>
    <view style="margin-bottom: 40px;">
      <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" title="获取焦点" @change="change_focus_boolean"></boolean-data>
      <boolean-data :defaultValue="true" title="首次自动获取焦点" @change="change_auto_focus_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="改变光标颜色为透明" @change="change_cursor_color_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="设置禁用输入框"
        @change="change_disabled_boolean"></boolean-data>
      <enum-data :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）。"
        @change="radio_change_inputmode_enum"></enum-data>
      <boolean-data :defaultValue="false" title="是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）"
        @change="change_show_confirm_bar_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）"
        @change="change_fixed_boolean"></boolean-data>


      <view class="title-wrap">
        <view>maxlength 输入最大长度为10</view>
      </view>
      <view class="textarea-wrap">
        <textarea id="textarea-instance-maxlength" class="textarea-instance" :value="textareaMaxLengthValue"
          :maxlength="10" />
      </view>

      <view class="title-wrap">
        <view>cursor-spacing、placeholder-class、placeholder-style例子(harmony 不支持设置 placeholder backgroundColor)</view>
      </view>
      <view class="textarea-wrap">
        <textarea id="textarea-height-exception" class="textarea-instance" placeholder="底部textarea测试键盘遮挡"
          placeholder-class="placeholder" placeholder-style="background-color:red" :cursor-spacing="300" />
      </view>
      <view class="title-wrap">
        <view @click="setSelection(2, 5)">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</view>
      </view>
      <view class="textarea-wrap">
        <textarea id="textarea-instance-2" class="textarea-instance" value="Hello UniApp X Textarea TestCase" :focus="isSelectionFocus"
          :selection-start="selectionStart" :selection-end="selectionEnd" @blur="onSelectionBlurChange" />
      </view>

      <view class="title-wrap">
        <view>设置hold-keyboard</view>
        <switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="hold_keyboard"></switch>
      </view>
      <view class="textarea-wrap">
        <textarea class="textarea-instance" :hold-keyboard="hold_keyboard" />
      </view>
      <view class="title-wrap">
        <view>同时存在 v-model 和 value</view>
      </view>
      <!-- harmony 不符合预期因为 switch 组件存在时，textarea 非预期 update 导致 -->
      <view class="textarea-wrap">
          <textarea id="both-model-value" class="textarea-instance" v-model='defaultModel' value='456'></textarea>
      </view>

      <view class="title-wrap">
        <view>设置adjust-position</view>
        <switch style="margin-left: 10px;" @change="changeAdjustPosition" :checked="adjust_position"></switch>
      </view>
      <view class="textarea-wrap">
        <textarea class="textarea-instance" :adjust-position="adjust_position" />
      </view>
      <view v-if="isAutoTest" class="textarea-wrap">
        <textarea id="test-width" class="test-width" value="123456" placeholder="" />
      </view>
      <view class="title-wrap">
        <view>设置line-height</view>
      </view>
      <view class="textarea-wrap">
        <textarea class="textarea-instance" style="line-height: 1.2em;" value="设置line-height为1.2em" ></textarea>
      </view>
      <view class="title-wrap">
        <view>设置max-height与auto-height</view>
      </view>
      <view class="textarea-wrap">
        <textarea class="textarea-instance" style="max-height: 50px;" auto-height="true" :value="default_value"></textarea>
      </view>
    </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;
  }

  .test-width {
    width: 100px;
    height: 100px;
    background-color: aqua;
  }

  .textarea-wrap {
    flex-direction: row;
    justify-content: center;
  }

  .title-wrap {
    flex-direction: row;
    align-items: center;
    margin-left: 10px;
  }

  .textarea-instance {
    flex: 1;
    border: 1 solid #666;
    margin: 10px;
  }

  .placeholder {
    background-color: yellow;
  }
</style>