<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Amy_cloud的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Amy_cloud</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Amy_cloud]]></copyright><item><title><![CDATA[利用html2covans 截图，绘圈]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/110070604</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/110070604</guid><author>Amy_cloud</author><pubDate>Tue, 24 Nov 2020 13:53:14 +0800</pubDate><description><![CDATA[功能展示如图所示
代码实现原理：
1.利用html2-cavans 对当前元素截图生成base64的图片格式
2.利用cavans在img图片绘制圆圈并定位图形位置
3.将绘制后的img图片再次利用html2-cavans生成新的img图片
具体代码见：
GITHUB

...]]></description><category></category></item><item><title><![CDATA[获取本周本年本月时间]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/107204301</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/107204301</guid><author>Amy_cloud</author><pubDate>Wed, 08 Jul 2020 13:57:35 +0800</pubDate><description><![CDATA[function getCurrentdate() {
                var startStop = new Array();
                var currentDate = new Date();
                var currentMonth = currentDate.getMonth();
                var currentYear = currentDate.getFullYear();
                .]]></description><category></category></item><item><title><![CDATA[从0开始搭建react项目实践]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/103972859</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/103972859</guid><author>Amy_cloud</author><pubDate>Tue, 14 Jan 2020 14:55:43 +0800</pubDate><description><![CDATA[1.全局安装create-react-app
npm install -g create-react-app

2.创建项目，安装依赖
create-react-app my-react-app

3.进入项目，启动项目
cd my-react-app   
npm start

4.创建src项目结构




路由
状态管理redux
工具类
图片管理
组件
路由组件




router
st...]]></description><category></category></item><item><title><![CDATA[解决IOS的h5唤起键盘导致页面元素错位]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/102503635</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/102503635</guid><author>Amy_cloud</author><pubDate>Fri, 11 Oct 2019 16:19:36 +0800</pubDate><description><![CDATA[在input绑定blur事件：
    blur(event) {
        let result;
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
            result = 'ios';
        } else if (/(Andro...]]></description><category></category></item><item><title><![CDATA[html2canvas 实现dom转png]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/98773924</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/98773924</guid><author>Amy_cloud</author><pubDate>Wed, 07 Aug 2019 18:57:15 +0800</pubDate><description><![CDATA[首先：npm install vue-html2canvas
在需要的页面 ： import html2canvas from “html2canvas”;
使用中：
     this.$nextTick(() =&gt; {
        let dom = this.$refs.imageWrapper.$refs.inviteInfo;
        html2canvas(dom, ...]]></description><category></category></item><item><title><![CDATA[vue-cli3 快速配置多环境变量]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/92638555</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/92638555</guid><author>Amy_cloud</author><pubDate>Mon, 17 Jun 2019 15:52:35 +0800</pubDate><description><![CDATA[vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。
https://cli.vuejs.org/zh/guide/mode-and-env.html
1.首先：
通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
通过传递 --mode 选项参数为命令行覆写默认的模式
在项目的根目录新建3个文件夹，分别对应开发（dev），测试（te...]]></description><category></category></item><item><title><![CDATA[vue配置开发、测试、生产环境（不同环境，不同命令）]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/91873507</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/91873507</guid><author>Amy_cloud</author><pubDate>Thu, 13 Jun 2019 16:41:45 +0800</pubDate><description><![CDATA[1.我们借助 cross-env 插件跨平台地设置及使用环境变量
npm安装方式：npm i --save-dev cross-env

2.我们对config文件夹做配置，新建一个test.env.js（test:测试环境） 文件来配置我们的测试环境，

代码如下：（NODE_ENV与ENV_CONFIG的参数都是双引号包单引号，否则会报错）

3.同理配置prod.env.js（prod:生产...]]></description><category></category></item><item><title><![CDATA[一个数组多个对象，根据对象相同属性重新组件新数组]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/89415790</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/89415790</guid><author>Amy_cloud</author><pubDate>Sat, 20 Apr 2019 12:37:21 +0800</pubDate><description><![CDATA[json结构如下：
var stu_list = [
    {name:'lili',uid:123,exam_id:234,score:12},
    {name:'lili2',uid:321,exam_id:234,score:12},
    {name:'lili',uid:123,exam_id:231,score:120},
    {name:'lili2',uid:321,...]]></description><category></category></item><item><title><![CDATA[聊一聊js闭包以及常见的运用场景]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/89227362</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/89227362</guid><author>Amy_cloud</author><pubDate>Fri, 12 Apr 2019 10:37:17 +0800</pubDate><description><![CDATA[1.首先我们有个需求是，有一段ul，循环给里面的li绑定事件；

页面布局这样子的，现在我们需要用到闭包来实现这样一个需求：
方法一：绑定事件放在立即执行函数中
function callback(text){
    document.getElementById(text.id).innerHTML = 'hello world'
}

function setListMsg(text){
 ...]]></description><category></category></item><item><title><![CDATA[对js原型和原型链的理解]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/89215886</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/89215886</guid><author>Amy_cloud</author><pubDate>Thu, 11 Apr 2019 17:25:21 +0800</pubDate><description><![CDATA[原文来自：https://juejin.im/post/5c64d15d6fb9a049d37f9c20
每次面试必问题，其实概念很抽象，不过我们先看一张图来理一下思路：

概念：


原型（prototype）：
一个简单的对象，用于实现对象的属性继承（即对象的爹）；每一个对象都有一个__proto__的属性指向该对象的原型。


构造函数：
通过 new 来创建一个对象的函数


实例：
通过...]]></description><category></category></item><item><title><![CDATA[CSS盒模型的理解]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/89213320</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/89213320</guid><author>Amy_cloud</author><pubDate>Thu, 11 Apr 2019 16:11:05 +0800</pubDate><description><![CDATA[在面试中，我们常被问到CSS的盒模型，那么今天我们就来聊聊这个东东。
概念：
页面渲染是，DOM元素所采用的布局模型，可以通过 box-sizing 来进行设置。
分类：




标准盒模型
IE盒模型




width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
width 和 height 指的是内容区域+bord...]]></description><category></category></item><item><title><![CDATA[记录一段关于js速度运动的代码]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/89178994</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/89178994</guid><author>Amy_cloud</author><pubDate>Wed, 10 Apr 2019 12:04:55 +0800</pubDate><description><![CDATA[描述：我们想要达到的效果是，当鼠标移入 ‘提示’ 框的时候，左侧的 div显示到固定位置，移出回到原始位置。
1.首先我们需要了解的是 js的鼠标移入事件： （不论鼠标指针穿过被选元素或其子元素，都会触发）
onmouseover ： 移入
onmouseout ： 移出
了解一下：
mouseenter ：只有在鼠标指针穿过被选元素时，才会触发
mouseleave ： 只有在鼠标指针离开被选...]]></description><category></category></item><item><title><![CDATA[聊一聊 本地存储那些事儿]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/88814574</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/88814574</guid><author>Amy_cloud</author><pubDate>Tue, 26 Mar 2019 10:42:24 +0800</pubDate><description><![CDATA[前端本地存储用得最多3种方式：
cookie , sessionStorage , localStorage
1.关于cookie ：

服务器与浏览器之间来回传递，储存大小不能超过4K，同时每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识，cookie只在设置的cookie过期时间之前一直有效，在所有同源窗口中都是共享的。
document.cookie=…...]]></description><category></category></item><item><title><![CDATA[记录一段table的js逻辑判断（详情见下图）]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/88344219</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/88344219</guid><author>Amy_cloud</author><pubDate>Fri, 08 Mar 2019 11:37:02 +0800</pubDate><description><![CDATA[后台返回的数据机构是这样的：
let list= [
            {school_name: &amp;amp;quot;世纪阳天体验学校&amp;amp;quot;, school_id: 1, score_level: 1, count: 0, proportion: 0},
            {school_name: &amp;amp;quot;世纪阳天体验学校&amp;amp;quot;, school_id: 1, score_level: 2, count: 0, ...]]></description><category></category></item><item><title><![CDATA[前端对图片加载失败做默认图片处理]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/88289907</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/88289907</guid><author>Amy_cloud</author><pubDate>Thu, 07 Mar 2019 10:42:19 +0800</pubDate><description><![CDATA[类似于下面图片展示这样：

1.JQ的写法：
获取该图片的class，采用jq的one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
 $('.top_mg').one(&amp;amp;amp;amp;quot;error&amp;amp;amp;amp;quot;, function(e){  //加入相应的图片类名
          $(this).attr(&amp;amp;amp;amp;quot;src&amp;amp;amp;amp;quot;, &amp;a]]></description><category></category></item><item><title><![CDATA[根据后台返回的字符来绘制验证码图形]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/88239913</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/88239913</guid><author>Amy_cloud</author><pubDate>Wed, 06 Mar 2019 16:02:41 +0800</pubDate><description><![CDATA[开始之前还是看一下我们想要的效果

1，首先像图片当中这样的验证码图形，我们采用的canvas来绘制的
2，用户的输入是自主无控制的，所以我们在提交表单之前需要对用的验证码输入进行大小写的转换
//这里的code就是用户的输入
			 if( /[a-z]/.test(model_code) ){
                code = code.tolocaleLowerCase();  ...]]></description><category></category></item><item><title><![CDATA[关于table升序，降序，上移，搜索，分页那些事儿]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/86657018</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/86657018</guid><author>Amy_cloud</author><pubDate>Sat, 26 Jan 2019 14:30:38 +0800</pubDate><description><![CDATA[开始之前先看看闲着没事儿，写的一个页面：

简单描述一下，思路和实现的步骤：
1.搜索： 采用vue的computed 计算属性在不改变原数组的情况下，过滤出用户搜索的信息
2.升序，降序： 采用js 的 sort() 方法，升序 a-b, 降序 b-a
3.上移： 利用 Vue.set() 响应式新增与修改数据
4.分页：自主封装了一个组件，子组件触发父组件的方法采用 this.$emit() ...]]></description><category></category></item><item><title><![CDATA[记录一段Js:用url取值]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/86536249</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/86536249</guid><author>Amy_cloud</author><pubDate>Fri, 18 Jan 2019 10:56:39 +0800</pubDate><description><![CDATA[function request(paramName) {
    var paramValue = &quot;&quot;;
    var params = window.location.href.split('?')[1];
    if (params == null || params == &quot;&quot;)
        return paramValue;
    var arr = params.spl...]]></description><category></category></item><item><title><![CDATA[记录一段js:判断数组元素连续或者不连续]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/86294831</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/86294831</guid><author>Amy_cloud</author><pubDate>Fri, 11 Jan 2019 12:03:04 +0800</pubDate><description><![CDATA[如果我们拿到一个数组的解构是这样的：
[‘2’,‘3’,‘5.5’,‘6’,‘7’,‘8’,‘12’,‘12.1’,‘13’,‘16’,‘17’]
我们需要把它变成这样：
2-3，5.6，6-8，12，12.1，13，16-17
思路：
1，先将数组连续的数字push进一个新的数组
2，再通过 map 遍历这个数组
function sort(arr) {
    var result = [];...]]></description><category></category></item><item><title><![CDATA[Vue封装 分页组件]]></title><link>https://blog.youkuaiyun.com/Amy_cloud/article/details/85702308</link><guid>https://blog.youkuaiyun.com/Amy_cloud/article/details/85702308</guid><author>Amy_cloud</author><pubDate>Thu, 03 Jan 2019 16:20:47 +0800</pubDate><description><![CDATA[
思路：
1.父子组件通过 props 传递相关参数
2.子组件改变父组件的参数通过 $emit 方法来触发
代码：
&amp;lt;div class=&quot;Pagination&quot;&amp;gt;
        &amp;lt;div class=&quot;page-bar&quot;&amp;gt; 
            &amp;lt;ul&amp;gt; 
                &amp;lt;li&amp;gt;&amp;lt;a  v-on:click=&quo]]></description><category></category></item></channel></rss>