c_qianxia5040的博客

不要将内置或保留的 HTML 元素用作 component id:map。办法1： 如果我们采用正确命名，并对应修改上述代码，即可消除报错。办法2： 也可以直接删除 name 属性。报错原因：是因为在本地项目对应文件的。

1、把字体图标文件复制到项目中。2、main.js中引入图标库。3、就可以使用了，如下。是获取到的图标名称，如。

逻辑中循环根据下标，取对应data中的某个变量，并改变此变量的值。data中有cube1,cube2,cube3…

原因：vue 示例上 dateFormat 跟 element 计算属性冲突了。解决：将dateFormat全局替换掉就可以了。

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。2、根据每行数据的不同动态添加不同的类名。

封装(vue中使用)，其中arr传要去重的数组，name为需要去重的字段。

中的user对应第一步中的js文件名。3、将获取到的值存储到vuex中。

点击跳转时将点击的菜单下标index传到要进入的页面，通过。封装菜单组件，并在每个界面保持当前的菜单是高亮的。改变当前的index，从而动态赋类名。改变当前的index，从而动态赋类名。动态值通过控制菜单list的下标。点击跳转时将点击的菜单下标。...

时出现的错误，node官网下载好的node直接安装都不行，直接提示。同事电脑配置是win7，64位操作系统。注意不要下错文件了，下载下图中的文件。下载完后，打开CMD命令，输入。可以查看下载的node版本号。：下载的node版本太高。...

1、安装postcss-px2rem及px2rem-loader。2、在根目录src中新建util目录下新建rem.js等比适配文件。4、到vue.config.js中配置插件。3、在main.js中引入适配文件。

效果图：**实现思路：**搜了很多都是在地图上做轨迹图，所以想到了用画线，平面图是作为背景图展示，只需要提供各个巡逻点的坐标信息，就可以完成路线的绘制，具体代码中也有注释完整代码：...

通过设置参数可以控制滚动方式（无缝或按步）和滚动方向（上下左右）

基于vue+element 省市区三级联动，内含各地区编码

1、新建js文件 global.js// 连接地址const mqttUrl = "ws://127.0.0.1:8080/mqtt";const mqttUsername = "admin";const mqttPsw = "123456"; export default { mqttUrl, mqttUsername, mqttPsw};2、全局注册 main.jsimport global from '../config/global'Vue.protot

1、不指定颜色，通过rgb赋值<el-row :gutter="20"> <el-col :sm="12" :md="8" :lg="4" :xl="4" :xxl="4" v-for="(item,i) in 13" :key="i"> <div :style="randomRgb()" class="acess_item">{{ item }}</div> </el-col> </el-row&

实现效果：可输入代码，并且代码语法高亮支持编辑和不可编辑模式提交到后端到代码内容为字符串格式搜了很多资料，大都是复制粘贴，写的都一样，还有错的地方，所以整理出一个稍微比较完善的方便你我⭐⭐ 实现步骤：⭐⭐1、安装依赖npm install vue-prism-editorvue-prism-editor需要依赖 prismjs，所以需要安装prismjsnpm install prismjs2、在需要使用vue-prism-editor的组件中引入import { Pri

直接上代码：<input ref="fileRef" type='file' name="file" webkitdirectory @change.stop="change"/>// 方法change() { console.log(this.$refs.fileRef.files);//文件列表 },

一、vue 全局变量(vue 全局变量又是需要单独设置请求路径的前缀，但又要根据当前环境是开发环境还是生产环境动态匹配，那么就用这种方法）.env 在所有的环境中被载入.env.local 在所有的环境中被载入，但会被 git 忽略.env.[mode] 只在指定的模式中被载入.env.[mode].local 只在指定的模式中被载入，但会被 git 忽略注意：1.其中以.local结尾的文件会被忽略，2.[mode]可以是：development（开发）、production（生产）、te

像elementUI的tooltip、popover这种渲染出来的元素都是在body下面一层，所以你在组件里面去加样式发现根本不生效官方文档中提供的有一属性 popper-class 为 popper 添加类名只需要加一个自定义类名，与加不加scope无关，亲测有效效果图：（修改了背景色，长度超出滚动等）...

效果图vue代码，其中按钮和弹框用的是elementUI组件<template> <div> <el-button type="primary" @click="planSetModal = true">添加位置</el-button> <el-dialog :fullscreen="true" el-dialog title="添加位置" :visible.sync="planSetModal">

<div class="select_btn"> <el-select v-model="subItemVal" size="small" style="width: 120px" :popper-append-to-body="false"> <el-option v-for="(item,i) in subItemData" :key="i" :label="item.name" :value="item.number" /> .

直接上代码样式： .tree_container{ height: 500px; border-radius: 5px; background-color: rgba(1,28,82,.5); } .el-tree{ background: transparent; color: #fff; .

添加 show-summary 属性会自动合计数字值的列想计算某一列需要使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，自定义设置<el-table stripe :data="tableData" :cell-style="columnStyle" show-summary :summary-method="getSummaries" ..

安装：npm install --save vue-draggable-resizable第一种：基本使用：<template> <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"> <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="

出错如下非嵌套路由必须包含前导斜杠字符vue-router原理

1、结构<el-button id="full-btn-medium" @click.prevent="screenFull" title="全屏显示"><i class="el-icon-rank"></i></el-button><div id="box"></div>2、 datafullscreenStatus:false,3、 methodsscreenFull(){ let element

报错如图Vue-Cli脚手架新建项目时会选择ESLint + Prettier来统一前端代码风格，但严格的格式要求容易出现很多警告和错误，最好关闭Prettier。解决方案：在.eslintrc.js文件中配置关闭Prettier； 在rules中增加一行：“prettier/prettier”: “off”重启后生效...

在vue项目中打开word生成的html文件，首先将html文件放到public下面，如下图然后找个触发的时机，比如点击某元素，就可以打开html文件，如下图window.open(`/operationManual.htm`)

elementUI中的表格有一个属性:header-cell-style="{background:’#2EC7C9’,color: ‘#fff’}"<el-table style="margin-left:100px" stripe :data="tableData" id="out-table" :header-cell-style="{background:'#2EC7C9',color: '#fff'}" > <el-ta

1、下载MQTT “npm install mqtt” 也可以直接将{"mqtt": "^4.2.6"，}放到package.json中，然后执行npm install2、emqx.js文件，引入mqtt，及相关事件import MQTT from 'mqtt'const mqttId = Math.random().toString(36).substr(2);const topicList = {};//username password 为连接的后台用户及密码const option

:class="devicPosition${i}"<div :class="`devicPosition${i}`" v-for="(item,i) in currGroupData" :key="i"> <img src="@/assets/images/blower_blue.png" alt="" @click="showGroupOfInfo(item)" /></div>结果 devicPosition0、devicPosition1、devi

给子组件加个ref<poptipBlower ref="poptipChild"</poptipBlower>父组件改变事件中，将子组件的值改了this.$refs.poptipChild.timingModal = false

1、结构中<div :class="devicPosition"></div>2、data中定义变量devicPosition: ''3、方法中赋值 index为下标或者其他this.devicPosition = 'devicPosition' + index

data(){ return{ groupData1:[], groupData2:[] }}//方法 index为循环的下标this[`groupData${index}`] = res2.data

这是一个经典的问题，相信很多同学都有遇到过，那么你知道其真正的原因吗？我们先还原一下场景：vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误先定位一下，HTTP 404 错误意味着链接指向的资源不存在问题在于为什么不存在？且为什么只有history模式下会出现这个问题？为什么history模式下有问题Vue是属于单页应用（single-page application）而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应

应用场景，如果很多页面都用到同一组件，再每一个页面里都引用再使用太麻烦，可以直接在入口文件main.js中全局引用并注册import RightToolbar from "@/components/RightToolbar"// 全局组件挂载Vue.component('RightToolbar', RightToolbar)然后在页面中直接使用<right-toolbar></right-toolbar>...

//自定义指令:// 注册一个全局自定义指令 `v-auth`Vue.directive('auth', { // 当被绑定的元素插入到 DOM 中时…… inserted: (el, binding, vnode) => { const value = binding.value; const auths = localStorage.getItem('BTN_AUTHS') || ''; if (!auths.split(',').includes(v

问题描述：例如，一个倒计时组件为子组件，当父组件请求数据成功后，再调用倒计时组件开始倒计时，此时当发送请求后，loading关掉，获取到的this.refs.child为undefined主要原因是，refs.child 为undefined主要原因是，refs.child为undefined主要原因是，refs并不是数据驱动的，可以使用this.$nextTick(()=>{})当dom发生变化，更新后执行的回调,在回调函数中获取，并触发倒计时父组件<count-down ref="c

场景：做题场景，规定时间90min，点击按钮开始，如上图知识补给：父组件如何触发子组件事件本案例：点击父组件中的按钮，触发子组件的倒计时开始事件父组件：this.$refs.child.$emit('childcountdown','这里写要传给子组件的值')start() { this.$refs.child.$emit('childcountdown') },子组件： this.$on('childcountdown', (res) => { console.log(re.

1、a链接 锚点定位，地址url改变，刷新页面会导致有问题，推荐使用下面第二种方法<template> <div> <div class="nav" :class="{active: active===0}" @click="scrollTo(0)"> <a href="#courseSystem" >课程体系</a> </div> <div class="nav" :class="{active: act