Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # 如何使用?
- > 将**alert.js**导入到**main.js**中,并将alert注册到Vue实例
- ```
- Vue.prototype.$Alert = alert
- this.$Alert.info({content: 'xxxxx', duration: 2000})
- ```
- # alert.vue
- ```vue
- <template>
- <div class="alert">
- <div class="alert-main" v-for="item in notices" :key="item.name">
- <div class="alert-content">{{item.content}}</div>
- </div>
- </div>
- </template>
- <script>
- let seed = 0;
- //负责唯一id
- function getUid() {
- return "alert_" + seed++;
- }
- export default {
- name: "alert",
- data() {
- return {
- notices: []
- };
- },
- methods: {
- add(notice) {
- const name = getUid();
- let _notice = Object.assign({ name }, notice);
- this.notices.push(_notice);
- let d = notice.duration;
- setTimeout(() => {
- this.remove(name);
- }, d);
- },
- remove(name) {
- const notices = this.notices;
- for (let i = 0; i < notices.length; i++) {
- if (notices[i].name === name) {
- this.notices.splice(i, 1);
- break;
- }
- }
- }
- }
- };
- </script>
- <style lang='scss' scoped>
- .alert {
- position: fixed;
- width: 100%;
- top: 16px;
- left: 0;
- text-align: center;
- pointer-events: none;
- }
- .alert-content {
- display: inline-block;
- padding: 8px 16px;
- background: #fff;
- border-radius: 3px;
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
- margin-bottom: 8px;
- }
- </style>
- ```
- # notifacation.js
- ```javascript
- import Vue from 'vue'
- import Alert from './alert.vue'
- Alert.newInstance = props => {
- const instance = new Vue({
- data() {
- return {
- props
- }
- },
- render: h => {
- return h(Alert, {
- props: props
- })
- }
- })
- const component = instance.$mount()
- document.body.appendChild(component.$el)
- // 因为只有一个chirdren, [0]就能拿到alert组件实例
- const alert = instance.$children[0]
- return {
- add(notice) {
- alert.add(notice)
- },
- remove(name) {
- alert.remove(name)
- }
- }
- }
- export default Alert
- ```
- # alert.js
- ```javascript
- import Notification from './notification'
- let messageInstance = null;
- // 单例
- function getMessageInstance() {
- messageInstance = messageInstance || Notification.newInstance()
- return messageInstance
- }
- function notice({ duration = 15, content = '' }) {
- let instance = getMessageInstance()
- instance.add({
- duration: duration,
- content: content
- })
- }
- export default {
- info(options) {
- notice(options)
- }
- }
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement