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

vue3 + js的PC前端组件库

{"version":3,"file":"index.vue.cjs","sources":["../../../../../packages/components/sender/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"[styleWidth]\"\n    :class=\"[ns.b(), ns.is('focus', isFocus)]\"\n    @mouseenter=\"mouseenterEvent\"\n    @mouseleave=\"mouselevelEvent\"\n  >\n    <div :class=\"[ns.e('wapper-top')]\" v-if=\"$slots.top || paste\">\n      <template v-if=\"$slots.top\">\n        <slot name=\"top\" />\n      </template>\n\n      <template v-else-if=\"paste\">\n        <XUpload\n          imageSize=\"80\"\n          type=\"imageList\"\n          :isVerify=\"false\"\n          uploadUrl=\"http://localhost:3000/upload/chunk\"\n          verifyUrl=\"http://localhost:3000/upload/verify\"\n          mergeUrl=\"http://localhost:3000/upload/merge\"\n          v-model:imageList=\"imageList\"\n          @success=\"success\"\n          ref=\"uploadRef\"\n        />\n      </template>\n    </div>\n\n    <div\n      :class=\"[\n        ns.e('inner-wrapper'),\n        ns.m('position', position),\n        ns.is('adj', isAdj),\n      ]\"\n    >\n      <div\n        :class=\"[ns.e('prefix')]\"\n        v-if=\"position == 'between' && $slots.prefix\"\n      >\n        <slot name=\"prefix\" />\n      </div>\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        :class=\"[ns.e('inner'), ns.is('bottom', position == 'bottom')]\"\n        @paste=\"handelPaste\"\n      />\n\n      <div\n        :class=\"[ns.e('action')]\"\n        v-if=\"position == 'between' && $slots.action\"\n      >\n        <slot name=\"action\" />\n      </div>\n\n      <div :class=\"[ns.e('bottom')]\" v-if=\"position == 'bottom'\">\n        <div :class=\"[ns.e('action')]\">\n          <slot name=\"action\" />\n        </div>\n        <div :class=\"[ns.e('prefix')]\">\n          <slot name=\"prefix\" />\n        </div>\n      </div>\n    </div>\n\n    <div :class=\"ns.e('wapper-bottom')\" v-if=\"$slots.bottom\">\n      <slot name=\"bottom\" />\n    </div>\n  </div>\n</template>\n<script>\nexport default { name: \"x-sender\" };\n</script>\n<script setup>\nimport { ref, computed, shallowRef, watch, onMounted, nextTick } from \"vue\";\nimport { useNamespace, useStyle, useEvent, useExpose } from \"@ui-library/hook\";\nimport { XUpload } from \"@ui-library/components\";\nconst ns = useNamespace(\"sender\");\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\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  \"success\",\n  \"paste\",\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: String,\n    default: \"\",\n  },\n  position: {\n    type: String,\n    default: \"between\", // between bottom\n  },\n  disabled: Boolean, // 禁用\n  count: Boolean, // 统计\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});\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\nconst dynamicRows = ref(props.rows);\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\nconst isAdj = computed(() => {\n  return dynamicRows.value > props.rows;\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\nconst uploadRef = ref(null);\nconst file = ref(null);\nconst paste = ref(null);\nconst handelPaste = (e) => {\n  // 获取剪贴板中的内容\n  const items = e.clipboardData?.items;\n\n  if (items) {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n\n      // 判断是否是图片类型\n      if (item.type.startsWith(\"image/\")) {\n        const blob = item.getAsFile(); // 获取图片的 Blob 对象\n\n        if (blob) {\n          // 将 Blob 转换为 URL\n\n          paste.value = URL.createObjectURL(blob);\n\n          // 将blob转成File\n          const bobleTofile = new File(\n            [blob],\n            new Date().getTime() + \".\" + blob.type.split(\"/\")[1],\n            {\n              type: blob.type,\n            }\n          );\n\n          file.value = bobleTofile;\n\n          if (uploadRef.value) {\n            uploadRef.value.upload(file.value);\n          }\n\n          emit(\"paste\", file);\n          // 在这里可以将图片插入到页面或者上传到服务器\n        }\n      }\n    }\n  }\n};\n\nnextTick(() => {\n  watch(\n    () => uploadRef.value,\n    () => {\n      uploadRef.value.upload(file.value);\n    }\n  );\n});\n\nconst imageList = defineModel(\"imageList\", {\n  type: Array,\n  default: () => [],\n});\n\nconst success = (res) => {\n  console.log(res, \"res\");\n  emit(\"success\", res);\n};\n\nonMounted(() => {\n  // 初始化自适应高度\n  adjustHeight();\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","nextTick","watch","onMounted"],"mappings":"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"}