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> {{ isPreview ? element.title : 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.list ?? 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 }">
              <div class="flex" style="flex-wrap: wrap; width: 100%">
                <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">
                      <div class="flex" style="width: 100%; flex-wrap: wrap">
                        <contenteditable
                          v-model="it.option"
                          :className="active ? '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>
                    </div>
                  </template>
                </van-radio>
                <textarea class="other-input" type="text" v-if="it.is_other" style="width: 100%" />
              </div>
            </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 }">
              <div class="flex" style="flex-wrap: wrap; width: 100%">
                <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">
                      <div class="flex" style="width: 100%; flex-wrap: wrap">
                        <contenteditable
                          v-model="it.option"
                          :className="active ? '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>
                    </div>
                  </template>
                </van-checkbox>
                <textarea class="other-input" type="text" v-if="it.is_other" style="width: 100%" />
              </div>
            </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: '', type: String });
const value = defineModel('checkboxAnswer', { default: [], type: Array });
const errorMessage = defineModel('errorMessage', { default: '', type: String });
const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
defineProps({
  isPreview: {
    type: Boolean,
    default: false
  },
  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: 100%;
    min-height: 89px;
    margin-top: 4px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #f4f4f4;
    border-radius: 5px;
    outline: none;
  }
}
</style>