Vue
关注
分享
扫一扫
文章平均质量分 55
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
SmallTeddy
('b' + 'a' + + 'a' + 'a').toLowerCase()
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
如何在 vue 项目中创建 svg 组件
在Vue项目中，SVG是一种非常常见的图像形式。与传统的矢量图像不同，SVG可以设置可缩放且清晰度高的图像形式。Vue使得使用SVG组件非常容易，本文将介绍如何在Vue项目中创建SVG组件。原创 2023-12-01 09:36:38 · 1008 阅读 · 0 评论 -
前端文件下载实现方案，Blob对象为你实现任意文件下载
本文主要介绍了如何使用Blob对象在前端实现文件下载的功能。文中首先介绍了什么是Blob对象，它表示一个二进制大型对象，可以用来表示文件或二进制数据。然后详细讲解了几种生成Blob对象的方式，以及如何通过方法生成一个对象URL，设置到a 标签的href属性实现文件下载。文末还提到了一些优化下载体验的方法,比如设置download属性、使用click方法触发下载等。掌握Blob的使用可以实现强大的前端文件下载、上传、二进制数据处理功能,是很重要的能力。本文内容通俗易懂,可以帮助读者快速理解Blob的用法。原创 2023-11-07 14:34:33 · 2579 阅读 · 2 评论 -
一文了解Vue3.3新特性
通过 defineSlots 宏定义，您可以明确指定插槽的名称、预期接收的属性类型以及在模板中使用插槽时的属性类型。您可以使用事件名作为键，参数列表的数组类型作为值，以指定事件的参数。Vue 3.3 引入了 defineModel 宏定义，可以自动注册 prop，并返回一个可直接修改的 ref，简化了双向绑定的使用方式。除了这些特性之外，Vue 3.3 版本还进行了一些维护基础设施的改进，以提升构建速度、测试速度和类型生成速度，并引入了全面的回归测试。的组件中使用导入的类型，并支持一些复杂类型。原创 2023-07-14 14:06:09 · 912 阅读 · 0 评论 -
线上项目缓存导致数据不一致问题解决方法
项目做了cache缓存，用户登录之后，会将table的列表项缓存起来，每次用户登录，会先取缓存的数据，如果没有缓存，再取代码中的数据，就导致发布项目之后，线上项目数据优先取本地缓存，导致发布后的一些数据与线上数据不一致。原创 2023-03-03 18:01:48 · 471 阅读 · 0 评论 -
锚点定位使内容在指定区域显示
在使用锚点定位时，使用 scrollIntoView 方法，导致整个页面随着锚点跳转原创 2023-03-03 17:56:17 · 543 阅读 · 0 评论 -
el-table无限滚动问题解决方法
做项目的时候，二次封装了el-table 组件，但是当想让 table 高度随着内容增大而增大时，空数据的时候导致了页面无限增加高度的问题。原创 2023-03-03 17:45:08 · 2563 阅读 · 0 评论 -
tsconfig.json无法写入文件“xxx”，因为它会覆盖输入文件报错解决
无法写入文件“xxx”，因为它会覆盖输入文件。文件中添加如下代码配置。原创 2022-10-26 17:07:03 · 8447 阅读 · 0 评论 -
element-plus中el-dialog导致props报错问题解决
当我们在开发 `vue3` 项目搭配 `element-plus` 时，要使用 `el-dialog` 组件时，可能很多小伙伴是从 `vue2 + element-ui`过来的，因此在使用的时候会将 `visible` 控制显示的参数通过父组件传递进来，导致上面的报错。> tips：因为`element-plus` 删除了 `visible` 属性，因此这里要用 `v-model`，否则会报 `el-dialog` 组件上找不到 `visible` 属性的错误。原创 2022-10-24 23:26:06 · 4001 阅读 · 4 评论 -
解决el-select远程搜索数据抖动问题
1、问题描述在选择下面项目团队，容器集群，容器堆栈，容器服务名的时候，第一次输入el-option列表会从无数据变成搜索到的数据，就像上图中，会出现数据抖动。2、解决方法<style scoped> .el-autocomplete-suggestion { display: none; }</style>...原创 2022-05-17 22:27:12 · 2157 阅读 · 0 评论 -
项目配置Prettier
Prettier配置指南原创 2022-05-09 15:47:02 · 2804 阅读 · 2 评论 -
前端通过node实现本地模拟请求后端接口调试
1、场景鲁迅曾经说过，任何没有使用场景的需求都是无用的需求。在前端项目开发中，我们经常会遇到前端比后端开发快的时候，或者自己写了一个简单的项目demo，但是需要数据，这时候就出现了技术瓶颈。2、示例在element文档中，select有这样一个功能组件 -> 远程搜索这里的组件描述就是 -> 从服务器搜索数据，输入关键字进行查找。3、本地测试组件我们直接复制官方文档的例子，很轻松就能够在我们本地将组件跑起来，但是我们看到例子中的请求，是模拟的后端请求，数据都是从states中取的原创 2022-04-13 09:27:07 · 1969 阅读 · 0 评论 -
vue项目json格式化显示
1、在项目开发中遇到json数据展示2、利用函数进行json格式化transitionJsonToString(jsonObj, callback) { // 转换后的jsonObj受体对象 var _jsonObj = null; // 判断传入的jsonObj对象是不是字符串，如果是字符串需要先转换为对象，再转换为字符串，这样做是为了保证转换后的字符串为双引号 if (Object.prototype.toString.call(jsonObj) !原创 2021-12-01 17:39:28 · 5408 阅读 · 11 评论 -
优化el-select中的icon显示
1、要实现的样式2、说明首先这个样式用el-input很好实现，因为在element的el-input文档中，提供了一个suffix-icon属性。但是直接用于el-select发现并不通用，而这里选择用el-select是因为点击有下拉框，输入支持本地搜索。3、实现<el-select class="filter-select" v-model="database" size="mini" filterable placeholder="请输入搜索条件"> <el-opt原创 2021-09-26 10:15:16 · 5340 阅读 · 6 评论 -
vue项目中使用vue-codemirror代码编辑器
1、下载npm install vue-codemirror --save2、使用main.ts代码：import Vue from 'vue';import VueCodemirror from 'vue-codemirror';import 'codemirror/lib/codemirror.css';Vue.use(VueCodemirror);组件中代码：<template> <div class="dbServices-sqlconfig"&原创 2021-09-24 18:00:07 · 2267 阅读 · 3 评论 -
关于v-model双向数据绑定的探索
1、示例代码 <div class="main"> <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input type="text" v-model="userInfo.username"></el-input&g原创 2021-09-01 09:43:11 · 1031 阅读 · 0 评论 -
基于Vue的文件列表展示上传和删除
1、界面效果2、功能介绍1、实现了文件的上传功能2、实现了文件的删除功能3、实现了详情说明3、实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de原创 2021-08-19 11:06:39 · 3676 阅读 · 1 评论 -
删除input中type=number时右边的上下箭头样式
1、修改前2、添加样式input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}input[type=number] { -moz-appearance: textfield;}3、修改后原创 2021-07-26 10:59:03 · 1668 阅读 · 0 评论 -
el-card实现菜单栏效果
1、效果2、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-07-23 16:58:05 · 2820 阅读 · 0 评论 -
利用el-tooltip来对el-select选项过长进行优化
1、缺陷演示可以看到当选项过长时，会撑开选项框。2、优化后效果演示主要是做出的省略操作，并且鼠标移动上去显示全部的信息。3、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten原创 2021-07-09 14:18:52 · 6834 阅读 · 0 评论 -
element中表单动态添加demo
一、功能介绍基于element组件，使用组件主要有el-dialog、el-form和el-date-picker等。功能函数有新增addDomain、删除removeDomain和提交submitForm。二、效果展示1、dialog的显示和关闭2、新增表单项，提交有数据3、删除表单项，默认保留一项（第一项无法删除），可重置数据（天数忘记重置了）三、完整代码<!DOCTYPE html><html lang="en"><head> <原创 2021-07-02 09:43:32 · 1803 阅读 · 0 评论 -
多个输入框的输入校验
1、代码<template> <div> <el-popover placement="top-start" title="已占用端口" width="290" trigger="click"> <p>{{ this.ip_list ? this.ip_list.join(', ') : '无'}}</p> <el-input slot="reference" v-model="ip1" placehol原创 2021-05-13 10:15:37 · 1974 阅读 · 0 评论 -
vue+element+ts封装提示弹框组件
1、效果2、简要说明首先外层是一个dialog，然后内部分为上下两部分，分别是显示区域和按钮操作区域；显示区域又分为左右两部分，左边为步骤条，右边为图片。3、代码部分1、声明类在src/utils/class/CustomClass.ts中配置class；class TipsUrlsClass { id = 0; url = ''; constructor(data: Partial<TipsUrlsClass> = {}) { Objec原创 2021-04-21 10:48:19 · 2671 阅读 · 0 评论 -
Vue中换行函数及具体操作
在element中，使用Message和Notification等，默认内容是不换行的。所以这里给大家推荐一个简单又便捷的写法。以Notification为例，阅读官方文档，添加dangerouslyUseHTMLString属性。例如：**this.$notify({ title: 例子, message: data, dangerouslyUseHTMLString: true });**但是这样，data中的\n也不会自动换行，这是添加一个函数：private ToBreak(val: a原创 2021-02-22 17:43:50 · 4290 阅读 · 0 评论 -
记一次发布版本依赖报错的解决过程
1、插件报错插件名称：xlsx-style报错：This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js2、问题描述前端 cnpm 安装 xlsx-style 包，但是由于 cnpm 镜像和 npm 似乎有出入，导致 cnpm 安装后，需要修改源码，即 dist 下的 cpexcel.js 文件里的var cpt = require('./c原创 2021-02-18 14:53:37 · 2003 阅读 · 0 评论 -
Vue项目XLSX导出表格（带样式修改）
1、安装插件// 安装xlsx、xlsx-style、file-saver、script-loader插件npm i xlsx -snpm i xlsx-style -snpm i file-saver -snpm i script-loader -D// ts如果有报错可以安装npm i @types/xlsx-style -s2、修改xlsx-style源码 解决报错在\node_modules\xlsx-style\dist\cpexcel.js将var cpt = require原创 2021-02-09 15:38:23 · 5160 阅读 · 2 评论 -
element表格样式优化
1、表格的两种形式2、根据官方文档写自己的表格<div> <el-card> <div class="title">1.基本数据展示</div> <el-table v-loading="loading" :data="basicData" header-cell-class-name="basic_header" :header-cell-style="{ background:'#59A7D4',原创 2021-02-02 11:21:44 · 3238 阅读 · 2 评论 -
element日期选择器（DatePicker）优化
1、官网案例<template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束原创 2021-02-01 16:45:01 · 3002 阅读 · 0 评论 -
Vue项目列表黑色边框问题解决方案
1、演示2、解决方法/deep/ .el-popover__reference { outline: 0;}/deep/ .el-popover__reference:focus { outline: 0;}原创 2021-01-13 15:18:59 · 2605 阅读 · 0 评论 -
Vue项目滚动字幕设置（根据路由区分界面）
1、代码<div class="warning" v-if="this.$route.path === '/home'"> <div class="text">这是一个滚动字幕！这是一个滚动字幕！</div></div>.warning { display: inline-block; width: 600px; height: 32px; border-radius: 32px; position: absolute; ma原创 2021-01-06 10:09:55 · 2555 阅读 · 0 评论 -
el-select修改宽度问题解决方案
1、当placeholder过长时1、样式2、代码 <el-select remote filterable clearable placeholder="请输入发布单元英文名(支持模糊搜索)" :remote-method="remoteMethod"> <el-option v-for="v in items" :key="v.id" :value="v.id" :label="v.name" /> </el-select>2、网上其他人的解决方案原创 2021-01-06 09:49:10 · 26259 阅读 · 1 评论 -
前端Vue项目搭建过程概述
1、安装node、npm输入 node -v ，npm -v ，出现版本号即可。2、安装vue即 npm install vue ，输入 vue -V 报错，找到用户根目录D:\Users\username\AppData\Roaming\npm一般就是 AppData\Roaming\npm （若没有找到文件夹，打开查看隐藏文件夹这些设置）总而言之，就是为了找到 vue.cmd 这个文件即可，将该路径设置为，环境变量设置 —> 系统变量 —> Path，编辑新增即可运行 cm原创 2020-11-16 09:42:13 · 1675 阅读 · 0 评论 -
Vue实现前端列表界面轮询功能
1、主要逻辑代码 // 定时器 private timer: any; // 获取列表数据接口函数 private getTable(page: number, rows: number): void { let params: any = { page, rows }; if(this.$route.query.unit) { params.unit = this.$route.query.unit || ''; }; Object.keys原创 2020-11-02 10:18:16 · 3329 阅读 · 0 评论 -
Vue实现搜索后地址栏路径改变，刷新界面不改变页面内容功能
1、功能演示2、实现原理代码首先这是我获取列表数据的代码，新增带加号这几行private getTable(page: number, rows: number): void { let params: any = { page, rows }; + if(this.$route.query.unit) { + params.unit = this.$route.query.unit || ''; + }; Object.keys(this.form).原创 2020-10-29 15:57:25 · 2904 阅读 · 0 评论 -
Vue3.0.0 is coming !
First - Update @vue/clinpm i @vue/cli@latest -gSecond - Look New Typeimport * as vue from 'vue';console.log(vue){ BaseTransition: Object, Comment: Symbol(Comment), Fragment: Symbol(Fragment), KeepAlive: Object, Static: Symbol(Static), S原创 2020-09-24 15:03:04 · 3400 阅读 · 0 评论 -
新发现的尤大大的一个神奇小工具——esbuild
GitHub地址：https://github.com/yyx990803/esbuildesbuildThis is a JavaScript bundler and minifier. It packages up JavaScript and TypeScript code for distribution on the web.Why?Why build another JavaScript build tool? The current build tools for the web ar原创 2020-09-21 15:46:00 · 7243 阅读 · 1 评论 -
vue提升知识点整理
1、Vue 实例的 data 属性，可以在created、 beforeMount、mounted生命周期中获取到2、Vue 中的数组变更通知，通过拦截数组操作方法而实现3、编译器目标是创建渲染函数，渲染函数执行后将得到 VNode 树4、组件内 data 发生变化时会通知其对应 watcher，执行异步更新5、patching 算法首先进行同层级比较，可能执行的操作是节点的增加、删除和更新6、采用数据劫持方式，即 Object.defineProperty() 劫持 data 中各属性，实现响应原创 2020-09-11 09:10:24 · 4926 阅读 · 1 评论 -
element-ui中select组件创建条目创建条目为空时报错的解决方案
官方示例：使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。<template> <el-select v-model="value" multiple filterable allow-create default-fir原创 2020-08-10 10:28:54 · 6356 阅读 · 0 评论 -
vue的favicon.ico的不能修改替换问题解决
vue的favicon.ico解决办法：暴力替换图片：<link rel="icon" href="favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />vue文件中index.html文件修改如下：<!DOCTYPE html><html lang="en"> <head>原创 2020-07-17 17:55:44 · 5747 阅读 · 0 评论 -
对象的属性名设置为变量的有效解决办法
在进行请求操作是，往往会定义一个params请求体进行传参，有的时候需要请求体参数是一个变量，之前百度和优快云上找了很多blog，也没找到合适的解决办法，自己尝试了很多种方法，最终使用下面这种方法解决了：下面是一个confirm提交请求，下面的请求体params中，想让第二个对象的变量名随着sub_type的变化而变化：// 参数设置private ruleForm: any = { base_type: '', sub_type: '', name: '', ver原创 2020-07-16 09:48:16 · 3817 阅读 · 0 评论 -
Invalid prop: type check failed for prop “xxx“报错处理
首先我们看到这个报错，这个报错的意思是说：无效的命名数据:“数据”类型检查失败。而且上面说了是Boolean类型错误，要把值改成"true"，并且看到是tag标签的错误，于是检查代码：<el-table-column prop="process_id" label="模板号" align="center" min-width="50"> <template v-slot="{ row }"> <div slot="content">.原创 2020-07-08 14:25:36 · 44136 阅读 · 5 评论