SegmentFault Jamie最新的文章
2020-02-25T18:34:55+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
VUE:computed 和 v-model 配合使用,双向绑定失效
https://segmentfault.com/a/1190000021837203
2020-02-25T18:34:55+08:00
2020-02-25T18:34:55+08:00
Jamie_0912
https://segmentfault.com/u/jamie_520baby
0
<p>今天在实现一个表单赋值并修改的功能时,由于其中数值直观显示不美观,所以使用了 <code>computed</code> 计算属性,同时使用 <code>v-model</code> 的双向绑定,来处理显示。但却发现 v-model 的双向绑定失效了,控制台警告信息如下:</p>
<pre><code>vue.runtime.esm.js?2b0e:619 [Vue warn]: Computed property "versionRule" was assigned to but it has no setter.</code></pre>
<p><img src="/img/bVbDMY1" alt="image.png" title="image.png"></p>
<p>部分代码如下:</p>
<pre><code><a-radio-group v-model="versionRule">
<a-radio-button :value="1">等于</a-radio-button>
<a-radio-button :value="0">不等于</a-radio-button>
</a-radio-group></code></pre>
<pre><code>computed: {
versionRule() {
const { version } = this.data;
return version && /!=;/.test(version) ? 0 : 1;
}
}</code></pre>
<p>查了资料发现是计算属性的这种写法只有 <code>get</code> 方法,而双向绑定控制数据变化,需要数据赋值的功能,如果想赋值,还需要增加 <code>set</code> 方法。<br>将computed部分改成如下写法就可以了</p>
<pre><code>computed: {
versionRule: {
get() {
const { version } = this.data;
return version && /!=;/.test(version) ? 0 : 1;
},
set(val) {
const { version } = this.data;
if (version) {
const temp = version.replace(/=;/g, '').replace(/!/g, '');
this.data.version = (val ? '=;' : '!=;') + temp;
} else {
this.data.version = val ? '=;' : '!=;';
}
}
}
}</code></pre>
<p>按 <code>get</code> 的反向逻辑写出 <code>set</code> 方法就可以了。</p>
将本地已有项目关联到github的新建的项目中
https://segmentfault.com/a/1190000021719019
2020-02-10T20:37:52+08:00
2020-02-10T20:37:52+08:00
Jamie_0912
https://segmentfault.com/u/jamie_520baby
0
<h4>一:clone项目到本地,然后复制文件上传</h4>
<h4>二:强行合并两个仓库</h4>
<p>首先,本地项目初始化一个git仓库,并将文件加到新建的git仓库中。<strong>如果本地项目已经是一个git仓库了,请跳过这一步。</strong></p>
<pre><code>git init
git add .
git git commit -m "commit current files"</code></pre>
<p>1、 将本地仓库与远程仓库关联起来</p>
<pre><code>git remote add origin git@github.com:<github username>/<repository name>.git</code></pre>
<p>2、 然后需要先 pull 一下</p>
<pre><code>git pull origin master --allow-unrelated-histories</code></pre>
<p>如果含有共同文件时需要:</p>
<pre><code>git merge origin/master --allow-unrelated-histories</code></pre>
<p>此步骤如果遇到如下错误,请继续看,如未遇到错误,请跳到下一步。</p>
<pre><code>git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.</code></pre>
<blockquote>
<strong>原因</strong>:电脑公钥(publickey)未添加至github,所以无法识别。 因而需要获取本地电脑公钥,然后登录github账号,添加公钥至github.</blockquote>
<ol>
<li>执行命令:<code>cd ~/.ssh</code>、<code>ls</code>,查看本地是否有 SSH 密钥,并且有 id_rsa 、id_rsa_pub、known_hosts。</li>
<li>创建生存密钥:<code>ssh-keygen -t rsa -C “youremail”</code>,按3个回车,密码为空。</li>
<li><img src="/img/bVbDifa" alt="5F6E6157-F09C-449B-96F9-112F97763C95.png" title="5F6E6157-F09C-449B-96F9-112F97763C95.png"></li>
<li>执行 <code>cat id_rsa.pub</code> 进入 id_rsa.pub 复制密钥。</li>
<li>然后登录 github 后,进入个人设置 settings --> ssh and gpg keys --> new ssh key 添加密钥。</li>
<li><img src="/img/bVbDifu" alt="50CF3B6F-5D1E-4304-96B2-D9BD782CD0BD.png" title="50CF3B6F-5D1E-4304-96B2-D9BD782CD0BD.png"></li>
</ol>
<p>3、把本地库的所有内容推送到远程库上</p>
<pre><code>git push -u origin master</code></pre>
<p>用 <code>git push</code> 命令,实际上是把当前分支 <code>master</code> 推送到远程。</p>
<blockquote>注:由于远程库是空的,我们第一次推送 <code>master</code> 分支时,加上了 <code>-u</code> 参数,Git不但会把本地的 <code>master</code> 分支内容推送的远程新的 <code>master</code> 分支,还会把本地的 <code>master</code> 分支和远程的 <code>master</code> 分支关联起来,在以后的推送或者拉取时就可以简化命令。</blockquote>
使用canvas对多图片拼合并导出图片
https://segmentfault.com/a/1190000016153896
2018-08-26T18:03:09+08:00
2018-08-26T18:03:09+08:00
Jamie_0912
https://segmentfault.com/u/jamie_520baby
0
<p>先说下canvas绘图的基本方法,如下:</p>
<pre><code>const myCanvas = document.createElement('canvas');
myCanvas.width = 400;
myCanvas.height = 400;
const ctx = myCanvas.getContext('2d');
const img = new Image();
img.src = "1.jpg";
//当图片加载完毕的时候在drawImage,否则可能图片还没有加载完毕
img.onload=()=>{
ctx.drawImage(img, 0, 0, 100, 50);
}
</code></pre>
<blockquote>
<strong>语法:</strong><br><strong>drawImage(image, x, y)</strong><br>以canvas上指定的坐标点开始,按照图像的原始尺寸大小绘制整个图像。<br><strong>drawImage(image, x, y, width, height)</strong><br>以canvas上指定的坐标点开始,以指定的大小(width和height)绘制整个图像,图像会自动缩放。<br><strong>drawImage(image, imageX, imageY, imageWidth, imageHeight, x, y, width, height)</strong><br>将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以( x, y)为左上角坐标、宽度为width、高度为height的矩形区域中</blockquote>
<p>这次多图拼合的业务场景是做不同内容的定制分享图片,用到的图片元素有,<strong>背景图片</strong>、<strong>外链图片</strong>、<strong>网站logo</strong>、<strong>定制生产的二维码图</strong>,需要解决的问题,都是在画布转图片输出时产出的。主要有3点:<br>1、图片的跨域问题;<br>2、绘制多图,造成的画布污染;<br>3、图片的大小;</p>
<p>首先图片的跨域问题,这个问题在网上已经有很多相关信息,解决办法如下:</p>
<pre><code>img.setAttribute('crossOrigin', 'anonymous');</code></pre>
<p>当解决完跨域问题后,在多图拼合导出后,出现了新的报错信息:<br><code>Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted Canvases may not be exported.</code><br>我发现这个问题时,查看网上的资料,大多也是用上面的跨域方法解决的,可是我明显在我的业务场景里是不管用的。<br>通过对代码的排查,我发现,背景图+二维码图时,并不会报这个错误,如外链图片做了跨域处理,单独使用时,也不会报错。而logo图片都是本地的文件,显然不应该是跨域问题。<br>那么二维码图和背景图能够不出错的原因,应该在于二维码图片源是base64格式的。<br>于是,我试着将logo图使用画布导出base64格式,然后和背景图+二维码图进行拼合,导出时果然没再报错。<br><strong>所有解决多图拼合导出时,Tainted Canvases的问题,应该是将图片元素做成base64的格式,就能够避免了。</strong><br>因为我的业务场景中有外链图片,而且不是所有的外链都对我网站域名做了跨域允许的处理,所以,在生成外链图片的base64数据时,可是使用img.onerror事件的处理,用缺省图替换。</p>
<p>因为有在画总图之前,有对多图的分别处理,因此,使用Promise处理可能会更好一些。</p>
<p>在图片导出的大小问题上,导出时尽量使用</p>
<pre><code>myCanvas.toDataURL('image/jpeg', encoderOptions)
</code></pre>
<blockquote>encoderOptions:可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。</blockquote>
<p>以上个人对canvas拼合多图并导出图片的经验总结。</p>
npm install时,报错 install: `node install.js`安装失败
https://segmentfault.com/a/1190000008474798
2017-02-24T17:33:12+08:00
2017-02-24T17:33:12+08:00
Jamie_0912
https://segmentfault.com/u/jamie_520baby
3
<p>在执行 npm install时,出现如下错误</p>
<pre><code>npm ERR! phantomjs-prebuilt@2.1.14 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1.14 install script 'node install.js
</code></pre>
<p>应该在命令后加参数 --ignore-scripts</p>
<pre><code>npm install --ignore-scripts</code></pre>
解决npm 的 shasum check failed for错误
https://segmentfault.com/a/1190000008073872
2017-01-10T18:44:36+08:00
2017-01-10T18:44:36+08:00
Jamie_0912
https://segmentfault.com/u/jamie_520baby
0
<p>使用npm安装一些包失败,类似如下报错情况:</p>
<pre><code> C:\Program Files\nodejs>npm update npm
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "update" "npm"
npm ERR! node v6.2.0
npm ERR! npm v2.14.19
npm ERR! shasum check failed for C:\Users\kuaima\AppData\Local\Temp\npm-18136-7181dc7d\registry.npmjs.org\npm\-\npm-4.0.5.tgz
npm ERR! Expected: a9c3c00c3c5bd6b0538c71109e019afd9d5b1403
npm ERR! Actual: 229ee9303b213d8ad584a6d4f65b971874d5b0e9
npm ERR! From: https://registry.npmjs.org/npm/-/npm-4.0.5.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! C:\Program Files\nodejs\npm-debug.log</code></pre>
<p>网找到了一篇良心之作——<a href="https://link.segmentfault.com/?enc=VXYD7VoJhzlZnlWd5a7LEg%3D%3D.pLDlV6qfZjj2bkwNE3Mm5nxvtbHzVZTYumTwtkz0HZyE%2FEevM86nIPZrJb4YFo5ta9KwA8o0tA%2FTlPKLiquNZg%3D%3D" rel="nofollow">npm install 无响应解决方案 </a>(来自<a href="https://link.segmentfault.com/?enc=a3VUDPsKwQZY%2BMTVwZctcA%3D%3D.HtrhtVa7YArz0ImCQgEvps7Dh4rAe9MpsDc3KG6eN0k%3D" rel="nofollow">体验盒子</a>),给出了3种解决方案,均可解决 npm install 慢、npm install 无响应、npm install 无法安装的问题。</p>
<h2><strong>方法一:使用cnpm,用<a href="https://link.segmentfault.com/?enc=VlZKAwz%2B33pyWiGl6s4DgQ%3D%3D.apn6uQe4NimvgN9n8GRRXED2qGhpfpB%2FQAPF%2B1KecIs%3D" rel="nofollow">淘宝 NPM 镜像</a></strong></h2>
<p>安装</p>
<pre><code>$ npm install cnpm -g --registry=https://registry.npm.taobao.org</code></pre>
<p>上面这种镜像使用方式将配置写死,下次用的时候配置还在。<br>附:搜索镜像: <a href="https://link.segmentfault.com/?enc=fKmZ2CKuvsSrSKX6EIobew%3D%3D.i2ywdJX%2F7Po0r9NacN8BZRKJCJQgosmjCE86lKvTrGs%3D" rel="nofollow">http://cnpmjs.org</a></p>
<p>安装模块 | <code>$ cnpm install [name]</code><br>从 registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPMregistry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.</p>
<p>同步模块 | <code>$ cnpm sync [moduleName]</code></p>
<p>注意:cnpm支持 npm 除了 publish 之外的所有命令,也就是不支持publish,当然这并不影响我们使用,publish时换回npm即可,这样也能解决npm install无响应的问题。</p>
<h2><strong>方法二:使用smart-npm,用淘宝NPM镜像</strong></h2>
<blockquote><p>智能的 npm,让你在中国使用 npm 时,下载速度更快,使用更方便! <br>由于用 npm 时,默认它会访问国外资源,所以会非常卡,有时甚至会被墙。 <br><strong>smart-npm</strong> 可以在我们使用 npm install 时自动从国内的镜像下载资源,而在我们使用 npm publish 又能发布到官方的 registry 上。</p></blockquote>
<p>安装</p>
<pre><code>npm install --global smart-npm --registry=https://registry.npm.taobao.org/</code></pre>
<p>如果 window 用户安装最新版本不成功的话,可以试试安装 smart-npm@1。这样做的原因是,<br>npm 的升级使得在 mac 上无法通过 bin 别名的方式覆盖原来的 npm, 只能通过先删除原来的 npm link 文件,再创建一个新的,但这种方式在 window 上可能会有问题。 所以,如果你是 window 用户,并且通过上面脚本无法安装成功的话,可以用下面脚本再试试。</p>
<pre><code>npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/</code></pre>
<p>安装成功后默认会在你的 npm 用户配置文件 ~/.npmrc 中添加淘宝的 registry。</p>
<p>卸载</p>
<pre><code>npm smart uninstall # 2.x.x 版本的 smart-npm 在卸载前需要先执行此脚本
npm uninstall --global smart-npm</code></pre>
<p>注意:如果直接执行 npm uninstall 会导致找不到 npm 文件</p>
<p><strong>Mac 或 Linux 用户可以使用下面命令恢复之前备份的 npm</strong></p>
<pre><code>mv $(which npm-original) $(dirname $(which npm-original))/npm</code></pre>
<p>使用</p>
<ol>
<li><p>安装后系统的 npm 会被替换了,如果你要使用原生的 npm 命令,请用 npm-original 。</p></li>
<li><p>新的 npm 会自动根据你使用的命令切换 registry,当你使用 publish, config, adduser, star 等(<a href="https://link.segmentfault.com/?enc=P2WVYuy7tYNj5%2FE4Nwz%2FIA%3D%3D.ed2%2Fr1LkJcIrS4ScUrllEoIrxKaF9%2FHRQ40AMyaO%2BzmQSH1r%2BmCQTZmZyDzltFdqk719whM5MZKwBYR7ZhRodw%3D%3D" rel="nofollow">click here to see more</a>) 命令时,会强制使用官方的 registry <a href="https://link.segmentfault.com/?enc=X4QTGkw2L3EQ%2BmA4vWV7Eg%3D%3D.WAE3FBBFZUuYakjGm%2B1VcBK%2BX7mE5gE6h%2FQmUPznpe4%3D" rel="nofollow">https://registry.npmjs.org</a>;当你使用其它命令时,都会使用淘宝的镜像<a href="https://link.segmentfault.com/?enc=319OGhCgw63SJDFtZSV92Q%3D%3D.fcsyih%2BoS04dtECLBVEmsZ1OnfB4WEs%2BLP0D%2BmegXBD0bwpnaKOdOF73rB9ISOnz" rel="nofollow">https://registry.npm.taobao.org/</a>。</p></li>
</ol>
<ul>
<li><p>如果要强制使用官方的 registry, 只要在命令后面加上 <em>--npm</em> 即可。<br> 比如: npm install jquery --npm,就会使用官方的 registry 去拉取 jquery。(当镜像没有及时更新时,用此会选项很有效)</p></li>
<li><p>如果要强制使用某个 registry 时,只要在命令后面添加 <em>registry</em> 参数即可。<br> 比如:npm install jquery --registry=<a href="https://link.segmentfault.com/?enc=ND35XRCY5wN%2FB9f6dEwzKQ%3D%3D.LQe9Xvxs8VpW2L75VMJ8nNHkIwe7OdrrPr8KRupUHAU%3D" rel="nofollow">https://r.cnpmjs.org</a>,就会使用你指定的 registry 去拉取 jquery。</p></li>
<li><p>如果你想修改默认的淘宝镜像或者官方的 registry,可以在你的环境变量中添加这两个参数:NPM_OFFICIAL_REGISTRY,NPM_MIRROR_REGISTRY,以此来修改默认的官方 registry 和 淘宝镜像 registry。<a href="https://link.segmentfault.com/?enc=cPEPpfRweMQ5NnH0ujPz6Q%3D%3D.uQjo%2BM3T%2FddA4LUB2pQvFU3EG2GyXCb577ebCgL6ZJ2Orr0HVwsnYXRf3m%2FQCzOEPZJANhEH%2B2WqQtpjoL72lA%3D%3D" rel="nofollow">更多环境变量的配置请点击这里</a></p></li>
</ul>
<h2>方法三:使用nrm</h2>
<p>nrm允许你快速地在如下 NPM 源间切换,现已支持now include: npm, cnpm, taobao,nj(nodejitsu), rednpm。注意:nrm只是一个源管理器,也不能使用publish命令。</p>
<p>安装</p>
<pre><code>$ npm install -g nrm</code></pre>
<p>示例</p>
<pre><code>$ nrm ls
npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
$ nrm use cnpm //switch registry to cnpm
Registry has been set to: http://r.cnpmjs.org/</code></pre>
<p>使用</p>
<pre><code>Usage: nrm [options] [command]
Commands:
ls List all the registries
use Change registry to registry
add [home] Add one custom registry
del Delete one custom registry
home [browser] Open the homepage of registry with optional browser
test [registry] Show the response time for one or all registries
help Print this help
Options:
-h, --help output usage information
-V, --version output the version number
</code></pre>
<p>增加源 | <code>nrm add [home]</code><br>删除源 | <code>nrm del</code><br>测试速度 | <code>nrm test</code></p>
<blockquote><p><strong>参考</strong><br><a href="https://link.segmentfault.com/?enc=DUjJfBcy1LInbuonUuASeg%3D%3D.%2BdmfD1e1Epu%2FKj3t417T6lI%2Be4JKmc%2FgXI4aUwRJqkRugWQxXJT8JikP08VqUoDoRDfwMgy2rOGDPeh5%2BhF8xw%3D%3D" rel="nofollow">http://www.uedbox.com/npm-ins...</a> <br><a href="https://link.segmentfault.com/?enc=B0EwXEUgs4Iq2XCdX2bqeQ%3D%3D.z85J%2BCmZ3Nf7tmflC%2BIvqtTQFD6aQei6hYZ%2Fu56XXdM%3D" rel="nofollow">http://www.uedbox.com/</a> <a href="https://link.segmentfault.com/?enc=SNDfS25NFQxnkvYpzdVIdA%3D%3D.Ty2oa7Yr%2F5b%2BpMroygEDNlvS23PkMmOX3TD0PJ2KHtQ%3D" rel="nofollow">https://npm.taobao.org/</a> <br><a href="https://link.segmentfault.com/?enc=nZCqeP2VL8mEgrhmARnblw%3D%3D.dwXTfG4X5Pme9lDLfpsvzumhlT84ME8uKVi7QXx3gbYfey8BIeMNDbR2D70q%2F1vaRtrsPkHB8EiNqslaHrjVEg%3D%3D" rel="nofollow">http://qiu8310.github.io/smar...</a> <br><a href="https://link.segmentfault.com/?enc=coF6qZQitAJJTng7l1uVqQ%3D%3D.hj3CTovgF%2BKbu5PqpdW%2FfP9%2Fo7A49%2BQIFjLiNhlOShYaXe%2FjYKp1CYCRao5u2CWDUcn1lkwrcgTvj0Kldi7COQ%3D%3D" rel="nofollow">http://qiu8310.github.io/smar...</a></p></blockquote>
关于box-flex实现自适应页面内容均分
https://segmentfault.com/a/1190000000469780
2014-04-15T16:23:39+08:00
2014-04-15T16:23:39+08:00
Jamie_0912
https://segmentfault.com/u/jamie_520baby
3
<p>先献出代码:</p>
<pre><code> <div class="flex-box">
<div style="background-color: #0ff">sssssssss</div>
<div style="background-color: #0f0">ddddddddddddddddddddddddddddd</div>
<div style="background-color: #f00">3</div>
</div>
<style type="text/css">
.flex-box{
display: -webkit-box;
display: -moz-box;
display: box;
width: 60%;
border:2px #000 solid;
}
.flex-box > div{
height: 50px;
width:1%;
-webkit-box-flex:1 ;
-moz-box-flex: 1;
box-flex: 1;
word-break: break-all;
}
</style>
</code></pre>
<p>这样 页面是属于自适应的,同时你可以将内容均分,效果图如下:<br><img src="http://segmentfault.com/img/bVb8l0" alt="内容等分"></p>
<p>之前在使用box-flex时的做法没有加上width:1%,会出现这样的问题:<br>
内容字符相同时是均等的,如下图:<br><img src="http://segmentfault.com/img/bVb8mF" alt="请输入图片描述"><br>
当内容字符个数不相同时就会出现下面的情况:<br><img src="http://segmentfault.com/img/bVb8mJ" alt="请输入图片描述"><br>
图片的宽度不再相同,但是我们可以细心的发现,虽然内容宽度不能等分了,但是每个部分的空白处的宽度确实相同的。</p>
<p>对于想要自适应页面的内容进行平均分配,很容易的也想到了width:%的做法,对于3等分,大家都知道会有不整除的问题,出现下图的状况:<br><img src="http://segmentfault.com/img/bVb8mV" alt="请输入图片描述"><br>
当然你也可以很精确的将数值设置成33.3333%看起来貌似也没有多大的缝隙,可是,当页面为6等分,7等分的时候呢?这个缝隙势必会影响页面的布局的。<br>
再回想到刚刚发现的box-flex的作用,是我想到了将两者放在一起会出什么效果,果然和预期的结果一样,无论总宽度如何变化,内容字符是多是少,都能够保证三等分配的效果,如下图:<br><img src="http://segmentfault.com/img/bVb8m6" alt="请输入图片描述"><br>
而此时貌似是33%还是20%好像都没有关系了,那为了将来也许真会出现9等分配的状况吧,所以,把width设置为1%貌似更安全些。<br>
自适应页面中7等分啦<br><img src="http://segmentfault.com/img/bVb8nb" alt="请输入图片描述"></p>