要在包含多个 `vxe
-input` 输入框和一个 `vxe
-button` 按钮的 `card` 前面添加两个单选按钮，可以按照以下步骤操作：
### 1. 安装依赖
确保已经安装了 `vxe
-table` 和 `element
-plus`（假设使用 `element
-plus` 的 `card` 组件），如果未安装，可以使用以下命令进行安装：
```bash
npm install vxe
-table element
-plus
```
### 2. 创建 Vue 组件
以下是一个示例代码，展示了如何实现上述需求：
```vue
<template>
<div>
<!
-- 两个单选按钮
-->
<div>
<input type="radio" id="option1" value="option1" v
-model="selectedOption">
<label for="option1">选项 1</label>
<input type="radio" id="option2" value="option2" v
-model="selectedOption">
<label for="option2">选项 2</label>
</div>
<!
-- card 组件
-->
<el
-card>
<!
-- 多个 vxe
-input 输入框
-->
<vxe
-input v
-model="inputValue1" placeholder="输入框 1"></vxe
-input>
<vxe
-input v
-model="inputValue2" placeholder="输入框 2"></vxe
-input>
<!
-- vxe
-button 按钮
-->
<vxe
-button @click="handleClick">点击按钮</vxe
-button>
</el
-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ElCard } from 'element
-plus';
import 'element
-plus/dist/index.css';
import 'vxe
-table/lib/style.css';
// 定义响应式数据
const selectedOption = ref('option1');
const inputValue1 = ref('');
const inputValue2 = ref('');
// 按钮点击事件处理函数
const handleClick = () => {
console.log('按钮被点击了');
console.log('选中的选项：', selectedOption.value);
console.log('输入框 1 的值：', inputValue1.value);
console.log('输入框 2 的值：', inputValue2.value);
};
</script>
<style scoped>
/* 可以在这里添加自定义样式 */
</style>
```
### 3. 代码解释
- **单选按钮**：使用 HTML 的 `<input type="radio">` 元素创建两个单选按钮，并使用 `v
-model` 指令绑定到 `selectedOption` 变量，确保同一时间只有一个选项可以被选中。
- **card 组件**：使用 `element
-plus` 的 `ElCard` 组件包裹多个 `vxe
-input` 输入框和一个 `vxe
-button` 按钮。
- **输入框和按钮**：使用 `vxe
-input` 组件创建输入框，使用 `vxe
-button` 组件创建按钮，并为按钮绑定点击事件处理函数 `handleClick`。
### 4. 使用组件
在需要使用该组件的地方引入并使用：
```vue
<template>
<div>
<MyComponent />
</div>
</template>
<script setup>
import MyComponent from './MyComponent.vue';
</script>
```
扫一扫
5188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
