refactor: 答案解释组件

src/components/wrong-explanation/index.vue → src/components/answer-explanation/index.vue

 <template>
   <view class="card">
-    <u-card title="答错了" padding="10" :thumb="thumb">
+    <u-card :title="title" padding="10" :thumb="thumb">
       <view class="u-flex content" slot="body">
-        <view class="lists">正确答案： {{ answer }}</view>
+        <view class="lists">正确答案：{{ answer }}</view>
         <view class="lists">解释说明：{{ explain }}</view>
       </view>
     </u-card>
@@ -13,6 +13,10 @@
 export default {
   name: 'answerSheet',
   props: {
+    type: {
+      type: String,
+      default: 'wrong',
+    },
     answer: {
       type: String,
       default: '',
@@ -22,13 +26,16 @@ export default {
       default: '',
     },
   },
+  computed: {
+    title() {
+      return this.type === 'right' ? '答对了' : '答错了'
+    }
+  },
   data() {
     return {
       thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
     }
-  },
-  created() {},
-  methods: {},
+  }
 }
 </script>
 <style lang="scss">

src/components/answer-sheet/readme.md

@@ -10,6 +10,7 @@
 
 |   属性名   |  类型   | 默认值 |   可选值   |          说明           |
 | :--------: | :-----: | :----: | :--------: | :---------------------: |
+|  type  | String | wrong  | right |      答对还是答错       |
 |  multiple  | Boolean | false  | true/false |      是否支持多选       |
 | answerList |  Array  |   []   |     -      | 答案列表 **格式见下文** |
 

src/pages/index/index.vue

@@ -4,11 +4,18 @@
 		<view>
 			<text class="title">{{title}}</text>
 		</view>
+		<view style="margin-top: 200rpx; width: 100%;">
+			<answer-explanation answer="A" explain="无"></answer-explanation>
+		</view>
 	</view>
 </template>
 
 <script>
+	import answerExplanation from '@/components/answer-explanation/index.vue'
 	export default {
+		components: {
+			answerExplanation
+		},
 		data() {
 			return {
 				title: 'Hello'