一. 分隔线 v-divider

1. 水平分隔线

<v-divider></v-divider>

2. 分隔线向右缩进 inset

<v-divider inset></v-divider>

3. 垂直分隔线 vertical

<template>
  <v-toolbar dark dense>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-divider vertical color="grey"></v-divider>
    <v-btn plain class="mx-1">text</v-btn>
  </v-toolbar>
</template>

二. 副标题 v-subheader

1. 副标题

<v-subheader>副标题</v-subheader>

2. 向右缩进 inset

<v-subheader inset>副标题</v-subheader>

三. 纸片 chip

v-chip组件用于传送小信息。 使用close属性，纸片将变为交互式，允许用户进行交互。

<v-chip color="lime">纸片1</v-chip>

1. 纸片的颜色

纸片设置了color和text-color的颜色

<v-chip color="red" text-color="white">OK纸片</v-chip>

2. 纸片的样式

(1). 移除圆形边缘 (label )

<v-chip label color="lime">纸片1</v-chip>

(2). 轮廓线 (outlined)

<v-chip outlined color="blue">纸片1</v-chip>

(3). 大小纸片 (large/small )

<v-chip dark large color="pink">尺寸大的纸片</v-chip>
<v-chip dark small color="pink">尺寸小的纸片</v-chip>

(4). 纸片的尺寸

  <v-container>
    <v-chip class="ma-2" x-small> x-small chip </v-chip>
    <v-chip class="ma-2" small> small chip </v-chip>
    <v-chip class="ma-2"> Default </v-chip>
    <v-chip class="ma-2" large> large chip </v-chip>
    <v-chip class="ma-2" x-large> x-large chip </v-chip>
  </v-container>

3. 可关闭纸片 close

<template>
  <v-container>
    <v-chip :active="chip1"  close @click:close="chip1 = false">纸片1</v-chip>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      chip1: true,
    };
  },
};
</script>

还可以自定义删除按钮 close-icon

  <v-container>
    <v-chip close close-icon="mdi-delete" color="red">OK纸片</v-chip>
    <v-chip close close-icon="mdi-close-outline" color="red">OK纸片</v-chip>
  </v-container>

4. 可拖拽 draggable

5. 禁用纸片 disabled

6. 带图标的纸片

    <v-chip filter dark color="red" :active="true">
      <v-icon left> mdi-label </v-icon>OK纸片
    </v-chip>

7. 超链接 link

  <v-container>
    <v-chip
      filter
      dark
      color="indigo"
      :active="true"
      link
      href="https://baidu.com/"
    >
      <v-icon left> mdi-label </v-icon>百度一下
    </v-chip>
  </v-container>

四. 提示 v-tooltip

当用户悬停在元素上时， v-tooltip 组件可用于传递信息。 您还可以通过 v-model 来控制提示的显示。 当激活时，提示将显示用于标识元素的文本，例如其功能的描述。

1. tooltip的插槽

要跳出tooltip的控件,必须插入在tooltip的activator插槽里

<template>
  <v-container>
    <v-tooltip right>
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on"> 按钮 </v-btn>
      </template>
      <span>这是一个酷炫的提示</span>
    </v-tooltip>
  </v-container>
</template>

2. 提示的位置

left,right,top,bottom

3. 值控制显示

<template>
  <v-container>
    <v-tooltip v-model="show" bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on"> 按钮 </v-btn>
      </template>
      <span>这是一个酷炫的提示</span>
    </v-tooltip>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

4. 延迟弹出 / 关闭 close-delay

    <v-tooltip bottom :open-delay=500 :close-delay=500>
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on"> 按钮 </v-btn>
      </template>
      <span>这是一个酷炫的提示</span>
    </v-tooltip>

五. 悬停 v-hover

v-hover 组件为处理任何组件的悬停状态提供了一个干净的接口。

v-hover组件是一个包装器，它应该只包含一个子元素并且可以在悬停时可以触发事件。

1. v-hover 如何正常工作

    <v-hover v-slot="{ hover }">
      <v-card :elevation="hover ? 4 : 2"> 123 </v-card>
    </v-hover>
    <v-hover v-slot="{ hover }">
      <v-avatar :size="hover ? 80 : 40" color="red">
        <img src="~assets/head.jpg" alt="alt" />
      </v-avatar>
    </v-hover>

2. hover延时 open-delay/close-delay

单位ms

    <v-hover open-delay="300" close-delay="300" v-slot="{ hover }">
      <v-avatar :size="hover ? 80 : 40">
        <img src="~assets/head.jpg" alt="alt" />
      </v-avatar>
    </v-hover>