html input 椭圆,样式问题，border-radius失效。设置input 文本框的 placeholder 的颜色等...

## 样式问题 ##

### 1、父元素设置了border-radius，子元素应用了transform，并且父元素设置了overflow:hidden，但是却失效？ ###

// 给父元素设置

{

position:relative;

z-index:1;

}

### 2、设置input 文本框的 placeholder 的颜色 ###

input::-webkit-input-placeholder{

color:rgba(144,147,153,1);

}

**3、如何设置body背景色，height:100%,不生效？**

同时设置html，body的高度

html,body{

height:100%；

}

或

body{

height: 100vh; // 代表占屏幕100%

}

**4、一像素边框的问题**

.row {

position: relative;

&:after{

content: "";

position: absolute;

left: 0;

top: 0;

width: 200%;

border-bottom:1px solid #e6e6e6;

color: red;

height: 200%;

-webkit-transform-origin: left top;

transform-origin: left top;

-webkit-transform: scale(0.5);

transform: scale(0.5);

pointer-events: none; /* 防止点击触发 */

box-sizing: border-box;

}

}

**5、css属性touch-action:none;**

该属性会导致安卓页面无法滚动，慎用!

**6、去除ios 手机端input输入框的内阴影**

input{

-webkit-appearance: none;

}

**7、安卓手机端div里面在包一层div，文字展示不居中的问题。**

最好给div设置padding ，不固定高度和不设置line-height；

**是由于fixed定位引起的，改成absolute就解决了。**

.box{

position: absolute;

}

**9、div实现背景色和背景图片同时存在**

{

background-color: #fff;

background-image:url('../../assets/img/model-bg.png');

background-repeat: no-repeat;

}

**10、css 制作椭圆**

> border-radius可以单独设置水平和垂直的半径，只需要用一个斜杠(/)分隔这二个值就行。

> 此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。

{

width: 150px;

height: 100px;

border-radius: 50%/50%; //简写属性：border-radius:50%

background: brown;

}

**11、图片居中显示**

object-fit: cover;

## 调试工具 ##

### 1、Weinre远程调试工具 ###

简单的步骤：

- 本地全局安装weinre , 命令行：npm install -g weinre

- 在本地启动一个检测器：weinre --boundHost 1.2.3.4 (IP为本地IP地址)

- 在浏览器访问此地址：http://1.2.3.4:8080

- 把下面这一串东西，放在你需要调试的页面里：

- 点击链接打开：http://1.2.3.4:8080/client/#anonymous

2、vconsole 日志打印

import VConsole from 'vconsole'

var vConsole = new VConsole();

### 3、fiddler抓包也需要支持https ###

解决方案：fiddler需要安装信任证书，手机也需要安装信任证书，在浏览器里面打开

http://1.2.3.4:8888 // 本地IP地址+端口号

4、charles 手机端抓包，需要安装证书

手机浏览器输入：chls.pro/ssl ，去下载证书。

手机-设置-安全与隐私-更多安全下载-从sd卡安装证书 - 找到之前在浏览器下载的证书

## vue相关问题 ##

### 1、vue 如何获取拉回数据后图片的高度？ ###

:src="userInfo.profilePicture"

alt

class="img-picture"

v-if="userInfo.profilePicture"

ref="myImg"

@load="imageFn"

>

imageFn() {

console.log(this.$refs.myImg.offsetHeight);

console.log(this.$refs.myImg.offsetWidth);

},

**2、vue中同一个dom节点，v-if与v-for不推荐同时使用，官方解答：**

> 不推荐同时使用 v-if 和 v-for。 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

**3、vue v-for 中更改item 属性值后，v-show不生效的问题**

添加this.$forceUpdate();进行强制渲染，效果实现。

因为数据层次太多，render函数没有自动更新，需手动强制刷新。

**4、这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消**

> beforeRouteLeave(to, from, next) {

> if (to.path === '/votes/subject') {

> next('/task-list');

> } else {

> next();

> }

> }

**5、element UI 自定义传参的解决方法**

这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件，要想知道选的是哪个？

v-model="state4"

:fetch-suggestions="querySearchAsync"

placeholder="请输入内容"

@select="handleSelect"

>

**解决方案：**

v-model="state4"

:fetch-suggestions="querySearchAsync"

placeholder="请输入内容"

@select="((item)=>{handleSelect(item, index)})"

// 写个闭包就可以了，index表示第几个组件

>

**6、element-UI 框架 el-input 触发不了 @key.enter事件**

placeholder="账号"

@keyup.enter="doLogin">

**解决方案：使用@key.center.native**

placeholder="账号"

@keyup.enter.native="doLogin">