hy-app 0.2.13 → 0.2.15

package/components/hy-textarea/hy-textarea.vue

@@ -1,7 +1,6 @@
 <template>
   <view
-    class="hy-textarea"
-    :class="textareaClass"
+    :class="['hy-textarea', customClass, textareaClass]"
     :style="[textareaStyle, borderStyle(isFocus)]"
   >
     <textarea
@@ -39,164 +38,259 @@
         'background-color': disabled ? 'transparent' : '',
       }"
       v-if="count"
-      >{{ innerValue.length }}/{{ maxlength }}</text
     >
+      {{ innerValue.length }}/{{ maxlength }}
+    </text>
     <!-- #endif -->
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 用于输入多行文本信息,聊天输入框等。
+ * @displayName hy-textarea
+ */
+defineOptions({})
 export default {
-  name: "hy-textarea",
+  name: 'hy-textarea',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  ref,
-  toRefs,
-  watch,
-  nextTick,
-} from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
-import { addUnit } from "../../utils";
-import { ColorConfig } from "@/package";
+import { computed, ref, toRefs, watch, nextTick } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { ITextareaEmits } from './typing'
+import { addUnit } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { modelValue, customStyle, border, disabled, formatter } = toRefs(props);
-const emit = defineEmits([
-  "update:modelValue",
-  "linechange",
-  "focus",
-  "blur",
-  "change",
-  "confirm",
-  "keyboardheightchange",
-]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** 输入框的内容 */
+  modelValue: String,
+  /** 输入框为空时占位符 */
+  placeholder: String,
+  /** 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ */
+  placeholderClass: {
+    type: String,
+    default: 'textarea-placeholder',
+  },
+  /** 指定placeholder的样式，对象形式 */
+  placeholderStyle: Object as PropType<CSSProperties>,
+  /** 输入框高度 */
+  height: {
+    type: [String, Number],
+    default: 70,
+  },
+  /** 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效 */
+  confirmType: {
+    type: String,
+    default: 'done',
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否显示统计字数 */
+  count: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现 */
+  focus: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否自动增加高度 */
+  autoHeight: {
+    type: Boolean,
+    default: false,
+  },
+  /** 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true */
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+  /** 指定光标与键盘的距离 */
+  cursorSpacing: {
+    type: Number,
+    default: 0,
+  },
+  /** 指定focus时的光标位置 */
+  cursor: [String, Number],
+  /** 是否显示键盘上方带有”完成“按钮那一栏 */
+  showConfirmBar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 光标起始位置，自动聚焦时有效，需与selection-end搭配使用， */
+  selectionStart: {
+    type: Number,
+    default: -1,
+  },
+  /** 光标结束位置，自动聚焦时有效，需与selection-start搭配使用 */
+  selectionEnd: {
+    type: Number,
+    default: -1,
+  },
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否去掉 iOS 下的默认内边距，只微信小程序有效 */
+  disableDefaultPadding: {
+    type: Boolean,
+    default: false,
+  },
+  /** focus时，点击页面的时候不收起键盘，只微信小程序有效 */
+  holdKeyboard: {
+    type: Boolean,
+    default: false,
+  },
+  /** 最大输入长度，设置为 -1 的时候不限制最大长度 */
+  maxlength: {
+    type: Number,
+    default: 140,
+  },
+  /**
+   * 边框类型
+   * @values surround,none,bottom
+   * */
+  border: {
+    type: String,
+    default: 'surround',
+  },
+  /** 内容式化函数 */
+  formatter: Function,
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { modelValue, customStyle, border, disabled, formatter } = toRefs(props)
+const emit = defineEmits<ITextareaEmits>()
 
 // 输入框的值
-const innerValue = ref<string>("");
+const innerValue = ref<string>('')
 // 是否处于获得焦点状态
-const focused = ref<boolean>(false);
+const focused = ref<boolean>(false)
 // value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
-const firstChange = ref<boolean>(true);
+const firstChange = ref<boolean>(true)
 // value绑定值的变化是由内部还是外部引起的
-const changeFromInner = ref<boolean>(false);
+const changeFromInner = ref<boolean>(false)
 // 是否获取焦点
-const isFocus = ref<boolean>(false);
+const isFocus = ref<boolean>(false)
 // 过滤处理方法
-let innerFormatter = (value: string) => value;
+let innerFormatter = (value: string) => value
 
 watch(
   () => modelValue.value,
   (newVal) => {
-    innerValue.value = newVal;
+    innerValue.value = newVal
     /* #ifdef H5 */
     // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
     if (firstChange.value === false && changeFromInner.value === false) {
-      valueChange();
+      valueChange()
     }
     /* #endif */
-    firstChange.value = false;
+    firstChange.value = false
     // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-    changeFromInner.value = false;
+    changeFromInner.value = false
   },
   { immediate: true },
-);
+)
 
 // 组件的类名
 const textareaClass = computed(() => {
-  let classes: string[] = [];
-  border.value === "surround" &&
-    (classes = classes.concat(["hy-border", "hy-textarea--radius"]));
-  border.value === "bottom" &&
-    (classes = classes.concat(["hy-border__bottom", "hy-textarea--no-radius"]));
-  disabled.value && classes.push("hy-textarea--disabled");
-  return classes.join(" ");
-});
+  let classes: string[] = []
+  border.value === 'surround' && (classes = classes.concat(['hy-border', 'hy-textarea--radius']))
+  border.value === 'bottom' &&
+    (classes = classes.concat(['hy-border__bottom', 'hy-textarea--no-radius']))
+  disabled.value && classes.push('hy-textarea--disabled')
+  return classes.join(' ')
+})
 // 组件的样式
 const textareaStyle = computed(() => {
-  const style: CSSProperties = {};
+  const style: CSSProperties = {}
 
-  return Object.assign(style, customStyle.value);
-});
+  return Object.assign(style, customStyle.value)
+})
 /**
  * @description 边框颜色
  * */
 const borderStyle = computed(() => {
   return (isFocus: boolean) => {
-    let style: CSSProperties = {};
+    let style: CSSProperties = {}
     if (isFocus) {
       switch (border.value) {
-        case "surround":
-          style = { border: `1px solid var(--hy-theme-color, #3c9cff)` };
-          break;
-        case "bottom":
-          style = { borderBottom: `1px solid var(--hy-theme-color, #3c9cff)` };
-          break;
+        case 'surround':
+          style = { border: `1px solid var(--hy-theme-color, #3c9cff)` }
+          break
+        case 'bottom':
+          style = { borderBottom: `1px solid var(--hy-theme-color, #3c9cff)` }
+          break
         default:
-          break;
+          break
       }
     }
-    return style;
-  };
-});
+    return style
+  }
+})
 
 const onFocus = (e: FocusEvent) => {
-  isFocus.value = true;
-  emit("focus", e);
-};
+  isFocus.value = true
+  emit('focus', e)
+}
 const onBlur = (e: FocusEvent) => {
-  isFocus.value = false;
-  emit("blur", e);
+  isFocus.value = false
+  emit('blur', e)
   // 尝试调用u-form的验证方法
   // formValidate(this, "blur");
-};
+}
 const onLinechange = (e: Event) => {
-  emit("linechange", e);
-};
+  emit('linechange', e)
+}
 const onInput = (e: Event) => {
-  let { value } = e?.detail;
+  let { value } = e?.detail
   // 格式化过滤方法
-  const format = formatter.value || innerFormatter;
-  const formatValue = format(value);
+  const format = formatter.value || innerFormatter
+  const formatValue = format(value)
   // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
-  innerValue.value = value;
+  innerValue.value = value
   nextTick(() => {
-    innerValue.value = formatValue;
-    valueChange();
-  });
-};
+    innerValue.value = formatValue
+    valueChange()
+  })
+}
 /**
  * @description 内容发生变化，进行处理
  * */
 const valueChange = () => {
-  const value = innerValue.value;
+  const value = innerValue.value
   nextTick(() => {
-    emit("update:modelValue", value);
+    emit('update:modelValue', value)
     // 标识value值的变化是由内部引起的
-    changeFromInner.value = true;
-    emit("change", value);
+    changeFromInner.value = true
+    emit('change', value)
     // 尝试调用u-form的验证方法
     // formValidate(this, "change");
-  });
-};
+  })
+}
 const onConfirm = (e: Event) => {
-  emit("confirm", e);
-};
+  emit('confirm', e)
+}
 const onKeyboardheightchange = (e: Event) => {
-  emit("keyboardheightchange", e);
-};
+  emit('keyboardheightchange', e)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-textarea/typing.d.ts

