【Vue.js】Vue.js组件库Element中的下拉菜单、步骤条、对话框和文字提示

不念不忘少年蓝@ 2022-12-03 12:55 1327阅读 0赞

## 1、Dropdown 下拉菜单 ##

将动作或菜单折叠到下拉菜单中。

#### 基础用法 ####

移动到下拉菜单上，展开更多操作。  
![20200903152709271.png_pic_center][]

> 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。

<el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style>

#### 触发对象 ####

可使用按钮触发下拉菜单。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

> 设置split-button属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为true即可。

<el-dropdown>
      <el-button type="primary">
        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown split-button type="primary" @click="handleClick">
      更多菜单
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <style> .el-dropdown { vertical-align: top; } .el-dropdown + .el-dropdown { margin-left: 15px; } .el-icon-arrow-down { font-size: 12px; } </style>
    
    <script> export default { methods: { handleClick() { alert('button click'); } } } </script>

#### 触发方式 ####

可以配置 click 激活或者 hover 激活。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]

> 在trigger属性设置为click即可。

<el-row class="block-col-2">
      <el-col :span="12">
        <span class="demonstration">hover 激活</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="12">
        <span class="demonstration">click 激活</span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    
    <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } .demonstration { display: block; color: #8492a6; font-size: 14px; margin-bottom: 20px; } </style>

#### 菜单隐藏方式 ####

可以hide-on-click属性来配置。  
![20200903154052146.png_pic_center][]

> 下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。

<el-dropdown :hide-on-click="false">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style>

#### 指令事件 ####

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。  
![20200903154728804.png_pic_center][]

<el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">黄金糕</el-dropdown-item>
        <el-dropdown-item command="b">狮子头</el-dropdown-item>
        <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
        <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <style> .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } </style>
    
    <script> export default { methods: { handleCommand(command) { this.$message('click on item ' + command); } } } </script>

#### 不同尺寸 ####

Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。  
![20200903154903657.png_pic_center][]

> 额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

<el-dropdown split-button type="primary">
      默认尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <el-dropdown size="medium" split-button type="primary">
      中等尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <el-dropdown size="small" split-button type="primary">
      小型尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    <el-dropdown size="mini" split-button type="primary">
      超小尺寸
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

#### Dropdown Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>菜单按钮类型，同 Button 组件(只在split-button为 true 的情况下有效)</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>菜单尺寸，在split-button为 true 的情况下也对触发按钮生效</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>split-button</td> 
   <td>下拉触发元素呈现为按钮组</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>placement</td> 
   <td>菜单弹出位置</td> 
   <td>string</td> 
   <td>top/top-start/top-end/bottom/bottom-start/bottom-end</td> 
   <td>bottom-end</td> 
  </tr> 
  <tr> 
   <td>trigger</td> 
   <td>触发下拉的行为</td> 
   <td>string</td> 
   <td>hover, click</td> 
   <td>hover</td> 
  </tr> 
  <tr> 
   <td>hide-on-click</td> 
   <td>是否在点击菜单项后隐藏菜单</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>show-timeout</td> 
   <td>展开下拉菜单的延时（仅在 trigger 为 hover 时有效）</td> 
   <td>number</td> 
   <td>—</td> 
   <td>250</td> 
  </tr> 
  <tr> 
   <td>hide-timeout</td> 
   <td>收起下拉菜单的延时（仅在 trigger 为 hover 时有效）</td> 
   <td>number</td> 
   <td>—</td> 
   <td>150</td> 
  </tr> 
  <tr> 
   <td>tabindex</td> 
   <td>Dropdown 组件的 tabindex</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
 </tbody> 
</table>

#### Dropdown Slots ####

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—</td> 
   <td>触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件</td> 
  </tr> 
  <tr> 
   <td>dropdown</td> 
   <td>下拉列表，通常是<code>&lt;el-dropdown-menu&gt;</code>组件</td> 
  </tr> 
 </tbody> 
</table>

#### Dropdown Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click</td> 
   <td>split-button 为 true 时，点击左侧按钮的回调</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>command</td> 
   <td>点击菜单项触发的事件回调</td> 
   <td>dropdown-item 的指令</td> 
  </tr> 
  <tr> 
   <td>visible-change</td> 
   <td>下拉框出现/隐藏时触发</td> 
   <td>出现则为 true，隐藏则为 false</td> 
  </tr> 
 </tbody> 
</table>

