【新增】试题页面（残缺）上传

src/views/paper/question/components/el-textarea.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="el-textarea line-number-textarea">
+    <div class="line-numbers" :style="{ paddingTop: paddingTop + 'px' }">
+      <div v-for="n in lineCount" :key="n">{{ n }}</div>
+    </div>
+    <textarea
+        class="el-textarea__inner"
+        :class="{ 'is-disabled': disabled }"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        :rows="rows"
+        :disabled="disabled"
+        v-model="localValue"
+        @input="onInput"
+    ></textarea>
+    <span v-if="showWordLimit" class="el-input__count">
+      {{ localValue.length }} / {{ maxlength }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  rows: {
+    type: Number,
+    default: 5
+  },
+  maxlength: {
+    type: Number,
+    default: 1024
+  },
+  disabled: Boolean,
+  showWordLimit: Boolean
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const localValue = ref(props.modelValue ?? '')
+const lineCount = computed(() => localValue.value.split('\n').length)
+const paddingTop = computed(() => props.rows * 1.5 > lineCount.value ? 8 : 0)
+
+const onInput = (e: Event) => {
+  const val = (e.target as HTMLTextAreaElement).value
+  localValue.value = val
+  emit('update:modelValue', val)
+}
+
+watch(() => props.modelValue, (val) => {
+  if (val !== localValue.value) localValue.value = val ?? ''
+})
+</script>
+
+<style scoped>
+.line-number-textarea {
+  display: flex;
+  position: relative;
+  border-radius: 7px;
+  overflow: hidden;
+  background: white;
+}
+
+.line-numbers {
+  background-color: #f5f7fa;
+  color: #909399;
+  padding: 8px 6px;
+  text-align: right;
+  font-size: 14px;
+  font-family: monospace;
+  line-height: 1.5;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.line-numbers > div {
+  height: 1.5em;
+}
+
+.el-textarea__inner {
+  flex: 1;
+  border: none;
+  padding: 8px;
+  line-height: 1.5;
+  resize: none;
+  font-family: inherit;
+  outline: none;
+  font-size: 14px;
+  min-height: calc(1.5em * var(--rows));
+}
+
+.el-input__count {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 12px;
+  color: #909399;
+}
+</style>