關於 Vue.js 3.0 UI Library element-plus 官網部分 Demo 失效彙總

Element Plus A Vue.js 3.0 UI Library.

1、Card 卡片

Card 卡片之基礎 Demo - header 失效

失效緣由

含有 heder 的示例代碼中，設置 header 的方式是採用的已廢棄的 slot attribute 語法。

<div slot="header">
    //...
</div>

解決方式

在向具名插槽提供內容的時候，在 <template> 元素上使用 v-slot 指令，並以 v-slot 的參數的形式提供其名稱。

<el-card shadow="shadow">
  <template v-slot:header>
    // ...
  </template>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表內容 ' + o }}
  </div>
</el-card>

備註：v-slot:header 能夠簡寫成 #header 。

2、NavMenu 導航菜單

全部 Demo 失效

失效緣由

同上，使用具名插槽的地方採用的是已廢棄的 slot attribute 語法。

<template slot="title">
  <i class="el-icon-location"></i>導航一
</template>
<span slot="title">分組一</span>
...

解決方式

在向具名插槽提供內容的時候，在 <template> 元素上使用 v-slot 指令，並以 v-slot 的參數的形式提供其名稱。

<template v-slot:title>
  <i class="el-icon-location"></i>
    <span>導航一</span>
</template>
<span slot="title">分組一</span>
...

3、Transfer 穿梭框

目前官網狀態是控制檯報錯， 頁面空白。

Transfer 穿梭框之可自定義 Demo - 使用 scoped-slot 自定義數據項失效

失效緣由

使用 scoped-slot 自定義數據項的示例代碼中，使用了已被 3.0 廢棄的 slot-scope attribute 的語法。

...
<p>使用 scoped-slot 自定義數據項</p>
<div style="text-align: center">
  <el-transfer
    v-model="value4"
    filterable
    :left-default-checked="[2, 3]"
    :right-default-checked="[1]"
    :titles="['Source', 'Target']"
    :button-texts="['到左邊', '到右邊']"
    @change="handleChange"
    :data="data">
    <!-- 下面的的做用域插槽語法被遺棄 -->
    <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
    ...
  </el-transfer>
</div>

解決方式

使用帶值的 v-slot 來定義咱們提供的插槽 prop 的名字。

<p>使用 scoped-slot 自定義數據項</p>
<div style="text-align: center">
  <el-transfer
    v-model="value4"
    filterable
    :left-default-checked="[2, 3]"
    :right-default-checked="[1]"
    :titles="['Source', 'Target']"
    :button-texts="['到左邊', '到右邊']"
    @change="handleChange"
    :data="data">
    <!-- 下面的是修改後的語法 -->
    <template v-slot:default="slotProps">
      <span>{{ slotProps.option.key }} - {{ slotProps.option.label }}</span>
    </template> 
    ...
  </el-transfer>
</div>

上邊代碼中的做用域插槽語法能夠簡寫成參數解構的形式：

<template v-slot="{ option }">
  <span>{{ option.key }} - {{ option.label }}</span>
</template>

備註：由於源碼實現中設置的 key 爲 option ，因此參數必須爲 { option }。

4、 Upload 上傳

目前官網狀態是控制檯報錯， 頁面空白。

Upload 上傳之文件縮略圖 Demo - 使用 scoped-slot 去設置縮略圖模版

失效緣由

同上，使用 scoped-slot 自定義數據項的示例代碼中，使用了已被 3.0 廢棄的 slot-scope attribute 的語法。

<div slot="file" slot-scope="{file}">
  ...
<div>

解決方式

使用帶值的 v-slot 來定義咱們提供的插槽 prop 的名字。

<template v-slot:file v-slot="{ file }">
  ...
</template>

5、其餘問題

關於 InfiniteScroll 無限滾動

1. 無限滾動卡頓
2. ...