随笔分类 - 前端小技能
摘要：需求： 1.获取到数据为数组，其中有的数据项中本身包含逗号，则需要将带有逗号的数据项首尾加上[]，最后数组转为字符串且以逗号拼接进行保存； 2.在回显数据时，获取到的就是传过去的数据，需要恢复为数组，且数据项中带有逗号的不需要首尾加上中括号[]，不然没法做回显； 数据显示： 1. 2. 实现代码：
阅读全文
摘要：项目中涉及到三种类型的拖拽： 1.el-tree拖拽字段至div，表格； 2.多个div之间的拖拽； 3.表格之间列的拖拽； 实现代码： 1.el-tree拖拽字段至div，表格； 1.el-tree设置字段可拖拽至外部： <el-tree ref="tree" @node-drag-start="
阅读全文
摘要：实现效果： 即需要实现当前元素与相邻元素交换位置， 当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。 实现代码： js: //点击上移 clickUp(index){ this.swapArray(this.tableData, index-1, index);
阅读全文
摘要：需要遍历对象，将key value分为两个数组，可以使用forin，但是获取到的对象中的属性及属性值排列是无序的， 目的是要按顺序取出对象中的key和value值。 实现效果： 比如接口返回的对象格式： 需要转换的格式： 实现代码： //按序输出数据 for(let i in res.data.al
阅读全文
摘要：效果如下： 在不分离项目中，需要网站里的所有页面均显示相同的网站图标，在前后端分离项目中可以直接在static的index.html中添加，但是不分离项目中就不行了， 实现办法： 写一个公用的commons.jsp文件，里面写上所有页面都需要的东西，比如css,js,img,favicon.ico等
阅读全文
摘要：有时候需要设置滚动条的位置，比如： 1.vue使用vue-router在切换路由时，如果页面不需要请求接口的话，则不会刷新页面，这时候浏览器会保留上个页面的滚动条位置，在下一个页面仍保留在该位置， 2.聊天框里，设置的height：100%，这样高度超出会出现滚动条，在每次输入新的消息点击发送时，聊
阅读全文
摘要：想要在页面中插入视频，比如mp4格式，使用VideoPlayer 实现效果： 实现代码： 1.页面引入： <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options
阅读全文
摘要：实现效果： 进入页面时，获取到当前时间，可以按秒更新 实现代码： setInterval(()=>{ let date= new Date(); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0'
阅读全文
摘要：通过点击 复制 按钮复制对应的内容，然后Ctrl+v实现粘贴。 实现效果： 实现代码： 1.html： <el-button @click="clickCopy(item)">复制</el-button> 2.js方法： //点击复制 clickCopy(item){ let url = item.
阅读全文
摘要：比如在一个vue项目中，需要重复使用某个方法或是某个数据，可以将该方法/数据封装在一个js文件中，然后在需要使用该方法/数据的.vue文件中直接导入该js文件，使用js文件中的方法/数据。 实现代码： 使用js文件中的方法： 1.js： export default{ //时间戳转换为正常时间格式
阅读全文
摘要：在一个vue页面中有时候内容会很多，为了方便编写查看，可以分为多个子组件，最后在父组件中引入对应的子组件即可。 下面这个是父子组件通信中的一个具体实例：新增、修改弹框。 子组件中主要写了关于新增、修改的弹框， 子组件： 1.弹框： 可以直接使用elementui的el-dialog来写，很多样式就可
阅读全文
摘要：实现效果如下，根据在下拉框中筛选要显示的列，则在下面表格中就会显示对应的列。 实现代码： 1.在页面中显示按钮，通过点击按钮控制下拉框的显示与隐藏： html： <div class="butt_select"> <el-button type="primary" icon="el-icon-men
阅读全文
摘要：element-ui中有关于菜单的代码，点击对应的菜单实现高亮显示，若是直接在URL中输入path地址，页面可以跳转，但菜单还是停留在原先的菜单上，路由跳转了但是对应的菜单并未高亮显示。 el-menu代码： <el-menu class="el-menu-vertical-demo" @open=
阅读全文
摘要：包含几种规则： 1.格式“BIL1100”，规则：前三位是字母，后四位是数字。 var validateNumber = (rule, value, callback) => { const age= /^[A-Za-z]{3}[0-9]{4}$/; if (!age.test(value)) {
阅读全文
摘要：自定义校验可以大致分为三种： 1.确认密码 在输入确认密码的时候，需要判断当前输入的密码与上面的密码是否一样，若是为空，则提示：请再次输入密码；若是与上次输入的不一致，则提示：两次输入密码不一致；否则，不显示提示信息，即输入正确。 password2: [ { required: true, val
阅读全文
摘要：效果如下： vue实现用户登录系统之后，长时间未操作，提示登录超时，直接退出登录，跳转至登录页面。 app.vue: <template> <div id="app" @click="clicked"> <router-view/> </div> </template> <script> impor
阅读全文
摘要：有时为了在搜索时清楚直观，需要关键字的高亮显示。 实现效果： 实现思想： 在下面table中，本来应该是直接渲染数据，此时，可以先写一个方法，里面包含两个参数，分别是该显示的内容以及进行搜索时输入的关键字，在该方法中，进行判断，若是该列内容中包含关键字，则将关键字颜色改变，然后替换掉；若是没有，则还
阅读全文
摘要：实现效果： amount禁填，当type值选择完之后，amount值会自动相应填入。 如下所示： 实现代码： 1. 从后台获取数据，为一个数组，里面包含多个对象。 <select id="scholarshipTypeSelect" resultType="com.entity.scholarshi
阅读全文
摘要：在SSM框架中，controller的action中，返回的是视图，即jsp页面或是ModelAndView，若是通过axios给vue传值的话，需要转换为字符串或是user实体类对象。 使用@ResponseBody进行返回值转换。 @RequestMapping("/login") @Respo
阅读全文
摘要：即实现鼠标点击其中一个菜单发生样式的改变，当点击下一个菜单时，当前菜单样式改变，其他菜单均变为之前样式。 用JavaScript，jQuery都可以实现，只是后者是封装的JavaScript库，具有sibling()方法，可以直接使其同胞元素取消样式，而JavaScript需要使用循环来使其上一菜单
阅读全文
浙公网安备 33010602011771号