打赏页面-白红宇

打赏页面

阅读量：4324 次

发布时间：2019-06-06

本文共 2292 字，大约阅读时间需要 7 分钟。

1). 新建弹窗组件

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

src/components/Modal.vue

1 
     25 26 56 57

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

.self：当 event.target 是当前元素自身时触发处理函数；

.stop：阻止事件继续传播；

.prevent：阻止事件默认行为；

.capture：使用事件捕获模式；

.once：事件只会触发一次；

```
       
```
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


         
             {
     { likeClass ? '已赞' : '点赞' }}

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

src/views/articles/Content.vue

1 
       
         2   . 3   . 4   . 5 
       
 6  7 
        8 
       
         9   
        
         10     
         11   
        
12   
        
         13     
         如果你想学习更多前端的知识，VuejsCaff.com 是个不错的开始
14     
         
          15       
          扫一扫打开 VuejsCaff.com
16       
          
17     
         
18   
        
19   
        
         20     
         
          祝你学习愉快 :)
         
21   
        
22

1). 安装 qrcode.vue

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

```
npm install qrcode.vue --save
```
2). 使用二维码

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

src/views/articles/Content.vue