使用vue3+ts+setup语法糖+antdesign编写一个弹出框padding为10px,弹出框四边圆角为15px,标题为添加网址,另起一行有两个输入框一个按钮,左边输入框占四分之一四边圆角为10px,右边输入框占四分之二四边圆角为10px,按钮为白色字体蓝色按钮四边圆角为10px,另起一行标题为百度产品,另起一行写一个圆角为10px宽高为40px图标图标内容为新闻,图标旁有新闻两个字与图标同行都上下居中,并且一行有五个这个的图标和文字,编写以上要求的弹出框
时间: 2024-02-16 22:05:24 浏览: 82
好的,以下是您所需的代码:
```vue
<template>
<a-modal :visible="visible" :title="title" @cancel="handleCancel">
<div style="padding: 10px; border-radius: 15px">
<div style="display: flex; align-items: center;">
<div style="flex: 1; border-radius: 10px; background-color: #f5f5f5; padding: 5px;">
<a-input placeholder="请输入" />
</div>
<div style="flex: 2; margin-left: 10px; border-radius: 10px; background-color: #f5f5f5; padding: 5px;">
<a-input placeholder="请输入" />
</div>
<a-button style="border-radius: 10px; margin-left: 10px; background-color: #1890ff; color: #fff;">提交</a-button>
</div>
<div style="margin-top: 10px;">百度产品</div>
<div style="display: flex; align-items: center; justify-content: space-between;">
<div v-for="index in 5" :key="index" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background-color: #f5f5f5;">
<a-icon type="read" style="font-size: 20px; color: #1890ff; margin-right: 5px;" />
<span>新闻</span>
</div>
</div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Modal, Input, Button, Icon } from 'ant-design-vue';
export default defineComponent({
components: {
'a-modal': Modal,
'a-input': Input,
'a-button': Button,
'a-icon': Icon,
},
props: {
visible: Boolean,
},
emits: ['cancel'],
setup(props, { emit }) {
const title = '添加网址';
const handleCancel = () => {
emit('cancel');
};
return {
title,
handleCancel,
};
},
});
</script>
```
注意,由于 Ant Design Vue 的样式问题,可能需要在全局引入样式才能正常显示圆角和背景颜色等样式。
另外,如果您需要更改输入框和按钮的样式,可以在对应的 `<a-input>` 和 `<a-button>` 组件上添加 `style` 属性进行调整。
阅读全文