【页面小功能整合】

灰太狼大王灬

已于 2022-06-18 02:31:45 修改

阅读量179

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-17 03:47:39 首次发布

本文链接：https://blog.csdn.net/regretTAT/article/details/125326237

版权

1.将浏览器地址转为二维码

首先安装插件qrcode

通过 npm i qrcode

在对应组件中实现二维码

import QRCode from 'qrcode'   引入
首先需要获取到地址通过
 let url = location.href
QRCode.toDataURL(url,()=>{
		//url为生成的base64图片地址
})

然后把这个路径赋值给img的src就可以了

2. 禁止右键菜单拖拽

正常情况下是可以拖拽的，也有右键菜单

在这里插入图片描述

我们通过在标签内设置属性

οncοntextmenu=“return false” 禁用右键菜单
οndragstart=“return false” 禁止拖拽图片

在这里插入图片描述
全局禁用右键菜单那就设置在body上

2. mock数据

概念

mock数据，也称模块数据，造假数据，一般是后端接口还没有写好，这时需要前后端并行开发，需要和后端沟通接口返回格式，咱们前端根据后端接口格式模拟数据

使用

npm i mockjs 安装
创建mock目录生成mock和接口
创建js文件–mock/course.js

import Mock from 'mockjs'

//使用Mock生成模拟数据
const mockData=Mock.mock({
    "code":200,
    "data":{
        "banner|5":[
            {
                "id|+1":1,
                "title":"@ctitle",
                "type|1":[1,2,3],
                "banner_src":"@url"
            }
            
        ],
        "info":{
           "teacher|3":[
               {
                   "teacher_name":"@cname",
                   "teacher_info":"@csentence",
                   "avatar":"@image('200x100', '#f00', '#000', '2106A')",
                   "address":"@county(true)",
                   "sex|1":['男','女'],
                   "mobile|+1":13568596965
               }
           ]
        }
        
    },
    "msg":"成功"
    
})

export default mockData

生成接口：mock/index.js

import Mock from 'mockjs'
import Kecheng from './kecheng'

//请求课程接口
//Mock.mock(请求接口地址,请求方式(get|post|put|delete),模拟数据)
Mock.mock('http://www.2106A.com/api/course', 'GET', Kecheng)

在main.js中引入 import ‘@/mock’
使用axios调用接口测试mock数据

const getCourse = async() => {
  const res = await Axios.get('http://www.2106A.com/api/course')
  console.log('获取mock数据：', res)
  let { data: result } = res;
  if (result.code === 200) {
    let { info } = result.data;
    teacherInfo.value = info;
    
  }
}