Hero_rong的博客

vue3+js+vite

如上图所示，首先有个form表单，在form表单里面还套了个表格form表单里面的每一项都要做校验，表格里面的也要做校验

项目需求，vue项目本来是个pc端的，甲方要求可以在桌面直接打开，然后搜了一下，发现广发网友都推荐 electron ，立马打开官方文档，看似简单，没想到却走了很多弯路，所以有了这篇文章有需要的可以先看下官方的文档 https://www.electronjs.org/docs 首先下载 electron 的依赖 装好之后可以electron-packager -v 检查一下是否安装成功，如果跳出版本号，那就是成了npm install electron --sav...

小程序是没有直接从手机里面选文件这个功能的，只有从微信聊天记录里面选用的是这个方法wx.chooseMessageFile（） （官方文档戳这里） wx.chooseMessageFile({ count: 10, type: 'file', success(res) { console.log(res); } })...

效果如图所示下面直接贴代码吧wxml <view class="input {{flag?'':'eight'}}"> <icon type="search" size="23" color=""></icon> <input type="text" placeholder="请输入" bindinput="bindKeyInput" bindfocus='bindfocus' value="{{value}}" />...

分页效果如上所示问题： 如上图所示，现在点击到第三页了，然后操作列表里面的删除按钮，数据删除，列表重新加载，此时分页应该回到第一页，但是没有原因： 用的这个插件，虽然绑定了size-change和 current-change 方法，但是在方法里面并没有实时给页面赋值 ，换言之，这两个方法里面就算是空的，点击上下页也会跳转，但是如果请求完数据想从第三页回到第一页那就不行了，代码会认为还在当前页面，必须要在这两个方法里面给 currentPage赋值才可以方法： 解决方法就是如下...

如图，vue 里面日期选择拿到的正常的数据是 2020-12-21 这种格式的，但是后端要的数据是 20201221 这种格式的这个还是比较简单，我们先用正则找到 ‘-’，然后替换掉就行了 let nowDate = '2020-12-21' var reg = new RegExp('-', 'g') console.log(nowDate); console.log(nowDate.replace(reg, ''));也可以这么写，结果是...

