feat: 增加 toast 组件

Author: jingwenzheng

packages/layout/src/components/Toast/index.module.scss

@@ -0,0 +1,16 @@
+.body {
+  position: absolute;
+
+  bottom: 20%;
+  left: 50%;
+
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+
+  font-size: 15px;
+  padding: 8px 12px;
+  border-radius: 4px;
+
+  max-width: 50%;
+  white-space: pre-line;
+}

packages/layout/src/components/Toast/index.tsx

@@ -0,0 +1,48 @@
+import { defineComponent } from 'vue'
+import { Popup } from '@0x30/vue-navigation-layout'
+import styles from './index.module.scss'
+import anime from 'animejs'
+
+const Toast = defineComponent({
+  name: 'Toast',
+  props: {
+    title: String,
+    className: String,
+  },
+  setup: (props) => {
+    return () => <div class={props.className ?? styles.body}>{props.title}</div>
+  },
+})
+
+type ToastOptoions = {
+  duration?: number
+  className?: string
+}
+
+export const useToast = (title: string, options?: ToastOptoions) => {
+  const [show, close] = Popup({
+    onEnter(el, done) {
+      anime.set(el, { translateX: '-50%' })
+      anime({
+        targets: el,
+        opacity: [0, 1],
+        scale: [0.8, 1],
+        translateX: '-50%',
+        duration: 300,
+        easing: 'easeOutExpo',
+        complete: done,
+      })
+    },
+    onLeave(el, done) {
+      anime({
+        targets: el,
+        opacity: [1, 0],
+        duration: 300,
+        easing: 'easeInQuad',
+        complete: done,
+      })
+    },
+  })
+  show(<Toast title={title} className={options?.className} />)
+  window.setTimeout(close, options?.duration ?? 2000)
+}

packages/layout/src/index.ts

@@ -4,3 +4,4 @@ export * from './components/Safearea'
 export { default as SidePage } from './components/SidePage'
 export * from './components/Loading'
 export * from './util/Popup'
+export * from './components/Toast'

src/views/home/index.tsx

@@ -11,6 +11,7 @@ import DetailPage from '../detail'
 
 import styles from './index.module.scss'
 import { useHooks, wait } from '../../util'
+import { useToast } from '@0x30/vue-navigation-layout'
 
 const Component = defineComponent({
   name: 'HomePage',
@@ -68,6 +69,13 @@ const Component = defineComponent({
           >
             popup
           </button>
+          <button
+            onClick={async () => {
+              useToast(`Hello world.`)
+            }}
+          >
+            toast
+          </button>
         </div>
         <br />
         <span>SidePage</span>