- 博客(26)
- 收藏
- 关注
RSS订阅原创 使用 vue 时犯过的小错误
在用element的表单验证时，重置功能会报错，在我一点一点核对代码时候，发现原来是我没有给 @click="resetForm('ruleForm')" 中的 ruleForm 加引号，很尴尬，下次使用组件的时候，能用cv大法千万别手打。element的表单验证。
2022-09-08 10:41:10
6467
转载 常用的vue、js方法
2.通过事件改变data数据，然后输出dom，在方法里直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值.简单的理解，vue.js中this.$nextTick()就是起到了一个等待数据的作用，也就是说，将一些回调延迟，等到DOM更新之后再开始执行。在修改数据之后立即使用它，然后等待DOM更新。1.你改变了dom元素数据，然后你又想输出dom，那你只能等到dom更新完成之后才会实现.
2022-09-01 18:32:41
240
原创 小程序自定义swiper指示点
思路：隐藏小程序自带的指示点，根据banner的长度显示指示点。根据swiper的滑动更新指示点的状态。当index 和 swiperCurrent相等时，指示器就显示被选中的状态，其他的就显示平时的状态。当 swiperCurrent更新后，会去判断。...
2022-08-12 16:41:01
863
原创 element的Cascader 级联选择器插件
将联级选择器做成插件传值，注意用v-model来放一级二级的id数组更方便子组件：<template> <div class="cascader-component-container"> <el-cascader ref="cascaderMallCatergory" :options="options" :show-all-levels="false" :props="props" @change="menu" v-model="mallCaterg
2022-04-28 18:33:53
421
原创 对数据进行重新整理等方法
1、拿到数据，将字符串变成数据再返回，分割字符split方法// 获取数据 getTemplatepositionQuery({}).then((res) => { // 输出查看数据 console.log(res) // 将拿到的数据传到data中方便实用 this.boothCard = res.data.map((item) => { // 将用逗号分隔的字符串数据用solicit方法分割重新组成数组，再赋值
2022-03-17 14:32:01
616
原创 vue调用接口
一、在api中新建该页面的js文件用于存放该页面的所有接口二、引用所需组件，调用接口（已经全局配置了接口地址）import axios from 'axios'// 首页-我的展台export function getQueryMyBooth(data) { return request({ url: '/booth/query', method: 'post', data })}三、在该页面导入，在create中将获取到的数据传给dataim
2022-03-04 17:36:39
10644
原创 常用布局方式与常用css
1、弹性盒布局方式CSS3弹性盒布局方式 - 简书注意：需要在父元素中写：display: flex;//必须写flex-flow: wrap; //是否换行align-items: 属性值 //纵向对其方式justify-content: flex-start; //横向对其方式2、网格布局CSS Grid 网格布局...
2021-12-10 13:22:02
681
原创 遍历筛选状态得到对应id
根据choose的状态拿到对应的idboothCard: [ { id: 0, choose: false, }]找到对应id方法：getCardId() { const cardId = [] this.boothCard.forEach(function(item) { if (item.choose === true) { cardId.push(ite
2021-12-10 12:03:21
281
原创 Element UI多个走马灯取消鼠标悬停不自动切换
element写轮播图时，鼠标悬停不会停止，需要用到以下核心代码@mouseenter.native="delHandleMouseEnter"前情提要：此html代码外面是循环遍历出的div，div数量是后台返回的，而且里面还包含着轮播图，所以有几个div就有几个轮播图，因为是多个轮播图，所以后期需要循环遍历index具体写法：<div v-show="item.showBannerOrNo" class="block booth-banner"> .
2021-12-10 10:12:11
2614
1
原创 遍历数组的一些方法
1、reduce语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValu
2021-12-09 10:54:33
298
原创 vue2和vue3的自定义指令
vue2自定义指令Vue.directive('指令名称'，{ // 指令挂载到dom会自动触发 inserted(el){ // el指的就是真实的dom元素 }})vue3自定义指令vue3用的不是vue.了，而用的是app，是由 createApp 方法执行之后得到的实例，用它身上的 directive 方法createApp().directive('指令名称',{ mounted(el, binding){ //
2021-11-04 23:13:48
234
原创 vue3的逻辑复用抽离
介绍：在vue中，为了实现项目可维护性与复用的功能，会将代码单独分离出一个功能组件，但是vue2和vue3分离方式并不相同vue2：vue2不支持逻辑的抽离，如果想实现抽离必须要将所有html代码与逻辑代码全部抽离，会增加父子组件的通信成本，如果数据过多维护起来会比较头疼vue3：vue3支持逻辑的抽离，可以更好的增加项目的可维护性，由于抽离的只是逻辑代码 ，所以没有增加通信成本，就算数据再多，维护起来也非常方便 而且vue3中的 setup 这个函数里面不应该出现大量的逻辑代码，不仅
2021-11-04 19:26:54
3366
原创 npm介绍与使用
node.js和npm的关系：node.js是js中的运行环境，node中包含npm，安装好node后，npm也会自动安装好，简单来说npm是一个记录了很多第三方包的网站，有些人会将自己写好的代码上传到npm中，我们需要的时候，就可以直接用npm命令来下载第三方的包 但是npm下载第三方包的速度会比较慢，建议先用npm下载cnpm来下载第三方包。 注意：npm和cnpm不可以混用，一旦使用cnpm下载第三方包，就不可以再使用npm来下载包，但是除了下载第三方包，在运行程序或者进行其他操作时，还是需
2021-10-24 16:34:02
343
原创 vue Excel导入与导出
注意：excel模板文件是后台规定的，规定需要上传哪些数据Excel导入流程：通过隐藏域，开始上传文件，选中文件 读取excel文件中的内容，读取以后发现不符合后端的要求 需要将excel中的数据进行格式化，格式化成后端需要使用的数据 使用AJAX将格式化以后的数据传递给后端 后端接收到数据以后，将数据存到数据库中解析vue-element-admin框架实现方案:框架提供两个组件：父组件：接收子组件解析的内容，进行上传处理...
2021-10-18 19:38:58
222
原创 父传子与插槽的用法
复用组件时，把功能组件抽离出去后，会有父组件往功能组件传数据的需求，最常用的是父传子 props 和插槽 slot 如果传递的数据比较简单，比如只有文字，那么使用父传子即可 如果传递的数据比较复杂，有图片等，那么用插槽比较合适父传子子组件/功能组件 <div class="home-panel"> <div class="container"> <div class="head"> ..
2021-10-14 15:33:07
175
原创 动态路由讲解
1、设置token的方法在`utils/auth.js`中，基础模板已经为我们提供了`获取token``设置token`，`删除token`这三个方法，可以直接使用只需要将存储的key放置成特定值即可import Cookies from 'js-cookie'// 统一的keyconst TokenKey = 'vue_admin_template_token'// 获取tokenexport function getToken() { return Cookies.ge.
2021-10-13 18:05:53
88
原创 在vue中tokn持久化与统一注入
1、设置token的方法在`utils/auth.js`中，基础模板已经为我们提供了`获取token``设置token`，`删除token`这三个方法，可以直接使用只需要将存储的key放置成特定值即可import Cookies from 'js-cookie'// 统一的keyconst TokenKey = 'vue_admin_template_token'// 获取tokenexport function getToken() { return Cookies.ge.
2021-10-11 20:16:50
672
原创 vue登录时，兜底验证与统一抛出错误
使用的后台框架：介绍 | vue-element-admin一、先解决登录时用户账号或者密码出错，try catch没有错误提示(没有进入catch分支)1、在login/index中，使用handleLogin这个验证方法<el-button class="loginBtn" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLog.
2021-10-08 23:01:14
917
原创 vue封装自动聚焦指令
1、在src\directive\index.js中封装自动聚焦指令代码// 文本域的自动聚焦封装的指令import Vue from 'vue'// 注意：需要在main.js中导入Vue.directive('focus', { // 当指令所在DOM元素插入到了DOM中，只触发一次 // 当被绑定的元素插入到 DOM 中时 inserted (el) { focus(el) }, // 当指令所在组件数据发生改变的时候，都会触发 update (el) {
2021-10-07 09:38:04
442
原创 为什么token要存在vuex中还要存本地一份
用户登录后，访问其他页面需要携带token，vuex是储存在内存里面的，而内存的特点就是快，将token存在vuex中可以提高获取token速度。localstorage是在本地文件夹中，需要读文件，获取token速度慢。因为localStorage的读取是一次磁盘读取，读取速度远低于vuex的内存读取，为了避免重复读取localStorage影响性能，需要将localStorage的数据放到vuex里维护但是由于vuex是储存在内存里面的，所以刷新页面就会消失，所以要存本地一份，否则用户刷新页面就
2021-09-20 14:40:44
3383
1
原创 用vue封装时间工具函数
使用函数封装不使用过滤器是因为，过滤器本身也是个函数, 而且vue3废弃了过滤器, 所以不使用1、utils/date.jsimport moment from 'moment'// 设置中文模式moment.locale('zh-cn')/** * .....多久之前 * @param {*} 之前的时间 * @returns 系统时间到之前指定时间的距离值 */// 把目标日期转成多久之前通用函数const timeAgo = targetDate => { re
2021-09-20 14:22:56
501
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人