堂的博客

vue中上传照片生成带图片的二维码

发表于 2017-04-13 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

本例使用了：

qart.js：Generate artistic QR code
canvas

上传照片

利用<input type="file">的change事件
html部分:

1 2	<input type="file" @change="fileChange"> <img :src="originImg" alt="origin" >

js部分:

import QArt from 'qartjs';
export default {
    methods:{
        fileChange(event){
            let files = event.target.files;
            let file = files[0];
            if(!file.type.match('image.*')){
                alert('请选择照片');
                return;
            }
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                this.generateQRcode(reader.result);
            }
        },
        generateQRcode(base64Img){
            this.originImg = base64Img;
            new QArt({
              value: 'www.baidu.com',
              imagePath: base64Img,
              filter: 'color',
              size: 195
            }).make(this.$refs.result);
        }
    }
}

阅读全文 »

vue中封装使用markdown并语法高亮

发表于 2017-03-22 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

最近学习Vue2.0，感觉很有意思，给大家分享一个在vue项目中写markdown的方法。国际惯例,先附上一些链接。

marked：A full-featured markdown parser and compiler, written in JavaScript.
highlight.js:Javascript syntax highlighter
vue自定义指令

安装依赖包

1 2	npm install -S marked npm install -S highlight.js

vue中注册自定义指令

main.js:

1
2
3

import Vue from 'vue'
import Marked from './common/directive/marked.js'
Vue.use(Marked);

ps:Vue.use()会自动调用参数文件里的install()

阅读全文 »

小疑问

发表于 2017-01-19 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

记录一些闪过的疑问,有解决方法更好喽

获取数组中某一项的index?

item为直接值,如：数组、字符串等。这种很好获取index
1
myArr.indexOf(item);
系列节点：获取ul中某一li的下标,这种多个变幻，不过还是很方便:
假如点击了当前li:
1
Array.indexOf().call(this.parentNode.childNodes,this);

item为对象时，如何获取？有没有很方便的方法？现在我用的常规方法：

function getIndexOfArray(arr,item){
    if(item){
        for (var i = 0, l = arr.length; i < l; i++) {
            if(arr[i].uuid == item.uuid){
                return i;
            }
        }
    }
    return -1;
}

如何判断一个节点上是否绑定了事件?

网上流传的$(elem).data("events")[type]不起作用，谁有好办法吗？

小棋童

发表于 2016-12-02 | 更新于： 2019-07-10 | 分类于闲语 | 评论： | 阅读次数：

小棋童

阅读全文 »

戏言

发表于 2016-12-01 | 更新于： 2019-07-10 | 分类于闲语 | 评论： | 阅读次数：

阅读全文 »

优化hexo之next主题

发表于 2016-12-01 | 更新于： 2019-07-10 | 分类于杂说 | 评论： | 阅读次数：

next主题是一款黑白色的主题，简单大方，时间久了难免有点厌烦。于是自己遍想做点优化和美化,让它色彩缤纷些。下面的方法也适用于其他主题

样式方面

官方默认样式对比我的主题样式

next/source/css/_custom/custom.styl:这里面写自定义样式，浏览器中f12调试，看哪儿不好看，直接写在此文件中覆盖。我的自定义样式：

// Custom styles.
::selection {
  background: #3399FF;
}

a {
    border-bottom: none;
}
article a, .about-page a{ // about页面下也用此样式
	color: $my-link-color;
	&:hover {
	    color: $my-link-hover-color;
	}
}
.posts-expand .post-body ul li{
	list-style: disc;
}
//最近访客
#ds-recent-visitors .ds-avatar{
	float:left;
}
//最新评论
.ds-recent-comments{
	padding-left:0;
}
//打赏样式
#wechat p{
	margin-top:-16px;
}
#alipay{
	vertical-align:top;
}
.lrc{
	width:100%;
	text-align:center;
}
.tip{
	color: #DF0101;
	font-weight:bold;
}
// 行内代码
$code-block {
  overflow: auto;
  margin: 20px 0;
  padding: 15px;
  font-size : $code-font-size;
  color: $highlight-foreground;
  background: $my-highlight-background;
  border:1px solid $my-highlight-border;
  line-height: $line-height-code-block;
}
code {
  padding: 2px 4px;
  word-break: break-all;
  color: $my-code-foreground;
  background: $my-code-background;
  border-radius: $code-border-radius;
  font-size : $code-font-size;
}

p {
    margin: 0 0 15px;
}

阅读全文 »

sass VS less

发表于 2016-11-17 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

为了重构项目的css代码，先体验了less，但发现less不能满足我的需求，没办法转为sass,在此描述一下自我感受这两者的区别。我描述的只是我直观使用的部分，大部分的不同点百度一下，第一页的全一样。。。

判断条件的区别(感觉最重要的地方)

less写mixin时判断的唯一关键字就是when，而我需要生成复合样式中的一部分，像这样：
1
2
3
4
a{
border-right:1px;
border-bottom:2px;
}

要选择性的生成部分属性，less很不方便，可以参考前面一篇文章less实战全解之复合样式mixin

sass的判断关键字很符合我们的习惯@if、@else、@else if,还有其他的@for、@each，非常强大。额…有点跑题，继续。那么用sass处理符合属性可以写成这样,不会生成多余的属性：

@mixin position($position,$top:null,$right:null,$bottom:null,$left:null,$z-index:null){
  position: $position;
  @if $top{top: $top;}
  @if $right{right: $right;}
  @if $bottom{bottom: $bottom;}
  @if $left{left: $left;}
  @if $z-index{z-index: $z-index;}
}

假设要编译成这样的css:

