vue实现组件的框选选中组件

a. 首先需要在 Vue 中创建一个名为 message.vue 的组件，在该组件中编写需要展示的内容。

b. 创建三个路由，分别对应待付款、待发货、待收货页面。在每个路由的页面中，使用单独的写法来展示对应的页面内容。

c. 另一种实现方式是通过一个 HTML 文件或 Vue 项目来实现此案例。在该文件或项目中，使用各种 HTML 和 Vue 元素来构建页面，实现相应的内容展示和路由切换。

相关问题

vue 多选框 列表组件

以下是一个使用 Vue.js 实现多选框列表组件的示例代码：

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <label>
        <input type="checkbox" :value="option.value" v-model="selectedOptions">
        {{ option.label }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedOptions: this.value
    };
  },
  watch: {
    selectedOptions: function (newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

这个组件接受一个 `options` 数组作为输入，每个选项包含一个 `value` 和 `label` 属性。它还接受一个 `value` 数组作为默认选中的选项。

在组件中使用 `v-for` 循环遍历 `options` 数组来渲染每个选项，将每个选项渲染成一个带有标签文本和复选框的 `label` 元素。通过使用 `v-model` 指令将 `selectedOptions` 数组绑定到每个复选框的状态上，以便在选项被选中或取消选中时更新它。

当 `selectedOptions` 数组发生变化时，组件会触发一个名为 `input` 的事件，并传递更新后的数组作为参数。父组件可以通过监听这个事件来获取选中的选项。

vue组件单选框的封装

单选框是前端展现数据字典的一种形式，下拉列表、单选按钮组和复选框组都可以实现。下拉列表是最常用的，但是单选按钮组也是一种常用的形式。下面介绍一下Vue组件单选框的封装方法。

单选框组件的封装需要考虑以下几个方面：
1. 组件的props需要包含一个list属性，用于传递选项列表。
2. 组件的props需要包含一个modelValue属性，用于传递当前选中的值。
3. 组件需要在点击选项时，通过emit事件将选中的值传递给父组件。
4. 组件需要在选项列表中循环渲染每个选项，并且根据当前选中的值来设置选项的样式。

下面是一个简单的单选框组件的实现：

<<引用>>
子组件：
<template>
<div class="radio-group">
<div v-for="(item, index) in props.list" :key="index" class="radio-item" :class="{active: item.value === props.modelValue}" @click="handleClick(item.value)">
<span>{{ item.label }}</span>
</div>
</div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
list: {
type: Array,
required: true
},
modelValue: {
type: [String, Number],
required: true
}
})

const emit = defineEmits(['update:modelValue'])

const handleClick = (value: string | number) => {
emit('update:modelValue', value)
}
</script>

<style scoped>
.radio-group {
display: flex;
flex-wrap: wrap;
}

.radio-item {
margin-right: 10px;
margin-bottom: 10px;
padding: 8px 16px;
font-size: 14px;
background-color: #f6f7f9;
border: 1px solid #f6f7f9;
cursor: pointer;
}

.radio-item.active {
background-color: var(--cp-plain);
border-color: var(--cp-primary);
}
</style>

在父组件中使用该组件时，只需要传递一个选项列表和一个modelValue属性即可。例如：

<template>
<div>
<radio-group :list="options" v-model="selected"></radio-group>
</div>
</template>

<script>
import RadioGroup from './RadioGroup.vue'

export default {
components: {
RadioGroup
},
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selected: '1'
}
}
}
</script>