mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
import { Toast } from '../../toast';
|
|
|
|
const t = useTranslate({
|
|
'zh-CN': {
|
|
label: '地址',
|
|
disabled: '禁用搜索框',
|
|
inputAlign: '搜索框内容对齐',
|
|
background: '自定义背景色',
|
|
placeholder: '请输入搜索关键词',
|
|
customButton: '自定义按钮',
|
|
listenToEvents: '事件监听',
|
|
},
|
|
'en-US': {
|
|
label: 'Address',
|
|
disabled: 'Disabled',
|
|
inputAlign: 'Input Align',
|
|
background: 'Custom Background Color',
|
|
placeholder: 'Placeholder',
|
|
customButton: 'Custom Action Button',
|
|
listenToEvents: 'Listen to Events',
|
|
},
|
|
});
|
|
|
|
const value1 = ref('');
|
|
const value2 = ref('');
|
|
const value3 = ref('');
|
|
const value4 = ref('');
|
|
const value5 = ref('');
|
|
const value6 = ref('');
|
|
|
|
const onSearch = (val: string) => Toast(val);
|
|
const onCancel = () => Toast(t('cancel'));
|
|
</script>
|
|
|
|
<template>
|
|
<demo-block :title="t('basicUsage')">
|
|
<van-search v-model="value1" :placeholder="t('placeholder')" />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('listenToEvents')">
|
|
<form action="/">
|
|
<van-search
|
|
v-model="value5"
|
|
:placeholder="t('placeholder')"
|
|
show-action
|
|
@search="onSearch"
|
|
@cancel="onCancel"
|
|
/>
|
|
</form>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('inputAlign')">
|
|
<van-search
|
|
v-model="value4"
|
|
:placeholder="t('placeholder')"
|
|
input-align="center"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('disabled')">
|
|
<van-search v-model="value3" :placeholder="t('placeholder')" disabled />
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('background')">
|
|
<van-search
|
|
v-model="value2"
|
|
:placeholder="t('placeholder')"
|
|
shape="round"
|
|
background="#4fc08d"
|
|
/>
|
|
</demo-block>
|
|
|
|
<demo-block :title="t('customButton')">
|
|
<van-search
|
|
v-model="value6"
|
|
show-action
|
|
:label="t('label')"
|
|
:placeholder="t('placeholder')"
|
|
@search="onSearch"
|
|
>
|
|
<template #action>
|
|
<div @click="onSearch">{{ t('search') }}</div>
|
|
</template>
|
|
</van-search>
|
|
</demo-block>
|
|
</template>
|