图表颜色

liuyg

2021-09-27 8c6cf205affbbc8ada74f00a7ca25ebca867e9ed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template>
    <div>
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content"
                      v-html="subjectInfo.subjectName" />
                <span class="subject-title-content">
                    (&nbsp;多选题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{subjectInfo.score}}分&nbsp;</span>)
                </span>
            </div>
 
            <ul class="subject-options"
                v-for="option in options"
                :key="option.id">
                <li class="subject-option">
                    <input class="toggle"
                           type="checkbox"
                           :checked="isChecked(option.optionName)"
                           :id="'option' + option.id"
                           @change="toggleOption($event, option)">
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName + '.' }}&nbsp;</span>
                        <span v-html="option.optionContent"
                              class="subject-option-prefix" />
                    </label>
                </li>
            </ul>
        </div>
    </div>
</template>
 
<script>
export default {
    name: 'MultipleChoices',
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: '',
                score: 0
            },
            options: [],
            userAnswer: [],
            index: ''
        }
    },
    watch: {
 
    },
    methods: {
        getAnswer () {
            return this.userAnswer.join(',')
        },
        setAnswer (answer) {
            // if (isNotEmpty(answer)) {
            this.userAnswer = answer.split(',')
            // }
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty('examSubjectOptions')) {
                this.options = subject.examSubjectOptions
            }
            if (subject.hasOwnProperty('answer')) {
                this.setAnswer(subject.answer)
            }
            this.index = index + '.'
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
        },
        // 选中选项
        toggleOption ($event, option) {
 
            if ($event.target.checked) {
                if (!this.userAnswer.includes(option.optionName)) {
                    this.userAnswer.push(option.optionName)
                }
            } else {
                this.userAnswer.splice(this.userAnswer.findIndex(item => item === option.optionName), 1)
            }
        },
        isChecked (optionName) {
            return this.userAnswer.includes(optionName)
        }
    }
}
</script>
 
<style lang="scss" scoped>
@import '../../../assets/css/subject.scss';
.subject-options > li label {
    height: 36px;
    line-height: 28px !important;
}
</style>