打赏页面

1). 新建弹窗组件

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

src/components/Modal.vue

 1 <template>
 2   <div>
 3     <div v-show="show" class="modal" style="display:block" @click.self="close">
 4       <div class="modal-dialog">
 5         <div class="modal-content">
 6           <div class="modal-header">
 7             <button @click="close" class="close">×</button>
 8             <h4 class="modal-title">
 9               <slot name="title"></slot>
10             </h4>
11           </div>
12           <div class="modal-body">
13             <slot></slot>
14           </div>
15           <div class="modal-footer">
16             <slot name="footer"></slot>
17           </div>
18         </div>
19       </div>
20     </div>
21 
22     <div v-show="show" class="modal-backdrop fade in" @click="close"></div>
23   </div>
24 </template>
25 
26 <script>
27 export default {
28   name: 'Modal',
29   props: {
30     // 是否显示弹窗
31     show: {
32       type: Boolean,
33       default: false
34     }
35   },
36   methods: {
37     close() {
38       // 触发事件以关闭弹窗
39       this.$emit('update:show', false)
40     }
41   },
42   watch: {
43     show(value) {
44       // 监听 show 值以切换 body 上 modal-open 类
45       const bodyClassList = document.body.classList
46 
47       if (value) {
48         bodyClassList.add('modal-open')
49       } else {
50         bodyClassList.remove('modal-open')
51       }
52     }
53   }
54 }
55 </script>
56 
57 <style scoped>
58 
59 </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

•  1 import Vue from 'vue'
   2 import Message from './Message'
   3 import Modal from './Modal'
   4 
   5 const components = {
   6   Message,
   7   Modal
   8 }
   9 
  10 for (const [key, value] of Object.entries(components)) {
  11   Vue.component(key, value)
  12 }

  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，在其后面添加『打赏弹窗』：

  扫描二维码关注公众号，回复： 2198797 查看本文章

  src/views/articles/Content.vue

•  1 <div class="votes-container panel panel-default padding-md">
   2   .
   3   .
   4   .
   5 </div>
   6 
   7 <!-- 打赏弹窗 -->
   8 <Modal :show.sync="showQrcode" class="text-center">
   9   <div v-if="user" slot="title">
  10     <img :src="user.avatar" class="img-thumbnail avatar" width="48">
  11   </div>
  12   <div>
  13     <p class="text-md">如果你想学习更多前端的知识，VuejsCaff.com 是个不错的开始</p>
  14     <div class="payment-qrcode inline-block">
  15       <h5>扫一扫打开 VuejsCaff.com</h5>
  16       <p><img src="https://vuejscaffcdn.phphub.org/uploads/images/201803/25/2/g3CFVs0h7B.jpeg?imageView2/2/w/1024/h/0" width="160"></p>
  17     </div>
  18   </div>
  19   <div slot="footer">
  20     <div class="text-center">祝你学习愉快 :)</div>
  21   </div>
  22 </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

•  1 <script>
   2 import SimpleMDE from 'simplemde'
   3 import hljs from 'highlight.js'
   4 import emoji from 'node-emoji'
   5 import { mapState } from 'vuex'
   6 // 引入 qrcode.vue 的默认值
   7 import QrcodeVue from 'qrcode.vue'
   8 
   9 export default {
  10   name: 'Content',
  11   // 添加 components 选项，并注册 QrcodeVue
  12   components: {
  13     QrcodeVue
  14   },
  15   data() {
  16 .
  17 .
  18 .
  19 </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>