vue - 全局提示框

利用 vux-cli 组件创建一个全局自定义的提示框，有使用过 vux 的人都知道，vux 有一个叫 Popup 的组件，可以满足提示框的显示，如下图。但如果每个页面都要使用，那么每次都要引用，就会导致代码变冗余，此时，我们就应该考虑把该组件独立出来，这样每次使用时，只要使用一条语句调用即可。

先上代码

• 组件部分

      {'error': this.tips.type === 'error'},    {'right': this.tips.type === 'right'},    {'position-vertical-demo': true}    ]">{{ tips.content }}
    {'right': this.tips.type === 'right'},
    {'position-vertical-demo': true}
    ]">{{ tips.content }}

• js 部分

data () {
  return {
    tips: {
      content: '',
      type: '',
      showTips: false
    }
  }
},
methods: {
  message (content, type) {
    this.tips.content = content
    this.tips.type = type
    this.tips.showTips = true
    let that = this
    setTimeout(function () {
      that.tips.showTips = false
    }, 1500)
  }
}

• 首先，我们要在 App.vue 里使用 popup 组件，因为是在不同的地方调用同样的组件，那么我们应该考虑清楚，每个调用的组件之间有什么不同，然后通过传递不同的参数显示不同的提示框。
• 这里举例的提示框包含以下参数：提示内容（content）、提示的类型（right/error）。通过绑定变量值 showTips 控制其可见性。
• 定义一个方法 message 接收传递的参数，并赋值
• 最后在 router-view 里指定自定义的事件，@ 后接自定义事件名称。
  在其他任何一个页面，调用该提示框时只要使用 this.$emit('tips', '请求错误', 'error') 即可。

赏

一起吃饭