ylst-h5/src/views/Design/components/Questions/Choice.vue

<template>
  <van-field
    v-model="element.stem"
    :label="element.stem"
    :required="element.config.is_required === 1"
    label-align="top"
    class="contenteditable-question-title base-select"
  >
    <template #left-icon>
      {{ index + 1 }}
    </template>
    <template #label>
      <contenteditable
        v-model="element.stem"
        className="contenteditable-label"
        :active="active"
        @blur="emitValue"
        :errorMessage="errorMessage"
      >
      </contenteditable>
    </template>
    <template #input>
      <template v-for="item /*optionIndex*/ in element.options" :key="item.id">
        <van-radio-group v-if="element.question_type === 1" v-model="choiceValue">
          <option-action
            :data="isPreview ? item.options : item"
            :active="active"
            :question="element"
            handle=".moverQues"
          >
            <template #item="{ element: it, index: itIndex }">
              <van-radio
                :key="itIndex"
                :name="it.option_index"
                :label="it.label"
                :disabled="it.disabled"
                icon-size="0.45rem"
              >
                <!--       自定义文本         -->
                <template #default>
                  <div class="flex align-center van-cell">
                    <contenteditable
                      v-model="it.option"
                      className="contenteditable-input"
                      :active="active"
                    >
                      <template #right-icon>
                        <div v-if="active" class="moverQues">
                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
                        </div>
                      </template>
                    </contenteditable>
                    <div v-if="it.is_other">
                      <input class="other-input" type="text" />
                    </div>
                  </div>
                </template>
              </van-radio>
            </template>
          </option-action>
        </van-radio-group>

        <van-checkbox-group v-if="element.question_type === 2" v-model="value" shape="square">
          <option-action
            :data="isPreview ? item.options : item"
            handle=".moverQues"
            :active="active"
            :question="element"
          >
            <template #item="{ element: it, index: itIndex }">
              <van-checkbox
                :key="itIndex"
                :name="it.option_index"
                :label="it.label"
                :disabled="it.disabled"
                icon-size="0.45rem"
              >
                <template #default>
                  <div class="flex align-center van-cell">
                    <contenteditable
                      v-model="it.option"
                      className="contenteditable-input"
                      :active="active"
                    >
                      <template #right-icon>
                        <div v-if="active" class="moverQues">
                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
                        </div>
                      </template>
                    </contenteditable>
                    <div v-if="it.is_other">
                      <input class="other-input" type="text" />
                    </div>
                  </div>
                </template>
              </van-checkbox>
            </template>
          </option-action>
        </van-checkbox-group>
      </template>
    </template>
  </van-field>
</template>
<script setup>
import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
import { defineAsyncComponent } from 'vue';

// 是否是预览
const isPreview = defineModel('isPreview', { default: false, type: Boolean });
const choiceValue = defineModel('answer', { default: '1', type: String });
const value = defineModel('checkboxAnswer', { default: [1, 2], type: Array });
const errorMessage = defineModel('errorMessage', { default: '', type: String });
const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
defineProps({
  active: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
});

/**
 *  题目
 * @type {ModelRef<Object, string, Object, Object>}
 */
const element = defineModel('element', {
  type: Object,
  default: () => {
    return {
      stem: ''
    };
  }
});
const emit = defineEmits(['update:element']);
const emitValue = () => {
  emit('update:element', element.value);
};
</script>
<style scoped lang="scss">
.base-select {
  & .van-checkbox-group,
  .van-radio-group {
    width: 100%;

    & .van-checkbox,
    .van-radio {
      width: 100%;

      & ::v-deep .van-checkbox__label {
        width: 100%;
      }

      & ::v-deep .van-radio__label {
        width: 100%;
      }
    }
  }

  & .other-input {
    width: 100px;
    height: 20px;
    margin-left: 20px;
    padding: 3px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
  }
}
</style>