Prechádzať zdrojové kódy

Update 优化form组件增加tip功能

Yue 8 mesiacov pred
rodič
commit
3fffd26499

+ 16 - 0
UI/VAP_V3.VUE/src/components/form/VbFormItem.vue

@@ -123,6 +123,16 @@ function isDisable(item: any) {
 	return item.disabled
 }
 
+const hasTip = computed(() => {
+	return item.value.tip
+})
+const tipIconClass = computed(() => {
+	let str = item.value.tipIcon ? item.value.tipIcon : "bi bi-question-circle-fill "
+	str += item.value.tipIconClass ? item.value.tipIconClass : " text-muted ms-1"
+	console.log("tipIconClass", str)
+	return str
+})
+
 function init() {
 	//
 }
@@ -146,6 +156,12 @@ onMounted(() => {
 					: item.labelWidth || labelWidth
 			"
 			v-bind="item.itemProps">
+			<template #label v-if="hasTip">
+				<span class="fw-bold text-dark" :style="item.labelStyle ?? ''">{{ item.label }}</span>
+				<vb-tooltip :content="item.tip ?? ''" placement="top">
+					<span :class="tipIconClass" style="cursor: pointer"></span>
+				</vb-tooltip>
+			</template>
 			<slot v-if="checkComponent('slot')" :name="item.field"></slot>
 			<div
 				v-else-if="checkComponent('text') || checkComponent('innerText')"

+ 7 - 1
UI/VAP_V3.VUE/src/components/form/models.ts

@@ -1,5 +1,6 @@
 import type { Component } from "vue"
 import type { FormItemRule } from "element-plus/es/components/form/src/types"
+import type { AlertProps } from "element-plus/es/components/alert/src/alert"
 
 export interface VbFormItem {
 	id?: string | (() => string)
@@ -16,7 +17,7 @@ export interface VbFormItem {
 	type?: string
 	component?:
 		| "slot"
-		| "Slot"
+		| "Slot" // name 为 {field} 如果在modal里 则为 {field}_form
 		| "innerText"
 		| "text" // innerText
 		| "VS" // VbSelect
@@ -39,6 +40,7 @@ export interface VbFormItem {
 	innerText?: string // component 为 innerText 时,优先显示的文本,否则会显示当前的字段值
 	span?: number
 	labelWidth?: number
+
 	size?: "large" | "default" | "small"
 	placeholder?: string
 	rules?: Array<string | FormItemRule[] | FormItemRule> // 全局规则的KEY 或 自定义的规则
@@ -61,6 +63,10 @@ export interface VbFormItem {
 	itemProps?: any // 注入到 el-form-item 的属性
 	props?: any // 当 component 为渲染组件时,注入到渲染组件当中的属性
 	listeners?: any // 当 component 为渲染组件时,注入到渲染组件当中的事件
+	tip?: string
+	labelStyle?: string // label样式 tip有值生效
+	tipIcon?: string // 默认值  bi bi-question-circle-fill
+	tipIconClass?: string // 默认值  text-muted
 }
 
 export interface VbFormRowItem {