前端开发中的一些小问题

最新推荐文章于 2024-05-27 18:43:37 发布

留白声

最新推荐文章于 2024-05-27 18:43:37 发布

阅读量1.1k

点赞数 1

文章标签： css javascript vue.js html css3

本文链接：https://blog.csdn.net/weixin_44066182/article/details/117745535

版权

1、移动端的点击事件中，点击后会闪烁或者闪一下有背景颜色的图层：

解决方法：在点击事件的元素中添加如下css代码：-webkit-tap-highlight-color:transparent;

2、文字过长显示省略号：
width: 740px;
/* 内容过长显示成省略号（内容显示为一行） */
white-space: nowrap;/设置不换行/
overflow: hidden; /设置隐藏/
text-overflow: ellipsis; /设置隐藏部分为省略号/

3、隐藏滚动条和设置样式：
谷歌：
.box::-webkit-scrollbar{
display: none;
}
火狐：
.box{
scrollbar-width: none;
}
.box为滚动条的容器
样式：
火狐：
{
scrollbar-color: #e5e5e5 #f7f7f9; / 滑块颜色滚动条背景颜色火狐浏览器 /
scrollbar-width: thin; / 滚动条宽度有三种：thin、auto、none 火狐浏览器*/
}
谷歌：
::-webkit-scrollbar
{
width: 10px;
height: 10px;
}
/定义滚动条轨道内阴影+圆角/
::-webkit-scrollbar-track
{
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
}

/定义滑块内阴影+圆角/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
background-color: rgba(0,0,0,0.1);
}

4、强制不换行：css
white-space:nowrap;

5、粘性布局：css 必须控制位置
position: sticky;
top: 0px;

6、vue中v-for循环 @click.stop 阻止冒泡事件无效：
在组件外层嵌套一个div，在该div中阻止冒泡事件

7、vue中使用bus传值：
安装：npm install vue-bus
main.js中引入：
import Vue from ‘vue’;
import VueBus from ‘vue-bus’;
Vue.use(VueBus);
A组件触发事件：
this. $b u s . e m i t (" p a r a m e t e r N a m e ", p a r a m s) ； B 组件接收事件： t h i s .$ bus.on(“parameterName”,function(value){
　　console.log(value)
});
组件销毁时解除事件绑定：
destroyed:function(){
　　this.$bus.off(“parameterName”)
}

8、vue-cli3中动态路由打包后的文件可指定“名称”，相同的名称打包成同一个文件
/* webpackChunkName: ‘homeAndDashboard’ /
homeAndDashboard 为文件名
const DashboardCustomizedHome = () => import(/ webpackChunkName: ‘homeAndDashboard’ */ ‘@/components/dashboard/CustomizedHome.vue’)

9、vue中的环境区分：
npm run serve时会把process.env.NODE_ENV设置为‘development’；

npm run build 时会把process.env.NODE_ENV设置为‘production’；

10、vue中自适应处理：

安装 flexible和 postcss-px2rem
npm i lib-flexible --save
npm i postcss-px2rem --save

2. 引入lib-flexible：
在项目入口文件main.js 中引入lib-flexible

3. 配置postcss-px2rem

module.exports = {
css: {
	loaderOptions: {
		postcss: {
			plugins: [
				// 把px单位换算成rem单位
				require("postcss-pxtorem")({
					// rootValue: 144, // 换算的基数(设计图750的根字体为32)；一般来说设计图为750，rootValue设置为75
					rootValue:192,
					selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
					propList: ["*"], //可以从px更改为rem的属性。
					minPixelValue: 2 // 设置要替换的最小像素值。
				})
			]
		}
	}
 }
}

11、vue-cli项目中使用外部字体

下载外部字体（放入静态资源中如：assets）
创建css文件引入字体文件，如：

@font-face {
  font-family: Calibri;
  src: url('../font/Calibri.ttf');
}

main.js中引入css文件
全局使用字体，在入口App.js文件中：css代码

*{
  font-family: 'Calibri';
}

12、谷歌浏览器模拟微信浏览器：

打开Chrome，F12打开开发人员工具，点击菜单按钮-----More Tools -----Network condition打开Network condition窗口
User agent选项，选择Custom（自定义），然后在下面的文本框中输入Android或者Ios的UA就可以了
UA:
安卓微信UA： mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352

Ios微信UA： mozilla/5.0 (iphone; cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0

13、css图片渐变：

background: linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0)),url(../../assets/images/home/head_bg.jpg) no-repeat;

