docs: change slot to # (#5858)

* docs(SwipeCell): change "slot" to "v-slot"

* docs(SwipeCell): change `v-slot` to`#`

* docs(cell): change `slot` to `#`

* docs(checkbox): change `slot` to `v-slot`

* docs(field): change `slot` to `v-slot`

* docs(checkbox): remove wrong comment

* docs(radio): change `slot` to `#`

* docs(search): change `slot` to `#`

* docs(slider): change `slot` to `#`

* docs(switch): change `slot` to `#`

* docs(PullRefresh): change `slot` to `#`

* docs(collapse): change `slot` to `#`

* docs(panel): change `slot` to `#`

* docs(swipe): change `slot` to `#`

* docs(navbar): change `slot` to `#`

* docs(tab): change `slot` to `#`

* docs(tabber): change `slot` to `#`

* docs(TreeSelect): change `slot` to `#`

* docs(card): change `slot` to `#`

* docs(submitBar): change `slot` to `#`

* docs(sku): change `slot` to `#` unsure

* docs(cell): delete waste blank line

* docs(panel): fix indentation

* docs(PullRefresh): change "count" to "Refresh Count"

* docs(radio): delete waste blank line

* docs(search): move props above the event

* docs(submitBar): delete waste `<span>`

* docs(swipCell): delete waste blank line

* docs(tabbar): merge `<img>` into one line
This commit is contained in:
lmx-Hexagram
2020-03-20 14:12:00 +08:00
committed by GitHub
parent ea159a08b3
commit f36961fe29
36 changed files with 277 additions and 159 deletions

View File

@@ -58,13 +58,21 @@ Use icon slot to custom icon
```html
<van-checkbox v-model="checked">
Custom Icon
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
customize icon
<template #icon="props">
<img
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
```
```js
@@ -178,7 +186,9 @@ export default {
:title="`Checkbox ${item}`"
@click="toggle(index)"
>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>

View File

@@ -69,20 +69,30 @@ export default {
```html
<van-checkbox v-model="checked">
自定义图标
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
<template #icon="props">
<img
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
```
```js
export default {
data() {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
return {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
}
```
@@ -196,7 +206,9 @@ export default {
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -206,7 +218,7 @@ export default {
export default {
data() {
return {
list: ['a', 'b']
list: ['a', 'b'],
result: []
};
},