@@ -1,27 +1,44 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyTextareaProps {
-  modelValue: string;
-  placeholder?: string | null;
-  placeholderClass?: string;
-  placeholderStyle?: CSSProperties;
-  height?: number;
-  confirmType?: "done" | "send" | "search" | "next" | "go";
-  disabled?: boolean;
-  count?: boolean;
-  focus?: boolean;
-  autoHeight?: boolean;
-  fixed?: boolean;
-  cursorSpacing?: number;
-  cursor?: string;
-  showConfirmBar?: boolean;
-  selectionStart?: number;
-  selectionEnd?: number;
-  adjustPosition?: boolean;
-  disableDefaultPadding?: boolean;
-  holdKeyboard?: boolean;
-  maxlength?: number;
-  border?: HyApp.BorderType;
-  formatter?: ((value: string) => string) | null;
-  customStyle?: CSSProperties;
+  modelValue: string
+  placeholder?: string | null
+  placeholderClass?: string
+  placeholderStyle?: CSSProperties
+  height?: number
+  confirmType?: 'done' | 'send' | 'search' | 'next' | 'go'
+  disabled?: boolean
+  count?: boolean
+  focus?: boolean
+  autoHeight?: boolean
+  fixed?: boolean
+  cursorSpacing?: number
+  cursor?: string
+  showConfirmBar?: boolean
+  selectionStart?: number
+  selectionEnd?: number
+  adjustPosition?: boolean
+  disableDefaultPadding?: boolean
+  holdKeyboard?: boolean
+  maxlength?: number
+  border?: HyApp.BorderType
+  formatter?: ((value: string) => string) | null
+  customStyle?: CSSProperties
+}
+
+export interface ITextareaEmits {
+  /** 输入框失去焦点时触发 */
+  (e: 'blur', event: any): void
+  /** 输入框聚焦时触发 */
+  (e: 'focus', event: any): void
+  /** 当键盘输入时，触发 input 事件 */
+  (e: 'change', value: string): void
+  /** 点击完成时， 触发 confirm 事件 */
+  (e: 'confirm', event: any): void
+  /** 输入框行数变化时调用 */
+  (e: 'linechange'): void
+  /** 当键盘输入时，触发 input 事件 */
+  (e: 'update:modelValue', value: string): void
+  /** 键盘高度发生变化的时候触发此事件 */
+  (e: 'keyboardheightchange', event: any): void
 }