Electron-vue 中使用 CSS 布局笔记

vue

1. 禁止用户鼠标选中文本、图片等变蓝

user-select: none;

2. 禁止用户拖动图片

-webkit-user-drag: none;

3. Electron 窗体可拖动

.drag {
    -webkit-app-region: drag;
  }

设置该属性后，除拖动外的其它鼠标事件不再响应。在需要响应其它鼠标事件的子元素上，加上：　

.no-drag {
    -webkit-app-region: no-drag;
  }

4. 文本水平 / 垂直居中

　　水平居中： text-align: center ;

　　垂直居中：包含文本的对象中设置相同的 height、line-height 值。

5. 取消 input 和 textarea 的聚焦边框

input { 
　　outline: none 
} 

textarea {
    outline: none
}

6. 取消 textarea 可拖动放大（右下角的）

textarea {
    resize:none
}

7. CSS 保留文本中的空格和换行

　　设置 white-space 属性取值为 pre ，如下所示：

<div style="white-space:pre">AA   BB<div>

8. 窗体不显示滚动条

body { overflow: hidden; }