用element写一个投票界面

好的，以下是一个简单的投票界面示例，使用Element UI库进行构建。

<template>
  <div class="vote-container">
    <h2>投票</h2>
    <p>请选择你所支持的选项：</p>
    <el-radio-group v-model="selectedOption">
      <el-radio :label="option.label" v-for="option in options" :key="option.id">{{ option.label }}</el-radio>
    </el-radio-group>
    <el-button type="primary" @click="submitVote">提交</el-button>
  </div>
</template>

<script>
import { ElRadio, ElRadioGroup, ElButton } from 'element-ui';

export default {
  name: 'VoteComponent',
  components: {
    ElRadio,
    ElRadioGroup,
    ElButton,
  },
  data() {
    return {
      options: [
        { id: 1, label: '选项1' },
        { id: 2, label: '选项2' },
        { id: 3, label: '选项3' },
      ],
      selectedOption: null,
    };
  },
  methods: {
    submitVote() {
      if (this.selectedOption === null) {
        this.$message.error('请选择一个选项');
        return;
      }
      // 发送投票请求
      console.log(`已投票: ${this.selectedOption}`);
    },
  },
};
</script>

<style scoped>
.vote-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid #ddd;
}
</style>

以上代码中，我们使用Element UI的`ElRadio`、`ElRadioGroup`和`ElButton`组件构建了一个简单的投票界面。`options`数组中定义了所有可选项，`selectedOption`保存当前选择的选项。当用户点击提交按钮时，我们会检查是否选择了一个选项，如果没有选择会提示用户进行选择，否则就会发送投票请求。