有用的小函数：计算文本DOM渲染到页面的宽度、在Vue中获取客户端ip

84 阅读 0 评论 56 点赞

我是靠谱客的博主懵懂白开水，这篇文章主要介绍有用的小函数：计算文本DOM渲染到页面的宽度、在Vue中获取客户端ip，现在分享给大家，希望可以做个参考。

本文用作个人备份，记录一些有用的小函数

计算文本DOM渲染到页面的实际宽度

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function getTextWidth(text, fontSize) {
const span = document.createElement("span");
span.style.display = "inline-block";
span.style.width = "auto";
span.style.whiteSpace = "nowrap";
span.style.fontSize = fontSize;
span.textContent = text;
document.body.appendChild(span);
const width = span.offsetWidth;
document.body.removeChild(span);
return width;
}

在Vue中获取客户端ip

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
methods:{
ipCallback(data){
// ...这里写处理逻辑
}
},
mounted() {
// 利用jsonp向外部接口获取客户端的外网ip地址
const script = document.createElement("script");
script.src = "https://api.ipify.org?format=jsonp&callback=ipCallback";
// 因为jsonp是通过script标签的src属性来请求数据的，所以需要将回调函数挂载到window上
window.ipCallback = this.ipCallback.bind(this);
document.body.appendChild(script);
},