weixin_43588942的博客

原创 bootstrap+masonry.js写瀑布流

bootstrap+masonry.js写瀑布流JH0610Y 2016-03-28 16:10:21 9502 收藏版权最近在用bootstrap写一个网站，其中有个图文展示的页面要用到瀑布流的效果。因为项目要求，项目要以bootstrap为基准，不准私自添加内联样式、内部样式，所以，自己写瀑布流就不行了，所以，根据要求，百度查找相关资料，看到masonry.js.个人认为这是一个非常好用的瀑布流插件。下面说一下我在引用的过程中遇到的问题，一开始我用bootstrap栅格系统布局，代码

原创 动画效果 aos.css

aos网址https://codepen.io/michalsnik/pen/WxNdvq1234567891011{box-sizing: border-box;}.item {width: 200px;height: 200px;margin: 50px auto;padding-top: 75px;background: #ccc;text-align: center;color: #FFF;font-size: 3em;}AOS.init({

原创 整个屏幕动画 wow.min.js 支持css3多种动画的效果！

WOW.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。https://animate.style/使用方法：1、加入animate.css2、加入wow.js 。（无需引用jQuery）注意new WOW().init();中的WOW要大写，否则就没效果了。3、元素中加入classtada66种CSS3animation动画效果，← 点击查看选择想要的效果，并加

原创 箭头

1.空心箭头.arrow{width: 20px;height: 20px;border-top: 1px solid #f90;border-left: 1px solid #f90;transform:rotate(-45deg);}

原创 表格

<el-table-columnalign=“center”label=“状态”width=“200” 未启用 已启用 已停用

原创 日期转化

filters: {formatDate: function(value) {let date = new Date(value);let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? (‘0’ + MM) : MM;let d = date.getDate();d = d < 10 ...

原创 登录跳转控制，重定向

router.beforeEach((to, from, next) => {let login = localStorage.getItem(‘token’) ? true : falseif (to.path == ‘/’) {next()} else {if (login) {next()} else {next({path: ‘/’,query: {redire...

原创 vant适应终端设备

方案1：https://www.jianshu.com/p/8f9aab666c4a方案2：1.main.js// import ‘lib-flexible/flexible.js’2.build--------------》utils.js// const px2remLoader = {// loader: ‘px2rem-loader’,// options: {...

原创 金额大写 尾部需要.00 而且还要带千位符

scriptdata () {return {text: ‘’,unit: new Array(“仟”, “佰”, “拾”, “”, “仟”, “佰”, “拾”, “”, “角”, “分”),}}methods：{toThousandsNoZero(num) {return num ? ( (isNaN(parseFloat(num.toStri...

原创 金额带千位符，尾部需要.00

<el-input v-model=“ruleFormCard.money” class=“time-left” @blur=“projectAmounts”>// 金额尾部需要.00 而且还要带千位符toThousandsNoZero(num) {return num ? ( (isNaN(parseFloat(num.toString().replace(/,/g...

原创 vue 首屏优化的解决方案

1.路由懒加载const workCircle = r => require.ensure([], () => r(require(’@/module/work-circle/Index’)), ‘workCircle’)const workCircleList = r => require.ensure([], () => r(require(’@/module/wo...

原创 css js面试题

https://blog.csdn.net/u014697639/article/details/80311559

原创 overflow:hidden的原理

原创 标准盒模型与IE模型写的区别

box-sizing属性是用来控制元素的盒子模型的解析模式，默认为content-boxcontent-box：w3c标准盒子模型，设置元素的height/width属性指的是content部分的高宽border-box：IE传统盒子模型，设置元素的height/width属性指的是border+padding+content部分的高宽...

原创 radio点击选择点击传值1,0

<el-radio-group v-model="infoDate.sex" size="medium"> <el-radio :label="1" @click.native.prevent="clickitem(1)">男</el-radio> ...

原创 下拉的显示

<el-select v-model="open" placeholder="显示状态" @change="openEvent"> <el-option :value="2" label="是否显示"></el-option> ...

原创 switch按钮的显示隐藏

<el-switch v-model="item.open" class="demoBtn" active-text="显示" inactive-text="隐藏"...

原创 vue表单的全选与反选

1.<input type=“checkbox” v-model=“checkAll” @change=“changeState”> ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190505152441360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVp...

原创 js知识点

https://www.cnblogs.com/hongqin/p/5998594.html

原创 h5常见的问题

###H5项目常见问题及注意事项####Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale 默认缩放比例，为一...

原创 vue 全选与取消全选

vue 全选与取消全选所用知识点1 v-model：监听input内容2 watch:监听属性方法参考https://cn.vuejs.org/v2/api/#watch3 页面初始化调用函数 mounted一：html元素实现思路1 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为true的input的valu...

原创 VUE+Webpack 实现懒加载的三种方式

{path: “路由路径”,component: () =>import(/* webpackChunkName: "chunk名称 用于代码分割 " */ “组件路径”)}第一种引入方式 就是正常的路由引入方式const router = new Router({routes: [{path: ‘/hyh’,component: hyh,name: ‘hyh’}...

原创 小程序CSS实现单行和多行文本溢出显示省略号

1.单行省略号.textview{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}2.多行省略号.textview{display: -webkit-box ;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-...

原创 rem与px的转化

方法1：方法2：(function(win,doc){function change(){doc.documentElement.style.fontSize = 100*doc.documentElement.clientWidth/375+‘px’;}change();win.addEventListener(‘resize’,change,false);})(window...

原创 axios请求接口

1.非json格式var me=this;let fd = new FormData()fd.append(‘file’, f.file)fd.append(‘fid’,this.route.params.id);//传其他参数fd.append(′score′,this.fjscore);console.log(fd)me.route.params.id);//传其他参数 ...

原创 ¶element-ui 递归出来的el-checkbox实现全选和反选

1.~版本handleCheckAllChange(event) {this.checkedCities = event.target.checked ? cityOptions : [];this.isIndeterminate = false;},2.0版本的是boolean值handleCheckAllChange(val) {this.checkedCities = val ...

原创 vue全屏显示，esc退出

项目中有要实现全屏的需求，而且全屏和非全屏的状态有差异。1、项目中使用的是sreenfull插件，执行命令安装npm install --save screenfull2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下：toggleFullscreen() {if (!screenfull.enabled) {this.$message({message: ‘you bro...

原创 Element ui日期转为"yyyy-MM-dd"

一般情况下，我们需要给后台的时间格式是：“yyyy-MM-dd”但是使用Element ui日期选择器获取的值是这样的：Fri Sep 22 2017 00:00:00 GMT+0800 (中国标准时间)在官方文档中，有提到可以使用change&lt;el-date-picker type=“date” v-model=“sTime” @change=“getSTime” format=...

原创 vue获取年月日 星期 时间

// 获取当前时间函数timeFormate(timeStamp) {let year = new Date(timeStamp).getFullYear();let month =new Date(timeStamp).getMonth() + 1 &lt; 10? “0” + (new Date(timeStamp).getMonth() + 1): new Dat...

原创 vue 锚链接点击不更改url

或者&lt;a href=“javascript:void(0)” @click=“goAnchor(’#comment’)”&gt; goAnchor(selector) { var anchor = this.$el.querySelector(selector) document.body.s...

原创 vue axios发送请求时，后台保存了session，获取不到数据

把默认配置withCredentials改为true，就可以允许跨域携带session信息了axios.defaults.withCredentials=true;这样每次发送ajax请求后，只要不关闭浏览器，得到的session数据都是一致的。...

原创 router.push（传参）跳转页面，参数改变，跳转页面数据不刷新

第一个是search组件search组件应用到indexSearch页面，解决跳转当前页面数据不更改，通过watch

转载 vue刷新页面

1、最直接整个页面重新刷新：location. reload()this.$router.go(0)这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好2、新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来空白页supplierAllBack.vue里面...

原创 **跨域问题：解决跨域的三种方案**

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：方式一：使用ajax的jsonp前端代码服务器代码使用该方式的缺点：请求方式只能是get请求方式二：使用jQuery的jsonp插件插件下载网址：https://github.com/jaubourg/jquery-jsonp前端代码服务器代码使用该...