1
2
3

position: absolute;
right: 0;
bottom: 0;

使用的方式有两种：

//方法1,最后一个"有效参数"前面的参数设为null，后面的不用管，因为参数默认值就是null
@include position(absolute,null,0,0);
//方法2,指定参数名称
@include position(absolute,$right:0,$bottom:0);

阅读全文 »

less实战全解

发表于 2016-11-10 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

附上我的开发规范与公用mixin:

less开发规范
less公用mixin

本文所有的实例都可以在less公用mixin 找到

不同主题的颜色字体等变量定义规范：

假设有一蓝色主题，且起名为”Blue”。那么：

其下的所有变量都以”Blue”为开头起名
变量名应包含主要特征和用途,若用途较多用”color”声明
对于一些动作变化效果，如hover的颜色效果，最后再跟上对应的动作名

实例：

@Blue-color-blue:#1D89E4;//用途较多,是此主题的主色
@Blue-border-lightgray-a:#e4e4e4;//常用作border
@Blue-border-lightgray-b:#dddddd;
@Blue-bg-lightgray:#f9f9f9;//常作背景色
@Blue-font-blue-hover:#0f79d5;//常作字体颜色,当hover时字体为这个颜色

这样，就定义了一套主题的颜色。下面的语句决定我们使用的主题：

@theme-color:@Blue-color-blue;
@theme-border-a:@Blue-border-lightgray-a;
@theme-border-b:@Blue-border-lightgray-b;
@theme-bg:@Blue-bg-lightgray;
@theme-font-hover:@Blue-font-blue-hover;

这里定义的变量才是实际在项目中用的，这些名称只包含了主要作用，而不包含特征。要切换不同的主题，只需要该这些变量对应的值就可以了。

跟主题无关的颜色字体等变量定义规范：

和跟主题相关的颜色名称定义类似，只不过开头不用加主题名，使用的时候可以明显区分主题相关的颜色和不相关的颜色。

用途较多的颜色：不用声明作用，只需用单词表明特征即可
一些有常规用途的颜色：声明主要作用和特征

这个比较灵活，具体视情况而定。
实例：

1 2	@white:#fff; @font-red:#f00;

兼容不同浏览器的样式mixin

以.开头，其名称与样式的名称一致：
实例1：

.border-radius(...){
  -webkit-border-radius: @arguments;
  -moz-border-radius: @arguments;
  border-radius: @arguments;
}

阅读全文 »

less使用mixin的小技巧

发表于 2016-11-07 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

less是一种css的扩展，可以编译成css。将它定位为”工具”即可，最终浏览器/app 识别的还是css

参考网站：

less中文官网，是bootstrap帮忙翻译的，但容我吐槽一句：翻译翻一半，惆怅也疼蛋。
css88的less中文文档，这个翻译完了，不喜欢英文的可以看这个

css3中calc在less编译时被计算的解决办法

目标：

1
2
3

width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);

错误less:

//less的mixin
.calcWidth(@width){
    width:-moz-calc(@width);
    width:-webkit-calc(@width);
    width:calc(@width);
}
//使用
div{
    .calcWidth(100% - 10px);
}

错误结果:

1
2
3

width: -moz-calc(90%);
width: -webkit-calc(90%);
width: calc(90%);

原因：less把这个当成运算式去执行了
正确less:

//less的mixin
.calcWidth(@width){
    width:-moz-calc(@width);
    width:-webkit-calc(@width);
    width:calc(@width);
}
//使用
div{
    .calcWidth(~"100% - 10px");
    //~是less内置的转义函数，就是以前的e函数，语法：~"value"
}

结果就是目标，验证通过

阅读全文 »

正则RegExp中的九曲十八弯

发表于 2016-10-25 | 更新于： 2019-07-10 | 分类于前端 | 评论： | 阅读次数：

很多知识都是有许多不被注意的细节，一不小心就会拐错了弯，翻了车。今天说几个正则需要注意的地方。

正则和string常用的方法

正则表达式验证字符串的方法

reg.exec(string):
- 如果执行exec方法的正则表达式没有分组（没有括号括起来的内容），那么如果有匹配，他将返回一个只有一个元素的数组(不论正则是否有标志g)，这个数组唯一的元素就是该正则表达式匹配的第一个串;如果没有匹配则返回null
- exec如果找到了匹配，而且包含分组的话，返回的数组将包含多个元素，第一个元素是找到的匹配，之后的元素依次为该匹配中的第一、第二…个分组
reg.test(string): 返回的是true和false。

字符串验证正则的方法

string.match(reg/str):
- 参数为reg时返回符合正则的子串，但是被封装在数组里;不同于reg.exec()，如果正则带有标志g,且有多个匹配的子串，会返回有多个元素的数组。
- 参数为str时若包含返回该str，不包含时返回null
  tip:特殊情况'1 2 ()'.match('1 2 ()')，当字符串里面有()时match直接返回null，因为括号是正则中特殊的存在，可以匹配$N。此时用indexOf()。
string.replace(reg/str,replacement):将字符串满足reg的子串/指定的str 替换为replacement，返回值为替换后的结果，原变量不变
string.search(reg):作用类似于string.indexOf(),返回符合正则的起始下标，如果没找到也为-1

RegExp静态属性

$1...$9:每当产生一个带括号的成功匹配时，$1…$9 属性的值就被修改。可以在一个正则表达式模式中指定任意多个带括号的子匹配，但只能存储最新的九个。
Note:

这些属性是RegExp的静态属性，而非RegExp实例的属性。
这些属性是全局的，只要对正则有影响，就会改变这几个属性的值

阅读全文 »