#### Dropdown Menu Item Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>command</td> 
   <td>指令</td> 
   <td>string/number/object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>divided</td> 
   <td>显示分割线</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>图标类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 2、Steps 步骤条 ##

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

#### 基础用法 ####

简单的步骤条。  
![20200903155813467.png_pic_center][]

> 设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Number，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

<el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>
    
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    
    <script> export default { data() { return { active: 0 }; }, methods: { next() { if (this.active++ > 2) this.active = 0; } } } </script>

#### 含状态步骤条 ####

每一步骤显示出该步骤的状态。  
![2020090315594758.png_pic_center][]

> 也可以使用title具名分发，可以用slot的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。

<el-steps :space="200" :active="1" finish-status="success">
      <el-step title="已完成"></el-step>
      <el-step title="进行中"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

#### 有描述的步骤条 ####

每个步骤有其对应的步骤状态描述。  
![20200903160117113.png_pic_center][]

<el-steps :active="1">
      <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤 3" description="这段就没那么长了"></el-step>
    </el-steps>

#### 居中的步骤条 ####

标题和描述都将居中。  
![2020090316022458.png_pic_center][]

<el-steps :active="2" align-center>
      <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
    </el-steps>

#### 带图标的步骤条 ####

步骤条内可以启用各种自定义的图标。  
![20200903160345539.png_pic_center][]

> 通过icon属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名slot来使用自定义的图标。

<el-steps :active="1">
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>

#### 竖式步骤条 ####

竖直方向的步骤条。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

> 只需要在el-steps元素中设置direction属性为vertical即可。

#### 简洁风格的步骤条 ####

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。  
![20200903160628854.png_pic_center][]

<el-steps :active="1" simple>
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>
    
    <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
      <el-step title="步骤 1" ></el-step>
      <el-step title="步骤 2" ></el-step>
      <el-step title="步骤 3" ></el-step>
    </el-steps>

#### Steps Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>space</td> 
   <td>每个 step 的间距，不填写将自适应间距。支持百分比</td> 
   <td>number / string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>direction</td> 
   <td>显示方向</td> 
   <td>string</td> 
   <td>vertical/horizontal</td> 
   <td>horizontal</td> 
  </tr> 
  <tr> 
   <td>active</td> 
   <td>设置当前激活步骤</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>process-status</td> 
   <td>设置当前步骤的状态</td> 
   <td>string</td> 
   <td>wait / process / finish / error / success</td> 
   <td>process</td> 
  </tr> 
  <tr> 
   <td>finish-status</td> 
   <td>设置结束步骤的状态</td> 
   <td>string</td> 
   <td>wait / process / finish / error / success</td> 
   <td>finish</td> 
  </tr> 
  <tr> 
   <td>align-center</td> 
   <td>进行居中对齐</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>simple</td> 
   <td>是否应用简洁风格</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Step Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>description</td> 
   <td>描述性文字</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>图标</td> 
   <td>传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入</td> 
   <td>string</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>设置当前步骤的状态，不设置则根据 steps 确定状态</td> 
   <td>wait / process / finish / error / success</td> 
   <td>-</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### Step Slot ####

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>icon</td> 
   <td>自定义图标</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>自定义标题</td> 
  </tr> 
  <tr> 
   <td>description</td> 
   <td>自定义描述性文字</td> 
  </tr> 
 </tbody> 
</table>

## 3、Dialog 对话框 ##

在保留当前页面状态的情况下，告知用户并承载相关操作。

#### 基本用法 ####

Dialog 弹出一个对话框，适合需要定制性更大的场景。  
![在这里插入图片描述][20200903161542742.png_pic_center]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]

> 需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    
    <script> export default { data() { return { dialogVisible: false }; }, methods: { handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => { }); } } }; </script>

> before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

#### 自定义内容 ####

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。  
![2020090316161599.png_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7][]

<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
    
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
    
    
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    
    <script> export default { data() { return { gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, dialogFormVisible: false, form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, formLabelWidth: '120px' }; } }; </script>

#### 嵌套的 Dialog ####

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。  
![20200903161954267.png_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9][]

> 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

<template>
      <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
      
      <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
        <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
        </div>
      </el-dialog>
    </template>
    
    <script> export default { data() { return { outerVisible: false, innerVisible: false }; } } </script>

#### 居中布局 ####

标题和底部可水平居中。  
![20200903162200940.png_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 10][]

> 将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。

<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
    
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    
    <script> export default { data() { return { centerDialogVisible: false }; } }; </script>

> Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