var myDate = new Date(); var nowDate = myDate.getFullYear(); nowDate = nowDate + ((myDate.getMonth() + 1) < 10 ? "年" + (myDate.getMonth() + 1) : "年" + (myDate.getMonth() + 1)); nowDate = nowDate + (myDate.getDate() < 10 ? "月" +...

element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的我们需要这样子的然后我们常规操作，border: none;或者 border: 0; 发现行不通，哈哈哈哈哈tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。然后就就，就发现个好东西，>>>， &g...

Vue数据更新视图不更新这里写自定义目录标题知识拓展数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测对象属性的添加或删除异步更新队列Object.assign方法:vue多层循环，动态改变数据后渲染的很慢或者不渲染知识拓展啦啦啦在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。数组

点击事件失效的情况，总共有三种1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，.stop 阻止一下冒泡就行了@click.stop="doSomething($event)"2.还有一种可能被默认事件阻止了，我们加个这个就能解决，.native@click.native='setUp(index)'3.如果项目中的某些组件，使用了

for of 循环的时候非常方便，基础形态是这样的，直接打印 s ，就可以取到里面的值了，但是！！这种情况下是取不到 indexfor (let s of sequence) { console.log(s);}后来我就发现了这个方法.entries()entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key， 数组元素作为 value。酱紫就可以啦for (let [m,index] of...

上个小小的效果图，然后具体实现看代码template<view v-for="(item, index) in list" @click="choose(index)"> <view class="choose" :class="{green:arr.includes(index)}"></view> <view>{{item.name}}</view> <view>聊天</view></v..

拉的同事的代码，然后运行，又不报错，但是也运行不出来，就是卡在 40% 的时候然后网上各种姿势搜解决方案，删除 node_modules ,删除 package-lock.json 我都试了，然鹅没有用！！最后被逼无奈，我看起来同事的代码，发现，template 外层没有给 div ，就是 template 里面必须要加个 div 嵌套起来，然后果断加上，运行，问题解决 ！！...

用input 导入 excel 然后生成表格html 导入按钮和选择文件的弹框 <el-button v-waves :loading='downloadLoading' class='filter-item' type='primary' icon='el-icon-download' @click='daoru'> 导入 </el-button> <el-dialog title="导入文件" :visible

arr.filter(d=>d)

用户状态后台返回给我的是 0和 1，根据 0和 1来显示，启用和禁用，但是文档上的例子是直接用prop = ' userName '这种方法来显示数据的，如果还是这么写的话，那表格里展示出来的就是 0和 1 ，这并不符合我的需求，所以，我找到了这个属性slot-scope，这个属性，看下面打印的东西，就知道他是个啥了，通过slot-scope可以获取到 row, c...

以下如有不足，欢迎各位大佬指正先看一下 vue-admin-element 的目录，对于新手来说，看明白项目的目录很重要，这些目录都是自动生成的1.思路，我们要动态生成路由，就得有接口，从接口里面获取路由信息，然后把这些信息动态添加到路由上展示出来就ok了，仔细看一下这些数据，不难发现，里面有component组件，这组件后台是没有办法传过来的，需要前端自己转换，下面会详细提到...

如图刷新右边1.添加刷新方法，export function refresh(that) { that.$router.replace({ path: '/refresh', query: {} })}2.调用 let that = this setTimeout(() => {...

如图，验证功能点名称，长度1-20并且是数字和字母的组合。长度是1-20，这个很好办，直接el-form表单上添加:rules="rules" ，添加个ref="ruleForm" ，下面提交的时候好识别 ，prop="powerName" 就是对应的规则的名称了<el-form :model="form" :rules="rules" ref="ruleFo...

今天用到element组件分页的时候，看着官方文档是显示共计多少条，然后到我这里就是显示total，感觉很不合适，后来发现，element是可以设置中文显示的，如下图import locale from 'element-ui/lib/locale/lang/zh-CN'...

<el-checkbox-group v-model="form.powerIdArr" @change="changeGroup"> <el-checkbox @change='changeLick' v-for="item in powerList" :label="item.powerId" name="type">{{item.powerDescr...

<el-tree :data="data" :props="treeProps" @click="showAdd()"></el-tree>treeProps: { label: "name", children: "children"},

步骤简单一 在 src/api/charts中添加接口 ，方法名为getindexMockimport request from '@/utils/request'export function getindexMock(params) { console.log(params) return request({ url: '/charts/one', ...

这里用的是vue-element-admin框架一 新建一个文件夹webManage ，里面放css和js文件夹二 拆分把需要拆分的文件直接剪切到对应的文件夹里就可以了三 在vue页面上调用对应的 js和css<script> import login from "../../webManage/js/login/logi...

步骤简单一：下载md5npm install js-md5二：导入使用1. 导入import md5 from 'js-md5';2.使用console.log('name=====', md5(name))打印下来的结果是一串字符串...

这两天再用 vue-element-admin框架做项目，直接下下来的话，是用mock模拟的数据，想要真正的调用服务器的地址，需要这么干1.在vue.config.js 文件里，把这里的地址换成服务器的地址2.在.env.development文件里 ，把接口地址换成自己需要的3. 在api里面对应的文件里，我这里是 table.js文件里，把接口补全...

       图一                                                                           图二用vue 写项目，需要点击新增，然后弹出一个弹框，在安卓上显示一切正常（如图二），但是到了ios上就只显示一半（如图一），另一半白屏遮挡了，查了好多资料，甚至连webpack都从头到尾看了一遍，结果就是没解决，后来冷静下...

问题描述：vue项目，如下页面，点击新增会出现个弹出框，在ios真机操作，弹出框出现后,背景会往上滑。上图是在pc调试的，并不是有bug的页面，bug页面请参照上文描述。如果你的页面上滑已经被你解决了（例如给背景设置固定坐标等方法），但是你在输入框里输入了东西，点击取消或者确定，弹出框消失，这个时候点击下面的取消或者确定按钮，发现不起作用了，说明这个时候你的页面虽然看上去没有上滑，...

vue 设置滚动条滚动到顶部window.scroll(0, 0); 

console.log(this.cityItem.fullName); console.log(this.cityItem.fullName.split(''));在vue项目中，遇到一个常用的方法split（），因为常用，又容易记混，所以在此记录split(' ') ，将字符串以空格为界限切割为数组，引号里面可以写参数，比如...

首先在 html 里面给你要滚动的元素设置属性ref='box' 这就相当于是DOM操作了 ，然后 根据 属性名找到则个元素就可以操作啦，嘻嘻

给背景设置如下样式即可 position: fixed; top: 0; left: 0; 

传参：this.$router.push({path: 'release', query: {name: this.benefitsArr}});//这是关键代码接收参数：this.$route.query.name;//这是关键代码需要注意的是传参是this.$router,接收参数是this.$route,这里千万要看清了！！！...

arr.splice(arr.findIndex(item =&gt; item.id === id), 1)//item 只是参数可以写成 i 或者 v 都可以 ， //后面的额id是数组的id，是不能随便写的，如果你数组里面写的是id，这里就写id，如果数组里面写的是num，那这里就写num ， //=== 后面的id是你想要删除的元素的id号，同理，如果你数组里面写的是num，那这里...

运行了半天的‘vue项目’，发现最后是小程序！！！！所以运行不起来！！！这是vue项目的目录这是小程序的目录有点像，但是不太一样，要注意区分呦...

npm install node-sass --save-dev npm install sass-loader --save-devnpm安装命令使用--save会在package.json中自动添加。

 npm install --save vue-scroller使用npm命令安装vue-scroller失败，如下图把命令换成npm install vue-scroller就可以安装成功啦，如下图 

问题：vue项目，从A页面进入B页面，再返回A页面的时候，页面不刷新。举例：从列表页面，选择一条数据点击进去查看详情，这时候页面刷新了，并且执行了 created（）方法和 mounted（）方法，这个时候返回上一页，也就是列表页面，选择另外一条数据点击进来查看详情，页面上保留的还是上一条信息，并且没有执行created（）方法，直接执行了  mounted（）方法。思考：一开...

    图一                                                                     图二                                                           图三vue的项目，有一个填写资料的页面（图一），填写姓名，电话，特长啥的，然后特长是要跳转到第二个页面（图二）上的选择的...