把内容复制到粘贴板

需求: 点击按钮 复制 一部分不相关的文字内容 到粘贴板
// 复制到粘贴板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
copyTextToClipboard(text) {
    var textArea = document.createElement('textarea');
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = 0;
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.value = text ? text : '';
    document.body.appendChild(textArea);
    textArea.select();
    try {
        var msg = document.execCommand('copy') ? '成功' : '失败';
        this.$message.success('复制' + msg);
    } catch (err) {
        console.log('浏览器不支持该功能，sorry！');
    }
    document.body.removeChild(textArea);
}

Javascript 复制内容, 粘贴板 评论

Vue中CropperJs图片裁切功能实现

页面html代码：

<div>
    <el-button class="mt_10" type="primary" size="small" onclick="chooseSeat.click()">选择文件</el-button>
    <input id="chooseSeat" name="files" style="display:none;" type="file" @change="onFileSelect()" accept="image/png,image/jpeg,image/jpg"/>
    <div style="width: 480px;min-height:280px;background: #ccc;margin-top:10px;margin-bottom: 10px;">
        <div style="width: 100%;min-height:100%;background: #ccc;">
            <img id="Img_uploadImg" style="max-width: 100%;" alt="原始图">
        </div>
    </div>
    <div style="margin-bottom: 10px;">
        <img :src="Img_cropperImg" style="width:120px;height:120px;background: #ccc;" alt="裁切图">
    </div>
    <el-button type="primary" size="small" @click="J_savePortrait">保存</el-button>
    <a :href="Img_download" download="头像"></a>
</div>

Vue cropperJs, 图片裁切 评论

Js - url参数拼接

url已经带参数还没有带都可以使用
url传参以及get请求参数

paramsJoin(url, params) {
    let paramsArray = [];
    Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]));
    if (url.search(/\?/) === -1) {
        url += '?' + paramsArray.join('&');
    } else {
        url += '&' + paramsArray.join('&');
    }
    return url;
}

Javascript params 评论

Diary - 前端星计划三周年庆一天行

《北京编程梦》 —- Algate

内容不多，但是收获或多或少还是有的。

阿里的前端大牛，360事业部的星计划创始人月影…… 请原谅我的记性不是很好。名字可记不住

从WEB发展历史到WEB发展的现状以及WEB未来的发展方向都有深刻理解；

微信小程序的火热，以及快应用的诞生，app应用等向跨平台、快启动，免安装等方向发展；

wepy框架的应用，前端组件化框架，组件等让开发变得越来越方便；

es6等新规范的诞生，flash即将全面禁用。加入webassembly、媒体资源扩展、webRTC等最新规范。让WEB发展如火如荼，正经历着每天都有新内容的变革。

市面上出现的许多组件，框架，针对某个应用开发的各种版本应用等等的内容；

现阶段，web发展给社会进步，市场繁荣也尽了自己的一份力量，web能如此热情高涨的发展下去。

………

大家合影留念

我没有吃蛋糕，360纸水杯作为纪念；

日记 前端星计划 评论

css - 元素选择器

1.属性选择器：

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

Css 选择器 评论

we-微信小程序

官方给了一个非常简洁的描述：
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

最大的优势就是：很多App在微信打开后需要跳转，而小程序依靠月活10亿的微信用户，可以直接在微信中打开运行。购物类小程序打开后界面类似其他商城App，让用户购物体验更好。也可以直接在微信群分享，熟人分享转化率更高。微信群里的小游戏像病毒一样刷屏，虽然腾讯表示会阻止这样的病毒式分享，但是依然无法阻挡小游戏的火爆。这是一条很好的变现方式。碎片化时间的利用充分展示了小程序的优越性，用完就走，无需安装和留存，腾讯给小程序开放了很多入口，首页下拉可以看到小程序的使用记录。好处多多。

对于这么火爆的新生派实力小程序，虽然工作中我不需要开发，但是也阻挡不了我对他的热情。so—开发一个属于自己的小程序就很有必要。既可以提升自己的逼格，又可以成为众多开发者的一员……。我忍不住就像开发。

微信小程序 微信小程序 评论

vue-elementUI使用相关问题

