Vue学习记录
文章平均质量分 55
ldz_miantiao
每天住在B站的切图仔
展开
-
GoView 开源,一个好用的 Vue3 低代码开发数据大屏系统
GoView 是一个低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。 它的技术栈为:Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS原创 2022-05-04 22:07:56 · 32862 阅读 · 10 评论 -
TS 报错 Type ‘string‘ is not assignable to type ‘PositionProperty | undefined‘.
TS 报错 Type 'string' is not assignable to type 'PositionProperty | undefined'.原创 2022-04-26 11:23:42 · 3430 阅读 · 0 评论 -
vue3使用 animation.css4
vue3 animation4原创 2022-03-08 21:38:47 · 600 阅读 · 0 评论 -
轻量级状态管理库 Pinia 的实践与教学演示项目
一、什么是 PiniaPinia 是下一代的轻量级状态管理库,拥有以下优点(官网:https://pinia.esm.dev/):完整的TypeScript 支持完整的类型标支持极其轻巧,体积约1KBStore中的Actions 配置项可以执行同步或异步方法模块不需要嵌套,可以声明多个Store支持Vue DevTools, SSR和Webpack 代码拆分可能会有小伙伴问,我们不是已经有了 Vuex 了吗为什么还要一个新的框架?那么接下来我们来看看Vuex的缺点:并且我们再瞅一眼原创 2021-11-20 17:54:56 · 1296 阅读 · 0 评论 -
通过遍历Vue实例树,关闭 Element Dialog 弹窗
业务场景中遇到了外部单页需要手动关闭主页面的所有的 Element Dialog 弹窗的场景,解决方法是遍历 $root 节点树,找到已经打开的 Dialog 组件,调用它的函数,因为如果只是 JSDom 去修改 Style 是不行的,内部维护的数组会错乱产生意料之外的bug。调用时候 removeDialog (this),需要把 this 传入,因为这个函数没有写在 .vue 文件中const removeDialog = (that:any) => { const childAr.原创 2021-08-09 14:44:12 · 694 阅读 · 0 评论 -
Vue大数据可视化(大屏展示)方案升级,发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~项目地址:Vue3 可视化大屏展示界面展示(这个是动态的后面会换成 gif 图):一、项目描述这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " 数据大屏项目 ",使用 ‘.vue’ 和 ‘.tsx’ 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下.原创 2021-05-22 21:42:58 · 7341 阅读 · 3 评论 -
vue3中读取state与触发mutations、actions的写法
做一个自己的学习记录<script>import { computed, ref, watch } from 'vue'import { useStore } from 'vuex'export default { name: 'player', setup() { // todo vue3 下获取 stor 数据 const store = useStore() // 获取 state 中的 stateA const stateA = comp原创 2021-05-09 21:24:56 · 1846 阅读 · 0 评论 -
snabbdom Diff算法学习
记一波比简单的 diff 算法学习,我是基于 https://github.com/snabbdom/snabbdom学习的,各个框架的比较算法不太一样,但是大差不差。想更详细的学习可以看这个文章(有4部分哦): https://segmentfault.com/a/1190000017494569问题引导: 为什么v-for 的时候要传key?大部分的答案是直接告诉你可以增加效率,我稍微看了如下的两个核心函数才有点感觉。其实主要是 vnode 对比,然后移动旧节点比创建一个新的节点效率高。然.原创 2021-01-14 11:21:00 · 280 阅读 · 0 评论 -
Vue3.0 父子组件使用 v-model 通信的新使用方式
封装了一个处理 input 的组件,父组件使用 v-model 来监听数据值,子组件使用 $emit 的方式返回处理过的值,但是实现的方法与 Vue2.0 不太相同。子组件,注意 props 的 modelValue 和 emit 的内容<tempplate> <div> <input type="email" :value="inputRef.val" @input="updateValue" /> .原创 2020-11-13 21:27:48 · 2153 阅读 · 1 评论 -
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件(实现下拉框、弹窗关闭功能)
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ref 属性用法与 node.contains 方法来进行案例展示。hooks 方法如下// 判断元素是否在 node 区域之外import { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside = (eleme.原创 2020-11-13 09:24:45 · 2857 阅读 · 0 评论 -
Vue 的 template 中自动补全 ts 语法设置的属性
首先在 vscode 下安装 Vuter,然后打开 vscode 的配置文件, CTRL+SHIFT+P或者在插件的右边点击齿轮按钮,点击最后一个选项,然后找到里面的 settings.json 字眼(很好认,都可以点击)然后增加一条语句:"vetur.experimental.templateInterpolationService": true,然后在 vue 文件中的 template 中可以自动识别 ts 语法定义的属性了...原创 2020-11-10 22:04:21 · 3452 阅读 · 1 评论 -
Vue3.0 使用 ts 给 props 传入泛型
在 vue 中使用 ts 的泛型来规范父组件传入的 props 属性,就需要使用 vue 提供的 PropType 属性,具体用法如下<!-- * @Author: mtrun * @Date: 2020-11-10 21:21:00 * @LastEditTime: 2020-11-10 21:37:39 * @LastEditors: Please set LastEditors * @Description: 使用泛型约束 props 的值--><template&原创 2020-11-10 21:43:12 · 18469 阅读 · 6 评论 -
vue使用Font class报错:ExtractPluginMissingException: svg-sprite-loader exception
打开iconfont.css注释掉最后一个svg,然后把上一行的逗号改成分号就可以了。顺便注意一下vue.config.js中chainWebpack的配置原创 2020-07-16 16:05:36 · 4055 阅读 · 3 评论 -
解决ElementUI在IE11弹窗阴影在最顶层的问题
垃圾IE太难用了,哪怕index是对的,element的弹窗遮罩层也会覆盖在表单前面如果你有使用动画:界面切换去除transform动画如果你没有动画:我使用上一条就解决了,如果有别的解决方法,请在底部评论让我也学一学...原创 2020-07-07 21:00:49 · 810 阅读 · 0 评论 -
解决vue在IE11读取缓存的问题
垃圾IE会在发起请求的时候读取接口缓存,就贼蠢,我们要使用时间戳拼接在url来解决。最好不要直接加在参数上,怕后端会进行设置。function filterUrl (url) { return url.indexOf('?') !== -1 ? `${url}&time=${new Date().getTime()}` : `${url}?time=${new Date().getTime()}`}例子1:封装getfunction get(params, url) { r.原创 2020-07-07 20:57:10 · 695 阅读 · 0 评论 -
Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word导出为PDF一、编写工具函数和前置对element样式的修改函数@param {String} inerHTML 需要导出的html字段@param {String} typeName 需要导出的文件类型(注意最外层需要一个单独的容器包裹,使用)// 导出函数export function exportFileByInerHTML(iner.原创 2020-07-06 15:41:22 · 7954 阅读 · 10 评论 -
使用.sync实现子组件修改父组件的数据
子组件<template> <div class="aaa" v-show="visible" @click="$__changeData"></div></template><script>export default { props: { visible: { type: Boolean, default: false } }, methods: { $__changeDa原创 2020-06-16 09:36:15 · 421 阅读 · 1 评论 -
Vue钩子动画
Document转载 2020-06-09 08:14:57 · 211 阅读 · 0 评论 -
vue拦截 “ textarea ” 默认的enter(换行)事件
进行对话界面开发的时候, 经常遇到的需求就是点击enter发送数据,所以需要更改textarea的默认事件注意keydown<textarea name="user_input" ref="user_input" class="user_input" v-model.trim="user_input" cols rows @keydown="messageSendlisten" ></textarea> // todo按下快捷.原创 2020-06-03 11:10:05 · 4138 阅读 · 1 评论 -
Vue大数据可视化(大屏展示)解决方案
一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板,最近更新了详细的介绍说明,实现大数据可视化。通过 vue 组件实现数据动态刷新渲染,内部图表可自由替换。部分图表使用 DataV 自带组件,可自由进行更改,持续更新…项目地址: vue-big-screen(码云)一、项目描述一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 ...原创 2020-04-21 14:09:10 · 91665 阅读 · 59 评论 -
解决vue-cli项目多个环境部署配置问题
原文https://blog.csdn.net/linbenjian/article/details/85261201使用vue-cli3打包项目,通过配置不同的指令给项目设置不一样的配置。npm run serve时会把process.env.NODE_ENV设置为‘development’;npm run build 时会把process.env.NvODE_ENV设置为‘produ...原创 2020-04-15 20:59:42 · 843 阅读 · 0 评论 -
往codemirror/vue-codemirror中传入json数据变成一行的解决方法(格式化codemirror里的json)
项目中有个功能是实现编辑json数据,我使用了vue-codemirror框架,但是传入json后都变成了一行,于是从框架本身入手,但是未能如愿,后面从源头入手解决了这个问题。这里是展示代码的子组件,jsonDetail就是要传入的数据,它本身是一个vue中props里的一个对象 mounted() { try { this.editData = JSON.string...原创 2020-04-01 13:07:39 · 3523 阅读 · 0 评论 -
Vue在ElementUI下的input输入框中按下“点”按键自动跳转(聚焦)下一个输入框
我是根据class去获取节点,因为elementUI会对input进行多一层的渲染,所以我们在获取到当前div节点之后还要去里面找到对应的input节点这里是template<el-input @input="focusNextInput(0);" class="class1" v-model.number="first"></el-input>&...原创 2020-03-24 18:32:03 · 3876 阅读 · 0 评论 -
vue使用jsx绑定时间,元素,html字段
来自 https://juejin.im/post/5e409f02e51d4526f16e3bce要监听 JSX 中的事件,我们需要“on”前缀。 例如,将onClick用于单击事件。 render (createElement) { return ( <button onClick={this.handleClick}></button&g...原创 2020-02-28 16:39:19 · 799 阅读 · 0 评论 -
解决Vue2无法监听数组的问题
文章来自:https://juejin.im/post/5d59f2a451882549be53b170由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength为了解决第一个问题,Vue ...原创 2020-02-21 23:54:53 · 2105 阅读 · 0 评论 -
详细的Vue生命周期流程图解
图片来自掘金,在这里种草 原文:https://juejin.im/post/5d41eec26fb9a06ae439d29f转载 2020-02-21 23:12:37 · 290 阅读 · 1 评论 -
vue中处理多类型button(render方法)
文章借鉴于掘金,在这里种草 https://juejin.im/post/5e475829f265da57444ab10f通过v-if来进行多种类型的判断,会使代码十分复杂,我们需要去封装一个button组件<template> <div> <h1>I am Home</h1> <!-- 假设按钮有多种类型,通过va...原创 2020-02-20 15:46:22 · 3227 阅读 · 0 评论 -
vue中的全局权限处理
文章借鉴了掘金的内容,在这里种个草 原文https://juejin.im/post/5e475829f265da57444ab10f/* 在项目里新建一个common文件夹用于存放全局 .js 文件 这种全局文件夹做法相当普遍,一般项目里都应该有这样一个文件夹来管理全局的东西*/// common/jurisdiction.js 用于存放与权限相关的全局函数/变量...原创 2020-02-20 15:42:12 · 1207 阅读 · 0 评论 -
在vue中使用export default导出的class类
首先我们要创建一个类并导出class win { getProcessInfo() { return 233; }}export default new win(); //用的是export default方法,并且导出的时候就已经实例化了在vue文件中引用<script>.......这里是template........<script&...原创 2020-02-16 15:47:36 · 17405 阅读 · 0 评论 -
vue模拟点击事件
https://blog.csdn.net/jiandan1127/article/details/103381636转载 2020-01-31 20:58:59 · 8397 阅读 · 1 评论 -
nuxt结合vue进行异步(async和await)的ssr页面渲染
Nuxt 提供了 asyncData进行ssr页面渲染,这里进行演示//服务端渲染写法 async asyncData() { let resuleData = await axios.get("http://localhost:3000/city/list"); if (resuleData.status === 200) { return { lis...原创 2020-01-28 19:28:09 · 1190 阅读 · 0 评论 -
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
首先 sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道服务端:sockjs-node(https://github.com/sockjs/sockjs-node)客户端:sockjs-clien(https://github.com/sockjs/sockjs-client)如果你的项目...转载 2019-09-09 18:36:02 · 349 阅读 · 1 评论 -
Vue中将data中绑定的对象复制给另外一个对象会同时改变的问题
使用vue 的时候如果直接把data里面的对象直接复制给一个新的变量,其实会出现改变的问题,因为传递过去的是地址,原型链依然没有改变。可以使用方法:let newData =JSON.parse(JSON.stringify(this.projectData)) 其中projectData就是你绑定的值,我们借助了JSON.parse,会帮我们开辟一个新的地址空间,而不是原来的地址。...原创 2020-01-13 20:41:53 · 3632 阅读 · 0 评论 -
vue在框架的参数里写模板字符串
有时候需要在框架的参数里动态写入内容使用下面的方式就可以动态的将中文和index赋值给timestamp<aaa :timestamp="`构建顺序${index+1}`" v-for="(item,index) in data" ></aaa>...原创 2020-01-13 17:19:50 · 1058 阅读 · 0 评论 -
vue-chartjs画渐变色
效果父层容器的css自己写宽高等样式就可以了,组件代码直接将下面的内容拿去调用即可<script>import { Line } from "vue-chartjs";export default { data() { return { gradient: null, gradient2: null }; }, exten...原创 2019-11-26 19:56:34 · 884 阅读 · 0 评论 -
vue-chartjs案例
最近公司项目需要表格, 然后又是vue-cli搭建的框架,于是就找到了vue-chartjs这个组件, 下面展示一个案例。这是效果这里放公共图标组件VueLineChart.vue<script>// CommitChart.jsimport { Bar } from 'vue-chartjs'export default { extends: Bar, p...原创 2019-11-26 18:56:09 · 1480 阅读 · 0 评论 -
vue组件的props进行数据验证
组件之间传值使用的是props,但是我们也可以进行数据校验。Vue.component("my-component",{ props:{ //数字类型 propA: Number, //必须是数字或者字符串类型 propB: [String, Number], //布尔值,默认为true propC: { type: Boolean, default: tr...原创 2019-11-05 21:55:24 · 610 阅读 · 0 评论 -
Vue组件放置在<table>等限制标签下
html界面有的标签是由限制的,比如table下就需要body等,那么vue组件需要怎么做呢?解决方法如下:<div> <table> <tbody is="my-component"></body> </table></div>...原创 2019-11-05 21:46:26 · 246 阅读 · 0 评论 -
Vue下载本地文件路由被vue-router修改问题解决方法(基于ElementUI框架)
标题使用脚手架创建的项目,下载文件时用a标签的话,转跳的页面路由会被vue-router强行改掉,根本无法下载文件。我也是一点一点的修改才使用了iframe的方法去跳过它。以下所有的路径都要根据自己的项目来配置点击部分代码执行的方法//下载download(row) { let downloadFileUrl = this.$http.defaults.baseURL + "...原创 2019-10-13 01:05:06 · 1653 阅读 · 0 评论 -
vue中v-mode去除输入内容的首尾空格
去除v-model中的首尾空格可以使用.trim修饰符<input type = "text" v-model.trim="message">原创 2019-09-15 22:42:47 · 4101 阅读 · 0 评论