weixin_45108907的博客

原创 vue3 下载router之后，路由未生效及控制台警告问题

在控制台页面会报出警告" Failed to resolve component: router-link"无法识别router-linkimport { createApp } from 'vue'import App from './App.vue'import router from "./router/index"; //引入routerimport './index.css'// 挂载 路由const app = createApp(App)app.use(router) app.

原创 elementUI日期控件el-date-picker显示的月份、日期变成英文了

从elementui上复制下来组件，发现日期变成英文了出现英文的原因：项目在main.js文件里设置的默认语言为英文。解决：在main.js中引入中文方法即可//在main.js中引入中文方法即可import locale from 'element-ui/lib/locale/lang/zh-CN'Vue.use(ElementUI, { locale })...

原创 vite创建vue3项目及使用typescript

1，vue3项目建议使用vite工具// 安装全局的vite 创建项目npm install -g create-vite-appcreate-vite-app vue3-democd vue3-vitenpm installnpm run dev// # 或者使用yarnyarn add -g create-vite-appyarn create vite-app <project-name>//使用 yarnyarnyarn dev//然后启动项目2，npm

原创 windows7官网安装nodejs提示以下信息

提示：this application is only supported on window 8.1windows server 2012，highenode最新版本，只有windows 8以上支持解决：https://nodejs.org/dist/v12.16.2/下载对应的版本

原创 快速 卸载 nodejs

找到node程序的入口进行 卸载//之前node安装到 c盘C:\ProgramData\Microsoft\Windows\Start Menu\Programs点击下方即可卸载干净

原创 vue3 ts项目 启动后自动开启浏览器配置

