Kayson13-CSDN博客

原创 ios position: fixed 问题

为了解决卡顿的问题，添加了如下代码-webkit-overflow-scrolling: touch;但是在ios上发现，利用fixed进行底部固定，出现bug具体现象是：在我滚动的时候，原本应该固定在底部的按钮，跟着滚动来回跳动，知道滚动结束。原因查找资料发现：position:fixed在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。解决方法：在fixed所在标签添加如下样式

2020-08-04 15:47:30 1959

原创 document.title ios不兼容

在开发一个移动端项目，需要嵌套在其他系统中。此时需要修改导航栏的title。直接document.title 尝试了一下，在Android下完全可以。但是ios端就出现了问题。无论点击什么页面，都只显示第一个页面的title，也就是说不会刷新。查找资料显示：微信浏览器的title在页面加载完成就确定了，也就是微信浏览器首次加载页面初始化title后，就不再监听document.title的change事件了。由于我们项目的特殊性，应用程序提供了另一个变量来改变title。但网上有通过加载空i

2020-08-04 14:46:41 563

原创记录：多种方法实现文字超出省略号显示 css/js

超出文字，变省略号的多种实现方式描述CSS方式实现情况一：一行溢出情况二：多行溢出正常情况（中文）异常情况（英文，数字，符号等）总结JS方式实现问题部分：（英文和其他）最终方式：视觉欺骗描述超出文字变省略号的实现方式有多种。在这里简单列出来几种。然后在最后，根据特殊需求。有【展开全部】式样的需求的实现。CSS方式实现情况一：一行溢出<div class="content1-css"> <div class="contentText1-css">这里是数据，有可能会超过

2020-07-23 13:51:52 604

原创 Error in v-on handle: “TypeError: handler.apply is not a function“

报了一个这样的错误：Error in v-on handle: "TypeError: handler.apply is not a function"这个错误在点击事件触发的时候产生。查找错误后发现，是自己粗心将方法和变量定义成了同一个名字。这里仅做记录。...

2020-07-03 14:16:59 3574

原创 getTime()对于时间格式‘xxxx-xx-xx xx:xx:xx’ios的兼容性

问题描述有一个计算时间的功能，浏览器和安卓机上是正常的，ios端出现NAN的情况。猜测是ios兼容性的问题。ios兼容getTime 带’-'的时间格式问题代码：let dateStr = '2020-07-02 17:42:00';new Date(dateStr).getTime(); //NAN修改：let dateStr = '2020-07-02 17:42:00';let handleStr = dateStr.replace(/-/g, '/');new Date(hand

2020-07-02 17:48:46 285

原创利用Nginx解决跨域问题

利用nginx解决前端跨域问题浏览器的同源策略含义目的跨域描述跨域的常见解决方法nginx解决跨域正向代理特点举例总结用途反向代理特点举例用途作用正向代理和反向代理图示区别负载均衡描述种类Nginx配置（极简）浏览器的同源策略浏览器安全的基石是"同源政策"（same-origin policy）。含义同源政策指的是：协议相同域名相同端口相同目的同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。跨域描述协议，域名，端口号，只要有一个不同，就会产生跨域问题。跨域的常

2020-06-01 16:44:35 873

原创再学 vue 生命周期

Vue生命周期创建阶段（到mounted）总结更新阶段（到updated）vue生命周期的那张图，就不帖了。搜一下就有。之前学习生命周期，还是没有很深入，这次再做一些深入的学习测试。创建阶段（到mounted）<template> <div class="all"> <div>{{name}}</div> <div id="when">hahaha</div> </div></templ

2020-05-26 14:08:58 209

原创 vue axios二次封装思考和思路【自用】

axios二次封装安装思路说明：也看了很多的封装了。但是脑子中也都是很乱的。由于对于项目很多都是未知。后台有可能传来什么样的数据也是未知，想要尽可能的学习，然后能更好的封装。稍微写一下，留作自用。安装npm install axios --save补充：-S是–save的简写-D是–save-dev的简写我之前只知道，-S是运行时依赖，-D是开发时依赖。还是去多了解了一下。区别：-S 依赖包的名称会出现在 dependencies 下-D 依赖包的名称会出现在 devDependen

2020-05-22 15:36:54 938

原创 mockjs模拟假数据

有的时候前端写好了页面，但是此时后台接口还没有提供过来，我们经常会使用假数据来测试一下。刚开始我会在一个文件夹下如:utils新建一个fakeData.js的文件，专门来用来存放假数据。后来才发现，原来有个mock.js的东西，专门用来帮助我们完成这件事。官网mock.js的官网: mockjs.还是要先看看官网的。这篇只是提取官网中我需要的来当做自用文档。安装npm install mockjs -D由于生产环境上都是真实数据了，所以我选择了-D的模式。这里选择了node安装方式，其他方

