song-ui-u/lib/components/textarea/src/index.vue.cjs.map

vue3 + js的PC前端组件库

{"version":3,"file":"index.vue.cjs","sources":["../../../../../packages/components/textarea/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"[styleWidth]\"\n    :class=\"[ns.b()]\"\n    @mouseenter=\"mouseenterEvent\"\n    @mouseleave=\"mouselevelEvent\"\n  >\n    <textarea\n      ref=\"_ref\"\n      :rows=\"dynamicRows\"\n      @input=\"handlerInput\"\n      @focus=\"focusEvent\"\n      @blur=\"blurEvent\"\n      @compositionstart=\"compositionStartEvent\"\n      @compositionupdate=\"compositionUpdateEvent\"\n      @compositionend=\"handlerCompositionEnd\"\n      @change=\"changeEvent\"\n      @keydown=\"keydownEvent\"\n      @keyup=\"keyupEvent\"\n      :placeholder=\"placeholder\"\n      :value=\"modelValue\"\n      :disabled=\"disabled\"\n      :maxlength=\"maxlength\"\n      :class=\"[\n        ns.e('inner'),\n        ns.is('color-danger', isColorDanger),\n        ns.is('focus', isFocus),\n        ns.is('disabled', disabled),\n      ]\"\n    />\n    <div v-if=\"showLimit\" :class=\"[ns.e('count')]\">\n      {{ valueLength }} / {{ maxlength }}\n    </div>\n  </div>\n</template>\n<script>\nexport default { name: \"x-textarea\" };\n</script>\n<script setup>\nimport { ref, computed, shallowRef, watch, watchEffect } from \"vue\";\nimport { useNamespace, useStyle, useEvent, useExpose } from \"@ui-library/hook\";\nconst ns = useNamespace(\"textarea\");\n// input\nconst _ref = shallowRef(null);\nconst { focusExpose, blurExpose, selectExpose } = useExpose(_ref);\n// event\nconst {\n  isFocus,\n  isComposition,\n  focusEvent,\n  blurEvent,\n  mouseenterEvent,\n  mouselevelEvent,\n  compositionStartEvent,\n  compositionUpdateEvent,\n  compositionEndEvent,\n  changeEvent,\n  keydownEvent,\n  keyupEvent,\n} = useEvent();\n// style\nconst uStyle = useStyle();\nconst styleWidth = computed(() => uStyle.width(props.width));\n// defineModel\nconst modelValue = defineModel();\n// emits\nconst emit = defineEmits([\n  \"input\",\n  \"clear\",\n  \"focus\",\n  \"blur\",\n  \"mouseenter\",\n  \"mouselevel\",\n  \"compositionstart\",\n  \"compositionupdate\",\n  \"compositionend\",\n  \"change\",\n  \"keydown\",\n  \"keyup\",\n]);\n/** props */\nconst props = defineProps({\n  placeholder: {\n    type: String,\n    default: \"请输入\",\n  },\n  maxlength: {\n    type: [String, Number],\n    default: \"\",\n  },\n  width: {\n    type: String,\n    default: \"\",\n  },\n  rows: {\n    type: Number,\n    default: 1,\n  },\n  minRows: {\n    type: Number,\n    default: 1,\n  },\n  maxRows: {\n    type: Number,\n    default: 8,\n  },\n  disabled: Boolean,\n  count: Boolean,\n});\n\nconst dynamicRows = ref(props.rows);\nconst content = ref(\"\");\n\nconst adjustHeight = () => {\n  const textarea = _ref.value;\n  if (!textarea) return;\n\n  // 重置为默认行数\n  textarea.rows = props.minRows;\n\n  const scrollHeight = textarea.scrollHeight;\n  const clientHeight = textarea.clientHeight;\n  const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10);\n\n  let rows = Math.floor(scrollHeight / lineHeight);\n  rows = Math.max(rows, props.minRows);\n  rows = Math.min(rows, props.maxRows);\n\n  dynamicRows.value = rows;\n  textarea.rows = rows;\n\n  // 判断是否需要显示滚动条\n  showOverflowY.value = scrollHeight > clientHeight;\n};\n\nwatchEffect(() => {\n  if (_ref.value) {\n    adjustHeight();\n  }\n});\n\nwatch(modelValue, (newVal) => {\n  content.value = newVal;\n  adjustHeight();\n});\n// showLimit\nconst showLimit = computed(\n  () => props.count && !props.disabled && props.maxlength\n);\n// 文本长度\nconst valueLength = computed(() => modelValue.value.length);\nconst isColorDanger = computed(() => {\n  return props.maxlength && props.count && valueLength.value > props.maxlength;\n});\n\n// 清除\nconst handlerClear = () => {\n  modelValue.value = \"\";\n  // emit input\n  emit(\"input\", \"\");\n  emit(\"clear\", \"\");\n};\n\nconst handlerCompositionEnd = (e) => {\n  compositionEndEvent(e).then(() => {\n    handlerInput(e);\n  });\n};\n\nconst handlerInput = (e) => {\n  if (isComposition.value) return;\n  const value = e.target.value;\n  modelValue.value = value;\n\n  // 自适应高度\n  adjustHeight();\n\n  emit(\"input\", value, e);\n};\n\ndefineExpose({\n  ref: _ref, // 输入框对象\n  focus: focusExpose,\n  blur: blurExpose,\n  select: selectExpose,\n  clear: handlerClear,\n});\n</script>\n"],"names":["useNamespace","shallowRef","useExpose","useEvent","useStyle","computed","_useModel","ref","watchEffect","watch"],"mappings":"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"}