Question

我是 vue 新手。我可以问这个吗？所以，我有复选框组件，我想将此组件的“框”移到其他组件中标签文本的右侧（例如卡片，默认情况下框在左侧）。但我希望它像一个插槽，有条件的，或者可能使用道具/修饰符（所以我可以选择要求，是左还是右复选框）。是否有可能？这是我的代码

卡片组件上的复选框：

<template>
 //component code

    <Checkbox  class="my-checkbox" ref="myCheckbox" v-model="checkedValue" v-if="multiselect"><slot>{{ text }}</slot></Checkbox>
 
 //component code
</template>

复选框模板：

<div class="my-cb">
  <input
    :id="cb"
    v-model="computedValue"
    type="checkbox"
    :disabled="disabled"
    :required="required">
    <label :for="cb">
       <slot />
    </label>
</div>

编辑：感谢 Lais Frigerio，完美解决

Answer 1

带有 flexbox 的代码示例：

.flex {
  display: flex;
}

.left label { order: 2; }
.left input { order: 1; }

.right label { order: 1; }
.right input { order: 2; }

<div class="flex left">
  <input type="checkbox" />
  <label>Teste 2</label>
</div>

<div class="flex right">
  <input type="checkbox" />
  <label>Teste 2</label>
</div>

标签右侧的复选框组件的移位框

1 个答案: