cmmboy1990的博客

效果：代码：导包：npm install @antv/f2注意：用 3.8.11 版本<template> <div id="app"> <canvas id="myChart" style="width: 100%;height: 300px;"></canvas> </div></template><script> // import F2 from '@antv/f2/lib/ind

1.效果2.代码nmp 导入：npm install @antv/g2plot代码：<template> <div id="app"> <div id="container"></div> </div></template><script> import { Bar } from '@antv/g2plot'; export default { name: 'App', data(

1.效果：2.代码：<template> <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()"> <img src="../../assets/a3.jpeg" :class="v1" /> <img src="../../assets/a2.jpeg" :class="v2" /> <img src="../../assets/a

1.在public文件夹中新建一个flexs.js文件//flexs.js(function(win) { var bodyStyle = document.createElement('style'); // 这里根据具体的设计稿尺寸来定 bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`; document.documentElement.firstElementChild.appendChild(b

1.效果2.代码：<template> <div class="dk-chart"> <div ref="chart" class="chart"></div> </div></template><script> let nowClientWidth = document.documentElement.clientWidth; import * as echarts from "echa

1.效果：2.代码：<template> <div> <baidu-map class='mapView' :center="center" :zoom="zoom" :autoLocation="true" :scroll-wheel-zoom="true" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">

1.代码：<bm-marker v-for="(marker,index) of listPointData" :key='marker.id' :position="{lng: marker.lng, lat: marker.lat}" :icon="{url:mapIcon, size: {width: 52, height: 52}}" @click="clickHandler(marker)"></bm-marker>

效果：代码：<template> <div class=""> <el-container> <el-aside width="wth"> <el-menu default-active="1" :unique-opened="true" @open="handleOpen" @close="handleClose"> <el-submenu index="1"> <tem

解决方法：var listA=[1,2,3];var listB=[4,5,6];listA.push(…listB);…是ES6 语法（延展操作符）结果：listB=[1,2,3,4,5,6]

解决：<el-input placeholder="请输入占地面积" v-model="dataFormList.area"> <i slot="suffix" class="dw">亩</i></el-input>.dw{ font-style:normal; color: #000000; font-weight: bold; line-height: 45px; }效果：...

解决： /* 利用穿透，设置input边框隐藏 */ .dk-xq >>>.el-input__inner{ border: 0; }注 .dk-xq是el-input外层的class名称

1.效果解决：/* el-descriptions-item 文字居中 */ .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell { text-align: center; }

解决：<style>.el-popover{ height: 500px; overflow: auto;}</style>

1.解决：html 中添加 ：:header-cell-class-name="starAdd"<el-table :data="ruleForm.region" border fit highlight-current-row style="width: 100%" size="mini" :header-cell-class-name="starAdd">2.js:method方法中添加obj.columnIndex === 0 是表格的下标// 给头部添加星星

1.html <el-form ref="ruleForm" :model="ruleForm" size="mini" :rules="rules"> <el-table-column align="center" label="姓名" prop="RCNAME"> <template scope="scope"> <el-form-item :rules="rules.RCNAME" :prop="

1.解决： :on-preview="(file)=>{handlePreview(index,file)}" :on-remove="(file,fileList)=>{handleRemove(index,file,fileList)}" handlePreview(index, file) { }

解决：在表单加 @submit,native.prevent

解决：module.exports = { // 是否开启eslint保存检测，有效值：ture | false | 'error' lintOnSave: false,}

1.nginx配置文件设置#开始配置我们的反向代理location /prod-api{rewrite ^/prod-api/(.*)$ /$1 break;include uwsgi_params;proxy_set_header Host $host;proxy_set_header x-forwarded-for $remote_addr;proxy_set_header X-Real-IP $remote_addr;proxy_pa

1.前提如果web项目部署在 根目录下 即 /，需要同时启动两个项目即 web项目和h5项目2。配置文件设置location / { root D:/nginx2/dist/; index index.html index.htm; try_files $uri $uri/ /index.html; autoindex on; #开启nginx目录浏览功能 autoindex_exact_size off; #文件大小从KB开始

1.效果：2.代码<template> <div class="hello"> <div class="top"> <div class="searchView"> <img src="../assets/search_icon.png" class="search-icon" /> <input class="input-text" placeholder="请输入关键词搜索" /> </

1.nmp引入npm install amfe-flexible --savenpm install postcss-pxtorem --save2.在main.js导入amfe-flexibleimport 'amfe-flexible';3.在vue.config.js配置如下：module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem'

vue style中动态计算宽度<span class="jdt-text4" :style="{width:`${0.963*item.progress}rem`}"></span>

Vue-cli 4 cmd命令新建项目报错：ERROR command failed npm install –loglevel error —— 解决办法解决：cmd命令行输入 npm cache clean --force

vue 网格列表代码：<!-- --><template> <div class=''> <div> <el-row :gutter="20" style="margin-bottom: 20px"> <el-col :span="6" v-for="(item,index) in list" :key="index"> <div class="item" sty

vue中使用 svg图片1.assets 中新建 icons 文件夹；icons文件夹下 svg 是svg图片，index.js,svgo.yml 文件如下：a. index.jsimport Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon', SvgIcon)const req = require.con

ElementUI el-main高度问题原因：布局=> 头部、主页面、底部el-main 需要充满屏幕解决：1.public 中的index.html 中，清楚浏览器边距<style> html, body, #app { height: 100%; margin: 0px; padding: 0px; } </style>2.主页面布局代码：<

NavigationDuplicated: Avoided redundant navigation to current location…1.原因：element-ui多次点击导航（多次push同一个路由），会报错2.解决：在router index,js 中加入代码：const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return origina

vue 项目 Can’t resolve ‘sass-loader’ 报错解决：package.json中 添加依赖，重新npm install 下 "sass": "1.32.0", "sass-loader": "10.1.0",

vue项目 element ui的引入1.npm 导入 npm i element-ui -S2.main.js 中引入import ElementUI from 'element-ui'; //引入element组件库import 'element-ui/lib/theme-chalk/index.css'; //引入element样式文件Vue.use(ElementUI); //使用element...

vue-cli 脚手架 vue 项目创建1.已安装node.js ,vue-cli项目文件夹窗口 运行 cmd2.命令行 创建项目命令：vue create 项目名称3.选择默认选项,确定，等待创建…4.创建成功，运行项目，当前项目目录 运行cmd : npm run serve5.运行结果：创建项目成功!...

Vue子控件点击事件触发父控件点击事件解决:在子控件的事件后面加 .stop@click.stop="getImg(item.envelopePic)"

vue tab页面缓存处理问题：使用vant 框架。底部导航切换，tab页面缓存解决：1.index 页面 xml 设置<keep-alive> <router-view v-if="$route.meta.keepAlive" style="margin-bottom: 50px"/> </keep-alive><router-view v-if="!$route.meta.keepAlive" style=" margin-bottom: 50px

vue 数据请求content-type 全局设置和部分覆盖设置1.全局设置：在request.js中设置axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'2.部分接口不是json 格式传输时，设置单独的 Content-Typeheaders: { 'Content-Type': 'application/x-www-form-urlencoded' },// 登录方法export fun

idea创建vue模板<!-- --><template><div class=''></div></template> <script>//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）//例如：import 《组件名称》 from ‘《组件路径》‘; export default {//import引入的组件需要注入到对象中才能使用components: {},d