2020-05-22 13:56:04 546

原创 vue + vant根据后台传递数据动态渲染组件

根据后台数据动态渲染页面封装组件，方便使用field和actionsheet封装selectPicker等组件利用Render函数来渲染利用动态组件的属性is来渲染需求：根据后台返回的数据，来生成一个form表单。几乎所有元素都是后台决定。后台会告诉前端这个页面里有几个input，label，select，selectDateTime等，以及他们的顺序。封装组件，方便使用field和acti...

2020-04-28 10:32:00 5812

原创 vue 引入图片

<img :src="test" alt"">data() { return { test: '../../assets/test.png' }}上面方式引入图片不会显示。方法一：改为用require：data() { return { test: require('../../assets/test.png') }}方法二：import...

2020-04-09 15:38:51 148

原创 css 伪类箭头（自用）

代码例子均参考这篇链接: link.指作为思路备份：一个div,给个高度。::before 画一个框，根据需求隐藏两边。然后利用transform进行旋转。调整位置。cursor规定光标的形状。...

2020-04-09 10:57:00 229

原创 ES6 Promise对象极简笔记（自用）

阮一峰老师ES6 Promise对象学习极简笔记特点对象不受外界影响。三种状态（pending fulfilled rejected）一旦状态改变就不会再变基础用法Promise构造函数接受一个函数作为参数，该函数有两个参数，resolve， reject。const promise = new Promise(function(resolve, reject) { // ....

2020-04-07 22:03:37 198

原创对象类型判断-相关问题

对象类型判断instanceof描述示例基本（常用）万物皆对象小结typeof描述示例基本特殊小结constructor描述示例基本特殊小结Object.prototype.toString.call()描述示例基本特殊小结补充instanceof描述instanceof运算符用来检测constructor.prototype是否存在参数object的原型链。示例基本（常用）funct...

2020-04-06 11:32:09 215

原创 Vue自定义组件无法绑定click

猜测原因可能：click事件作用于原生标签，自定义组件标签并没有click事件。解决方案：使用.native修饰符，将原生事件绑定到组件<base-input v-on:focus.native="onFocus"></base-input>具体参照官方文档：将原生事件绑定到组件利用$emit来实现事件传递子组件：<div class...

2020-03-29 15:15:43 549

原创 localStorage例子

localStoragelocalStorage与sessionStorage区别：localStorage的数据可以长期保留。sessionStorage的数据，当前会话结束或者页面关闭，存储只sessionS中的数据会被清除。局限兼容性：IE8以上版本才有localStorage属性localStorage的值类型限定为String型，因此JSON对象需要转换另外有说：lo...

2020-03-29 11:01:08 205

原创 Vue的checkbox相关

Vue的checkbox遇到的相关问题普通checkbox官网上的例子稍微改进一下，利用v-for全选的checkbox普通checkbox官网上的例子<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for=...

2020-03-28 19:02:59 479

原创布局和input边框

采用flex布局遇到的问题：.parent { display: flex; justify-content: space-between;}大概就是这个布局。input框，并不是我要的效果由于space-between的影响，input框被限制了长度。可是我想要input框铺满。于是给input框外层div和自己都添加width: 100%;从而变成了下图：发现...

2020-03-27 09:26:53 324

原创 vue class

vue class例子和总结普通字符串<div class="active"></div>数组<div :class="['active', 'normal']"></div>或者<div :class="[activeClass, normalClass]"></div>data { activ...

2020-03-26 15:08:55 109

原创 MVC、MVP、MVVM模式

这里写自定义目录标题MVC、MVP、MVVM模式MVC模式MVP模式MVVM模式MVC、MVP、MVVM模式从MVC、MVP到MVVM模式的演变过程MVC模式通信方式如下：视图(View)：用户界面。传送指令到Controller控制器(Controller)：业务逻辑，完成业务逻辑后，要求Model改变状态模型(Model)：数据保存，将新的数据发送到View，用户得到反馈...

2020-03-22 21:04:20 169

原创 vue-cli3创建项目的时候报错：ERROR command failed: npm install --loglevel error

vue-cli3创建项目的时候报错网上查找了一下解决方案：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver依然不好用，又找了一下：C:\Users\Administrator这个路径下，有一个**.vuerc**文件，红框中原本是 false，改成true就...

2020-02-10 11:19:37 1081

Kayson13的博客