vue3 封装 naive input 组件

子组件

<script setup>
import { useMessage, NDatePicker, NInputNumber, NTimePicker, NIcon, NPopover } from 'naive-ui'
import { WarningOutline, Add, Trash, Pencil } from "@vicons/ionicons5";
import { ref, reactive, onMounted, watch, readonly, computed } from 'vue'
import { ChevronDown, ChevronUp } from "@vicons/ionicons5";
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: String,
    default: () => ''
  },
  validate: {
    type: Boolean,
    default: () => false
  },
  popoverDisabled: {
    type: Boolean,
    default: () => false
  },
  message: {
    type: String,
    default: () => ''
  },
  path: {
    type: String,
    default: () => ''
  },
  rulePath: {
    type: String,
    default: () => ''
  },
})
let value = ref('')
watch(() => props.modelValue,
  (v1, v2) => {
    value.value = v1;
  }, {
  deep: true,
  immediate: true
}
)
function change(value) {
  emit("update:modelValue", value);
}
</script>
<template>
  <n-popover trigger="hover" :disabled="popoverDisabled" placement="right" raw :show-arrow="true"
    :class="{ 'popover-main-blue': !validate, 'popover-main-red': validate, }">
    <template #trigger>
      <n-form-item label :path="path" :rule-path="rulePath">
        {{ value }}
        <n-input size="small" v-model:value="value" :maxlength="250" :onChange="change" placeholder></n-input>
        <n-icon size="18" color="#d03050" v-if="validate">
          <WarningOutline />
        </n-icon>
      </n-form-item>
    </template>
    <div>{{ message }}</div>
  </n-popover>
</template>

<style scoped lang="less">
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

父组件引入

<beInput v-model="saveInfo.data.StAppOrgInfo.OrgName" :validate="saveInfoRules.data.StAppOrgInfo.OrgName.validate" :message="saveInfoRules.data.StAppOrgInfo.OrgName.message" path="StAppOrgInfo.OrgName"  rulePath="StAppOrgInfoOrgName"></beInput>
1