- 博客(35)
- 收藏
- 关注
RSS订阅原创 Vue路由守卫，防止直接输入url越权访问
为了防止用户直接输入网址越权访问登录后的网页，需要进行拦截禁止访问页面，登录成功后端接口返回该用户可以访问的所有菜单路由，前端数据存储到vuex中，在路由守卫进行判断拦截。
2024-09-27 11:37:14
324
原创 vue3 “TypeError: Cannot read properties of undefined (reading ‘sessionEndTime‘)“found in
使用DateTimePicker 日期时间选择器的:picker-options="pickerOptions"第一种：用户选择完项目时间再点击销售时间时，直接将项目结束时间后面的时间禁用，让用户无法选择。第二种：用户先选择销售时间，再填写项目时间，那么需要在用户提交表单时在判断一次。需求是销售结束时间不能大于项目结束时间，两种情况。
2023-09-15 20:08:42
328
原创 vue3 ＜typescript＞ 数据类型封装
前端开发会用到很多的弹框，子传父，父传子的一些方法，而vue3中typescript语法需要定义数据类型，把他们封装起来方便使用。第三步：在中使用。第二步：将需要用到的参数用IDialog对象定义好。第一步：创建interface.ts文件。
2023-09-04 11:11:53
525
原创 vue3＜script setup＞beforeRouteEnter
vue3beforeRouteEnter获取当前页面路由或是上一个页面的路由。
2023-03-23 15:11:44
1947
1
原创 vue3使用$refs
vue3中访问$refs绑定的组件的属性或者方法，我们会使用$refs。但是Vue3不同于Vue2，在 Vue3的setup中无法访问到this，使用getCurrentInstance方法。
2023-03-21 10:41:36
3292
原创 vue3.0 代理解决跨域
vue3.0解决跨域，我按照下面这个博主方法解决的，很详细Vue3.0中解决跨域代理问题_许魁的博客-CSDN博客_vue3.0跨域问题我是封装的接口数据步骤多加一步，在.env.porduction生产环境页面配置VUE_APP_TITLE=APP_DEVELOPMENTVUE_APP_GMTZAUTH_URL = '/api' //是vue.config.js的代理api......
2022-06-17 09:49:58
412
原创 【vue3】el-table树形列表展示数据
效果图：页面代码: element-plus的table表格树形数据与懒加载<div class="userData"> <el-table :data="userData" style="width: 100%; margin-bottom: 20px" row-key="id" border lazy :load="load" default-.
2022-04-08 15:59:21
5240
2
原创 【vue3】 封装数字字典列表接口调用
在写vue3后台管理系统，有字典管理功能，将字典管理增删改查页面接口写完，在其他页面使用数字字典，将接口封装方便使用第一步：创建utils文件，新建dict.jsimport { ref, toRefs } from 'vue';import { getDictList } from '@/api/sys' //引入封装数字字典接口/** * 获取字典数据 */export function getDict(...args) { const res = ref({});
2022-04-01 16:17:18
8727
1
原创 【vue3.0解决跨域】
vue3.0解决跨域，我按照下面这个博主方法解决的，很详细Vue3.0中解决跨域代理问题_许魁的博客-CSDN博客_vue3.0跨域问题我是封装的axios步骤多加一步，在.env.porduction生产环境页面配置VUE_APP_GMTZAUTH_URL = '/api' //是vue.config.js的代理api这样就不用在每一个页面都写代理api，改完记得重启项目哦~...
2022-04-01 15:35:11
2013
原创 vue3 swiper/vue-awesome-swiper使用
1，安装vue-awesome-swiper：npm install vue-awesome-swiper@3.1.3 --save2，安装swiper：npm install swiper@5.2.0 -S3，在main.js中引入插件// 轮播import VueAwesomeSwiper from "vue-awesome-swiper";import "swiper/css/swiper.css";const app = createApp(App);app.us
2022-03-09 14:27:57
5297
1
原创 【vue3】error Component name “index“ should always be multi-word vue/multi-word-component-names
报错：原因：在编译的时候eslint会检测将次写法判定为不规格。解决方法：vue.config.js文件加 lintOnSave:false
2022-03-08 12:13:08
6236
4
原创 JS的键值对用法
效果如下：上代码<!-- 循环接口数据 --> <div class="venueBox" v-for="(item,index) in list" :key="index"> <div class="activityBox"> <div class="venueHead"> <!-- 头部名称 --> <p>{{item.
2022-01-11 10:43:39
668
原创 前端--获取服务器时间
问题：用户的电脑年代久远，在登陆系统的时候，电脑的时间不是准确的北京时间，系统无法登录，还需要远程用户的电脑调整时间解决：在用户登录的时候获取服务器的时间进行登录var nowDate = function getServerDate() { var xhr = null if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest() } else {
2021-12-28 17:12:35
1342
原创 前端-解析后台json字符串
在渲染数据的时候，后端接口返回了一段字符串，要处理后在页面进行展示页面处理返回的数据，json.parse方法 //静态页面 <div class="pic"> <img :src="getImages(ite.picture)" /> </div> // 获取图片 getImages(data) { if (!data) { return [] } e
2021-12-15 10:48:02
1791
原创 Vue项目seo优化: vue-meta-info + prerender-spa-plugin
vue单页面的项目，不可避免考虑seo问题，解决单页面的seo问题的方法，使用vue-meta-info 配合 prerender-spa-plugin预渲染一，prerender-spa-plugin使用npm install prerender-spa-plugin --save在webpack.prod.conf.js中加入const PrerenderSpaPlugin = require('prerender-spa-plugin');const Renderer = Pr.
2021-12-14 15:48:07
1740
2
原创 移动端调试工具
调试工具可以在手机和电脑上查看 注意：在电脑上调试，需要定位，用户信息和身份的，这些页面调试不了项目打包上线需要注释的，不然会出大问题 <!-- 用下面这个调试 --> <script src="https://cdn.jsdelivr.net/npm/vconsole@3.5.1/dist/vconsole.min.js"</script> <script src="https://cdn.bootcss...
2021-12-03 10:51:07
581
原创 element选择器只能选择七天
是通过v-model绑定的值来判断，用watch监听，获取到用户填写的数据经过处理，点击发布提示在data中将makeDate定义成数组 <div style="margin-top: 30px"> <span style="display:inline-block;width: 120px;">选择预约日期：</span> <el-date-picker v-model=.
2021-12-03 10:28:52
820
原创 element日期选择器，去掉此刻按钮
去掉此刻按钮也看了很多方法，以下的方法，也符合我的需求，亲测可行，话不多说，上代码吧！ <!-- 给开始和结束时间加 focus 方法--> <el-row> <el-col :span="12"> <el-form-item label="开始时间" prop="begintime">
2021-12-02 11:14:31
2691
3
原创 前端vue二维数组接口渲染
HTML<!-- 接口（ list循环）--> <div class="twoTypeOone" v-for="(item,index) in list" :key="index"> <p>{{ item.venueName}}</p> <div class="concertHall"> <div class="topLong" v-if="item.tactiv...
2021-12-02 10:32:42
1231
原创 vant 上传图片
封装接口参数页面，将封装接口引入beforeRead函数可以在上传前进行校验和处理after-read回调函数，获取到对应的file对象文件上传
2021-09-14 16:54:21
95
原创 element弹框 右上角 x 关闭按钮
子组件弹框的内容太多，点击x按钮无法再次打开弹框方案一：去掉关闭按钮方案二：用关闭回调方法，让他和取消按钮一样给父组件传值 dialog为false
2021-09-08 11:28:59
1642
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人