首页
更多应用
Search
1
修改iview的标签为i-的形式而不是驼峰的形式
2,737 阅读
2
PHP微信和企业微信签名
2,430 阅读
3
在VUE中怎么全局引入sass文件
2,177 阅读
4
vscode硬件占用较高解决方案
1,915 阅读
5
解决Macos下storm系列IDE卡顿的问题
1,866 阅读
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
登录
/
注册
Search
标签搜索
react
js
vue
nodejs
vscode
项目
代码
webpack
工具
nginx
小程序
css
fastmock
http
vue-cli3
eslint
git
浏览器
const
true
fastmock技术社区
累计撰写
95
篇文章
累计收到
9
条评论
首页
栏目
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
页面
更多应用
搜索到
52
篇与
的结果
2019-01-12
一个来自create-react-app脚手架警告的思考
最近在开发一个react项目,项目是用create-react-app脚手架创建的,当我在我的项目的菜单栏中添加了一个打开一个外链的a标签时,我收到了一个来自create-react-app的警告信息,信息内容如下意思就是说“在没有rel="noopener noreferrer"属性的a标签中使用target="_blank"存在一定的风险”这个提示瞬间把我吸引了,以前关于a标签收到的提示都是没有设置alt属性啊什么的,但是也只是提示我说为了显示的友好什么的,这次竟然提示我有风险,面对这种问题,必须一探究竟啊。查阅了一些资料得到了如下关于a标签一个介绍当一个外部链接使用了target=_blank的方式,这个外部链接会打开一个新的浏览器tab。此时,新页面会打开,并且和原始页面占用同一个进程。这也意味着,如果这个新页面有任何性能上的问题,比如有一个很高的加载时间,这也将会影响到原始页面的表现。如果你打开的是一个同域的页面,那么你将可以在新页面访问到原始页面的所有内容,包括document对象(window.opener.document)。如果你打开的是一个跨域的页面,你虽然无法访问到document,但是你依然可以访问到location对象。不看不知道一看吓一跳有木有。主要是两个点是我以前从未在意的用target="_blank"方式打开的tab和原始页面占用同一个进程(UI进程)新打开的页面能获取到原始页面的document。第一个问题不用我说都知道是非常需要注意的,新的页面中的所有行为都会间接影响到原始页面的性能。这里主要研究第二个问题。为此,我做了小小的实验。上图解释:首先打开了第一个页面,第一个页面只有一个“打开一个新页面”的a标签点击这个链接,打开了一个新页面。新页面中有一个按钮,“告诉打开我的那个页面,我喜欢林志玲”。点击新页面的按钮然后回到第一个页面,发现第一个页面多出来了一排红色的文字“我喜欢林志玲”。停在第一个页面5s钟,第一个页面自动跳转到了百度首页。上面两个页面的代码分别如下:opener-test.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <a target="_blank" href="test-opener-2.html">打开一个新页面</a> </body> </html>opener-test-2.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>我是新打开的页面</h1> <button type="button" id="btn">告诉打开我的那个页面,我喜欢林志玲</button> <script> document.getElementById('btn').addEventListener('click', function() { var _opener = window.opener; var p = _opener.document.createElement('p'); p.innerHTML = "我喜欢林志玲"; p.style.color = "#f33"; _opener.document.body.appendChild(p); setTimeout(function() { _opener.location.href = "//www.baidu.com"; }, 5000) }); </script> </body> </html>新的页面不仅往原始页面添加了一段话,而且还让他离开了原来的页面。注:在上面的例子中,两个页面位于同一个域下面,如果两个页面位于不同的域,那上面的第一个效果就是不行的,因为不同域的情况下,新页面拿不到opener对象的document,但是location对象是可以拿到的,所以第二个效果任然有效。怎么禁止上面的行为呢?按照create-react-app的提示信息,给连接加上rel属性,如下:<a rel="noopener noreferrer" target="_blank" href="https://marvengong.github.io/fastmock-docs/book/">上面的rel属性值多了一个noreferrer它的作用和noopener是一样的,只是适用于低版本的浏览器。这样处理后,新打开的页面的window对象上就没有opener和referrer对象了。
2019年01月12日
986 阅读
0 评论
0 点赞
2019-01-03
linux环境下redis安装和启动
redis安装redis下载方式进入到/usr/local目录后使用wget从网上下载redis安装包wget http://download.redis.io/releases/redis-4.0.1.tar.gz从官网下载 https://redis.io/download 拷贝到/usr/local 目录解压下载下来的压缩包cd /usr/local tar redis-4.0.1.tar.gz!进入目录安装cd /usr/local/redis-4.0.1 make test make install执行完上诉命令安装后,redis所有的相关文件都会安装到当前目录下,其中,可执行文件redis-server或者redis-cli等都位于src目录下。启动redis服务. 在src目录下直接执行redis-server即可启动服务,这种方式启动的redis服务是在前台运行的,退出命令行工具后,redis服务就停止了。我们希望redis在后台运行。[root@redis_01 redis]# redis-server /etc/redis/sentinel.conf --sentinel 7980:X 23 Nov 18:02:41.348 * Increased maximum number of open files to 10032 (it was originally set to 1024). _._ _.-``__ ''-._ _.-`` `. `_. ''-._ Redis 3.0.5 (00000000/0) 64 bit .-`` .-```. ```\/ _.,_ ''-._ ( ' , .-` | `, ) Running in sentinel mode |`-._`-...-` __...-.``-._|'` _.-'| Port: 26379 | `-._ `._ / _.-' | PID: 7980 `-._ `-._ `-./ _.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | http://redis.io `-._ `-._`-.__.-'_.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | `-._ `-._`-.__.-'_.-' _.-' `-._ `-.__.-' _.-' `-._ _.-' `-.__.-' 7980:X 23 Nov 18:02:41.355 # WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxconn is set to the lower value of 128. 7980:X 23 Nov 18:02:41.355 # Sentinel runid is 43de323d55627d896b2caf1da2e305f0eb59dcee 7980:X 23 Nov 18:02:41.356 # +monitor master mymaster 127.0.0.1 6379 quorum 1 ^C7980:signal-handler (1448273325) Received SIGINT scheduling shutdown... 7980:X 23 Nov 18:08:45.618 # User requested shutdown... 7980:X 23 Nov 18:08:45.618 # Sentinel is now ready to exit, bye bye... . 通过nohub方式启动,nohub redis-server /etc/redis/sentinel.conf --sentinel >> /var/log/redis.log&启动服务后,命令行会退出,并且将日志文件输出到/var/log目录下的redis.log文件中. 修改配置文件在sentinel.conf文件中加入下面的配置daemonize yes logfile "/var/log/sentinel_log.log"然后通过sentinel启动redis-server /usr/local/redis-4.0.1/sentinel.conf --sentinel后面的两种启动方式都会以后台的方式启动。如果不需要--sentinel通过sentinel启动,修改的配置文件就是redis.conf
2019年01月03日
729 阅读
0 评论
0 点赞
2019-01-02
nodemon+cross-env+config实现支持热更新的能根据不同环境加载不同配置的nodejs环境
nodejs项目中我们经常会用到nodemon启动项目以使我们的项目在开发时支持热更新,修改了代码后不需要手动重启服务器;使用npm 的config模块实现不同的环境(一般是develop,production,test);nodemon和config的使用方法这里不做详细介绍。cross-env的作用是不需要全局配置NODE_ENV在scripts脚本中修改NODE_ENV的值从而实现不同环境中proccess.env.NODE_ENV的不同,而config的工作原理就是基于NODE_ENV这个值的,所以推荐两者结合使用。先上三个工具结合使用后的配置文件。/package.json"scripts": { "dev": "nodemon ./bin/www --exec babel-node --presets es2015,stage-2", "start": "cross-env NODE_ENV=production babel-node ./bin/www --presets es2015,stage-2" }, "dependencies": { // ... other dependencies "config": "^3.0.1", "cross-env": "^5.2.0", // ... other dependencies }, "devDependencies": { // ... other devDependencies "nodemon"/nodemon.json{ "restartable": "rs", "ignore": [ ".git", "f2e", "node_modules/**/node_modules" ], "verbose": true, "execMap": { "js": "node --harmony" }, "events": { "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'" }, "env": { "NODE_ENV": "develop" }, "ext": "js,json" }nodemon的配置文档介绍的可以在scripts中一一配置,也可以在上面的配置文件中配置,我们建议在配置文件中配置,清晰明了还好管理。nodemon.json中跟本文相关的配置就是env->NODE_ENV配置项,他的值就对应设置了node环境中proccess.env.NODE_ENV的值,当执行npm run dev 时,proccess.env.NODE_ENV对应的是nodemon的配置文件中的值当执行npm run start 时, proccess.env.NODE_ENV对应的是cross-env设置的参数的值
2019年01月02日
852 阅读
0 评论
0 点赞
2018-12-29
Linux环境下Nginx详细安装部署教程
一、Nginx简介Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤二、Nginx安装1、下载Nginx及相关组件(我的软件目录为/software)[root@localhost software]# wget http://nginx.org/download/nginx-1.10.2.tar.gz 省略安装内容... [root@localhost software]# wget http://www.openssl.org/source/openssl-fips-2.0.10.tar.gz 省略安装内容... [root@localhost software]# wget http://zlib.net/zlib-1.2.11.tar.gz 省略安装内容... [root@localhost software]# wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.40.tar.gz 省略安装内容...安装c++编译环境,如已安装可略过[root@localhost software]# yum install gcc-c++ 省略安装内容... 期间会有确认提示输入y回车 Is this ok [y/N]:y 省略安装内容...2、安装Nginx及相关组件openssl安装[root@localhost software]# tar zxvf openssl-fips-2.0.10.tar.gz 省略安装内容... [root@localhost software]# cd openssl-fips-2.0.10 [root@localhost openssl-fips-2.0.10]# ./config && make && make install 省略安装内容...pcre安装[root@localhost software]# tar zxvf pcre-8.40.tar.gz 省略安装内容... [root@localhost software]# cd pcre-8.40 [root@localhost pcre-8.40]# ./configure && make && make install 省略安装内容...zlib安装[root@localhost software]# tar zxvf zlib-1.2.11.tar.gz 省略安装内容... [root@localhost software]# cd zlib-1.2.11 [root@localhost zlib-1.2.11]# ./configure && make && make install 省略安装内容...nginx安装[root@localhost software]# tar zxvf nginx-1.10.2.tar.gz 省略安装内容... [root@localhost software]# cd nginx-1.10.2 [root@localhost nginx-1.10.2]# ./configure && make && make install 省略安装内容...3、启动Nginx先找一下nginx安装到什么位置上了whereis nginx进入nginx目录并启动(启动指令为nginx)如果报如下错误“error while loading shared libraries: libpcre.so.1: cannot open shared object file: No such file or directory,”按照下面方式解决1.用whereis libpcre.so.1命令找到libpcre.so.1在哪里 2.用ln -s /usr/local/lib/libpcre.so.1 /lib64命令做个软连接就可以了 3.用sbin/nginx启动Nginx 4.用ps -aux | grep nginx查看状态 [root@localhost nginx]# whereis libpcre.so.1 [root@localhost nginx]# ln -s /usr/local/lib/libpcre.so.1 /lib64 [root@localhost nginx]# sbin/nginx [root@localhost nginx]# ps -aux | grep nginx 进入Linux系统的图形界面,打开浏览器输入localhost会看到下图,说明nginx启动成功Welcome to nginx!If you see this page, the nginx web server is successfully installed and working. Further configuration is required.For online documentation and support please refer to nginx.org.Commercial support is available at nginx.com.Thank you for using nginx.nginx 基本操作启动 [root@localhost ~]# /usr/local/nginx/sbin/nginx 停止/重启 [root@localhost ~]# /usr/local/nginx/sbin/nginx -s stop(quit、reload) 命令帮助 [root@localhost ~]# /usr/local/nginx/sbin/nginx -h 验证配置文件 [root@localhost ~]# /usr/local/nginx/sbin/nginx -t 配置文件 [root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf本文转载自https://www.cnblogs.com/taiyonghai/p/6728707.html
2018年12月29日
703 阅读
0 评论
0 点赞
2018-12-28
linux常用指令备忘
为node全局包(如:cnpm创建环境变量)$ sudo ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/ // 假设nodejs的安装目录为/usr/local/nodejs停止node服务ps -ef|grep node 找到node服务的进程信息root 3370 2822 0 16:21 pts/0 00:00:00 grep nodekill 3370 终止进程node后台启动nohup npm start& 通过这种方式启动,会在项目根目录生成nohup.out文件(如果本来不存在)并且跳出服务监控,服务的日志文件会写到nohup.out文件中forever工具,通过npm install -g forever安装。使用方法参考 https://www.npmjs.com/package/forever[1]: https://www.npmjs.com/package/forever
2018年12月28日
734 阅读
0 评论
0 点赞
2018-10-30
小程序中生成二维码和条形码
使用wxbarcode模块可以很方便地生成二维码和条形码。效果安装$ npm install wxbarcode使用方法import wxbarcode from 'wxbarcode' wxbarcode.barcode('barcode', '1234567890123456789', 680, 200); wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);条形码函数名:barcode函数原型:barcode(id, code, width, height)参数:id: wxml文件中的 Canvas IDcode: 用于生成条形码的字符串width: 生成的条形码宽度,单位 rpxheight: 生成的条形码高度,单位 rpx二维码函数名:qrcode函数原型:qrcode(id, code, width, height)参数:id: wxml文件中的 Canvas IDcode: 用于生成二维码的字符串width: 生成的二维码宽度,单位 rpxheight: 生成的二维码高度,单位 rpx小程序案例// 页面所在的js文件 import wxbarcode from '../../utils/qrcode/index.js'; // ... wxbarcode.barcode('barcode', res.data.voucher_info.closure_code, 680, 150); wxbarcode.qrcode('qrcode', res.data.voucher_info.closure_code, 340, 340);// wxml文件 <view class='barcode'> <canvas canvas-id="barcode"></canvas> </view> <view class='qrcode'> <!-- <image src='/assets/images/qrcode.png'></image> --> <canvas canvas-id="qrcode"></canvas> </view>本地wxbarcode目录结构(从github download下来的目录结构)
2018年10月30日
1,333 阅读
0 评论
0 点赞
2018-10-24
HTML特殊字符编码对照表
HTML特殊字符编码对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ ΗΗ Η Θ Θ Θ Ι Ι Ι Κ Κ Κ Λ Λ Λ Μ Μ Μ Ν Ν Ν Ξ Ξ Ξ Ο Ο Ο Π Π Π Ρ Ρ Ρ Σ Σ Σ Τ Τ Τ Υ Υ Υ Φ Φ Φ Χ Χ Χ Ψ Ψ Ψ Ω Ω Ω α α α β β β γ γ γ δ δ δ ε ε ε ζ ζ ζ η η η θ θ θ ι ι ι κ κ κ λ λ λ μ μ μ ν ν ν ξ ξ ξ ο ο ο π π π ρ ρ ρ ς ς ς σ σ σ τ τ τ υ υ υ φ φ φ χ χ χ ψ ψ ψ ω ω ω ϑ ϑ ϑ ϒ ϒ ϒ ϖ ϖ ϖ • • • … … … ′ ′ ′ ″ ″ ″ ‾ ‾ ‾ ⁄ ⁄ ⁄ ℘ ℘ ℘ ℑ ℑ ℑ ℜ ℜ ℜ ™ ™ ™ ℵ ℵ ℵ ← ← ← ↑ ↑ ↑ → → → ↓ ↓ ↓ ↔ ↔ ↔ ↵ ↵ ↵ ⇐ ⇐ ⇐ ⇑ ⇑ ⇑ ⇒ ⇒ ⇒ ⇓ ⇓ ⇓ ⇔ ⇔ ⇔ ∀ ∀ ∀ ∂ ∂ ∂ ∃ ∃ ∃ ∅ ∅ ∅ ∇ ∇ ∇ ∈ ∈ ∈ ∉ ∉ ∉ ∋ ∋ ∋ ∏ ∏ ∏ ∑ ∑ − − − − ∗ ∗ ∗ √ √ √ ∝ ∝ ∝ ∞ ∞ ∞ ∠ ∠ ∠ ∧ ∧ ⊥ ∨ ∨ ⊦ ∩ ∩ ∩ ∪ ∪ ∪ ∫ ∫ ∫ ∴ ∴ ∴ ∼ ∼ ∼ ≅ ≅ ≅ ≈ ≈ ≅ ≠ ≠ ≠ ≡ ≡ ≡ ≤ ≤ ≤ ≥ ≥ ≥ ⊂ ⊂ ⊂ ⊃ ⊃ ⊃ ⊄ ⊄ ⊄ ⊆ ⊆ ⊆ ⊇ ⊇ ⊇ ⊕ ⊕ ⊕ ⊗ ⊗ ⊗ ⊥ ⊥ ⊥ ⋅ ⋅ ⋅ ⌈ ⌈ ⌈ ⌉ ⌉ ⌉ ⌊ ⌊ ⌊ ⌋ ⌋ ⌋ ◊ ◊ ◊ ♠ ♠ ♠ ♣ ♣ ♣ ♥ ♥ ♥ ♦ ♦ ♦   ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ ¦ ¦ ¦ § § § ¨ ¨ ¨ © © © ª ª ª « « « ¬ ¬ ¬ ­ ­ ® ® ® ¯ ¯ ¯ ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ " " " < < < > > > ' '
2018年10月24日
840 阅读
0 评论
0 点赞
2018-08-09
windows下删除node_modules目录的方法
在用npm管理依赖包的项目中,npm会为我们拉取大量的npm包到本地,有时候因为某些依赖出现问题需要重新拉取依赖,或者说我们干脆想删掉整个项目,就会出现node_module下的某些目录或者文件无法删除的情况,这是因为windows环境下删除文件时如果文件名过长或者文件夹名过长导致的,要想删除这些文件,我们可以使用一个npm包,他叫rimraf,使用方法如下:全局安装rimrafnpm install -g rimraf在项目根目录下执行命令 rimraf node_modules 当然,如果你知道node_modules的详细路径,也不用非得进到项目目录下执行当前命令这个工具不只是可以删除node_modules 如果你需要删除其他因为文件过多或者文件名过长的文件或目录,也可以用这个工具删除,当然,前提条件是你的电脑安装了nodejs环境。其实他就是linux系统下的 rm -rf 指令 rm指令删除文件或者目录,参数说明:-r 向下递归,不管有多少级目录,一并删除 -f 直接强行删除,没有任何提示
2018年08月09日
783 阅读
0 评论
0 点赞
2018-04-19
PHP微信和企业微信签名
签名算法签名生成规则如下:参与签名的参数有四个: noncestr(随机字符串), jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分)将这些参数使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string1。有两个注意点:1. 字段值采用原始值,不要进行URL转义;2. 必须严格按照如下格式拼接,不可变动字段顺序。(以上内容摘自企业微信开发文档)具体实现代码如下:index.php<? // 设置跨域请求头 header("Access-Control-Allow-Origin: *"); header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); include_once('Http.php'); // 如果存在缓存文件,用缓存文件中的信息初始化签名数据 $cacheData = array(); if (file_exists('cache.php')) { $cacheData = include_once('cache.php'); // 判断缓存信息是否过期,如果过期删除缓存文件,并将data重置 if (time() - $cacheData['timestamp']/1 >= 7200) { unlink('cache.php'); $cacheData = array(); } } // 企业号信息 $corpId = 'XXXXXXXXXXXXXXXXXX'; $agentId = 'XXXXXXX'; $secret = 'XXXXXXXXXXXXXXXXXXXXX'; $getTokenUrl = 'https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid='.$corpId.'&corpsecret='.$secret; $getTicketUrl = 'https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token='; // 生成nonce_str的方法--参数:生成的长度 function randomkeys($length) { $returnStr=''; $pattern = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; for($i = 0; $i < $length; $i ++) { $returnStr .= $pattern {mt_rand ( 0, 61 )}; } return $returnStr; } // 如果缓存文件中已经存在token if (isset($cacheData['access_token'])) { $token = $cacheData['access_token']; $onceStr = $cacheData['nonce_str']; $timeStamp = $cacheData['timestamp']; } else { $onceStr = randomkeys(16); $timeStamp = time(); // 请求微信接口获取access_token $data = json_decode(send_post($getTokenUrl, array()), true); $token = $data['access_token']; } $getTicketUrl = $getTicketUrl.$token; // 如果缓存文件中已经存在ticket $ticket = ''; if (isset($cacheData['access_token'])) { $ticket = $cacheData['jsapi_ticket']; } else { // 请求微信接口获取ticket $jsTicketRes = json_decode(send_post($getTicketUrl, array()), true); if ($jsTicketRes['errcode'] == 0) { $ticket = $jsTicketRes['ticket']; } } // 缓存ticket和accessToken的配置信息 $cacheData = array( 'jsapi_ticket' => $ticket, 'access_token' => $token, 'nonce_str' => $onceStr, 'timestamp' => $timeStamp ); // 签名的参数信息--参数的key值必须要按照ASCII码排序 $cacheParams = 'jsapi_ticket='.$ticket.'&noncestr='.$onceStr.'×tamp='.$timeStamp.'&url='.urldecode($_POST['signUrl']); // 生成签名的函数--php自带shal算法函数,直接调用即可 function makeSignature($args){ return sha1($args); } // 如果不存在缓存文件,则缓存, 否则不缓存 if (!file_exists('cache.php')) { $path = 'cache.php'; $str = '<?php return '; $str .= var_export($cacheData,true);//数组转字符串 $str .= ';'; file_put_contents($path,$str); } // 生成签名 $signature = makeSignature($cacheParams, $onceStr); // 返回签名信息 echo json_encode(array( 'signature' => $signature, 'timestamp' => $timeStamp, 'onceStr' => $onceStr )); ?> Http.php (http请求工具函数)<? /** * 发送post请求 * @param string $url 请求地址 * @param array $post_data post键值对数据 * @return string */ function send_post($url, $post_data, $type = 'GET') { $postdata = http_build_query($post_data); $options = array( 'http' => array( 'method' => $type, 'header' => 'Content-type:text/json', 'content' => $postdata, 'timeout' => 15 * 60 // 超时时间(单位:s) ) ); $context = stream_context_create($options); $result = file_get_contents($url, false, $context); return $result; } ?> cache.php(生成的access_token和ticket缓存文件)<?php return array ( 'jsapi_ticket' => 'HoagFKDcsGMVCIY2vOjf9i-5XABPegggM0ZkCdJVgMv_WFPkNNg94gBf3pfJ4E8ohxc4b5eXSYEjuq41TYtclA', 'access_token' => 'Kzz-XRg8MEdT3-CbQWcp4f_1VOIFhM-dpvGWUDHuIIYXRhnjF5Pa4F8apWZ7oBjgzS2kruL6LZjayiIx3yS1cr0oUlI1PqiFF9UZ9SlZLwem9JzHlWD02eqAWOTYlEd3JZk0o39D3TuKcn_XHBd4jFl9TCuVEqwe7KtHRheil61LXewtDwClaLznhWykJNYJbaSfpy0-pRmnTb6iwwHoyA', 'nonce_str' => 'CTjKeEp5nwskvgqn', 'timestamp' => 1524100235, );
2018年04月19日
2,430 阅读
2 评论
0 点赞
2017-12-20
修改iview的标签为i-的形式而不是驼峰的形式
前言iview组件库中,通过Vue.use注册了iview到项目中后,在组件内调用iview组件时默认都是通过CamelCase的方式引用iview组件的,HTML本身是大小写不敏感的,vue官网也推荐在template中使用kebab-case标签,iview官网也提供了修改的方法,具体操作如下:首先通过 npm 安装 iview-loadernpm install iview-loader --save-dev配置 webpack(build目录下的webpack.base.conf.js文件),改写平时 vue-loader 的配置,形如:module: { rules: [ { test: /\.vue$/, use: [ { loader: 'vue-loader', options: { } }, { loader: 'iview-loader', options: { prefix: false } } ] } ] }参数 prefix 设置为 true 后,所有 iView 组件标签名都可以使用前缀 i-,例如 、完整的标签名如下:{ 'i-affix': 'Affix', 'i-alert': 'Alert', 'i-auto-complete': 'AutoComplete', 'i-avatar': 'Avatar', 'i-back-top': 'BackTop', 'i-badge': 'Badge', 'i-breadcrumb': 'Breadcrumb', 'i-breadcrumb-item': 'BreadcrumbItem', 'i-button': 'Button', 'i-button-group': 'ButtonGroup', 'i-card': 'Card', 'i-carousel': 'Carousel', 'i-carousel-item': 'CarouselItem', 'i-cascader': 'Cascader', 'i-checkbox': 'Checkbox', 'i-checkbox-group': 'CheckboxGroup', 'i-circle': 'i-circle', 'i-col': 'Col', 'i-collapse': 'Collapse', 'i-color-picker': 'ColorPicker', 'i-date-picker': 'DatePicker', 'i-dropdown': 'Dropdown', 'i-dropdown-item': 'DropdownItem', 'i-dropdown-menu': 'DropdownMenu', 'i-form': 'Form', 'i-form-item': 'FormItem', 'i-icon': 'Icon', 'i-input': 'Input', 'i-input-number': 'InputNumber', 'i-menu': 'Menu', 'i-menu-group': 'MenuGroup', 'i-menu-item': 'MenuItem', 'i-submenu': 'Submenu', 'i-modal': 'Modal', 'i-option': 'Option', 'i-option-group': 'OptionGroup', 'i-page': 'Page', 'i-panel': 'Panel', 'i-poptip': 'Poptip', 'i-progress': 'Progress', 'i-radio': 'Radio', 'i-radio-group': 'RadioGroup', 'i-rate': 'Rate', 'i-row': 'Row', 'i-select': 'Select', 'i-slider': 'Slider', 'i-spin': 'Spin', 'i-step': 'Step', 'i-steps': 'Steps', 'i-switch': 'i-switch', 'i-table': 'Table', 'i-tabs': 'Tabs', 'i-tab-pane': 'TabPane', 'i-tag': 'Tag', 'i-timeline': 'Timeline', 'i-timeline-item': 'TimelineItem', 'i-time-picker': 'TimePicker', 'i-tooltip': 'Tooltip', 'i-transfer': 'Transfer', 'i-tree': 'Tree', 'i-upload': 'Upload' }
2017年12月20日
2,737 阅读
1 评论
0 点赞
1
...
4
5
6