vue
南城夏季
一路浅行
展开
-
vue echart i18n 国际化处理
项目:数据大屏,采用vue2+echart+i18n。原创 2023-02-28 10:51:48 · 1333 阅读 · 0 评论 -
前端埋点监听按钮点击事件(方案)
给不同的按钮添加不同的标识,在触发自定义指令的时候,挂载监听事件xxx.vue< spantriggerType : 'click' , currentUrl : $route . path , businessCode : 19 , actionType : '点击新增按钮' , } " > 新增 < / span >// 自定义埋点指令 Vue . directive('track' , {//钩子函数,只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 /*原创 2023-02-27 16:26:27 · 1822 阅读 · 1 评论 -
在vue的jsx中使用图片预览插件v-viewer
vue v-viewer组件在jsx的使用原创 2022-06-23 09:45:52 · 424 阅读 · 0 评论 -
前端知识体系3:【webpack+http】
6. webpack9.1. webpack的4要点(entry、output、loader、plugins)【网易】详情>9.2 webpack loader 和 plugin 的区别9.2 webpack import 打包后的结果是怎样的?【字节】import经过webpack打包以后变成一些Map对象,key为模块路径,value为模块的可执行函数;代码加载到浏览器以后从入口模块开始执行,其中执行的过程中,最重要的就是webpack定义的__webpack_require原创 2022-01-03 12:55:16 · 180 阅读 · 0 评论 -
前端知识体系2:【开放性/项目/node/算法/工程化】
12. node11.1 node stream 去取一个超大数据量的日志,由于内存限制每次只能取一部分,现在希望在全部日志中随机取一万条,如何做node不是很熟,只是会用,写过一些接口。我的想法是:每次需要取的时候去触发一个定时任务,在定时任务里面,每次取1000个,然后定义一个数组arr,接收每次取出的数量,再对arr去重,当arr大于1万时,停止取出,并且清除定时器,然后截取arr中的前10000条进行返回。13. 项目面试总结:简历写的每个点都要经得起深挖面试前一定要整理面试知识点和原创 2022-01-03 12:49:55 · 182 阅读 · 0 评论 -
前端知识体系1:【css/js/vue/es6/手写/安全/优化】
vue 2升级vue31.升级依赖cnpm install vue@next vue-loader@next @vue/compiler-sfc vue-style-loader -S2.修改不兼容代码原创 2022-01-03 12:38:39 · 826 阅读 · 0 评论 -
type check failed for prop “value“. Expected String, Number, got Null.
vue项目渲染from表单的时候报错:type check failed for prop "value". Expected String, Number, got Null.这种情况大多出现在Select下拉框中,是由于渲染项目含有null,例如: <FormItem prop="inventorybbcClearanceCode" label="配置1210清关申报主体"> <Select v-model="form.inventorybbcClearan原创 2021-12-21 16:20:02 · 3192 阅读 · 0 评论 -
注册发布自己的npm包
1. 注册npm地址输入账号,密码,邮箱然后去邮箱验证,验证完再继续下面的操作,不验证的话,npm publish会报4032. 创建npm包1.npm init生成package.json文件,里面的name值可以取一个特殊点名字,以免发包的时候包名冲突导致发布不上{ "name": "longweixiahao", "version": "1.0.0", "description": "", "main": "index.js", //注意这里指向我们暴露的入口文件 "原创 2021-12-16 17:24:04 · 1663 阅读 · 0 评论 -
Github Actions 自动构建前端项目并部署到服务器
参考文章在开始操作之前,需要先在项目仓库建立page站点。1. 创建yml文件在你需要部署到 Github Page 的项目下,建立一个 yml 文件,放在 .github/workflow 目录下。你可以命名为 ci.yml,它类似于 Jenkins 的 Jenkinsfile 文件,里面包含的是要自动执行的脚本代码。文件内容为name: A TO A:GH_PAGESon: # 监听 master 分支上的 push 事件 push: branches: - ma原创 2021-12-16 12:20:23 · 1739 阅读 · 0 评论 -
手撕发布订阅模式 eventBus
1.手撕发布订阅模式 eventBus什么是发布订阅模式比如我们很喜欢看某个公众号号的文章,但是我们不知道什么时候发布新文章,要不定时的去翻阅;这时候,我们可以关注该公众号,当有文章推送时,会有消息及时通知我们文章更新了。上面一个看似简单的操作,其实是一个典型的发布订阅模式,公众号属于发布者,用户属于订阅者;用户将订阅公众号的事件注册到调度中心,公众号作为发布者,当有新文章发布时,公众号发布该事件到调度中心,调度中心会及时发消息告知用户。1-1. eventBus的基本使用我们要实现eventBu原创 2021-12-14 15:06:08 · 1490 阅读 · 0 评论 -
[vite] Internal server error: Failed to parse source for import analysis because the content contai
报错:[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.安装@vitejs/plugin-vuecnpm install @vitejs/plugin-vue --save安装完后记得重新cnpm install原创 2021-12-13 12:11:56 · 9746 阅读 · 6 评论 -
iview inputNumber 输入框有值但是校验失败
表单校验的时候,输入输入的数字,但是表格依然校验失败。原因:校验的时候,是先执行校验的回调函数,再执行修改赋值。 可以通过打印验证是否是这种情况:很明显,获取修改后值的方法111111打印在后,校验逻辑2222打印在前。<template> <Form ref="form" inline :model="form" :label-width="120" :rules="rules"> <FormItem label="汇款金额" prop="money原创 2021-12-09 18:30:03 · 2762 阅读 · 0 评论 -
js金额转换为千分位格式
/** * 金额转换为千分位,例:2000=>2,000 * @param {number} number 要格式化的数字,例:2000 * @param {number} decimals 保留几位小数,例:2 * @param {string} dec_point 小数点符号,例:'.' * @param {string} thousands_sep 小千分位符号,例:',' * @param {string} roundtag 舍入参数,默认 'ceil' 向上取,'floo原创 2021-12-08 15:05:17 · 701 阅读 · 0 评论 -
网络图片url转base64
getBase64(imgUrl) { let _this = this var xhr = new XMLHttpRequest() xhr.open('get', imgUrl, true) xhr.responseType = 'blob' xhr.onload = function() { if (this.status == 200) { var blob = this.response原创 2021-12-08 14:13:24 · 648 阅读 · 0 评论 -
iview table里面的输入框值不更新
vm.table.data[params.index].charge = val //修改输入值 data() { return { table: { data: [], cols: [ { title: '添加时间', key: 'addTime', minWidth: 120, align: 'center',原创 2021-12-07 15:34:01 · 470 阅读 · 0 评论 -
怎么在单独的js文件中使用vuex?
在对应的js文件中引用我们的vuex文件crad.jsimport store from '@/store/index.js'store.dispatch('delComponent', item.id)store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)new Vuex.Store({ state: {} ...})export default store...原创 2021-12-02 15:39:57 · 3320 阅读 · 0 评论 -
async,await 在forEach遍历中报错
先看报错wait is only valid in async functions and the top level bodies of modules ,翻译就是:wait仅在异步函数和顶级模块体中有效报错代码: async function delComponent() { slots.title.forEach((item) => { await store.dispatch('delComponent', item.id) })}原创 2021-12-02 15:37:10 · 1274 阅读 · 0 评论 -
webpack 代理报504
重新运行项目就可以了原创 2021-12-01 11:20:03 · 935 阅读 · 0 评论 -
iview表单校验,输入框有值校验失败
问题当做表单校验时,输入框回显了后端返回的值,但是点击确认按钮时,却校验失败,提示当前项不能为空。分析:由于后端返回的是number类型,而其前端却使用的是普通输入框,所以导致类型不匹配。普通输入框即使我们输入的是数字,打印出来的值也会是字符串,这就说明了,普通输入框不可能会输出数字,但是回显是又是数字,好了,类型不匹配,验证自然不通过。解决让类似保持一致,可以把普通输入框改成数字输入框,并确保后台返回的类似也是数字。也可以继续使用普通输入框,然后在获取后台对应的值的时候,将number转换为原创 2021-11-30 14:13:46 · 3211 阅读 · 0 评论 -
vue定义全局方法,全局组件,全局指令,全局过滤器
1.全局方法1-1.创建全局方法文件global.jsexports.install = function(Vue, options) { // 当前时间前7天到今天的时间的【全局方法】 Vue.prototype.$frontDate7 = function() { // $frontDate7就是这个方法的全局方法名--【下面的方法内容可以忽略】 let dateFormat = timestamp => { var date = new Date(timest原创 2021-09-24 18:29:44 · 774 阅读 · 0 评论 -
async,await简单用例
async a(){ const result = await this.b(); // async 返回值会封装成一个promise return result }, async b() { return 1 }, async test() { console.log(this.a()) //async 返回的是一个promise,打印:Promise {<pending>} thi.原创 2021-09-13 10:40:13 · 188 阅读 · 0 评论 -
gz面试笔记
字节一面1. 什么是协商缓存与强缓存;详情>2. 讲讲客户端存储的方式有哪些;详情>3. 如何防止脚本获取cookie;详情>4. 讲讲状态码301/302/307的区别;详情>5. 讲讲csrf、xss网络攻击;详情>Content Security Policy>6. 如何解决前端跨域;详情>7. js 事件循环模型;详情>8. 实现模板字符串; function parseString(str, obj) { O原创 2021-09-10 22:59:39 · 1269 阅读 · 0 评论 -
iview 表单日期有值校验失败
表单校验失败可能情况1. 双向绑定使用的是:value解决:将:value改成v-model <!-- 通关期限 --> <FormItem label="企业通关期限" prop="tannetCompanyDTO.copEndDate"> <DatePicker type="date" format="yyyy-MM-dd" //:value="form.tannetCompanyDTO.cop原创 2021-07-28 18:31:02 · 670 阅读 · 0 评论 -
[Vue warn]: Invalid prop: type check failed for prop “value“. Expected String, Number, got Null.
错误场景:vue 渲染下拉框的时候报这个错,value传了个空报错内容:[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Null.代码: <Select v-model="form.merchant" @on-change="changeWholeLink" clearable> <Option v-for="item inMercha原创 2021-07-14 12:11:12 · 2278 阅读 · 0 评论 -
parse函数(vue源码分析4)
parse函数(vue源码分析4)theme: juejinhighlight: arduino-light以下代码和分析过程需要结合vue.js源码查看,通过打断点逐一比对。1. 执行流程我们先梳理下执行流程:// 执行1 (末尾的mount)Vue.prototype.$mount = function ( el, hydrating ) { var ref = compileToFunctions( /原创 2021-07-05 17:20:21 · 1109 阅读 · 0 评论 -
vue 生命周期(vue源码分析2)
vue 生命周期(vue源码分析2)theme: juejinhighlight: arduino-light以下代码和分析过程需要结合vue.js源码查看,通过打断点逐一比对。1.beforeCreate先梳理下执行流程new Vue前,首先会执行initMixin(Vue);,但是此时只是挂载一个_init到Vue上,并没有执行_init。接着,执行 new Vue(引入Vue文件后,html或者main.js最终要有这个入口)进入function Vue(options)再执原创 2021-07-05 17:19:40 · 252 阅读 · 0 评论 -
vue源码分析【1】-new Vue之前
以下代码和分析过程需要结合vue.js源码查看,通过打断点逐一比对。一. 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body> <div.原创 2021-07-05 17:19:02 · 439 阅读 · 1 评论 -
前端知识体系(2)-vue篇
1. 简单说下vuevue是渐变式框架,根据自己的需求添加功能vue数据驱动采用mvvm模式,m是数据层,v是视图层,vm是调度者SPA单页面应用,只有一个页面,加载速率快组件化,复用性强那么,它有什么缺点?vue2底层基于Object.defineProperty实现响应式,这个api本身不支持IE8及以下浏览器csr的先天不足,首屏性能问题(白屏)由于百度等搜索引擎爬虫无法爬取js中的内容,故spa先天就对seo优化心有余力不足(谷歌的puppeteer就挺牛逼的,实现预渲染底层也原创 2021-06-11 18:22:38 · 1393 阅读 · 6 评论 -
前端知识体系(1)-js篇
1 声明1-1 「js函数声明三种方式:」(1) Function()构造器var f =new Function()(2) 函数声明function f (){ console.log(2);}(3) 函数表达式var f = function() { console.log(1); }1-2「js变量声明:」var声明的变量会挂载在window上,而let和const声明的变量不会var声明变量存在变量提升,let和const不存在变量提升(原创 2021-05-28 16:55:25 · 319 阅读 · 2 评论 -
iview表单动态校验 提示信息错位
一开始我们对表单所有项进行校验,可以看到校验信息是正常的:然后我们取消一个口,通过v-if指令,justHz为false来隐藏掉对应的表单行:<FormItem label="执行标准适用国别" prop="standardPlace" v-if="justHz" :rules="{ required: justHz, message: `请选择执行标准适用国别`, trigger: 'blur' }"> <Select v-model="form.data.stan原创 2021-04-22 11:17:00 · 1467 阅读 · 0 评论 -
小程序接口安卓报401,ios正常
这种情况可能是因为接口不需要传递Authorization,但是前端传递了Authorization并且是空,把Authorization去掉就可以了。原因其实是后端接口对Authorization做了判断原创 2021-04-13 17:37:13 · 510 阅读 · 0 评论 -
vue + iview rules表单验证有值却提示错误,验证不过
内容<FormItem label="重量(KG)" prop="grossWt"> <Input v-model="detailData.grossWt" /> <!-- {{ detailData.grossWt }} --> </FormItem>rules grossWt: [{ required: true, message: ".原创 2021-04-01 16:02:50 · 3389 阅读 · 0 评论 -
iview 的table表格组件怎么使单元格可编辑和输入
iview的官方文档没有给出可以编辑表格的属性,但是有时候我们有这个需求,希望直接在表格上改数据,就需要编辑功能了表格的列定义中,在需要编辑的字段下使用render函数template表格组件<Table border :data="detailData.vos" :columns="table.cols" :loading="table.loading"></Table>data中定义table对象 table: { cols: [ .原创 2021-04-01 10:05:51 · 1251 阅读 · 0 评论 -
小程序自带的关闭按钮距离顶部的距离(设置按钮与其对齐)
目录1.情景2.官方api3.方案4.效果1.情景很多时候,需要使轮播在顶部,并且占有更多的视图区,就需要去掉导航栏,在轮播上加一个浮动的返回按钮,为了好看,就需要使得自定义按钮跟自带的关闭按钮对齐2.官方apiObject wx.getMenuButtonBoundingClientRect()基础库 2.1.0 开始支持,低版本需做兼容处理。获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。返回值Object菜单按钮的布局位置信息属性 类型 说明wi原创 2021-02-02 10:05:37 · 2560 阅读 · 0 评论 -
uni-app 裁剪插件传了图片后,重复打开会出现第一张图片在左上角
关于传了图片后,重复打开会出现第一张图片在左上角的,可以通过位置来在视窗隐藏掉uni-app裁剪插件,https://ext.dcloud.net.cn/plugin?id=1076原创 2021-01-29 15:56:33 · 308 阅读 · 0 评论 -
iview table sortable排序不正确
解决方案问题方法注意点问题排序过程中发现有的项,倒序没问题,正序排序会有几个是乱的,暂时没明白是什么原因造成的。方法 { title: '周排名', key: 'thisWeekRank', sortable: true, //配置排序 align: 'center',原创 2021-01-28 11:35:48 · 982 阅读 · 0 评论 -
vuepress不能热更新怎么解决
修改package.json文件的dev字段,将: "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs", "test": "echo \"Error: no test specified\" && exit 1", "deploy": "bash deploy.sh" },改为以下: "scripts": { "dev": "vuepres原创 2020-11-06 10:42:04 · 2094 阅读 · 2 评论 -
iview tab 组件设置当点击对应tab时才渲染和调用对应接口
tabs标签页,默认一开始就加载所有tab页中的内容,但有时候tab较多,而我们只关注其中一两个tab,这样就造成了性能浪费。所以,我们想当点击对应tab时才渲染和调用对应接口我们可以通过tab提供的事件,拿到当前点击tab的name,然后根据name来用v-if设置显示;<template> <Tabs @on-click="getTabName" value="generalSetup" name="setTab"> ...原创 2020-10-15 18:37:06 · 1648 阅读 · 0 评论 -
vue路由跳转到一个新的页面
1.直接跳转 this.$router.push({ name: "shop-article-Edit", query: { flag: "edit", data: encodeURIComponent(JSON.stringify(params.row)) }, });2.跳转到新的页面关键点:resolve获取到路由数据后,直接用js原生跳转的..原创 2020-10-10 15:23:25 · 2034 阅读 · 0 评论 -
vue 点击左侧菜单右侧视图切换
1.业务需求:点击左侧的侧边栏菜单,希望只更新右侧的视图,实现这种局部更新的效果。这里就需要用到Vue的路由控制了。2.实现:2-1 在router.js中:截图:router.js完整代码:import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import center from '../views/center.vue...原创 2020-09-28 12:35:14 · 15000 阅读 · 15 评论