1.form表格排序

在el-table需要排序的那一列加入 sortbale

<el-table-column prop="createDate" label="申请日期" width="200" sortable :sort-method="auditSortby">
sort-by sort-method都是自定义排序规则

sort-method跟[]的sort类似。so数字相关的可以这样写

<!-- js -->
auditSortby(a, b) {
    return new Date(a.createDate).getTime() - new Date(b.createDate).getTime();
},

Vue elementUI 评论

ES6-Generator 函数的异步应用

异步编程对 JavaScript 语言太重要。Javascript 语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。

传统方法
ES6 诞生以前，异步编程的方法，大概有下面四种。

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象
    Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。

Es6 Generator 评论

ES6-fetch

1
2
3
4
5
6
let fetchApi = (url, type, params) => {
    return fetch(`${baseURL + url}`, {method: type, body: JSON.stringify(params)}).then(
        response => response.json()
    ).catch(error => console.error('Error:', error));
};
export default fetchApi;

Es6 fetch 评论

后端导出excel文件

方法有很多种，这里介绍比较简单的两种方法：

方法一：使用a链接，把后端给的流文件url直接写到href里，浏览器就会自动处理流文件url，直接实现下载；

vue-html：

<a :href="href_dialog_upload_error" v-show="flag.flag_uploaderror"><el-button type="primary" size="small">导出错误数据</el-button></a>
<!-- <el-button type="primary" size="small" v-show="flag.flag_uploaderror" @click="J_dialog_export_error">导出错误数据</el-button> -->

Vue blob, upload 评论

JS - 基础面试内容

1.Doctype作用？标准模式与兼容模式各有什么区别?

（1）、<!DOCTYPE>声明位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

Javascript 基础知识 评论

arguments.callee

arguments是JS的一个内置（隐藏）的对象，当在调用函数时，就会实例化出这个对象，而arguments.callee是一个指向正在执行的函数的指针，这样就可以通过arguments.callee来调用函数，尤其是在编写递归函数的时候。
在函数内部，有两个特殊的对象：arguments 和 this。其中， arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。 请看下面这个非常经典的阶乘函数

function factorial(num){
   if (num <=1) {
      return 1;
   } else {
   return num * factorial(num-1)
   }
}

如果像下面这样使用它，则会出错：
var fcopy = factorial;
factorial = null;
alert(fcopy(3));
因为fcopy指向的函数实体调用了factorial，而factorial已经被释放。
解决有下边两种办法

Javascript arguments.callee, 递归 评论

数据结构与算法 - 高级算法

本文探讨两个高级主题：动态规划 和 贪心算法。

【一】 动态规划

动态规划被认为是一种与递归相反的技术，递归是从顶部开始将问题分解。
1.使用递归解决问题虽然简洁，但是效率不高。包括JavaScript在内的众多语言，不能高效的将递归代码解析为机器代码，尽管写出来的代码简洁，但是执行效率低下。但并不是说使用递归是件坏事。
2.本质上，只是那些指令式编程语言和面向对象的编程语言对递归的实现不够完善（它们没有将递归作为高级编程的特性）。
3.许多使用递归去解决的编程问题，可以重写为使用动态规划的技巧去解决。动态规划方案通常会使用一个数组来简历一张表，用于存放被分解成众多子问题的解。

下边看一个菲波那切数列的例子：

1.动态规划实例：计算菲波那切数列
0,1,1,2,3,5,8,13,21,34,55，…

该序列是由前两个数值相加而成的。这是一个简单的递归函数。
JavaScript代码：

function recurFib(n) {
   if (n < 2) {
      return n;
   }
   else {
      return recurFib(n-1) + recurFib(n-2);
   }
}

数据结构与算法 高级算法 评论

数据结构与算法 - 检索算法

在列表中查找数据有两种方式：顺序查找 和 二分查找。
顺序查找适用于元素随机排列的列表；
二分查找适用于元素已排序的列表；（二分查找效率更高，但是查找之前需要额外的时间对列表中的元素排序）

【一】 顺序查找(又称为线性查找)

从第一个元素开始查找，循环列表，逐个对比查找

数据结构与算法 检索算法 评论