一、前言 项目开发过程中，定义的方法、变量、组件如果被多处引用，就要考虑将其抽取为公共部分，提升代码复用度，便于维护。 二、全局变量挂载 有以下两种方式可实现全局挂载全局变量。 2.1 方式一：Vue.prototype 1、实例 property 你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 实例中可用。 Vue.p
一、@click.stop 问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件： <view class="footer-box" @click="clickCard"> <view @click="footerClick('喜欢'
(文章目录) 一、前言 从事前端开发的童鞋在面试过程中，多少都会遇到以下2个有关webpack编译过程性能问题： 有哪些方式可以减少 Webpack 的打包时间？ 有哪些方式可以让 Webpack 打出来的包更小？ 二、优化方案 2.1 优化 Loader 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST
(文章目录) 一、前言 vant中的van-image组件的src参数默认为图片的网络链接： <van-image width="100" height="100" src="://img.yzcdn.cn/vant/cat.jpeg" /> 当要引用本地的图片时，直接写图片的路径在vue项目中会刷不出
(文章目录) 一、前言 在前期博文《Vue进阶（六十四）：iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法，此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。 二、问题分析 项目的嵌套逻辑如下： 通过 A项目系统a1页面点击菜单进入自己的发起页面，点击发起页面发起按钮，调用后台请求返回B项目系统待跳转b1页面URL，A
在前端项目开发过程中，为优化用户体验，可考虑在用户输入查询条件后按回车键实现搜索效果。实现方法如下： el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter。 <el-input @keyup.enter.native="search" v-model='form.searchAtt
(文章目录) 一、前言 如果通过document.getElementById("") document.getElementByName("") 等方式获得的对象不存在情况下，进行操作时会报错。因此需要首先判断该对象是否存在，以下两种判断方法，推荐使用第一种。 二、方法一: v==null var v; v = document.getElementBy
(文章目录) 一、前言 Vue项目开发过程中，会经常需要使用console.log、console.info、alert等测试语句来输出内容，而在生产环境之中，我们不希望控制台同样输出以上信息，特别是用户信息相关。 组包前，逐一去删除、注释显然费时费力，好在Vue提供了通过配置文件修改配置变量，实现在开发环境打印，而生产环境不打印控制台信息的方法。 二、配置文件修改 修改build/webpack
(文章目录) 一、引入场景 有时候我们不希望组件被重复渲染影响用户使用体验；或出于性能考虑，避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以应用keep-alive组件。 官网解释：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是
(文章目录) 一、前言 vue实例属性$options用来获取定义在data外的数据和方法。 应用示例如下： <script> export default { name: "optionsTest", data() { return { }; }, //在data外面定义的属性和方法通过$options可以获取和调用 name:
(文章目录) js获取url参数有两种情况： 一、应用场景一：内部页面之间互相传值 假如要从A页面跳转到B页面， this.$router.push({path:"/B",query:{ Id : this.tId , ... }}) 进入B页面之后， this.Id = this.$route.query.Id; 就能将A页面的id传入B页面，进行参数获取
(文章目录) 一、前言 无论Web端还是移动端均会存在应用地图展示数据信息的应用场景。应用场景如下： 全国地图 ToolTip 市级地图 县级地图 二、实现步骤 2.1 Map 初始化 initEcharts("china") function initEcharts(map) { let option = { geo: { map: map,
(文章目录) 一、前言 利用elementUI实现表单元素校验时，出现下拉框内容选中后校验不消失的异常校验情形。 通过去除校验规则中相应元素的trigger:'blur'属性，可解决以上问题。 至于表单校验时，校验元素trigger属性值的选择，需要继续深究。若不设置trigger属性，该属性是否有默认值？ 二、表单验证时，trigger:'blur' OR trigger:'change'
(文章目录) 一、前言 在利用Echarts实现地图展示时，需要实现点击某一省份，模态框形式给出相应的省份信息，点击模态框中的下钻按钮，实现下钻至该省份下的区域地图部分，以此类推，直至下钻至区县三级地图。 二、实现步骤 为满足以上需求，可按照如下步骤： 点击地图某一区域，弹窗展示区域信息； 点击下钻按钮，下钻至下一层级地图； 将区域弹窗信息锚点至相应区域; 在实现步骤一时，方法如下： html
(文章目录) 一、前言 Vue项目编译过程中，出现如下错误信息： ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs Unexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/
(文章目录) 一、场景描述 在Vue项目优化过程中，页面部分通过JS调用promise返回的异步数据，导致页面部分始终无法加载后台返回的数据。通过触发其他DOM操作（例如折叠栏位的操作），后台数据可以正常渲染展示。处理逻辑大致如下： <template> <div v-for="(items, index) in results" :key="it
一、前言 在项目优化过程中，实现了主体色替换功能，接下来考虑实现系统字体设置，主要提供3种字体大小供用户选择。 二、实现思路 <el-dropdown-menu style="color: #20a0ff" slot="dropdown"> <!--切换主题色--> <el-dropdown-item divid
(文章目录) 一、前言 CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言。能够做到代码自动补全，代码折叠，可配置键盘事件，支持vim， emacs， sublime text 编码风格、能完成查找替换，括号匹配，分栏显示，显示行号，自行配置字体大小和风格等。 二、应用 下载codemirror npm install vue-codemir
(文章目录) 一、前言 在Vue项目开发过程中，以父子组件的形式进行页面调用，在测试过程中发现IE9下，子组件中定义初始化数据dataA=0，执行异步逻辑A，在异步请求方法前，输出dataA结果为0，请求结束后时，后台返回值将dataA赋值为1，输出dataA结果为1。再次触发子组件同样事件，但后台请求结果不满足赋值条件，对dataA不做赋值操作，发现在异步请求方法前后，输出dataA结果为1！
(文章目录) 一、前言 在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。 表单代码如需： <el-select v-model="textForm.receDeptIds" multiple filterable
(文章目录) 一、前言 项目开发过程中，组件通过render()函数渲染生成，并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。 另一个逻辑处理页面由Vue实现，该页面可以实时展示元素相关属性信息（包括size、width、height及left、top等属性）。 二、思路 器方式实现； Vuex state实现; 三、代码实现 .js
(文章目录) 一、混合(Mixins) Mixins是CSS预处理器语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mix
(文章目录) 一、前言 Vue项目中应用预处理器，可以有效减少css代码量， 推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 (Sass/Less/Stylus)。 如果当时没有选择，内置的 webpack 仍然会被预配置为可以完成所有的处理，也可以手动安装相应的 webpack loader： # Sass npm install -D sass-loader
(文章目录) 一、什么是 CSS 预处理器 CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。 CSS 预处理器用一种专门的编程语言，进行 Web 页面
(文章目录) 一、前言 前端项目开发一段时间后，会思考如何提升用户体验，如何布局前端页面，如何合理搭配页面色彩。本篇博文主要讲解如何通过色彩合理搭配提升用户体验。 二、基础理论 2.1 色彩搭配原则 色彩怎么搭配都可以，看你是想要对比效果还是要统一效果。 如果要对比效果，就取两种色相相差很大，或者明度相差很大，或者饱和度相差很大的颜色。 如果要统一效果，就用相差不远的色彩进行配色。 一般设计的时候
(文章目录) 一、前言 在项目开发过程中，需要根据鼠标事件进行相应处理。现予以梳理。 鼠标事件如下所示： 点击事件： @click //单击 @dblclick/ /双击 @mousedown //按下 @mouseup //抬起 @contextmenu // 鼠标右键 悬浮事件及触发顺序： @mouseover //划过 @mouseenter //进入 @mousemove //移动
(文章目录) 一、前言 本文主要讲解基于element-ui datetimepicker实现日期时间，在表单校验中的校验逻辑及实现方法。 注：在表单检验时间组件时，应在检验中增加type: 'date'，否则会提示检验对象错误问题。 二、Demo vue部分 <!--开始/结束日期,时间--> <template> <el-row style="marg
(文章目录) 一、前言 在项目实战过程中，需要为项目主页实现日程日历功能，主要包括日程的增删改查。 在网上研究一番后，经过对比发现一款比较好用的良心插件Fullcalendar。 Fullcalendar是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。 本文由以下几个部分组成： 1.安装fullcalendar; 2.简易DEMO; 3.Template中Full
(文章目录) 一、需求背景 在实现组件拖拽设计过程中，发现组件样式中设置了 display: flex属性信息，导致组件生成后无法实现拖拽效果，网上查阅资料后发现Flex布局大有天地。 二、Flex 来源 传统的布局解决方案采用CSS实现，基于盒状模型，依赖 display属性 + position属性 + float属性。但是，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 200
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
