SHARE
TWEET

Untitled

a guest May 24th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # 如何使用?
  2. > 将**alert.js**导入到**main.js**中,并将alert注册到Vue实例  
  3. ```
  4. Vue.prototype.$Alert = alert  
  5. this.$Alert.info({content: 'xxxxx', duration: 2000})
  6. ```
  7. # alert.vue
  8. ```vue
  9. <template>
  10.   <div class="alert">
  11.     <div class="alert-main" v-for="item in notices" :key="item.name">
  12.       <div class="alert-content">{{item.content}}</div>
  13.     </div>
  14.   </div>
  15. </template>
  16.  
  17. <script>
  18. let seed = 0;
  19. //负责唯一id
  20. function getUid() {
  21.   return "alert_" + seed++;
  22. }
  23. export default {
  24.   name: "alert",
  25.   data() {
  26.     return {
  27.       notices: []
  28.     };
  29.   },
  30.   methods: {
  31.     add(notice) {
  32.       const name = getUid();
  33.       let _notice = Object.assign({ name }, notice);
  34.       this.notices.push(_notice);
  35.       let d = notice.duration;
  36.       setTimeout(() => {
  37.         this.remove(name);
  38.       }, d);
  39.     },
  40.     remove(name) {
  41.       const notices = this.notices;
  42.       for (let i = 0; i < notices.length; i++) {
  43.         if (notices[i].name === name) {
  44.           this.notices.splice(i, 1);
  45.           break;
  46.         }
  47.       }
  48.     }
  49.   }
  50. };
  51. </script>
  52. <style lang='scss' scoped>
  53. .alert {
  54.   position: fixed;
  55.   width: 100%;
  56.   top: 16px;
  57.   left: 0;
  58.   text-align: center;
  59.   pointer-events: none;
  60. }
  61. .alert-content {
  62.   display: inline-block;
  63.   padding: 8px 16px;
  64.   background: #fff;
  65.   border-radius: 3px;
  66.   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  67.   margin-bottom: 8px;
  68. }
  69. </style>
  70.  
  71. ```
  72. # notifacation.js
  73. ```javascript
  74. import Vue from 'vue'
  75. import Alert from './alert.vue'
  76.  
  77. Alert.newInstance = props => {
  78.     const instance = new Vue({
  79.         data() {
  80.             return {
  81.                 props
  82.             }
  83.         },
  84.         render: h => {
  85.             return h(Alert, {
  86.                 props: props
  87.             })
  88.         }
  89.     })
  90.     const component = instance.$mount()
  91.     document.body.appendChild(component.$el)
  92.     // 因为只有一个chirdren, [0]就能拿到alert组件实例
  93.     const alert = instance.$children[0]
  94.  
  95.     return {
  96.         add(notice) {
  97.             alert.add(notice)
  98.         },
  99.         remove(name) {
  100.             alert.remove(name)
  101.         }
  102.     }
  103. }
  104.  
  105. export default Alert
  106.  
  107. ```
  108.  
  109. # alert.js
  110. ```javascript
  111. import Notification from './notification'
  112.  
  113. let messageInstance = null;
  114. // 单例
  115. function getMessageInstance() {
  116.     messageInstance = messageInstance || Notification.newInstance()
  117.     return messageInstance
  118. }
  119.  
  120. function notice({ duration = 15, content = '' }) {
  121.     let instance = getMessageInstance()
  122.     instance.add({
  123.         duration: duration,
  124.         content: content
  125.     })
  126. }
  127.  
  128. export default {
  129.     info(options) {
  130.         notice(options)
  131.     }
  132. }
  133.  
  134. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top