14、毛玻璃特效：css
如body设置了背景图片，div想要拥有毛玻璃特效，只需要添加一个伪元素（after、before），并设置与body相同的背景图片，filter属性至关重要，z-index让他置于父元素的后面，z-index相对于父元素
代码如下：

.tools::before{
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-image:url('../assets/images/home/mobile_bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    filter: blur(20px);
    z-index: -1;
}

15、密码自动填充背景颜色去除：

input:-webkit-autofill {  
	 -webkit-text-fill-color: white !important;  
	 -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  
	 background-color:transparent;  
	 background-image: none;  
	 transition: background-color 50000s ease-in-out 0s;  
}

16、设置请求头（axios）

第一种：axios(url,data,{headers: {‘Content-Type’: ‘application/json’}}).then
请求头默认为：application/json，无需设置
第二种：axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

17、nginx配置：
nginx配置时，使用了https(ssl证书)，需要监听443端口；如不监听，可能出现，在本地（localhost）请求时接口可用，在线上（如：https://internal.com）服务器时，无法使用
即：使用https请求协议时，需要监听443端口

18、火狐中使用elementUI中select下拉框时，方法中有需要event时，
如@focus=“focus” 默认传递event时，该event与谷歌中的event中的属性有区别，
如火狐中没有path，可使用target代替

19、浏览器内核：
火狐：gecko
谷歌：blink 过去—webkit
Safari苹果：webkit
IE：Trident

20、js操作数组的方法：
arr.push():在尾部添加元素
arr.unshift():在头部添加元素
arr.splice(index,size):指定位置删除元素，下标、删除数量，如有第三个参数则为添加，元素为第三个以及后面的参数值
arr.pop:删除末尾元素
arr.shift:删除头部元素

21、es6使用set去重：
let arr = [1,1,2,3,‘abd’,‘abc’,‘ccc’,‘abc’]
arr = […new Set(arr)]
如上操作后：arr 的值为 [1,2,3,‘abd’,‘ccc’]

22、html原生table中，使td中的文字固定在头部：

valign="top"
<td valign="top">表格</td>

23、图片（img标签）相对于周围元素的水平和垂直飘浮方式

left 图像向左飘浮
right 图像向右飘浮
middle 图像垂直居中飘浮
top 图像向上飘浮
bottom 图像向下飘浮

24、css设置鼠标样式： cursor: zoom-in; 放大镜

25、通过js判断是否触底：
dom.clientHeight：某个元素可视区域高度
dom.scrollTop：某个元素向上滚动你的高度
dom.scrollHeight：某个元素真实的文档高度
已触底：scrollTop + clientHeight = scrollHeight
未触底：scrollTop + clientHeight < scrollHeight

26、js元素插入：
需要插入的对象：A ; 指定插入的对象：B
在元素B之前插入：B.parentNode.insertBefore(A,B)
在元素B之后：B.parentNode.insertBefore(A,B.nextSibling)
为元素B追加一个子元素A(最后)：B.appendChild(A)

27、js和html拖拽：
第一步：为元素设置可拖拽(拖拽对象) — draggable=“true”
第二步：设置拖拽元素可释放的区域(目标区域或对象) — οndrοp=“drop(event)” οndragοver=“dragOver(event)”
注意：在拖拽事件中记得设置阻止默认事件：e.preventDefault();

28、js获取某个元素的高度（height）:

let dom = document.getElementById("demo") dom.style.height //通过这条代码获取高度，结果为空，因为这条代码仅能获取行内样式，如下：

dom.style.height //结果不为空如下代码可以获取元素高度，无论以何种方式定义的高度： window.getComputedStyle(dom).getPropertyValue('height')

29、类似于苹果中透明效果（高斯模糊）
backdrop-filter: saturate(180%) blur(20px);

留白声

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发中的一些小问题

1、移动端的点击事件中，点击后会闪烁或者闪一下有背景颜色的图层：解决方法：在点击事件的元素中添加如下css代码：-webkit-tap-highlight-color:transparent;2、文字过长显示省略号：width: 740px;/* 内容过长显示成省略号（内容显示为一行） */white-space: nowrap;/设置不换行/overflow: hidden; /设置隐藏/text-overflow: ellipsis; /设置隐藏部分为省略号/3、隐藏滚动条和设置样式：
复制链接

扫一扫