打赏页面

1). 新建弹窗组件

在 src/components 下新建 Modal.vue 文件，复制贴入以下代码：

src/components/Modal.vue

<template>
  <div>
    <div v-show="show" class="modal" style="display:block" @click.self="close">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button @click="close" class="close">×</button>
            <h4 class="modal-title">
              <slot name="title"></slot>
            </h4>
          </div>
          <div class="modal-body">
            <slot></slot>
          </div>
          <div class="modal-footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>

    <div v-show="show" class="modal-backdrop fade in" @click="close"></div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      // 触发事件以关闭弹窗
      this.$emit('update:show', false)
    }
  },
  watch: {
    show(value) {
      // 监听 show 值以切换 body 上 modal-open 类
      const bodyClassList = document.body.classList

      if (value) {
        bodyClassList.add('modal-open')
      } else {
        bodyClassList.remove('modal-open')
      }
    }
  }
}
</script>

<style scoped>

</style>

.self 是一个 事件修饰符，常用的事件修饰符有：

• .self：当 event.target 是当前元素自身时触发处理函数；
• .stop：阻止事件继续传播；
• .prevent：阻止事件默认行为；
• .capture：使用事件捕获模式；
• .once：事件只会触发一次；

• <slot name="title"></slot>

  slot 用于分发内容，它可以有一个 name 属性。在父组件内如果有与其名称对应的元素（使用 slot 特性的元素），比如 <div slot="title">，那么 <div slot="title"> 这块内容就会插入 <slot name="title"></slot> 所在的位置并将其替换 ，以下面的父组件为例：

• 2). 引入弹窗组件

  打开 src/components/index.js 文件，复制贴入以下代码：

  src/components/index.js

• import Vue from 'vue'
  import Message from './Message'
  import Modal from './Modal'
  
  const components = {
    Message,
    Modal
  }
  
  for (const [key, value] of Object.entries(components)) {
    Vue.component(key, value)
  }

  3). 使用弹窗组件

  1、打开 src/views/articles/Content.vue 文件，在 data 中添加 showQrcode：

  src/views/articles/Content.vue

• data() {
    return {
      title: '', // 文章标题
      content: '', // 文章内容
      date: '', // 文章创建时间
      uid: 1, // 用户 ID
      likeUsers: [], // 点赞用户列表
      likeClass: '', // 点赞样式
      showQrcode: false, // 是否显示打赏弹窗
    }
  },

  2、查找 <div class="btn-group">，添加打赏，你可以复制以下代码进行替换：

  src/views/articles/Content.vue

• <div class="btn-group">
    <a @click="like" href="javascript:;" class="vote btn btn-primary popover-with-html" :class="likeClass">
      <i class="fa fa-thumbs-up"></i> {{ likeClass ? '已赞' : '点赞' }}
    </a>
    <div class="or"></div>
    <button @click="showQrcode = true" class="btn btn-success"><i class="fa fa-heart"></i> 打赏</button>
  </div>

  3、查找 <div class="votes-container，在其后面添加『打赏弹窗』：

  src/views/articles/Content.vue

• <div class="votes-container panel panel-default padding-md">
    .
    .
    .
  </div>
  
  <!-- 打赏弹窗 -->
  <Modal :show.sync="showQrcode" class="text-center">
    <div v-if="user" slot="title">
      <img :src="user.avatar" class="img-thumbnail avatar" width="48">
    </div>
    <div>
      <p class="text-md">如果你想学习更多前端的知识，VuejsCaff.com 是个不错的开始</p>
      <div class="payment-qrcode inline-block">
        <h5>扫一扫打开 VuejsCaff.com</h5>
        <p><img src="https://vuejscaffcdn.phphub.org/uploads/images/201803/25/2/g3CFVs0h7B.jpeg?imageView2/2/w/1024/h/0" width="160"></p>
      </div>
    </div>
    <div slot="footer">
      <div class="text-center">祝你学习愉快 :)</div>
    </div>
  </Modal>

  1). 安装 qrcode.vue

  qrcode.vue 是一个可用于生成二维码的 Vue 组件，我们用它来生成二维码。

•  npm install qrcode.vue --save

  2). 使用二维码

  1、打开 src/views/articles/Content.vue 文件，引入 qrcode.vue，并在 components 中注册：

  src/views/articles/Content.vue

• <script>
  import SimpleMDE from 'simplemde'
  import hljs from 'highlight.js'
  import emoji from 'node-emoji'
  import { mapState } from 'vuex'
  // 引入 qrcode.vue 的默认值
  import QrcodeVue from 'qrcode.vue'
  
  export default {
    name: 'Content',
    // 添加 components 选项，并注册 QrcodeVue
    components: {
      QrcodeVue
    },
    data() {
  .
  .
  .
  </script>

  2、替换 <Modal> 下的 <img> 为 <qrcode-vue>：

  src/views/articles/Content.vue

• <!-- 替换 -->
  <img src="https://vuejscaffcdn.phphub.org/uploads/images/201803/25/2/g3CFVs0h7B.jpeg?imageView2/2/w/1024/h/0" width="160">
  <!-- 为 -->
  <qrcode-vue value="https://vuejscaff.com/" :size="160"></qrcode-vue>