vue
Cdlblbq
明天的你,一定会感谢今天努力的你!
展开
-
vue 项目中监听键盘回车按键触发事件
【代码】vue 项目中监听键盘回车按键触发事件。原创 2023-05-17 14:18:37 · 1913 阅读 · 0 评论 -
监听element的table滚到底部的事件
监听表格的滚动原创 2022-12-21 17:49:28 · 965 阅读 · 0 评论 -
element表格的多层级合并
效果如下:代码如下:html:<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" > <el-table-column prop="id" label="ID" width="180"原创 2022-04-14 11:56:09 · 1085 阅读 · 0 评论 -
Vuex在子组件中的使用
vuex推荐使用方式index.js内容:import Vue from 'vue'import Vuex from 'vuex'import login from './login'Vue.use(Vuex)const store = new Vuex.Store({ modules: { login: login }})export default storelogin.js内容:export default { state: {}, m.原创 2021-12-07 09:34:58 · 1174 阅读 · 0 评论 -
vue中使用rem的方式之一
new Vue({ router, store, render: h => h(App), created () { // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题 setRemPc(); window.addEventListener('resize', setRemPc);//浏览器窗口大小改变时调用rem换算方法 }}).$mount('#app')//rem计算function setRemPc () { var whde.原创 2021-09-08 14:52:27 · 505 阅读 · 0 评论 -
在项目中使用原生高德地图创建坐标点(可点击)
<!-- 在index.html中的body引用<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2d6f52355c4d17024610a5d45243378d"></script> --><!-- 地图 --><template> <div class="content"> <div clas..原创 2021-07-09 20:17:46 · 1036 阅读 · 0 评论 -
关于 zt-components 包使用说明
1111原创 2021-06-25 18:37:39 · 277 阅读 · 0 评论 -
vue插件
vue-multiselect- Vue.js选择框解决方案 eme- 优雅的Markdown编辑器原创 2021-06-24 15:58:31 · 92 阅读 · 0 评论 -
vue项目中请求接口时使用element的loading组件
import axios from 'axios';import { Message, MessageBox, Loading } from 'element-ui';import $store from '../../store/index.js';var instance = axios.create({ // baseURL: process.env.BASE_API, responseType: 'json', // 返回json格式a withCredentials: tru.原创 2021-06-18 15:54:19 · 1371 阅读 · 0 评论 -
vue中使用高德地图 vue-amap 常见配置
效果:原创 2021-06-06 17:41:58 · 2600 阅读 · 2 评论 -
在vue项目中使用百度地图 vue-baidu-map 常见的需求
先贴效果原创 2021-06-06 12:29:58 · 1134 阅读 · 1 评论 -
vue递归组件实现
父组件<template> <div> <div class="content"> <detail-list :list="list"></detail-list> </div> </div></template><script>import DetailList from './list'export default { name: 'Deta原创 2021-04-27 16:35:35 · 99 阅读 · 0 评论 -
element在table中使用多选框
先贴效果图先说下怎么实现<template v-for="(item, index) in makeProcess"> <vd-table-column width="120" align="center" > <template slot-scope="scope" slot="header" >原创 2021-04-22 15:02:28 · 646 阅读 · 0 评论 -
element中的tabs标签页引用其他页面使用
<div class="tabZujian"> <el-tabs v-model="activeName" @tab-click="handleClick" > <el-tab-pane label="设置" name="first" :key="'first'" > <aa v-if="isChildUpdate1.原创 2021-04-19 13:47:14 · 2878 阅读 · 4 评论 -
关于element框架的注意点(更新中...)
关于日期选择器的注意点<el-form-item label="结束时间" prop="endTime" > <el-date-picker v-model="formData.endTime" type="date" placeholder="选择日期"/></el-form-item>注意: 使用普通方法赋值后期可能回出现无法修改的情况,推荐使用 $set 方法// 使用$set赋值this.$set(this.formData, "e....原创 2021-03-30 12:44:09 · 249 阅读 · 1 评论 -
Vue 性能优化相关
Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验 Vue 代码层面的优化; webpack 配置层面的优化; 基础的 Web 技术层面的优化。 一、代码层面的优化1.1、v-if 和 v-...原创 2021-03-18 14:29:42 · 196 阅读 · 0 评论 -
vue项目使用了eslint,VSCode快速格式化代码
在VSCode编辑器中将以下代码复制其中既可1、window电脑:文件首选项设置右上角打开设置按钮settings.json中添加2、mac电脑 code>首选项 >设置{"editor.quickSuggestions":{//开启自动显示建议"other":true,"comments":true,"strings":true},//vscode默认启用了根据文件类型自动设置t...原创 2021-03-11 11:28:44 · 366 阅读 · 0 评论 -
require.context()使用方法及项目实战
require.context你还可以通过require.context()函数来创建自己的 context。equire.context()是可以用来创建自己(模块)上下文的方法,有3个参数:可以给这个函数传入四个参数:directory:要搜索的文件夹目录useSubdirectories:是否还应该搜索它的子目录regExp:一个匹配文件的正则表达式mode:是否异步加载webpack 会在构建中解析代码中的require.context()。语法如下:...原创 2021-03-11 10:35:40 · 3883 阅读 · 4 评论 -
vue在表格中创建多个三级联动并实现增加、删除行
效果如下:其中区块、一级、二级、是属于三级联动,计划量、计划开始时间、计划结束时间是三级联动的数据,不能修改后面的变更开始、结束时间可以修改,但做了限制,结束时间不能在开始时间之前HTML代码:<div> <div style="padding-bottom:10px"> <el-button type="primary" @click="insertEvent(-1)">插入一行</el-button> .原创 2021-03-10 11:20:56 · 1384 阅读 · 3 评论 -
在vue中使用element的表格 处理后端返回的时间格式
formatter_time(row, column, cellValue, index) { console.log(cellValue); if (cellValue) { const t = new Date(cellValue); // row 表示一行数据, updateTime 表示要格式化的字段名称 let year = t.getFullYear(), month = t.getMonth() + 1, ...原创 2021-03-10 10:20:07 · 438 阅读 · 0 评论 -
使用element-ui中的table修改鼠标经过或悬停行时颜色修改
第一种:.el-table--enable-row-hover .el-table__body tr:hover>td{background-color: #c6cfdf !important;}第二种:.el-table__body tr:hover>td{background-color: #c6cfdf!important;}.el-table__body tr.current-row>td{background-color: #c6原创 2021-02-25 10:38:02 · 15085 阅读 · 8 评论 -
vue项目中在table表格中使用switch开关
<template slot-scope="scope"> <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="switchChange($event, scope.row)" active-color="#13ce66" .原创 2021-02-24 10:35:08 · 7227 阅读 · 3 评论 -
使用webpack创建的vue PC端项目随屏幕分辨率与窗口大小自适应
一、npm安装依赖npm i lib-flexible -Snpm i px2rem-loader -D二、新建文件夹在src下面新建utils文件夹,并新建一个js文件,取名为【flexible.js】三、将下述代码全部复制进【flexible.js】文件中(function() { // flexible.css var cssText = '' + '@charset "utf-8";html{color:#00..原创 2021-01-13 11:54:20 · 564 阅读 · 0 评论 -
webpack搭建vue项目流程以及打包发布流程
目录1.1 命令行初始化项目1.2 分析项目目录1.3 运行项目1.4 多环境配置打包发布一. vue-cli2 + webpack搭建项目流程以及打包发布流程最近升级到vue-cli3,发现vue-cli2搭建项目命令不能用了,两者搭建开发环境项目内容也发生了变化。vue-cli2搭建项目环境的命令:vue init webpack vue2-webpack-projectvue-cli2升级到vue-cli3的时候,vue init 命令不能用了,如果还想使用vue in原创 2021-01-13 11:26:24 · 928 阅读 · 0 评论 -
vue2.0使用rem
1、npm install px2rem-loader --save-dev 安装px2rem-loader,用来把px转化为rem。2、在src下utils中创建flexible.js,将以下代码复制其中(function() { // flexible.css var cssText = '' + '@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-te..原创 2021-01-12 17:17:07 · 749 阅读 · 0 评论 -
vue中设置移动的盒子
首先创建一个drag.js文件,然后将一下代码复制粘贴其中import Vue from 'vue';//使用Vue.directive()定义一个全局指令//1.参数一:指令的名称,定义时指令前面不需要写v-//2.参数二:是一个对象,该对象中有相关的操作函数//3.在调用的时候必须写v-const drag = Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数,只执行一次 //2.每个函数中第一个参数永远是el,表示绑定指令.原创 2020-12-08 10:28:16 · 1029 阅读 · 0 评论 -
Vant中使用rem
Vant 中的样式默认使用 px 作为单位,使用 rem 单位,按照以下步骤:postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值一、使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)1、安装# yarn add amfe-flexiblenpm i amfe-flexible2、然后在 main.js 中加载执行该模块import 'amfe-flexibl原创 2020-11-23 19:53:29 · 1875 阅读 · 0 评论 -
vue组件样式穿透 /deep/ ::v-deep >>>
在写一些vue项目时候,经常会引入一些组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。防止影响到其他页面上的样式。但是又是需要在父组件更改自组件的样式。就要用到组件穿透(也叫深度修改css)。可用的方法有 /deep/ ::v-deep >>><style scoped>/*编译前*/// >>>// 如果项目使用的是原生样式css, 那么你可以直接使用 >>> 穿...原创 2020-11-13 08:56:22 · 1747 阅读 · 0 评论 -
VUE项目实现全屏显示功能---screenfull
使用方法npm install screenfull --save首先安装npm install screenfull --save 在使用.vue文件中 引入import screenfull from 'screenfull' 在按钮方法中调用screenfull.toggle() 可以双向切换全屏与非全屏 还可以检测全屏状态screenfull.isFullscreen 测试浏览器是否支持全screenfullscreenfull.isEnabledAPI.request...原创 2020-09-29 14:20:17 · 3224 阅读 · 0 评论 -
vue实现多条数据显示并滚动的效果
<divid="box"><divid="con1"ref="con1":class="{anim:animate==true}"@mouseenter="mEnter"@mouseleave="mLeave"><pv-for='(item,index)initems':key="index">{{item.name}}</p></div></div>data(){return...原创 2020-09-15 10:33:53 · 2370 阅读 · 0 评论 -
vue实现单条消息无缝滚动
<template> <div> <div class="textBox"> <transition name="slide"> <p class="text" :key="text.id">{{text.val}}</p> </transition> </div> </div></template> <scri.原创 2020-09-15 09:56:25 · 461 阅读 · 0 评论 -
element中的table表格加上fiexd属性之后,数据掉下去的解决办法。
1、elementUI,表格出现这种样式错误,用了fixed属性。解决办法:先在table那里加一个ref 绑定一个值table然后就是接口请求得到数据的时候后或者表格重新渲染之后i,走一遍这个方法this.$nextTick(()=>{this.$refs.table.doLayout()i//table那里加一个ref="table"})...原创 2020-09-14 15:39:18 · 988 阅读 · 2 评论 -
element中table表格加入拖拽功能
假如表格有父元素,不要给父元素高度,高度让表格自动撑开,这样才能 实现拖拽效果。一、首先在表格中加入一下属性,二、在表格的底部table的同级加上一下代码。<divclass="lineDiv"ref="lineDivOne">点我向上或向下拖动表格</div>三、在data里面定义表格的初始默认高度四、将一下代码放到mounted()生命周期函数中constthat=thisvartableCardOne=t...原创 2020-09-11 11:47:42 · 1618 阅读 · 1 评论 -
el-tree树形控件改变对不同节点的筛选
// 触发页面显示配置的筛选 filterNode(value, data, node) { // 如果什么都没填就直接返回 if (!value) return true; // 如果传入的value和data中的label相同说明是匹配到了 if (data.label.indexOf(value) !== -1) { return true; } // 否则要去判断它是不..原创 2020-09-02 10:58:39 · 464 阅读 · 0 评论 -
vue文件快速生成页面模板
找到文件、首选项、用户片段、 输入vue 会自动到vue.json页面中,然后将以下代码复制、粘贴、保存。回到以点vue结尾的文件 输入 vv 点击tab就会自动生成以下模板{//Placeyoursnippetsforvuehere.Eachsnippetisdefinedunderasnippetnameandhasaprefix,bodyand//description.Theprefixiswhatisu...原创 2020-07-31 17:42:38 · 2173 阅读 · 0 评论