前端开发
文章平均质量分 75
盼盼哦
这个作者很懒,什么都没留下…
展开
-
a-cascader级联选择的使用以及注意事项(基于AntDesignVue)
包括a-cascader的基本使用,进阶的动态加载数据或者预加载数据,以及自定义字段名简化代码。原创 2022-04-10 17:53:59 · 12182 阅读 · 0 评论 -
同一个路由携带不同参数打开多个页面,多个页面的数据都一样(子组件实时监听父组件的属性变化,路由的传参未响应)
子组件根据路由变化,实时监听父组件的属性变化一. 问题背景二. 问题分析三. 总结一. 问题背景啊,又是满满的一天!话不多说,回到正题,这几天在做英语学习后台管理系统的时候,出现了一个问题,就是点击试卷详情(以下界面)进入试卷详情页查看该套试卷的用户学习记录(下图)在这里,我分别点开了三个不同试卷的学习记录,发现这三个记录都是相同的(一个吊样),这就让我懵逼了,咋回事?仔细看了一下地址栏,路由地址也不同撒。莫非是我的子组件接受父组件传过来的paperId的时候出问题了?这是我的第一个猜测。于是原创 2021-12-24 01:54:51 · 2024 阅读 · 6 评论 -
flex布局属性详解&&基于flex的单元素,整体元素居中方法&&代码示例
CSS-flex布局属性详解一. 基本属性以及代码示例1.父元素属性(1) 为父元素添加display 属性,值为flex(2) flex-direction 属性(改变子元素排列方式)(3) justify-content 属性(改变子元素沿主轴对齐方式)(4) align-items 属性(定义 flex 子元素沿交叉轴的对齐方式)(5) flex-wrap 属性(指定子元素换行方式)2.子元素属性(1) flex-shrink 属性(收缩子元素)(2) flex-grow 属性(增大子元素)(3) f原创 2021-12-19 18:48:25 · 3273 阅读 · 0 评论 -
Ant Design Vue中出现报错: Invalid prop: custom validator check failed for prop “pagination“
一.问题背景最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个pagination的校验错误警告,这可把我整懵逼了看了一下代码,也没有错撒,而且我之前封装的组件用的好好的,怎么就错了呢?然后开始对问题进行剖析。二.问题分析要想解决问题,首先就要对问题进行定位,从控制台中可以粗略的看到,问题大概是出在Table表格组件上。好,我先翻到使用表格组件的地方:嗯。貌似没看到相关的pagination的属性,再看看传入s-table中的数据源data和列属性colums:对比一下原创 2021-12-15 16:11:54 · 7173 阅读 · 1 评论 -
CSS-智能表单
一.效果图二.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2021-09-19 12:13:53 · 187 阅读 · 0 评论 -
踩坑系列-VUE的表单重置-报错:TypeError: Cannot read property ‘resetFields‘ of undefined“
一. 背景最近写的一个后台管理的时候需要对密码以及手机号进行修改,但是我想在修改手机号或者密码的对话框关闭的同时,将表单数据和验证规则清空,达到比较好的体验效果。二. 寻找原因起初我使用的是resetFields将重置,(注意: resetFields 作用不是清空表单,而是将所有字段值重置为初始值)。但是呢,写出来的代码出现"TypeError: Cannot read property ‘resetFields’ of undefined"的错误。我找了一下,引用网上的原因:这个错误是因为你的do原创 2021-09-09 21:19:15 · 1681 阅读 · 0 评论 -
ES6-获取promise对象里面的数据进行操作
一. Promise基础1. promise对象的生命周期:初始为挂起态(pending),表示异步操作尚未结束。一个挂起的 Promise 也被认为是未决的(unsettled)。一旦异步操作结束, Promise就会被认为是已决的( settled ),并进入两种可能状态之一:(1)已完成( fulfilled ): Promise 的异步操作已成功结束;(2)已拒绝( rejected ): Promise 的异步操作未成功结束,可能是一个错误,或由其他原因导致。内部的 [[Promise原创 2021-09-08 17:12:20 · 11544 阅读 · 0 评论 -
CSS文本属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本属原创 2021-08-30 15:58:01 · 83 阅读 · 0 评论 -
CSS选择器以及优先级
1. 常用选择器ID选择器:id表示身份,在页面中元素的id值不允许重复,因此id选择器只能选择单个元素。在style标签里面的格式为:#id名称{样式内容}如:#navigation { height: 80px; line-height: 80px; text-align: center; background-color: white; }也可以针对单个元素里面的某个元素生效,比如针对某个div元素里面的图片生效,防止影响到其他元素的图片:#banner img { width: 100%原创 2021-08-27 12:45:35 · 269 阅读 · 0 评论 -
html-表单篇
1. 表单设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-08-24 11:08:21 · 141 阅读 · 0 评论 -
html基础-表格篇
1. 基础表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-08-23 17:24:49 · 439 阅读 · 0 评论 -
Vuex起步
一. 安装1.npm安装cmd指令:npm install vuex --save2.其他方法Vuex安装二. 使用1、在一个单独的文件store.js里面,导入Vuex,然后注册可供使用的Vuex插件,而后创建一个新的状态存储库store并传入一个对象来配置这个存储库,这里的state相当于Vue实例里面的data,保存初始的属性值import Vue from 'vue'import Vuex from 'vuex'//注册vuex插件Vue.use(Vuex);//创建一个新原创 2021-04-22 15:22:24 · 139 阅读 · 0 评论 -
路由嵌套
一. 为什么要使用嵌套路由原因:在同一个页面点击一个路由连接<router-link>时, 在这一级路由组件<router-view>不消失的情况下,出现这一级<router-link>指向的路径的下一级路由组件<router-view>解决方案:在上级组件路由下,通过在这一级的路由规则对象中,添加children属性嵌套子路由,保证上级路由组件显示的同时,出现子路由组件路由规则对象:新建的路由对象routerObj的构造函数中的路由匹配规则的数组rou原创 2021-04-05 23:23:32 · 1476 阅读 · 0 评论 -
路由传参
一. 路由传参1.使用query传参在路由组件<router-link to="/login?id=10&name=张三">登录</router-link>通过使用查询字符串,可以直接指定对象的键值,这里的对象是指所创建的组件的内部实例属性$route里面的信息,比如query,且query是一个对象。代码演示:<!DOCTYPE html><html lang="en"><head> <meta charset原创 2021-04-05 23:14:27 · 307 阅读 · 0 评论 -
路由的起步
一. 路由的概念以及Vue-router的安装后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现,在单页面程序中,这种通过hash改变来切换页面的方式,称为前端路由(区别于后端路由)。参考链接:https://www.cnblogs.com/m2mao原创 2021-04-04 15:12:48 · 107 阅读 · 0 评论 -
通过ref在父组件中调用子组件的数据,方法
<div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 id="myh3" ref="myh3">Haha! The weather is very well!</h3> <hr> <login ref="myLogin"></login> <...原创 2021-04-02 22:19:33 · 515 阅读 · 0 评论 -
Vue之父组件与子组件之间的传值
一. 父组件向子组件传值父组件可在引用子组件的时候,通过属性绑定的形式(v-bind:),把需要传递给子组件的数据,以属性绑定的形式,传递到子组件的内部,供子组件使用。但是需要在props属性数组内声明才能使用。代码演示:<div id="app"> <!-- 父组件可在引用子组件的时候,通过属性绑定的形式(v-bind:), 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件的内部,供子组件使用 --> <comp原创 2021-03-30 22:23:12 · 4587 阅读 · 0 评论 -
Vue之创建组件
一. 创建全局组件的方法1. 分为两步,首先使用 Vue.extend() 创建模板对象,然后使用Vue.component(‘组件的名称’, 组件的模板对象) 创建组件。代码格式为://方法一: //第一步:创建模板对象 var component1 = Vue.extend({ template: '<h3>这是用Vue.extend 创建的组件</h3>' }); //第二步:使用Vu原创 2021-03-28 17:03:04 · 232 阅读 · 0 评论