mirror of
https://github.com/youzan/vant.git
synced 2025-10-21 11:17:41 +00:00
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:
@@ -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>
|
||||
|
@@ -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: []
|
||||
};
|
||||
},
|
||||
|
Reference in New Issue
Block a user