From 4d9f9fdf9d3194a32ca3d1719df809b90b56e2d3 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 29 Mar 2021 16:06:14 -0400
Subject: [PATCH] workflow(sfc-playground): make warnings dismissable

---
 packages/sfc-playground/src/Message.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/sfc-playground/src/Message.vue b/packages/sfc-playground/src/Message.vue
index 7cc23995554..828f6b2cd32 100644
--- a/packages/sfc-playground/src/Message.vue
+++ b/packages/sfc-playground/src/Message.vue
@@ -1,16 +1,23 @@
 <template>
   <Transition name="fade">
-    <pre v-if="err || warn"
+    <pre v-if="!dismissed && (err || warn)"
       class="msg"
-      :class="err ? 'err' : 'warn'">{{ formatMessage(err || warn) }}</pre>
+      :class="err ? 'err' : 'warn'"
+      @click="dismissed = true">{{ formatMessage(err || warn) }}</pre>
   </Transition>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, ref, watch } from 'vue'
 import type { CompilerError } from '@vue/compiler-sfc'
 
-defineProps(['err', 'warn'])
+const props = defineProps(['err', 'warn'])
+
+const dismissed = ref(false)
+
+watch(() => [props.err, props.warn], () => {
+  dismissed.value = false
+})
 
 function formatMessage(err: string | Error): string {
   if (typeof err === 'string') {