分类 前端技术 下的文章
经纬度正则/^[\-\+]?(0(\.\d{1,10})?|([1-9](\d)?)(\.\d{1,10})?|1[0-7]\d{1}(\.\d{1,10})?|180(\.0{1,10})?)$/
纬度/^[\-\+]?((0|([1-8]\d?))(\.\d{1,10})?|90(\.0{1,10})?)$/
安装包 jszip和file-saver代码<template>
<div class="jszip">
<span @click="demoZip">downloadZip</span>
</div>
</template>
<script>
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
export default {
n- 阅读剩余部分 -
项目main.js文件引入import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)
/* eslint-disable no-new */
new Vue({
el: '#- 阅读剩余部分 -
最近在各种魔改一个老项目,遇到了一个这样的错误Ant Design Vue 局部引入 Modal 组件方式import {Row, Col, Button, Collapse, Icon, Modal, Input} from "ant-design-vue";
components: {
AButton: Button,
AInput: Input,
ACollapse: Collapse,
ACollapsePanel: Collapse.Panel,
AIcon: Icon,
AModal: Modal
},
开始看到 di- 阅读剩余部分 -
npm init -y
npm i -S koa@2
创建app.js文件,代码如下:const Koa = require('koa')
const app = new Koa()
app.use(async (ctx,next) => {
const start = new Date()
console.log('[logger middleware] before await ...')
await next()
console.log('[logger middleware] after await ...')
con- 阅读剩余部分 -
声明:此篇文章转自阮一峰大佬博客对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求。这时分两种情况。一种情况是,你需要另一个分支的所有代码变动,那么就采用合并(git merge)。另一种情况是,你只需要部分代码变动(某几个提交),这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用,就是将指定的提交(commit)应用于其他分支。$ git cherry-pick <commitHash>
上面命令就会将指定的提交commitHash,应用于当前分支。这会在当前分支产生一个新的提交,当然它们的哈希值会不一样。举- 阅读剩余部分 -
最近老搞移动端开发,赶脚调试起来很不方便,然后就发现了腾讯开源的vConsolevConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性查看 console 日志查看网络请求查看页面 element 结构查看 Cookies、localStorage 和 SessionStorage手动执行 JS 命令行自定义插件上手方法一:使用 npm(推荐)$ npm install vconsole
Import 并初始化后,即可使用 console.log 功能,如 Chrome devtools 上一样。import VConsole from 'vconso- 阅读剩余部分 -
这两天有开始搞华为VOLTE第二版了,偷懒样式直接@import,这时发现第一版样式全服错乱,查看了下是在使用@import引入css的时候,css-loader对import的文件会当做外部资源来编译造成它变为全局样式案例<style scoped>
@import "./main.css";
.VoLTE{
width: 100%;
height: 500px;
background: #434656;
background-size: cover;
}
</style>修改成<style scoped - 阅读剩余部分 -
最近开发项目在和华为Volte做对接,结果华为volte第一版还是原生加jquery来实现的,由于里面有不少需要引入外部js文件的,就给了一天的时间做对接,没办法只能剑走偏锋了首先定义一个 utils/loadScript.js 封装一个动态加载js文件的方法export function loadScript (url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.onload = () =&- 阅读剩余部分 -
最近在搞vue3+Typescript脚手架然后在定义变量的时候报错 'name' is never reassigned. Use 'const' instead prefer-const
大概意思就是 标识符'errMsg'永远不会被重新分配;使用'const'而不是'let'。(prefer-const)解决方法就是在eslint配置文件或者tslintt配置文件增加{
"rules":{
"prefer-const": "off"
}
}
Pinia 是什么?Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案Pinia 支持 Vue2 和 Vue3常见问题关于该项目和可能问题的几点说明:问:这是否取代了Vuex,是它的继任者吗?答:不,或者至少这不是主要意图问:动态模块呢?答:动态模块不是安全的类型,因此我们允许创建不同的商店,可以在任何地方导入Pinia 优势符合直觉,易于学习极轻, 仅有 1 KB模块化设计,便于拆分状态安装 Piniayarn add pinia@next
# or with npm
npm install pinia@next
用法创建一个- 阅读剩余部分 -
原因:可能是node版本导致引入依赖时bable配置问题。解决办法修改对应文件 node_modules\@babel\helper-compilation-targets\package.json 48行的 “exports”:false 为{
".": "./lib/index.js"
},
大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢?这里我把一个案例分享出来把。看下面的代码:test.html<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
- 阅读剩余部分 -
iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢?一:去掉全部的滚动条第一个方法: iframe 有一个scrolling属性,它有 auto , yes , no 这三个值。 scrolling : auto -----在需要的时候滚动条出现
scrolling : yes ------始终显示滚动条
scrolling : no -------始终隐藏滚动条
当设置 scro- 阅读剩余部分 -
在循环数组的时候基于每个对象中的某个参数来进行数据请求,获取当前对象对应的数据状态实现方法基于最新的es6中的async await 来实现首先要把对应的Promise方法进行一个封装_getReportStatus(item){
return new Promise((resolve, reject) => {
getReportStatus({reportCode:item.reportNo}).then(data => {
if(data.data.code == '0000'){
- 阅读剩余部分 -
主要语句 vnode.elm.dispatchEvent(new CustomEvent('input'));/**
* Created by liweiliang 406320591@QQ.com on 2021/01/26 23:04.
*/
import pattern from '@/utils/pattern'
let amountCheck = function (vnode, binding, el) {
// console.log(el, vnode, binding)
let reopenState = binding.modifiers.- 阅读剩余部分 -
Column配置比如:操作列{
key: 'action',
scopedSlots: { customRender: 'action', title: '变量名' },
align: 'center'
}
代码段<template slot="变量名">{{动态表头名称}}</template>
demo: 注意不要在括号 dataIndex同级节点加title属性名,否则的话scopedSlots设置的title会失效//Column
{
dataIndex: 'belong',
key: 'belong- 阅读剩余部分 -
首先来说 百度地图默认的api,通过查看接口文当 中 MapOptions -> enableMapClick:是否开启底图可点功能,默认启用new BMap.Map(mapid,{enableMapClick:false});在vue-baidu-map中,上面这个方法是无效的通过查看源码发现需要在baidu-map上添加个:mapClick="false" 就可以了官方文档:https://dafrok.github.io/vue-baidu-map/#/zh/index
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(255,0,0,.3);
background: hsla(0,0%,100%,.1)
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,.2);
-webkit-box-shadow: inset006pxrgba(0,0,0,.5- 阅读剩余部分 -
icon 自定义图标(1.14.0 新增) string|()=>VNode 一、利用自带的icon赋值个默认的icon名字就可以了,但是有时候我们需要用到实底风格的icon,所以只能用()=>VNodethis.$confirm({
title: '确认设置当前位置为出险地点?',
content: this.infoWindow.contents,
icon: 'exclamation-circle',
onOk: () => {
this.onMapClose();
c- 阅读剩余部分 -
Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] 使用 Ant Design的时候报key警告,这由于columns中定义的默认key值在返回的数据中没有当前的这个字段造成的,一个是使用rowKey默认指定一个对应的键值对,或者使用类似v-for循环中的下标index来代替:rowKey="(record,index)=>{return index}"
最近试了下 Vue.extend 方法,写好后发现访问会报如下错误vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.接下来我们分析下报错的原因在哪里和解决办法原因vue有两种形式的代码 c- 阅读剩余部分 -
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。生命周期钩子详细beforeCreate在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。c- 阅读剩余部分 -
利用moment.js来实现距离某个时间的时间差,写了个过滤方法filterTaskTime(params){
let x=moment(params);
let y=moment(); //当下时间
let duration = moment.duration(y.diff(x,'ms')); //做差
let days = duration.get('days');
let hours = duration.get('hours');
let mins = duration.get('minutes');
l- 阅读剩余部分 -
ios使用如下方法获得NaN,安卓手机则是正常计算,解决方法是换个这个时间的格式new Date("2020-07-17 23:59:59").getTime()
换成如下方式就正常了,就是‘-’换成‘/’new Date("2020/07/17 23:59:59").getTime()
正则表达式替换方法"2020-07-17 23:59:59".replace(/\-/g, '/')
首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;二、解决办法如上图所示,七个方法,基本覆盖了JS中大部分文件类型的转换与压缩,其中:1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象,其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的- 阅读剩余部分 -
HTML代码:
<input id="file" type="file">
JS代码:
var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var contex- 阅读剩余部分 -
Nginx配置https代理,一直报错 nginx: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:46这个主要原生是因为nginx没有安装ssl模块执行步骤[root@120 ~]# cd /usr/local/src/nginx-1.6.1
[root@120 nginx-1.16.1]# /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.16.1
built by gcc 4.8.5 2015062- 阅读剩余部分 -
1.随机数长度控制,定义一个长度变量(length),生成可控长度的随机数:Math.random().toString(36).substr(3,length)
2.引入时间戳:Date.now().toString(36)
3.合在一起最终办法:genID(length){
return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
}
blobToBase64(blob) {return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(newError('文件流异常'));
};
});},使用方法:thi- 阅读剩余部分 -
- 1
- 2
- 3
- 4
- ...
- 7
- 后一页 »