$log demo page

Former-commit-id: de3c73e90d997405748430bd9e1bfd7be741c398 [formerly de3c73e90d997405748430bd9e1bfd7be741c398 [formerly de3c73e90d997405748430bd9e1bfd7be741c398 [formerly de3c73e90d997405748430bd9e1bfd7be741c398 [formerly 65a43317c2eb9ecb43a1a9f08031c476e3b8b55c [formerly c90c9ba1e15cd4d19e7579afb866820428ce12c6]]]]]
Former-commit-id: aecd29e0e5f95a2ede8d8f58eafe1e1529a58baf
Former-commit-id: b7af51daa09b0c08fc592d559296164ce8b65a00
Former-commit-id: c392aa3faf901c26d6a76338195a51f21466860c [formerly 483132831864e8d14da69aa223e992ad6e9b43fb]
Former-commit-id: 301d0c78028061fb53e72d36f455cb27020f3d09
Former-commit-id: b68eff94b50f328b309a249b63025c4c0ff291f7
Former-commit-id: ace41752e14fb73b30b3ff49bdf64a1dd516572a
Former-commit-id: b3ac4fecd5bd71719215e299da1856c7e82e8fba
Former-commit-id: e3bac2ec8ab2687f61ce9708a416eb556ea2283f

src/pages/demo/playground/log/console/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <d2-container>
+    <p class="d2-mt-0">$log.capsule</p>
+    <el-button size="small" type="primary" @click="$log.capsule('title', 'primary')">
+      $log.capsule('title', 'primary')
+    </el-button>
+    <el-button size="small" type="success" @click="$log.capsule('title', 'success', 'success')">
+      $log.capsule('title', 'success', 'success')
+    </el-button>
+    <el-button size="small" type="warning" @click="$log.capsule('title', 'warning', 'warning')">
+      $log.capsule('title', 'warning', 'warning')
+    </el-button>
+    <el-button size="small" type="danger" @click="$log.capsule('title', 'danger', 'danger')">
+      $log.capsule('title', 'danger', 'danger')
+    </el-button>
+    <p>$log.colorful</p>
+    <el-button size="small" @click="handleColorful">
+      colorful
+    </el-button>
+    <p>$log.default | primary | success | warning | danger</p>
+    <el-button size="small" @click="$log.default('default style')">
+      $log.default('default style')
+    </el-button>
+    <el-button size="small" type="primary" @click="$log.primary('primary style')">
+      $log.primary('primary style')
+    </el-button>
+    <el-button size="small" type="success" @click="$log.success('success style')">
+      $log.success('success style')
+    </el-button>
+    <el-button size="small" type="warning" @click="$log.warning('warning style')">
+      $log.warning('warning style')
+    </el-button>
+    <el-button size="small" type="danger" @click="$log.danger('danger style')">
+      $log.danger('danger style')
+    </el-button>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleColorful () {
+      this.$log.colorful([
+        { text: 'H', type: 'default' },
+        { text: 'e', type: 'primary' },
+        { text: 'l', type: 'success' },
+        { text: 'l', type: 'warning' },
+        { text: 'o', type: 'danger' }
+      ])
+    }
+  }
+}
+</script>
+