子组件
<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>
父组件引入
<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>