Ant Design Vue 组件或图标的引入和使用_ant design vue图标怎么用

// 组件或图标引入
<script lang="ts">
	import { defineComponent, reactive, ref } from 'vue';
	import { Tabs, Select, SelectOption, Input, InputGroup, Form, Button } from 'ant-design-vue';
	import { StepForwardOutlined } from '@ant-design/icons-vue';

	export default defineComponent({
	    name: '',
	    components: {
			ATabs: Tabs,
      		ATabPane: Tabs.TabPane,
	        Select,
	        SelectOption,
	        Input,
	        InputGroup,
	        AFormItemRest: Form.ItemRest,
	        Button,
	        StepForwardOutlined,
		}
	
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

	// 局部html代码
	<template #queryKey="{ model, field }">
	<AFormItemRest>
		<InputGroup compact class="free-input-group">
			<Select
				v-model:value="model['queryKeyType']"
				class="free-select"
				@change="queryKeyTypeChange"
			>
				<SelectOption :value="0">修饰名称</SelectOption>
				<SelectOption :value="1">英文标识</SelectOption>
			</Select>
			<Input v-model:value="model[field]" class="free-input" placeholder="请输入" />
		</InputGroup>
	</AFormItemRest>
	</template>
	<template #btn>
		<Button type="default" @click="closeDrawer">取 消</Button>
		<Button type="primary" @click="handleSubmit">确 认</Button>
	</template>
	<template #iconBtn>
		<StepForwardOutlined style="color: red; font-size: 33px" />
	</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23