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: "请输入"
		}
	},

	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 },
		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 -->
    <view class="main">
      <textarea
      :value="default_value"
        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"
        :inputmode="inputmode_enum[inputmode_enum_current].name"
        :confirm-type="confirm_type_list[confirm_type_current].name"
        :maxlength="maxlength"
        @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"
        style="padding: 10px; border: 1px solid #666"
      />
    </view>
    <view class="content">
      <boolean-data
        :defaultValue="false"
        title="键盘弹起时，是否自动上推页面（仅限非 Web 平台）"
        @change="change_adjust_position_boolean"
      ></boolean-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>
      <boolean-data
        :defaultValue="false"
        title="是否自动增高，设置auto-height时，style.height不生效"
        @change="change_auto_height_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="点击键盘右下角按钮时是否保持键盘不收起"
        @change="change_confirm_hold_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>
      <enum-data
        :items="inputmode_enum"
        title="是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。（仅限 Web 平台符合条件的高版本浏览器或webview）。"
        @change="radio_change_inputmode_enum"
      ></enum-data>
      <enum-data
        :items="confirm_type_list"
        title="枚举属性，可以设置键盘右下角按钮。（仅限 Web、iOS 平台）。"
        @change="radio_change_confirm_type"
      ></enum-data>
    </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>