> 如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible</td> 
   <td>是否显示 Dialog，支持 .sync 修饰符</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>Dialog 的标题，也可通过具名 slot （见下表）传入</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>Dialog 的宽度</td> 
   <td>string</td> 
   <td>—</td> 
   <td>50%</td> 
  </tr> 
  <tr> 
   <td>fullscreen</td> 
   <td>是否为全屏 Dialog</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>Dialog CSS 中的 margin-top 值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>15vh</td> 
  </tr> 
  <tr> 
   <td>modal</td> 
   <td>是否需要遮罩层</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>modal-append-to-body</td> 
   <td>遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>append-to-body</td> 
   <td>Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>lock-scroll</td> 
   <td>是否在 Dialog 出现时将 body 滚动锁定</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>custom-class</td> 
   <td>Dialog 的自定义类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>close-on-click-modal</td> 
   <td>是否可以通过点击 modal 关闭 Dialog</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>close-on-press-escape</td> 
   <td>是否可以通过按下 ESC 关闭 Dialog</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>show-close</td> 
   <td>是否显示关闭按钮</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>before-close</td> 
   <td>关闭前的回调，会暂停 Dialog 的关闭</td> 
   <td>function(done)，done 用于关闭 Dialog</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>是否对头部和底部采用居中布局</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>destroy-on-close</td> 
   <td>关闭时销毁 Dialog 中的元素</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Slot ####

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—</td> 
   <td>Dialog 的内容</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>Dialog 标题区的内容</td> 
  </tr> 
  <tr> 
   <td>footer</td> 
   <td>Dialog 按钮操作区的内容</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>open</td> 
   <td>Dialog 打开的回调</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>opened</td> 
   <td>Dialog 打开动画结束时的回调</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>Dialog 关闭的回调</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>closed</td> 
   <td>Dialog 关闭动画结束时的回调</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 4、Tooltip 文字提示 ##

常用于展示鼠标 hover 时的提示信息。

#### 基础用法 ####

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 11][]

> 使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<div class="box">
      <div class="top">
        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
          <el-button>上左</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
          <el-button>上边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
          <el-button>上右</el-button>
        </el-tooltip>
      </div>
      <div class="left">
        <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
          <el-button>左上</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
          <el-button>左边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
          <el-button>左下</el-button>
        </el-tooltip>
      </div>
    
      <div class="right">
        <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
          <el-button>右上</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
          <el-button>右边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
          <el-button>右下</el-button>
        </el-tooltip>
      </div>
      <div class="bottom">
        <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
          <el-button>下左</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
          <el-button>下边</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
          <el-button>下右</el-button>
        </el-tooltip>
      </div>
    </div>
    
    <style> .box { width: 400px; .top { text-align: center; } .left { float: left; width: 60px; } .right { float: right; width: 60px; } .bottom { clear: both; text-align: center; } .item { margin: 4px; } .left .el-tooltip__popper, .right .el-tooltip__popper { padding: 8px 10px; } } </style>

#### 主题 ####

Tooltip 组件提供了两个不同的主题：dark和light。  
![20200903164107678.png_pic_center][]  
![20200903164116660.png_pic_center][]

> 通过设置effect属性来改变主题，默认为dark。

<el-tooltip content="Top center" placement="top">
      <el-button>Dark</el-button>
    </el-tooltip>
    <el-tooltip content="Bottom center" placement="bottom" effect="light">
      <el-button>Light</el-button>
    </el-tooltip>

#### 更多 Content ####

展示多行文本或者是设置文本内容的格式。  
![20200903164249109.png_pic_center][]

> 用具名 slot 分发content，替代tooltip中的content属性。

<el-tooltip placement="top">
      <div slot="content">多行信息<br/>第二行信息</div>
      <el-button>Top center</el-button>
    </el-tooltip>

#### 高级扩展 ####

除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：  
transition 属性可以定制显隐的动画效果，默认为fade-in-linear。 如果需要关闭 tooltip 功能，disabled 属性可以满足这个需求，它接受一个Boolean，设置为true即可。  
事实上，这是基于 Vue-popper 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。 当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。  
![20200903164419856.png_pic_center][]

