• vue 实现复制到粘贴板功能需要依赖到 clipboard.js

    发表于 2018-09-11 16:16:51   |   下载附件
    clipboard复制粘贴vue 复制粘贴

    1、 首先需要安装依赖  * 出现错误的话,可以试试 cnpm

    npm install --save vue-clipboard2

    2、 安装成功之后就可以开始使用了

    2.1、template代码:

    <span>订单编号:{{orderNumber}}</span>
    <el-button class="ml10"
        type="text"
        size="medium"
        v-clipboard:copy="orderNumber"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">
        点击复制
    </el-button>

    2.2、javascript代码:

    // 引入依赖
    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2';
    Vue.use(VueClipboard);
    
    export default {
    	data(){
    		return {
    			// 复制的内容
    			orderNumber: 'xxxxxxxxxxxsx'
    		}
    	},
    	methods: {
    	    // 复制成功
    	    onCopy(e){
    	    	console.log(e);
    	    },
    	    // 复制失败
    	    onError(e){
    	    	alert("失败");
    	    },
    	}
    }
  • webstorm 快捷键整理

    发表于 2018-08-30 11:26:21   |   下载附件
    webstormwebstorm 快捷键
    webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。今天整理了一些webstorm比较实用的快捷键
  • 浏览器全屏JS实现代码

    发表于 2018-08-01 13:38:51   |   下载附件
    全屏浏览器全屏JS代码实现浏览器全屏requestFullScreenexitFullscreenmsRequestFullScreen
    //全屏
    function fullScreen(){
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
            if(typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            };
          return;
    }
    //退出全屏
    function exitScreen(){
        if (document.exitFullscreen) {  
            document.exitFullscreen();  
        }  
        else if (document.mozCancelFullScreen) {  
            document.mozCancelFullScreen();  
        }  
        else if (document.webkitCancelFullScreen) {  
            document.webkitCancelFullScreen();  
        }  
        else if (document.msExitFullscreen) {  
            document.msExitFullscreen();  
        } 
        if(typeof cfs != "undefined" && cfs) {
            cfs.call(el);
        }
    }
    //ie低版本的全屏,退出全屏都这个方法
    function iefull(){
        var el = document.documentElement;
        var rfs =  el.msRequestFullScreen;
        if(typeof window.ActiveXObject != "undefined") {
            //这的方法 模拟f11键,使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if(wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    //注:ie调用ActiveX控件,需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本’ 设置为启用
  • Sublime3 markdown preview 修改输出的html页面的默认样式

    发表于 2018-07-23 16:34:41   |   下载附件
    markdown preview修改 markdown 输出 html的默认样式样式修改
    在sublime3 中安装了 Markdown Preview,Alt + M 生成的HTML页面,但样式有点不好看,想自定义样式,网上百度了半天,终于搞定,手记如下

    菜单栏中点击 首选项 -> 浏览插件,打开文件后,搜索文件名 Markdown Preview.sublime-package,如果找不到,则进入到 【C:\Program Files\Sublime Text 3\Data\Installed Packages】这个位置,下面就有 MarkdownPreview.sublime-package

    将其改为 MarkdownPreview.sublime-package.zip,打开压缩文件找到 markdown.css ,修改里面的值 如 width: 45em 为 width: 75%,保存后重新打包,注意新的压缩包应直接包含原有包的所有文件,再去掉 .zip 后缀,重新打开sublime,用 Alt + M 生成的HTML文件已经是你修改后的输出样式了。

    附上githu链接及手动安装的包文件:
    https://github.com/revolunet/sublimetext-markdown-preview
  • markdown 纺辑 浏览 及 sublime text 插件安装

    发表于 2018-07-23 10:33:36   |   下载附件
    mdMarkdownsublime text for MarkdownMarkdown 插件md 编辑浏览
    1. 打开Package Control。
      这个是必装的,我们假设你已经安装了,如果没有安装,我们也假设你已经装了,就是这么霸道。
      快捷键Ctrl + Shift + P,输入install,选Install Package

    2. 安装MarkdownEditing
      快捷键Ctrl + Shift + P,输入MarkdownEditing
      安装完整个插件之后,你可以直接在编辑的时候看到效果

    3. 安装Markdown Preview进行预览
      如果不满足于只在编辑的时候看,可以试试这个,能在浏览器中看

    4. 自定义快捷键
      点击 Preferences --> 选择 Key Bindings,输入:
      { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
      完成后,其中keys后面的 alt+m 是自己定义的快捷键,可以直接在浏览中查看 markdown文件显示效果
  • 完美解决 chrome 表单该死的黄色背景,及挡住CSS样式中设置的图标

    发表于 2018-07-05 23:29:09   |   下载附件
    -webkit-autofillchrome谷歌浏览器解决 autocomplete="off" 无效
    &.mobile { background: url('../img/i-001.png') no-repeat 10px -157px; }
    &.mobile:-webkit-autofill { -webkit-animation: autofill-mobile 1s infinite; }
    @-webkit-keyframes autofill-mobile {
        from { background: url('../img/i-001.png') no-repeat 10px -157px; }
        to { background: url('../img/i-001.png') no-repeat 10px -157px; }
    }
  • PHP加密登录注册密码

    发表于 2018-07-01 23:10:32   |   下载附件
    SHA256HmacMd5PHP加密注册加密
    // PHP 第一次加密 sha256
    function SHA256($str)
    {
        $re = hash('sha256', $str, true);
        return bin2hex($re);
    }
    
    // PHP 第二次加密 基于md5的加密算法hmac
    // md5已经不是那么安全了,多折腾几下吧
    // @param String $data 预加密数据
    // @param String $key  密钥
    // @return String
    function HmacMd5($data, $key)
    {
        // RFC 2104 HMAC implementation for php.
        // Creates an md5 HMAC.
        // Eliminates the need to install mhash to compute a HMAC
        // Hacked by Lance Rushing(NOTE: Hacked means written)
    
        //需要配置环境支持iconv,否则中文参数不能正常处理
        $key = iconv("GB2312", "UTF-8", $key);
        $data = iconv("GB2312", "UTF-8", $data);
    
        $b = 64; // byte length for md5
        if (strlen($key) > $b) {
            $key = pack("H*", md5($key));
        }
        $key = str_pad($key, $b, chr(0x00));
        $ipad = str_pad('', $b, chr(0x36));
        $opad = str_pad('', $b, chr(0x5c));
        $k_ipad = $key ^ $ipad;
        $k_opad = $key ^ $opad;
    
        return md5($k_opad . pack("H*", md5($k_ipad . $data)));
    }
  • 在vue中的js部分导入图片后通过webpack无法被正确打包的问题

    发表于 2018-06-22 11:23:34   |   下载附件
    vue 图片打包vue 引入图片
    1、在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入,这样才会被webpack正确的打包的项目文件中,否则会因为webpack根据依赖打包而找不到指定的图片
    2、如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话也是需要使用require来将图片作为模块引入才会被webpack正常打包
    3、在HTML中直接书写的img地址以及css中引入的图片地址无需使用其他手段正常引用即可被webpack正常打包
  • 解决Sublime Text 3中文显示乱码(tab中文方块)问题

    发表于 2018-06-02 02:00:56   |   下载附件
    Sublime Text 乱码3 tab中文乱码
    import urllib.request,os,sys;
    exec("if sys.version_info < (3,) or os.name != 'nt': raise OSError('This code is for Windows ST3 only!')");
    pr='Preferences.sublime-settings';
    ip='ignored_packages';
    n='Package Control';
    s=sublime.load_settings(pr);
    ig=s.get(ip);
    ig.append(n);
    s.set(ip,ig);
    sublime.save_settings('Preferences.sublime-settings');
    pf=n+'.sublime-package';
    urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));
    by=urllib.request.urlopen('https://packagecontrol.io/'+pf.replace(' ','%20')).read();
    open(os.path.join(sublime.installed_packages_path(),pf),'wb').write(by);
    ig.remove(n);
    s.set(ip,ig);
    sublime.save_settings(pr);
    print('Package Control: 3.0.0 upgrade successful!') 
  • css 选择器

    发表于 2018-05-23 16:01:41   |   下载附件
    css 选择器
    div+p				选择紧接在 <div> 元素之后的所有 <p> 元素。	2
    [target]			选择带有 target 属性所有元素。	2
    [target=_blank]			选择 target="_blank" 的所有元素。	2
    [title~=flower]			选择 title 属性包含单词 "flower" 的所有元素。	2
    [lang|=en]			选择 lang 属性值以 "en" 开头的所有元素。	2
    p:first-letter			选择每个 <p> 元素的首字母。	1
    p:first-line			选择每个 <p> 元素的首行。	1
    p:first-child			选择属于父元素的第一个子元素的每个 <p> 元素。	2
    p:before			在每个 <p> 元素的内容之前插入内容。	2
    p:after				在每个 <p> 元素的内容之后插入内容。	2
    p:lang(it)			选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
    p~ul				选择前面有 <p> 元素的每个 <ul> 元素。	3
    a[src^="https"]			选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
    a[src$=".pdf"]			选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
    a[src*="abc"]			选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
    p:first-of-type			选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
    p:last-of-type			选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
    p:only-of-type			选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
    p:only-child			选择属于其父元素的唯一子元素的每个 <p> 元素。	3
    p:nth-child(2)			选择属于其父元素的第二个子元素的每个 <p> 元素。	3
    p:nth-last-child(2)		同上,从最后一个子元素开始计数。	3
    p:nth-of-type(2)		选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
    p:nth-last-of-type(2)	        同上,但是从最后一个子元素开始计数。	3
    p:last-child			选择属于其父元素最后一个子元素每个 <p> 元素。	3
    p:empty				选择没有子元素的每个 <p> 元素(包括文本节点)。	3
    #news:target			选择当前活动的 #news 元素。	3
    input:enabled			选择每个启用的 <input> 元素。	3
    input:disabled			选择每个禁用的 <input> 元素	3
    input:checked			选择每个被选中的 <input> 元素。	3
    :not(p)				选择非 <p> 元素的每个元素。	3
    ::selection			选择被用户选取的元素部分。	3
每页显示10条,当前为第6页,总页数为19页