feat: add Message

Author: pengshanglong

src/components/message/index.jsx

@@ -0,0 +1,86 @@
+import Taro from '@tarojs/taro'
+import classNames from 'classnames'
+
+export default {
+  name: 'Message',
+  props: {
+    customStyle: {
+      type: [Object, String],
+      default: '',
+    },
+    className: {
+      type: [Array, String],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      state: {
+        _isOpened: false,
+        _message: '',
+        _type: 'info',
+        _duration: 3000,
+      },
+    }
+  },
+  mounted() {
+    this.bindMessageListener()
+  },
+  beforeDestroy() {
+    Taro.eventCenter.off('atMessage')
+  },
+  methods: {
+    setState(newState, fn) {
+      const ks = Object.keys(newState)
+      if (Array.isArray(ks)) {
+        ks.forEach((k) => {
+          if (k in this.state) {
+            this.state[k] = newState[k]
+          }
+        })
+      }
+      typeof fn === 'function' && fn.call(this)
+    },
+    bindMessageListener() {
+      Taro.eventCenter.on('atMessage', (options = {}) => {
+        const { message, type, duration } = options
+        const newState = {
+          _isOpened: true,
+          _message: message,
+          _type: type,
+          _duration: duration || this.state._duration,
+        }
+        this.setState(newState, () => {
+          clearTimeout(this.timer)
+          this.timer = setTimeout(() => {
+            this.setState({
+              _isOpened: false,
+            })
+          }, this.state._duration)
+        })
+      })
+      // 绑定函数
+      Taro.atMessage = Taro.eventCenter.trigger.bind(Taro.eventCenter, 'atMessage')
+    },
+  },
+  render() {
+    const { className, customStyle } = this
+    const { _message, _isOpened, _type } = this.state
+    const rootCls = classNames(
+      {
+        'at-message': true,
+        'at-message--show': _isOpened,
+        'at-message--hidden': !_isOpened,
+      },
+      `at-message--${_type}`,
+      className
+    )
+
+    return (
+      <view class={rootCls} style={customStyle}>
+        {_message}
+      </view>
+    )
+  },
+}

src/pages/index/index.vue

@@ -2,6 +2,13 @@
   <view 
     class="index"
   >
+    <Message />
+    <button @tap="showMessage">
+      show Message
+    </button>
+    <button @tap="showMessage('success')">
+      show success Message
+    </button>
     <SwipeAction
       :options="SAOptions"
     >
@@ -134,6 +141,7 @@
 </template>
 
 <script>
+import Taro from '@tarojs/taro'
 // import Button from '../../components/button/index.jsx'
 import Badge from '../../components/badge/index'
 import Icon from '../../components/icon/index'
@@ -155,6 +163,7 @@ import ModalContent from '../../components/modal/content/index.jsx'
 import ModalAction  from '../../components/modal/action/index.jsx'
 import Toast from '../../components/toast/index.jsx'
 import SwipeAction from '../../components/swipe-action/index.jsx'
+import Message from '../../components/message/index.jsx'
 
 export default {
   name: 'Index',
@@ -180,6 +189,7 @@ export default {
     ModalAction,
     Toast,
     SwipeAction,
+    Message,
   },
   data() {
     return {
@@ -210,6 +220,12 @@ export default {
     },
     onClick(e) {
       console.log(e)
+    },
+    showMessage(type) {
+      Taro.atMessage({
+        'message': '消息通知',
+        'type': type,
+      })
     }
   },
 }