<template>
      <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
        <el-button @click="disabled = !disabled">点击{
       {disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
      </el-tooltip>
    </template>
    <script> export default { data() { return { disabled: false }; } }; </script>

> tooltip 内不支持 router-link 组件，请使用 vm.$router.push 代替。

> tooltip 内不支持 disabled form 元素，参考MDN，请在 disabled form 元素外层添加一层包裹元素。

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>effect</td> 
   <td>默认提供的主题</td> 
   <td>String</td> 
   <td>dark/light</td> 
   <td>dark</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>显示的内容，也可以通过 slot#content 传入 DOM</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>placement</td> 
   <td>Tooltip 的出现位置</td> 
   <td>String</td> 
   <td>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</td> 
   <td>bottom</td> 
  </tr> 
  <tr> 
   <td>value / v-model</td> 
   <td>状态是否可见</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Tooltip 是否可用</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>offset</td> 
   <td>出现位置的偏移量</td> 
   <td>Number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>transition</td> 
   <td>定义渐变动画</td> 
   <td>String</td> 
   <td>—</td> 
   <td>el-fade-in-linear</td> 
  </tr> 
  <tr> 
   <td>visible-arrow</td> 
   <td>是否显示 Tooltip 箭头，更多参数可见Vue-popper</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>popper-options</td> 
   <td>popper.js 的参数</td> 
   <td>Object</td> 
   <td>参考 popper.js 文档</td> 
   <td>{ boundariesElement: ‘body’, gpuAcceleration: false }</td> 
  </tr> 
  <tr> 
   <td>open-delay</td> 
   <td>延迟出现，单位毫秒</td> 
   <td>Number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>manual</td> 
   <td>手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>为 Tooltip 的 popper 添加类名</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>enterable</td> 
   <td>鼠标是否可进入到 tooltip 中</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>hide-after</td> 
   <td>Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>tabindex</td> 
   <td>Tooltip 组件的 tabindex</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
 </tbody> 
</table>

[20200903152709271.png_pic_center]: /images/20221123/cd1a1faf1c1a4d2da172d2ed0f5bf874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2e0847c42cb7410c98cc309a27580df3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/277dcf86125a4ef5832e02a9a63f1cfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2cb079f6d7da4344b50d8b511a5ee6a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/b3b7e11c2c0a4dbeb98c49ea6cbc8d87.png
[20200903154052146.png_pic_center]: /images/20221123/9156799a5b244b7bb95702475e6e7262.png
[20200903154728804.png_pic_center]: /images/20221123/9fccca691f4f49e39ed957a9b7f3d32c.png
[20200903154903657.png_pic_center]: /images/20221123/84b25a1d0399480d9d47bc80dc241e3a.png
[20200903155813467.png_pic_center]: /images/20221123/187ebc6760f24cf580f305dedccb81b2.png
[2020090315594758.png_pic_center]: /images/20221123/0f4f9779ad83478399cd91f055259db6.png
[20200903160117113.png_pic_center]: /images/20221123/39f4ef76b60140638dd2e416dcbd4196.png
[2020090316022458.png_pic_center]: /images/20221123/8ad80a44ab6349b59bc4d81485686dd0.png
[20200903160345539.png_pic_center]: /images/20221123/13f27c6549cd4b6b883d2997aaf93b58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/022ccfee15c44bb3806b18814c85ee9b.png
[20200903160628854.png_pic_center]: /images/20221123/0060989a84d345ca8d9252cb97197212.png
[20200903161542742.png_pic_center]: /images/20221123/8a415892126f4b82af8be885f563ba3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/0d2b236109804b64b1140842a702ecdb.png
[2020090316161599.png_pic_center]: /images/20221123/613d105f681548a89e0da9cb97fe112f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/91fdc573c3284ff1a598c6f9471ee581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/400bf48cccb4440db3506e7bcc2638f0.png
[20200903161954267.png_pic_center]: /images/20221123/dbfdbe12facb41629525650a2965992f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/f19c65563eea4d368a1ff5cb26d4b132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/eecf7a9916ba4940ad88977fd08d6261.png
[20200903162200940.png_pic_center]: /images/20221123/5815285d685f40e6af5eb75197da2b2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/d78dece61f1e4256b7827dec119d8330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/f33c1a0fadc04890bb6d7690068faf2d.png
[20200903164107678.png_pic_center]: /images/20221123/7bf909f8d64d451697aa7929eacec60e.png
[20200903164116660.png_pic_center]: /images/20221123/82c49bc89b984eb5ba5a4d91e9a4bb15.png
[20200903164249109.png_pic_center]: /images/20221123/cfc74205ee5642608c5bdc3b017507be.png
[20200903164419856.png_pic_center]: /images/20221123/06df4a4873f74771a0f34dffede26add.png