You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/input-number/demo/addon.vue

65 lines
1.7 KiB

<docs>
---
order: 2
title:
zh-CN: 前置/后置标签
en-US: Pre / Post tab
---
## zh-CN
用于配置一些固定组合
## en-US
Using pre & post tabs example.
</docs>
<template>
<a-space direction="vertical">
<a-input-number v-model:value="value1" addon-before="+" addon-after="$"></a-input-number>
<a-input-number v-model:value="value2">
<template #addonBefore>
<a-select v-model:value="addonBeforeValue" style="width: 60px">
<a-select-option value="add">+</a-select-option>
<a-select-option value="minus">-</a-select-option>
</a-select>
</template>
<template #addonAfter>
<a-select v-model:value="addonAfterValue" style="width: 60px">
<a-select-option value="USD">$</a-select-option>
<a-select-option value="EUR"></a-select-option>
<a-select-option value="GBP">£</a-select-option>
<a-select-option value="CNY">¥</a-select-option>
</a-select>
</template>
</a-input-number>
<a-input-number v-model:value="value3">
<template #addonAfter><SettingOutlined /></template>
</a-input-number>
<a-input-number v-model:value="value4">
<template #addonAfter>
<a-cascader placeholder="cascader" style="width: 150px" />
</template>
</a-input-number>
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: { SettingOutlined },
setup() {
return {
value1: ref(100),
value2: ref(100),
value3: ref(100),
value4: ref(100),
addonBeforeValue: ref('add'),
addonAfterValue: ref('USD'),
};
},
});
</script>