mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 18:54:24 +00:00
104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<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>
|
|
|
|
<script lang="ts">
|
|
import { reactive, toRefs } from 'vue';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
import { Toast } from '../../toast';
|
|
|
|
const i18n = {
|
|
'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',
|
|
},
|
|
};
|
|
|
|
export default {
|
|
setup() {
|
|
const t = useTranslate(i18n);
|
|
const state = reactive({
|
|
value1: '',
|
|
value2: '',
|
|
value3: '',
|
|
value4: '',
|
|
value5: '',
|
|
value6: '',
|
|
});
|
|
|
|
const onSearch = (val: string) => Toast(val);
|
|
const onCancel = () => Toast(t('cancel'));
|
|
|
|
return {
|
|
...toRefs(state),
|
|
t,
|
|
onSearch,
|
|
onCancel,
|
|
};
|
|
},
|
|
};
|
|
</script>
|