Vue+ElementUI技巧分享：自定义表单项label的文字提示

概要

在Vue和ElementUI的丰富组件库中，定制化表单是常见的需求之一。本文将分享一项实用技巧，即如何在表单项label后添加文字提示，以提升用户体验。我们将深入探讨Vue中slot的作用，并通过实战演示如何通过ElementUI的el-tooltip实现这一功能。

在表单项label后添加文字提示

1. 使用 Slot 自定义 Label

在 ElementUI 中，el-form-item 组件允许使用 slot 自定义 label。通过在 el-form-item 中添加 template 标签，我们可以在其中插入自定义的内容，并使用 slot="label" 来指定这一区域作为 label 的内容。

<el-form-item label="扣款">
  <template slot="label">
    <span>扣款
      
    span>
  template>
  
el-form-item>
1
2
3
4
5
6
7
8

2. 添加问号图标与提示信息

为了在 label 后添加问号图标并提供提示信息，我们使用了 el-tooltip 组件。以下是完整的代码片段：

<el-form-item label="扣款">
  <template slot="label">
    <span>扣款
      <el-tooltip class="item"
                  effect="dark"
                  content="客户对本单的扣款"
                  placement="left">
        <i class="el-icon-question"
           style="font-size: 16px; vertical-align: middle;">i>
      el-tooltip>
    span>
  template>
  
  <el-input-number style="width:100%"
                   size="mini"
                   v-model="receipt.withhold"
                   :precision="2"
                   :min="0"
                   @change="changeWithhold"
                   :max="9999999999">el-input-number>
el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这段代码中，我们使用了 el-tooltip 包裹了一个问号图标，并设置了相关属性：

• effect="dark"：将提示框的主题风格设为暗色。
• content="客户对本单的扣款"：定义提示框的内容，即用户悬停在问号图标上时显示的信息。
• placement="left"：将提示框放置在问号图标的左侧。

通过这样的实现，用户在操作表单时可以方便地获取关于表单项的额外信息，提高了整体用户体验。

实际效果如下：

slot的作用详解

在Vue.js中， 是一种特殊的标签，用于在父组件中插入子组件的内容。它允许父组件将额外的内容传递到子组件中，使得子组件变得更加灵活和可重用。通过，可以在子组件中定义一些占位符，然后在父组件中填充这些占位符的内容。

1. 基本用法

考虑一个简单的组件示例，比如一个自定义的按钮组件：

<template>
  <button class="custom-button">
    
    <slot>slot>
  button>
template>
1
2
3
4
5
6
7

在这个例子中， 就是一个插槽，表示在这里可以插入父组件传递进来的内容。如果父组件没有传递任何内容，那么这个插槽就会显示默认的按钮内容。

在父组件中使用这个自定义按钮：

<template>
  <div>
    <Button>Click meButton>
  div>
template>

<script>
import Button from './Button.vue';

export default {
  components: {
    Button
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在上述例子中， 组件中的 会被替换为父组件中传递进来的内容，也就是 “Click me”。

2. 具名插槽

有时候，可能希望在子组件中定义多个插槽，以便更精细地控制传递进来的内容。这时可以使用具名插槽。

<template>
  <div class="card">
    <div class="header">
      
      <slot name="header">slot>
    div>
    <div class="content">
      
      <slot>slot>
    div>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13

在父组件中使用具名插槽：

<template>
  <div>
    <Card>
      
      <template v-slot:header>
        <h2>Titleh2>
      template>
      
      
      <p>Card content goes here.p>
    Card>
  div>
template>

<script>
import Card from './Card.vue';

export default {
  components: {
    Card
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这个例子中，通过