分类 代码如诗 下的文章

项目中用到了弹窗居中，有些弹出正常，有些弹出就模糊。这就比较奇怪了，一样的样式，为啥会出不同的结果呢？

css水平居中是有很多办法的，项目里面用的是这样的居中方式：

position: absolute;
left: 50%;
transform: translateX(-50%);

然后一点一点的去掉样式，定位到是transform导致的！用搜索引擎查了下，果然不止我一个人有问题，看来有解决方案了。

原来出现模糊的原因是因为元素的高度、宽度中有奇数， 使用类似translate(-50%,-50%)之后，相当于宽度、高度除以2的效果，会出现 0.5px。像素就是最小的单位了，要么1，2，3，要么就是0，没有小数。

好在这个项目里面的弹出层宽度是可以设置宽度的，看了下这个模糊的弹出，设置的宽度是865px，好吧，那就改改宽度解决问题！但是，如果是不定高度垂直居中呢？这就比较棘手了，不能用这个方案了，所以transform对于居中不是一个好的解决方案，在实际项目中应该尽量避免此方案！

所以，如果考虑兼容就老老实实的用table + table-cell方式去居中，不考虑兼容的话使用flex方式去居中！

问题

本地vue-cli启动了一个项目只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试。

原因

vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问地址是localhost:端口号。

解决

  1. 查看config文件夹下的 index.js，将dev中将host重新定义为：0.0.0.0即可。
  2. 修改package.json中script下dev的值，在后面加入--host 0.0.0.0 也可以解决
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 0.0.0.0",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

表单修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

- 阅读剩余部分 -

  1. 1
  2. ...
  3. 5
  4. 6
  5. 7
  6. 8
  7. 9
  8. 10
  9. 11