前端
关注
分享
扫一扫
峰峰崛起的我
欢迎大家点赞关注评论，多多交流，相互促进，动动大家发财的小手点点关注。。。。。
展开
-
在流式布局中，如何实现头部固定100px,底部固100px,中部内容自适应？
废话不多说，直接上代码<!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&原创 2022-04-18 14:12:28 · 397 阅读 · 0 评论 -
Element表格中row-class-name的使用
注意：目的是为实现表格展开收起的显示代码入下：1.html部分代码<el-table :data="ruleForm.approvalAssignRecordVoList" ref="tab1" :row-key="(row)=>{return row.assignRecordId}" :row-class-name="setClassName" border style="width:90%"> <el-table-column ...原创 2022-04-01 09:48:04 · 2843 阅读 · 0 评论 -
css属性选择器诸如Class^=,Class*= ,Class$=释义
代码如下：.show-grid [class^="col-"] { padding-top: 10px; padding-bottom: 10px; background-color: #eee; background-color: rgba(86,61,124,.15); border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2);}1.选择其中的value值也可以加引号选择器 描述 [attr原创 2021-08-20 14:37:39 · 3610 阅读 · 0 评论 -
Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
<template> <el-button @click="downloadUrl">导出Excel</el-button> </template><script>import api from "../../api/api.js";import axios from "axios";export default { data() { return { pageSize:30, } }, c...原创 2021-07-23 15:16:58 · 753 阅读 · 0 评论 -
js 实现控制点击事件在特定的毫秒内 只允许点击一次(防止重复点击)
js 实现控制点击事件在特定的毫秒内 只允许点击一次(防止重复点击)1.第一种方法function fn(callback){ fn.prototype.init(callback);}fn.prototype = { canclick: true, init: function(callback){ if(this.canclick){ this.canclick = false callback(); setTimeout(function(){ thi原创 2020-05-20 14:09:39 · 5738 阅读 · 2 评论 -
Html5+Css3实现图片的无缝滚动
Html5+Css3实现图片的无缝滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画实现无缝滚动图片</title> <style> *{ marg...原创 2020-01-10 16:11:46 · 5396 阅读 · 0 评论 -
Webstorm中常用的一些快捷键
webstorm中常用的一些快捷键1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。2. ctrl + j: 输出模板3. ctrl + b: 跳到变量申明处4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)5. ctrl + []: 匹配 {}[]6. ctrl +...原创 2019-12-20 14:10:41 · 189 阅读 · 0 评论 -
vue3.0新增了哪些功能
vue3.0新增功能1.关于安装Vue CLI 的包名称由 vue-cli 改成了 @vue/clinpm install -g @vue/cli安装完成之后查看版本号vue --version出现版本号就意味着成功2.项目创建关于项目创建，除了命令创建3.x还增加了图形化界面创建以及管理vue项目在创建新项目时还可以混合选用多种集成TypeScript...原创 2019-12-04 13:19:51 · 2513 阅读 · 0 评论 -
Vscode搭建Ts环境
一.简介VSCode 是微软公司推出的一款开源的文本编辑器，因其强大的功能，较快的启动速度（相比IDE而言）和内置的控制台，git等而广受好评。而Typescript同样是微软推出的改良版Javascript，其作为JS的超集，完美兼容ES7的语法之外有着更完备的模块系统，更多的特性（装饰器，枚举），以及编译时的静态类型检查，有效避免了“动态一时爽，重构火葬场”的尴尬。二.步骤1....原创 2019-07-03 14:10:31 · 13213 阅读 · 0 评论 -
最全浏览器兼容性问题以及解决方案
常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类是精确按照...转载 2019-07-04 08:57:08 · 3361 阅读 · 0 评论 -
对于vue中的computed属性的理解
1.最近正在学vue，看了网上很多资料，对于有vue中computed属性的解释都不是很清晰，跟同事聊起这个，对computed有了清晰的认识，下面有一部分文章是转自：https://www.w3cplus.com/vue/vue-computed-intro.html，感觉文章上面的礼通俗易懂，所以就借用此处的。自己的理解：computed使用监控自己定义的变量，该变量不是data里...转载 2019-07-15 15:36:14 · 3417 阅读 · 1 评论 -
vue中常用的ui组件
vue中常用的ui组件下面简单总结一下vue常用的一些ui组件 ，这里有些我也没用过，这里先整理出来，供以后方便查找。vuex:vux github ui demo:https://github.com/airyland/vuxMint UI项目主页:http://mint-ui.github.io/#!/zh-cndemo:http://elemefe.github.io...原创 2019-07-15 15:44:06 · 519 阅读 · 0 评论 -
Vuex的安装及使用
Vuex的安装及使用1.下面先来介绍一下什么是vuex,想必好多人对vuex都不太了解。官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快...原创 2019-07-12 11:46:45 · 228 阅读 · 0 评论 -
小程序去掉滚动条
1.方案一::-webkit-scrollbar { width: 0; height: 0; color: transparent;}2.方案二::-webkit-scrollbar { display: none;}其实实现原理就是把滚动条宽度变小或者让滚动条隐藏。...原创 2019-07-17 13:21:31 · 750 阅读 · 0 评论 -
web前端_Vue框架_关于Can't resolve 'sass-loader' in...错误的解决办法
web前端_Vue框架_关于Can't resolve 'sass-loader' in...错误的解决办法因为在Vue+element UI（不会推荐去Element UI官网看看）项目中需要用到<style lang="scss">，发现每次都会报错，在网上找了一些解决办法也比较乱，下面是我在遇到这个问题的一种解决办法：在Chrome浏览器中的错误：就是不能解析sa...原创 2019-07-29 14:14:01 · 3387 阅读 · 0 评论 -
小程序修改data中数组或者对象里面的某一项值
小程序修改data中数组或者对象里面的某一项值1.修改对象中的某一项值data:{ list:{ data1:{}, passengers:[ name:'' ] }}如果想在list里面的data中添加数据,创建一个变量来定义var that=this,num="list.data1...原创 2019-07-31 16:17:30 · 6549 阅读 · 5 评论 -
前端三大框架的比较
React与Vue相同点使用 Virtual DOM，有较高的运行速度 提供组件化功能 可使用mobx与vuex进行状态管理，响应式、依赖追踪React子组件重复渲染问题需要手动优化 可以使用redux进行状态管理，函数式、不可变、模式化，时间旅行 可使用JSX，完全的javascript能力 更繁荣的社区生态Vue可使用JSX，但推荐使用模版语言而不是JSX 学习...原创 2019-08-13 17:41:59 · 2423 阅读 · 0 评论 -
微信小程序底部元素 margin-bottom失效解决办法
微信小程序开发过程中，页面底部元素设置margin-bottom在ios下失效，在安卓下可以正常显示。可给page设置padding-bottom来解决原创 2019-08-07 17:34:29 · 2169 阅读 · 1 评论 -
vue中使用element-ui进行表单验证
element-ui中验证一、简单逻辑验证（直接使用addRules）实现思路html中给el-form增加:rules="addRules" html中在el-form-item 中增加属性prop="名称" js中直接在data中定义addRules:{} html部分 <el-form ref="form" :rules="addRules" :...原创 2019-08-23 15:46:56 · 638 阅读 · 0 评论 -
vue中mixin的使用
vue中mixin的使用详解vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？ 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。 而mixins则...原创 2019-09-03 14:31:52 · 572 阅读 · 1 评论 -
Element-UI 中 loading 的使用
Element-UI 中 loading 的使用一、一般element-ui可以给表格加loading，也可以给整个页面（body）加loading,此外也可以给页面上的任何DOM元素加loadingcreated(){ this.getData();}getData(){ const loading = this.$loading({ lo...原创 2019-09-03 14:57:09 · 61788 阅读 · 8 评论 -
Vue中接口的调用
Vue中接口的调用1.main.js中代码// 调接口相当于ajaximport axios from 'axios'Vue.prototype.$axios = axios2.webpack.config.js文件中代码target: 'http://www.xm-fighting.com:8090/'target中的对应路径改为自己需要调用接口地址，到端口号之前3.logi...原创 2019-03-04 21:13:41 · 31643 阅读 · 0 评论 -
Vue中cookie实现三天内免登录，以及记住用户名和密码等
首先我们要在我们的项目中建立一个文件夹，如下图所示2.下面来写一写关于写关于cookie的方法，获取cookie,设置，清除等，代码如下： //获取cookie、 export function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")...原创 2019-07-03 09:45:47 · 5086 阅读 · 0 评论 -
js实现键盘控制div的移动，且解决停顿问题
解决原生js通过键盘控制div移动，解决停顿问题<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 100px; ...原创 2019-05-29 14:36:15 · 896 阅读 · 1 评论 -
小程序中组件的使用
小程序中组件的使用1.一般组件需要定义一个文件夹，文件夹命名为components2.文件夹下可以定义一个需要引用的组件3.文件夹下包含4个文件分别是js、json、wxml、wxss。4.控制组件的显示与隐藏通过hidden来控制，true为隐藏，false为显示5.注意：需要在json文件中定义两个属性：{"component": true,"usingCom...原创 2019-05-05 14:53:44 · 1429 阅读 · 0 评论 -
小程序上传图片放大以及滑动浏览、删除
小程序上传图片放大以及滑动浏览1.wxml代码实例<view wx:for="{{repairPic}}" wx:key="{{item.id}}"><image class='s_pic' src='{{item}}' data-list="{{repairPic}}" data-index="{{index}}" catchtap="previewImage"&...原创 2019-05-05 14:19:31 · 531 阅读 · 0 评论 -
如何通过 CSS+ DIV实现三角形
DIV+CSS实现三角形简单介绍一下实现方式：通过border这个属性来实现//CSS样式.d1{ margin-left: 200px; width: 0; height: 0; border-width: 100px; ...原创 2019-04-22 17:18:52 · 689 阅读 · 0 评论 -
小程序多张图片上传
1.图片上传.wxml代码块<view class='r_picture' bindtap='uploadPic'><p class="font_s33 font_c73">上传故障照片</p><view wx:for="{{repairPic}}" wx:key="{{item.id}}" class='s_pic'><im...原创 2019-04-11 11:45:01 · 309 阅读 · 0 评论 -
Vue组件
Vue.js组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：1.components（组件）文件下的Navigation.vue代码如下:&lt;template&gt; &lt;div&gt; ...原创 2019-03-04 21:30:20 · 334 阅读 · 0 评论 -
Vue-router(Vue中路由基础详解)
Vue-router(Vue中路由基础详解)安装1.直接引入&lt;script src="vue.js"&gt;&lt;/script&gt;&lt;script src="vue-router.js"&gt;&lt;/script&gt;vue-router下载链接https://unpkg.原创 2019-03-04 20:53:15 · 515 阅读 · 0 评论 -
Vue的目录结构
Vue.js中的目录结构目录解析目录文件说明build内容项目构建(webpack)相关代码config配置目录，包括端口号等。我们初学可以使用默认的。node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： 1. assets: 放置一些...原创 2019-03-04 20:35:51 · 1251 阅读 · 0 评论 -
Vue 中UI框架 Element 脚手架
Vue组件库Element脚手架入门教程1.Element官网地址：http://element-cn.eleme.io/#/zh-CN2.Element 脚手架 代码git地址：https://github.com/ElementUI/element-starter.git下载完成后，进入element-starter目录首先文档上写明了需要安装yarnnpm install -g...原创 2019-03-04 13:58:47 · 2198 阅读 · 0 评论 -
组件Element的入门学习
组件Element的入门学习第一节：Layout布局基础默认一行24列，通过自己简单的布局可以实现想要的效果基础布局注意;通过 row 和 col 组件，并通过 col 组件的 span 属性就可以实现我们简单的布局。1.默认一列24行&lt;el-row&gt; &lt;el-col :span="24"&gt;&lt;div class="grid-co原创 2019-03-09 14:23:24 · 5366 阅读 · 0 评论 -
小程序中模板的使用
小程序中模板的使用如下：1.一般定义模板需要新建一个文件夹，一般命名为template文件2.wxml代码如下：<template name="loading"><view class="loadingData"><image src="/images/menu/loadingData.gif"></image><te...原创 2019-05-05 15:08:05 · 727 阅读 · 0 评论 -
通过js将金额转换成货币形式
通过toLocaleString()这个方法将金额转换成货币形式例如：1234566.66转为1,234,566.66原创 2019-05-05 15:12:38 · 662 阅读 · 0 评论 -
正则表达式（国际固定电话和手机号）
正则表达式（国际固定电话和手机号）regularEx= "^(((\\+\\d{2}-)?0\\d{2,3}-\\d{7,8})|((\\+\\d{2}-)?(\\d{2,3}-)?([1][3,4,5,7,8][0-9]\\d{8})))$"支持格式示例-固话：+86-010-40020021，010-40020020国家代码选填；手机：+86-13523458056 ，10-1...原创 2019-05-17 17:32:51 · 24478 阅读 · 7 评论 -
js实现简单的计算器
js实现简单的计算器1.实现代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = functio...原创 2019-05-22 17:36:46 · 754 阅读 · 0 评论 -
js实现电影评分
通过js技术实现电影评分实现要求：1.鼠标移入第一个五角星，五角星变为黄色，以此类推2.鼠标移开黄色去掉3.鼠标移入每一显示对应的评语4.点击对应的每个五角星弹出对应的评分实现代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...原创 2019-05-22 15:56:06 · 1295 阅读 · 0 评论 -
js实现无缝滚动
js技术实现无缝滚动实现要求：1.页面加载完成让图片实现无缝滚动2.鼠标移入左右两个按钮实现图片滚动方向的改变3.鼠标移入图片实现图片停止滚动，移出实现图片滚动具体实现代码如下：1.Html页面代码<div class="roll" id="roll"> <a href="javascript:void(0);" clas...原创 2019-05-22 11:43:20 · 510 阅读 · 0 评论 -
JavaScript操作DOM元素
JavaScript操作DOM元素1.查找HTML元素，共有以下三种方式通过id找到HTML元素 通过class找到HTML元素 通过标签名找到HTML元素通过id找到HTML元素查找id="box"的元素实例var x=document.getElementById("box");通过class找到HTML元素查找class="box"的元素实例var...原创 2019-05-15 16:23:38 · 108 阅读 · 0 评论