• vue webpack打包后.css文件里面的背景图片路径错误解决方法

    发表于 2018-10-15 16:45:48   |   下载附件
    vue打包vue打包关于css中的背景图片webpack vue 打包css 背景图片地址错误

    1、使用绝对路径,打包后成了 url(/static/img/logo-index.2f00bf2.png) no-repeat

    2、使用相对路径,打包后成了 url(static/img/logo-index.2f00bf2.png) no-repeat

    但是CSS资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,解决办法,打开webpack.prod.conf.js,参考详情说明步骤,添加字段 publicPath:'../../',

  • JavaScript - window 尺寸 ( 获取屏幕宽高 )

    发表于 2018-10-13 15:49:02   |   下载附件
    window宽高浏览器宽度浏览器高度
    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;
  • 官能强度检测

    发表于 2018-10-12 13:46:34   |   下载附件
    密码强度检测password
    项目中需要一个密码强度的校验,找了好久,搜到这个挺好用的,记录一下。在一些网站注册的时候经常可以看到密码强度提示,例如优酷:
    //密码强度校验
    function checkPassword3(fieldId,tipMsg){
    	/*
    	 返回密码的强度级别
    	 */
        function checkStrong(sPW) {
            if (sPW.length < 8||sPW.length > 20)
                return 0; //密码太短或太长
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //测试每一个字符的类别并统计一共有多少种模式.
                Modes |= CharMode(sPW.charCodeAt(i));
            }
            return bitTotal(Modes);
        }
    	/*
    	 判断字符类型
    	 */
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字
                return 1;
            if (iN >= 65 && iN <= 90) //大写字母
                return 2;
            if (iN >= 97 && iN <= 122) //小写
                return 4;
            else
                return 8; //特殊字符
        }
    	/*
    	 统计字符类型
    	 */
        function bitTotal(num) {
     
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
        /**
    	 * 密码强度等级说明,字符包括:小写字母、大写字母、数字、特殊字符
    	 * 1---密码包含其中之一
    	 * 2---密码包含其中之二
    	 * 3---密码包含其中之三
    	 * 4---密码包含其中之四
         */
        var fieldValue=getValue(fieldId);
        if(fieldValue!=""&&checkStrong(fieldValue) < 2){
        	tipMsg='登录密码由8-20位数字+字母组成,字母区分大小写';
            errShow(fieldId,tipMsg);
            return false;
        }
        return true;
    }
  • 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)));
    }
每页显示10条,当前为第5页,总页数为19页