方式一：在package.json文件中 配置，添加 --open，重启项目"scripts": { "serve": "vue-cli-service serve --open",//加上 --open，重启项目即可 "build": "vue-cli-service build", "lint": "vue-cli-service lint" },方式二：在vue.config.js 配置文件中 添加 open：true （方式一优先级比较高，如果在vue.confi

原创 vue 清除浏览器 历史栈

问题：需要跳转好几个页面进行表单提交，提交完之后，跳转回首页，返回上一页，发现，发现还可以返回之前的一页页面路由//可以拿到历史记录栈，清空栈let routeHistory=history.length-1;this.$router.go(-routeHistory);...

原创 使用uniapp 预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件

解决办法：1打开HBuilderX，点击工具-----点击插件安装2 前往插件市场安装3 点击，没有账号的注册下载即可

原创 echarts 环形饼图 labelLine 线条消失

//源代码let option = { title: { text: '单位：吨', right: 'right', textStyle: { fontSize: '14', fontWeight: 'normal' } }, tooltip: { trigger: 'item', formatter: '{b.

原创 layui 模板引擎使用

<!-- 第一步------模板 --><script id="viewItem" type="text/html"> {{# layui.each(d.list, function(index, item){ }} {{# if (item.type === 'radio' ) { }} <div class="layui-form-item"> <label class="layui-form-label">

原创 el-image动态数据返回 图片加载失败问题

问题：动态返回的数据，回显图片加载失败，使用了懒加载也不行，异步加载没有刷新解决：使用v-if，图片存在时再渲染 <el-image style="width: 100px; height: 100px" lazy v-if="add_form_dialog.img" :src="add_form_dialog.img" :preview-src-list="[add_f.

原创 echarts 饼图修改标题和tooltip

修改饼图标题，及字体大小let option = { title: { text: '单位：千瓦',//标题 right: 'right',//文字位置 textStyle: {//修改字体样式 fontSize: '14', fontWeight: 'normal' } }, }修改tooltiplet option = {

原创 vue 动态组件用法

getComponent()使用返回事件的始发bai者。返回du：发起事件的 Component 对象，如果zhi该对象不是一个 Component，则返回 null。组件使用// A code blockvar foo = 'bar';import ComponentList from './component'```//引入 data () { return { currentView: null, navList: ComponentList.get

原创 vue项目更换主题色

需求：不同的项目需要引入同一个模块，但是ui主题色需要修改解决：1，后端提供接口，前端动态设置主题色2，前端主题色配置在less文件中/** 用于less变量声明 */@border_color: #e6e6e6; // 边框颜色@main_theme: var(--mainTheme, #50CFA0); // 按钮颜色 字体颜色@main_backdrop_theme: var(--mainBackdropTheme, rgba(23, 94, 250, 0.1));

原创 vant组件使用van-field解决邮箱校验问题

需求：用户在返回到上一页的时候，保存用户的编辑资料，所以用户在输入邮箱的时候，校验是否正确使用van-field <van-form> <van-field maxlength="25" v-model="param.email" label="邮箱" placeholder="请输入邮箱ID" :formatter="formatter" :error-message="errorT

原创 vue h5嵌套app里 input框聚焦但不要弹出键盘

需求：用户进入页面的时候，希望光标聚焦，但是不要弹出软键盘思路：在用户点击之前使用div盒子替代，利用伪元素做出聚焦的样式，当用户点击修改的时候，再触发聚焦事件data() { return { isShow: true //默认显示 }; }, <van-row class="div-radius"> <van-col span="24"> <div class='flex username' v-if='

原创 css img图片拉伸问题处理

// An highlighted block img { display: block; width: 100%; //设置宽度，让height auto height: auto; margin-top: 2rem; }

原创 Echarts 柱形图去掉X Y 轴 问题

1，去掉y轴分割线// An highlighted blockyAxis : [ { type : 'value', splitLine:{ show:false } } ], X轴也是一样2，去掉Y轴：// An highlighted blockyAxis : [ { type : 'value',

原创 vue + elementui使用Cascader 级联选择器禁用问题

原创 vue + elementui 使用 dialog和form表单时数据渲染问题

问题：dialog和form表单一起使用，关闭模态框再次点开出现上次数据依旧渲染在上面的问题解决：加个v-if 判断

原创 vue 列表中默认显示几条数据，点击展示全部

思路:1,获取接口数据的时候，给每一条数据都新增一个showmore：false 变量2,显隐展示，新增一个常量默认展示几条，判断showmore：false 展示几条，为true展示全部3,点击每一项的时候，展示隐藏问题，使用this.$set（）动态的设置 ！showmore...

原创 Vue 使用Scss，深度修改局部样式

使用scoped后，局部样式，不会影响到全局样式如果想在使用了scoped不污染全局样式的情况下，修改局部组件的样式，可以使用深度选择器less中一般使用 >>> 或 /deep/scss中一般使用 ::v-deep...

原创 vue中使用vuex缓存组件

在app.vue中，使用keep-alive，它的属性include，来缓存组件配合使用vuex，来添加需要缓存的组件在需要做缓存的组件内使用1，引入vuex2，触发mutations 里的 addCachePage 方法，this.$store.commit(‘addCachePage’, ‘test’)；3，注意：组件的name：‘test’必须带上，4，移除缓存触发mutations 里的 removeCachePage方法，this.$store.commit(‘removeCa

原创 移动端页面填充满屏配置

问题：布局完成之后，发现适配超大屏手机，高度并不能自适应填充满屏的问题解决1，给最外层的父级盒子，设置display: flex;2，给图片这里 flex:1，变成弹性盒子3，同时设置最小高为100vh

原创 jQuery 导入 上传文件

需求：需要大批量导入数据，因此需要上传文件功能样式处理：.upfile {position: relative;}

原创 layui jquery项目中预览出word文件

最近的需求：要求在后台管理系统中列表预览出用户上传的文件，如下图展示

原创 vue h5项目中 echarts饼图分享出去ios上有进度条显示

最近的需求要求将echarts分享出去，在app中，echarts饼图正常显示，安卓或者ios上都显示正常，没有出现闪现进度条的问题。但是，当分享出去的时候，ios上出现了进度条闪现问题解决:将画布的宽度缩小一点，因为宽度100%会出现溢出的问题，因此，将画布的宽度改小一点即可document.getElementById(‘charts’).style.width = ‘98%’...

原创 vue项目webpack打包之后，css溢出省略代码失效问题

问题是打包之后，-webkit-box-orient: vertical;核心样式丢失。解决方法：加上注释命令，让autoprefixer编译的时候关闭对这行代码的转换。

原创 使用jQuery 【导入】Excel文件

1，使用input的type属性为file来上传导入文件 **// 导入$(’.file_stu_sales’).change(function() {var loading = null;var formData = new FormData();formData.append(‘file’, $(this)[0].files[0]);$.ajax({url: config....

原创 vue项目如何在手机上做测试调试

1，在config文件加下的index.js的host地方，改成电脑的ip地址2，可进入cmd命令，获取本地的IP地址3，重启一下项目，vue-cli2使用npm run dev 即可4，可以使用二维码，微信扫一扫调试项目5，如果想在手机浏览器中调试，一，保证在同一局域网下，手机和电脑使用同一个WiFi网络，二，然后输入ip地址和端口，点击保存即可。成功后可在浏览器中输入http...

原创 客户端 Ajax请求 导出 Excel文件

项目需求不同，因此导出文件更换为Excel由于在浏览器下载文件时，文件名是随机数，因此利用a标签完美解决问题

原创 客户端 Ajax请求导出doc文件

根据项目需求需要在客户端导出doc文件，并且是异步请求Java后台的接口，Java组在接口里写好了模板，so，前端的工作就简单一些了项目中使用的jQuery，由于之前封装好了Ajax请求，这里导出文件，用的是原生js，记录下供以后参考...

原创 layui+ ueiditor问题

1，由于是使用layui的弹出层layer.open，由于之前使用的都是script标签，此时由于引入富文本编辑器，两对script标签出现问题所以，引入之后，把标签改成了div包裹，但是相应的问题也出现了，不能动态的渲染，所以一进入页面，把盒子隐藏掉，之后再调用layer.open方法；2 问题是在编辑的时候，ueiditor编辑器，一直赋值不上；百度查了很久，解决；这个问题是一...

原创 使用百度 ueditor 爬坑记

1，本次项目使用的是 layui框架，搭配百度富文本编辑器 ueditor使用步骤：1、下载ueditor包，项目使用jQuery，所以直接下载即可（后台开发使用Java技术，所以下载的包含有JSP）2、前端除了引入以外，后台Java还需要配置这个文件（后台Java需要配置，具体也是弄了很长时间，后台Java配置）3 、至此，前后端才通，不会再报‘后端配置没有加载’4、当然这...

原创 VUE移动端使用overflow-auto滚动条坑

解决 滚动条 滑动 一次就一直出现在底部问题在关闭模态框之前，操作原生domvar box = document.querySelector(‘div’)box .scrollTop=0设置 滚动条的 位置 为 0，这样，每次重新打开另一条数据的时候，滚动条的位置都在初始位置顶部...

原创 VUE移动端-模态框滚动穿透问题

1 v-show显示模态框2 watch 监听模态框 的变化watch:{isHidden(newVal){newVal?this.scrollStop():this.scrollStart()}}3 在isHidden值发生变化的时候，a 阻止浏览器的默认行为，同时禁止页面滚动scrollStop(){var m = function(e){e.preventD...

原创 后端返给前端的html页面-出现横向滚动条

首先查看返回的结构，添加代码即可：html,body .countryNews{overflow:hidden;overflow-y:auto;}

原创 vue移动端手写tab栏切换

复制代码结构----供自己直接使用：<ul class="tabsbox"> <li> <a @click="cur=0" :class="{active:cur==0}">全部</a> **//注意a标签中的href必须去掉，否则路由出现问题** </li> <li>...

原创 VUE移动端定位按钮-可直接使用

记录下，供自己直接使用，呼呼呼呼 <div class="floatMap"> <router-link to="/looking" class="header"></router-link> </div>样式.floatMap .header {position: fixed;bottom: 3rem;right: 1...

原创 VUE中使用高德地图-获取用户当前位置

1 下载npm install vue-amap --save在配置文件中webpack.base.conf.js中，引入externals: [require(‘webpack-require-http’)],2 需要有一个容器来访地图（由于是获取当前用户信息，不需要展示）3 由于项目是按需加载，所以还是在beforeMount（）钩子函数中引入beforeMount() {...