Question

这是为Vue1编写的Vue全局通知的小提琴 https://jsfiddle.net/Linusborg/wnb6tdg8/

const NotificationStore = {
  state: [], // here the notifications will be added

  addNotification: function (notification) {
    this.state.push(notification)
  },
  removeNotification: function (notification) {
    this.state.$remove(notification)
  }
}

var Notification = Vue.extend({
    template: '#notification',
  props: ['notification'],
  data: function () {
    return { timer: null }
    },
  ready: function () {
  let timeout = this.notification.hasOwnProperty('timeout') ? this.notification.timeout : true
  if (timeout) {
    let delay = this.notification.delay || 3000
      this.timer = setTimeout(function () {
        this.triggerClose(this.notification)
      }.bind(this), delay)
    }
  },

  methods: {
    triggerClose: function (notification) {
        clearTimeout(this.timer)
      this.$dispatch('close-notification', notification)
    }
  }
})

var Notifications = Vue.extend({
    template: '#notifications',
  components: {
    notification: Notification
  },
  data () {
    return {
      notifications: NotificationStore.state
    }
  },
  methods: {
    removeNotification: function (notification) {
      NotificationStore.removeNotification(notification)
    }
  }
})

Vue.transition('fade', {
  enterClass: 'fadeInDown', // class of animate.css
  leaveClass: 'fadeOutDown' // class of animate.css
})

var App = new Vue({
  el: '#app',
  components: {
    'notifications': Notifications
  },
  data() {
    return {
            // no Data Nessessary. Notifications are stored in the NotificationStore
    }
  },
  methods: {
    showSuccessMessage: function () {
        NotificationStore.addNotification({
        title: "Success!!",
        text: "A Success Message",
        type: "success",
        timeout: true
      })
    },
    showAlertMessage: function () {
        NotificationStore.addNotification({
        text: "An Alert Message, without a title",
        type: "alert"
        // timeout not specified - defaults to true
        // delay not specified, defaults to 3000
      })
    },
    showStickyMessage: function () {
        NotificationStore.addNotification({
      title: "Sticky!!",
        text: "This message will not time out, you have to click the close button",
        type: "primary",
        timeout: false // won't disappear on it's own
      })
    }
  }
})

我正在尝试为Vue 2重写它，但是在使用同样方式替换$ remove时遇到困难。试图使用拼接，但没有做到这一点（可能是因为我没有正确地做到这一点）

以下是我所做的更改的新代码（无需更改$ remove）： https://jsfiddle.net/rzubty4c/

const NotificationStore = {
  state: [], // here the notifications will be added

  addNotification: function (notification) {
    this.state.push(notification)
  },
  removeNotification: function (notification) {
    //this.state.$remove(notification)
  }
}

var Notification = Vue.extend({
    template: '#notification',
  props: ['notification'],
  data: function () {
    return { timer: null }
    },
  created() {
  let timeout = this.notification.hasOwnProperty('timeout') ? this.notification.timeout : true
  if (timeout) {
    let delay = this.notification.delay || 3000
      this.timer = setTimeout(function () {
        this.triggerClose(this.notification)
      }.bind(this), delay)
    }
  },

  methods: {
    triggerClose: function (notification) {
        clearTimeout(this.timer)
      this.$emit('close-notification', notification)
    }
  }
})

var Notifications = Vue.extend({
    template: '#notifications',
  components: {
    notification: Notification
  },
  data () {
    return {
      notifications: NotificationStore.state
    }
  },
  methods: {
    removeNotification: function (notification) {
      NotificationStore.removeNotification(notification)
    }
  }
})


var App = new Vue({
  el: '#app',
  components: {
    'notifications': Notifications
  },
  data() {
    return {
            // no Data Nessessary. Notifications are stored in the NotificationStore
    }
  },
  methods: {
    showSuccessMessage: function () {
        NotificationStore.addNotification({
        title: "Success!!",
        text: "A Success Message",
        type: "success",
        timeout: true
      })
    },
    showAlertMessage: function () {
        NotificationStore.addNotification({
        text: "An Alert Message, without a title",
        type: "alert"
        // timeout not specified - defaults to true
        // delay not specified, defaults to 3000
      })
    },
    showStickyMessage: function () {
        NotificationStore.addNotification({
      title: "Sticky!!",
        text: "This message will not time out, you have to click the close button",
        type: "primary",
        timeout: false // won't disappear on it's own
      })
    }
  }
})

您能否告知removeNotification函数中的代码应该是什么，而不是原来的$ remove？

Answer 1

使用拼接。

removeNotification: function (notification) {
    this.state.splice(this.state.indexOf(notification),1)
}

此外，您应使用key和v-for。请参阅documentation。

在2.2.0+中，当对组件使用v-for时，现在需要一个键。

<notification v-for="notification in notifications" :key="notification" :notification="notification" @close-notification="removeNotification" >

您的更新fiddle。

您可能希望为每个用于id的通知生成key属性，但就目前而言，我只是使用notification本身。

使用Vue从Vue1迁移全局通知到Vue2

1 个答案: