qq_43358160的博客

vue开发PC端摄像头拍照功能

只需要在配置项加上： grid: { top: '50px', left: '50px', right: '15px', bottom: '50px' },

什么是文件流？如图1、在封装接口的时候设置responseType: ‘blob’return axios({ url: `/web/download/excel/${roundsId}`, method: 'post', data, responseType: 'blob'})2、调用接口部分exportAchievement(this.roundsId, data).then(res => { this.downFile(res, '学生成绩列表') }).catc

其实使用css就可以实现*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:auto;

this.amount = this.amount.match(/^\d*(\.?\d{0,4})/g)[0] || null

使用vue-esign即可第一步：安装vue-esignnpm install vue-esign --save第二步：使用1.main.js 中引入import vueEsign from 'vue-esign'Vue.use(vueEsign)2.html<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"

代码开发前准备1）登陆小程序管理平台-开发–开发设置-业务域名加上需要跳转的路径的域名注意：1.是业务域名不是服务器域名；2.需要配置校验文件2）登陆公众号管理平台-公众号设置–功能设置-网页授权域名加上和上面小程序业务域名一样的域名地址。用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠。注意：域名前面不加https协议代码开发-小程序端<view class="list-wrap"> <web-view sr

App.vuehtml<transition name="fade"> <router-view /></transition>css.fade-enter-active,.fade-leave-avtive { transition: opacity 1s;}.fade-enter,.fade-leave-to { opacity: 0;}

加个定时器即可单击事件代码：handleNodeClick(data) { var that = this // 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件 clearTimeout(that.time) that.time = setTimeout(() => { // 写单击事件执行的逻辑代码 },300)}双击事件代码// 双击事件 dbclickNode() { cl

import HanziToPinyin from "../../hanziToPinyin";export default class Message extends Vue { mounted() { let hanZi = "你好吗"; console.log("输出首字母"+HanziToPinyin.instance.initialTreatment(hanZi)); } }hanziToPinyin.tsimport Vue fro

在根目录新建vue.config.js文件module.exports={ publicPath:"./"}再次打包即可

async 方法名() { for (let i = 0; i < this.mlList.length; i++) { for (let j = 0; j < this.mlList[i].child.length; j++) { const res = await postapplicationJson( { id: this.$route.params.id, c

this.name = val.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/ig, '')

1、首先给大div和列表div分别加上ID2、给大div加上滚动事件@scroll="hanldeScroll"3、JS代码hanldeScroll(e) { // 获取eagleMapContainer的真实高度 const boxHeight = document.getElementById('eagleMapContainer').offsetHeight; // 获取table_list的真实高度（浮动内容的真实高度） const tableHeight = document.

需求：将页面中的元素转成图片，支持保存或下载。要求下载的图片包含页面背景，头像，用户名，文本为“我的邀请码”和个人二维码。实现：将页面绘制到canvas中，生成base64图片链接，支持移动端的长按保存图片。技术与插件：vue，qrcodejs2，html2canvas代码：<template> <div class="bigbox"> <div class="box" ref="imageTest"> <div class="boxTop"&g

一、安装npm install qrcodejs2 --save二、引入import QRCode from 'qrcodejs2'export default { components: {QRCode}, data() { return { }}三、页面调用<div class="bookcode" id="qrcode" ref="qrcode1"></div>四、JSmounted() { this.qrco

getNumber(){ let arr = res.data.map(item => { return (item.volume_24h_usd=this.bigNumberTransform(item.volume_24h_usd)); }); console.log(arr)}bigNumberTransform (value) { const newValue = ['', '', ''] let fr = 1000 let num = 3 let text

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({ routes: [{ path: '/', component: () => import('@/views/User/login') }, { path: '/index', component: () => import('@/views/Index/index

移动端优先，可禁止用户缩放和双击放大，在App.vue中的script内加入以下代码 window.onload = function() { document.addEventListener('touchstart', function(event) { if (event.touches.length > 1) { event.preventDefault(); } }); document.addEventListener('gesturesta

如下图所示解决方案：找到build>check-versions.js文件中的:if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm })}将上述代码注释掉 再运行npm run build 就可以打包项目了在

效果图html代码<span v-for="(item, index) in star" :key="index" :class="index <= s_l?'el-icon-star-on':'el-icon-star-off'" @click="getStar(index)"></span>js代码export default { data() { return { star: [0, 1, 2, 3, 4], s_l: -1, old_

html部分 注册方法<!-- 新增点击富文本图片放大功能 --><div class="wendang" v-html="content" @click="showImg($event)"></div>放大展示区dialog<!-- 富文本图片放大 --> <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">

this.productInfo.content = this.productInfo.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");在给变量赋值的时候使用正则表达式更改图片的大小

需求：每隔一分钟自动刷新一下订单列表，同时发送请求，重新渲染数据，以到达实时更新。JS定时器有两种：setInterval(function(){}, milliseconds)；//——会不停的调用函数setTimeout(function(){}, milliseconds)；//只执行函数一次乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器

echarts X轴显示不全 如下图首先，设置 interval: 0，如下如果出现文字重叠axisLabel: { //x轴文字的配置 show: true, interval: 0,//使x轴文字显示全 textStyle: { color: "rgba(219, 225, 255, 1)" }, formatter

var div=t.$refs.newsBox;div.scrollTop = div.scrollHeight;如果需要异步的话可以加上setTimeout

1、在utils新建一个astrict.js// 引入路由和storage工具函数import router from "../router"var lastTime = new Date().getTime() //点击的最后一次时间var currentTime = new Date().getTime() //现在时间var timeOut = 60 * 60 * 1000 //设置超时时间: 60分钟window.document.onclick = function() { //

单独对element-ui中的el-table的滚动条修改： // 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd;

1、先安装xlsx和file-savercnpm install --save xlsx file-saver2、Script部分import FileSaver from "file-saver";import XLSX from "xlsx";exportexcel() { //设置当前日期 let time = new Date(); let year = time.getFullYear(); let month = time.ge

1注册指令Vue.directive('clickoutside', { bind(el, binding) { function handler(e) { if (el.contains(e.target)) { return false; } let isReturn = false binding.arg.map(item => {

1、在base.css中加入该样式/*全局滚动条样式*/::-webkit-scrollbar { width: 5px; height: 14px;} ::-webkit-scrollbar-thumb {/* background-color: #01c8dc;border-radius: 3px; */ background-color: #b6b6b6;}/*全局滚动条样式结束*/如果想局部的话就在想要改变滚动条样式的vue文件中写上CSS样式即可。

1、使用命令行安装sortablejsnpm install sortablejs --save然后再需要表格的vue文件里面引入import Sortable from 'sortablejs'2、完整代码<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left">

前端更改service.js中的测试端口后端更改users.js中的app.js中的跨域端口config.js

一、安装nodejs参考我的博客添加链接描述安装即可二、利用命令行安装需要用到得插件1、vuexnpm install vuex --save安装完成之后，在项目mainjs中引入即可import Vuex from 'vuex'Vue.use(Vuex)2、weui在weui官网下载weui文件即可然后把weui.css和weui.js引入到项目根目录中3、axios由于我们需要经常用到axios向后台发送请求，所以我们可以给axios封装一下在项目的src文件中创建一个uti