前端
文章平均质量分 61
HTML,CSS,JavaScript,Ajax,JSON,VUE,Node,Bootstrap
hikktn
欢迎关注我的语雀知识库,Java之从零开始(司仪剑君)
展开
-
Vue根据屏幕分辨率计算div可以显示的数量,dom渲染在v-if之后造成的复杂处理
最近在做一个首页,这个首页是懒加载,然后要根据不同的屏幕分辨率计算每个div的高度,适配显示。这个好就好在不是table列表,那么就不需要获取总数。当然也可以获取总数来判断需不需要请求数据。原创 2022-08-21 10:54:02 · 627 阅读 · 0 评论 -
vue中iframe传参/绕过跨域/绕过src不刷新问题解决
欢迎大家关注我的知识库,你的关注就是我前进的动力!CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。原创 2022-07-26 14:00:52 · 1753 阅读 · 3 评论 -
el-dialog拖拽,边界问题完全修正,网上版本的bug修复
欢迎大家来到我的博客,请各位看客们点赞、收藏、关注三连!欢迎大家关注我的知识库,Java之从零开始·语雀你的关注就是我前进的动力!CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。可拖拽、边界问题。修改点看图说话,这个offsetHeight边距是盒子的距离,可是我们把这个盒子计算进去了,多算了高度,致使弹出框跑出了页面。编写基础js,取名叫drag.js编辑外层使用的指令文件,取名叫el-drag-dialog.js在vue组件中使用参考链接:https:/原创 2022-06-24 11:46:35 · 698 阅读 · 0 评论 -
Vue Element按钮Dropdown实现
欢迎大家来到我的博客,请各位看客们点赞、收藏、关注三连!欢迎大家关注我的知识库,Java之从零开始·语雀你的关注就是我前进的动力!CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。需求按钮打开有两个选项![GIF1.gif](https://img-blog.csdnimg.cn/img_convert/5f309791c845904cf61a8f85f1b2973b.gif#clientId=u1297f4b6-fa5e-4&crop=0&crop=0&crop=1&cr原创 2022-06-17 11:02:43 · 703 阅读 · 0 评论 -
el-dialog打开与关闭的几种方式
欢迎大家来到我的博客,请各位看客们点赞、收藏、关注三连!欢迎大家关注我的知识库,Java之从零开始·语雀你的关注就是我前进的动力!CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。父组件子组件第二种 ref父组件this.refs.dialog.visible=true;在兄弟组件中this.refs.dialog.visible = true;在兄弟组件中this.refs.dialog.visible=true;在兄弟组件中this.parent.$refs原创 2022-06-17 10:56:59 · 12667 阅读 · 0 评论 -
VUE解决Cannot read property ‘length‘ of undefined(发生原因以及解决思路)
这个错误是什么某个数组找不到值,有一个地方进行了强行赋值为什么会报这个错误因为你在使用数组时,有一些v-for循环渲染,它不是拿着data创建的 [] 空数组去遍历,而是在某个地方你去获取下拉框的数据,或者获取data数组的数据时,你强行将原本的 data 挂载的数据 由 [] 变成 undefined,在页面上的v-for渲染就会直接报错!而不是什么在v-if="data"判断这个,这种解决方法就是不让其渲染了。根本没有解决问题所在。怎么解决这个错误首先,你必须去检查生命周期里的所有原创 2022-04-09 22:52:40 · 4622 阅读 · 0 评论 -
el-form表单el-input、el-select只读设置,去掉(删掉)边框线,完美替换整个HTML
今天为了实现一个叫做表单权限的问题,element官方没有提供这个功能,公司实现了,但是看不到源码,(╥╯^╰╥)没办法,只能自己上手写代码。百度了好几篇博客,都好垃圾 。看效果这个还只是一个半成品,我先讲讲实现思路。这是element的官方生成的dom,而我现在想要将里面的元素替换成一段 ‘< label>xx</ label>’恕我太菜,居然找不到怎么实现。尝试了好几种,效果都不太理想。我们先来看看vue的生命周期,这种数据一定是等数据基本渲染完毕后,我们再去原创 2022-04-09 17:55:37 · 9661 阅读 · 4 评论 -
el-tabs和el-steps切换以及steps点击事件
首先,还是百度了一下示例,但是这些人的效果都不太满意,并且还有bug,故而自己改造了一下代码。<template> <div> <el-steps :active="active_index - 0" simple style="margin-top: 20px"> <el-step v-for="(item,index) of stepParams" :key="index" :原创 2022-04-08 18:43:02 · 6408 阅读 · 1 评论 -
Vue+ElementUI实现查询条件展开和收起功能
首先,我想实现ant design vue中的展开和收起,效果如下:看了几篇博客的实现思路,但都不太满意,我想要按钮那一行不要换行,直接显示在最后一列,具体效果如下:实现过程与难点第一点,就是思路的问题,我先看看display:none会给这几个输入框带来的影响是什么?有没有其他问题,经过测试,想到直接把按钮那一栏全部改成一个局部组件。我们在使用他时,只需要在多列的最后添加这个子组件。然后,就是判断它是否隐藏和显示。好了,主要思路讲解到这里,我们直接上代码。<!DOCTYPE ht原创 2022-01-10 16:37:46 · 13969 阅读 · 4 评论 -
Vue父组件方法和子组件方法执行优先顺序
vue父组件调用子组件方法时,当方法中用到父组件传入的数据,在调用方法之前修改数据,调用子组件方法时数据还是原来的数据,下一次调用时才会变成上一次修改的数据。原创 2021-12-27 16:52:39 · 5834 阅读 · 7 评论 -
JavaScript方法体参数内使用{}详解
在国外项目中看到这样的使用,经过学习,记录一下。add( {age,name} , param2 ){ // do stuff}其实就是和下面代码一样let person = { age:'18', name:'hikktn'}add(person, param2){ // do stuff}就是使用了ES6的新特性解构,将对象直接解构使用。...原创 2021-12-12 01:55:06 · 1160 阅读 · 0 评论 -
JavaScript方法名[]代替,ES6新特性
在一些国外的项目中,我看到使用了这种写法export default { UPDATE_LAYOUT_SECTIONS: 'UPDATE_LAYOUT_SECTIONS',}import types from './mutation-types'export default { [types.UPDATE_LAYOUT_SECTIONS] (state, load) { state.layoutSections = load },}这种写法完全不懂什么意思,后面终于搜到一原创 2021-12-12 01:44:42 · 213 阅读 · 0 评论 -
VueTreeselect和ElementUI焦点不居中问题
使用了这两个在项目中,焦点不居中的问题在于line-height元素。我们只需要屏蔽掉line-height元素的影响。 .content /deep/ .el-form-item__content { line-height: normal; }原创 2021-11-23 14:54:34 · 732 阅读 · 0 评论 -
vue+elementuI 解决table最后一行无法显示不全
现象最后一列始终无法全显,百度上的都是没有用。经过排查后,得到 .myTabs /deep/ .el-table__body-wrapper { height: calc(100% - 0.48rem) !important; overflow: auto; }修改后,正常显示。原创 2021-10-29 17:58:13 · 3217 阅读 · 3 评论 -
el-form和el-col响应式布局
说明首先如果使用:inline="true"元素,这个好处在于能够左右元素保持在同一行,可惜里面有bug,和el-col同时使用,就会出现el-input换行,即便调整好,放大缩小也会出现换行问题。为了解决这一问题,只能放弃使用:inline=“true”。效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"原创 2021-08-12 11:36:04 · 5702 阅读 · 4 评论 -
node.js学习记录
node.js就是一个类似于tomcat的服务器,可以直接调用JavaScript文件,不再需要HTML辅助。demo.js// 引入node.js内置http模块var http = require('http')var url = require('url')http.createServer(function(request,response){ // 发送http头部 // 参数1:响应状态码,200表示成功 // 参数2:响应头信息,Content-Typ原创 2021-03-06 23:37:59 · 92 阅读 · 0 评论 -
webpack学习记录
webpack-dev-server指令--open自动加载--port value修改端口--contentBase path加载目标文件--hot异步响应package.json{"name":"webpage-study","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:...原创 2021-02-26 00:25:22 · 108 阅读 · 0 评论 -
Vue增删改查【升级版】
前言重新温习vue,练手的一个功能。不多说,自己研究。演示扩展vue第一种实现全选/反选方式纯JS+HTML简单表格增删改查vue第二种实现全选/反选方式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.2原创 2021-02-21 20:26:13 · 493 阅读 · 1 评论 -
Vue全选反选复选框实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> </head> <body> <div id="app"> <...原创 2021-02-13 04:06:26 · 540 阅读 · 2 评论 -
seam标签
前言这个HTML标签是和JSF标签搭配使用No 标签 描述 属性 使用例子 1 <s:button> 通过控制对话传输风格,支持动作调用的按钮,不提交表单 value:值 action:指定方法调用 view:链接的JSF的viewID disabled:链接处于取消状态 propagation:确定对话传输风格:begin、join、rest、none、end <s:button原创 2021-02-12 02:07:19 · 201 阅读 · 1 评论 -
JSF标签
前言这个技术已经非常老旧,属于日本还在使用,或者一些老项目还在使用。No 标签 描述 使用例子 1 <f:actionListener> 为h:commandLin,h:commandButton等指定自定义的事件监听类 <h:commandButton id="regist" value="Regist"> <f:actionListener type="mypackage.ActionListenerImpl"原创 2021-02-11 02:15:34 · 475 阅读 · 1 评论 -
Vue简单实现更多选项
这个功能其实相当于显示隐藏二级菜单,不过只是利用了vue来实现。功能简单演示,请忽略css的边框线:这个demo有几个难点,简单说说。vue点击显示隐藏其实靠的只是判断vue中的属性是否true,vue会自动帮助你显示还是隐藏,但是有一个问题,这个demo没有解决,当这个“显示”按钮处于页面最底部,它应该像很多网页上的向上,而不是向下,滚动条会多出一部分,来装下多出的长度,我只是简...原创 2019-01-05 21:33:20 · 1347 阅读 · 0 评论 -
Vue利用jQuery分页,CheckBox记住上一页下一页选中,包括全选和反选点击下一页依然记住选中
2019年6月2日前几天有人说这个好像不行,当时是直接从项目分离,没有后台好像你们都运行不了。算了,重新整理一下。代码只是把它变为demo了,因为没有后台分页就算了,只要记住一点v-model相当于一个数组,它会帮你存储数组,利用这个数组会每次自动选上,下面的代码有一个更多选项也是无法演示的。懒得弄了!就直接把全选和反选弄出来吧,要玩自己看我以前的代码,琢磨一下,很锻炼人。弄懂了,以后你就不怕...原创 2018-12-30 17:13:59 · 3460 阅读 · 0 评论 -
boostrap+fileinput上传图片至后台并预览图片
最近写项目,写上传封面图片,而自己写东西呢?css太难看,但是最后还是写了一个简单的增加删除图片,不过这次不介绍自己写的上传图片,今天介绍我对于这个boostrap的上传文件插件,感觉非常不好用!不好用,但是还是可以用。HTML代码<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitte...原创 2018-10-02 22:35:23 · 9265 阅读 · 3 评论 -
纯JS+HTML简单表格增删改查
首先这两天写的一个简单增删改查,基本上靠百度和自学,完成的这个作业。里面的功能十分的简陋,对于有需要的朋友一点点帮助吧。这不是一条通往项目的链接:https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码:030a里面有一些前期练习,如果心急,那就直接看index4.html吧,那是此次的网页实现,js文件放在js文件夹下。然后,先给大家看......原创 2018-07-17 20:33:11 · 42685 阅读 · 12 评论