docs(Search): update action slot demo (#10133)

This commit is contained in:
neverland 2021-12-30 21:22:28 +08:00 committed by GitHub
parent 7831553bee
commit ac85f82f09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 3 deletions

View File

@ -107,11 +107,29 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
@search="onSearch" @search="onSearch"
> >
<template #action> <template #action>
<div @click="onSearch">Search</div> <div @click="onClickButton">Search</div>
</template> </template>
</van-search> </van-search>
``` ```
```js
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
setup() {
const value = ref('');
const onSearch = (val) => Toast(val);
const onClickButton = () => Toast(value.value);
return {
value,
onSearch,
onClickButton,
};
},
};
```
## API ## API
### Props ### Props

View File

@ -119,11 +119,29 @@ export default {
@search="onSearch" @search="onSearch"
> >
<template #action> <template #action>
<div @click="onSearch">搜索</div> <div @click="onClickButton">搜索</div>
</template> </template>
</van-search> </van-search>
``` ```
```js
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
setup() {
const value = ref('');
const onSearch = (val) => Toast(val);
const onClickButton = () => Toast(value.value);
return {
value,
onSearch,
onClickButton,
};
},
};
```
## API ## API
### Props ### Props

View File

@ -34,6 +34,7 @@ const value6 = ref('');
const onSearch = (val: string) => Toast(val); const onSearch = (val: string) => Toast(val);
const onCancel = () => Toast(t('cancel')); const onCancel = () => Toast(t('cancel'));
const onClickButton = () => Toast(value6.value);
</script> </script>
<template> <template>
@ -83,7 +84,7 @@ const onCancel = () => Toast(t('cancel'));
@search="onSearch" @search="onSearch"
> >
<template #action> <template #action>
<div @click="onSearch">{{ t('search') }}</div> <div @click="onClickButton">{{ t('search') }}</div>
</template> </template>
</van-search> </van-search>
</demo-block> </demo-block>