瀏覽代碼

remove collapse scoped slot title && add named slot title

baiyaaaaa 8 年之前
父節點
當前提交
ef2e3c697a
共有 3 個文件被更改,包括 9 次插入9 次删除
  1. 4 4
      examples/docs/en-US/collapse.md
  2. 4 4
      examples/docs/zh-CN/collapse.md
  3. 1 1
      packages/collapse/src/collapse-item.vue

+ 4 - 4
examples/docs/en-US/collapse.md

@@ -94,14 +94,14 @@ In accordion mode, only one panel can be expanded at once
 
 ### Custom title
 
-Besides using the `title` attribute, you can customize panel title with scoped slots, which makes adding custom content, e.g. icons, possible.
+Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
 
 :::demo
 ```html
 <el-collapse accordion>
-  <el-collapse-item title="Consistency" name="1">
-    <template slot="title" scope="props">
-      {{props.title}}<i class="header-icon el-icon-information"></i>
+  <el-collapse-item name="1">
+    <template slot="title">
+      Consistency<i class="header-icon el-icon-information"></i>
     </template>
     <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
     <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>

+ 4 - 4
examples/docs/zh-CN/collapse.md

@@ -103,14 +103,14 @@
 
 ### 自定义面板标题
 
-除了可以通过 `title` 属性以外,还可以通过作用域插槽来实现自定义面板的标题内容,以实现增加图标等效果。
+除了可以通过 `title` 属性以外,还可以通过具名 `slot` 来实现自定义面板的标题内容,以实现增加图标等效果。
 
 :::demo
 ```html
 <el-collapse accordion>
-  <el-collapse-item title="一致性 Consistency">
-    <template slot="title" scope="props">
-      {{props.title}}<i class="header-icon el-icon-information"></i>
+  <el-collapse-item>
+    <template slot="title">
+      一致性 Consistency<i class="header-icon el-icon-information"></i>
     </template>
     <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
     <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>

+ 1 - 1
packages/collapse/src/collapse-item.vue

@@ -2,7 +2,7 @@
   <div class="el-collapse-item" :class="{'is-active': isActive}">
     <div class="el-collapse-item__header" @click="handleHeaderClick">
       <i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
-      <slot name="title" :title="title">{{title}}</slot>
+      <slot name="title">{{title}}</slot>
     </div>
     <div class="el-collapse-item__wrap" ref="contentWrap">
       <div class="el-collapse-item__content" ref="content">