归纳总结
span内容溢出显示省略号，鼠标悬停显示完整内容
html:
<span class="ellipsis" :title="data.span">{{data.span}}</span>
css:
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 20em; /* 20个字 */
display: inline-block;
}
注意: 如<span>标签样式不生效，使用<div class="ellipsis">包裹并传递样式。
echarts柱状图x轴坐标显示不全
xAxis : [
{
axisLabel: {
// 显示所有x轴标签显示
interval: 0,
// 逆时针旋转45度
rotate: 45
}
}
]
左侧三角鱼头效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鱼头形状</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e0f7fa;
}
.fish-head {
width: 0;
height: 0;
border-left: 100px solid #00796b; /* 三角形的左边 */
border-top: 50px solid transparent; /* 三角形的上边 */
border-bottom: 50px solid transparent; /* 三角形的下边 */
transform: scaleX(-1); /* 水平翻转 */
}
</style>
</head>
<body>
<div class="fish-head"></div>
</body>
</html>
左侧双三角叠加鱼尾效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鱼尾巴形状</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e0f7fa;
}
.fish-tail {
position: relative;
width: 0;
height: 0;
}
/* 第一个三角形 */
.fish-tail::before {
content: '';
width: 0;
height: 0;
border-left: 50px solid #00796b; /* 三角形的颜色 */
border-top: 25px solid transparent; /* 上边透明 */
border-bottom: 25px solid transparent; /* 下边透明 */
position: absolute;
top: 50%; /* 垂直居中 */
transform: translateY(-50%) rotate(180deg); /* 旋转180度 */
left: 0;
}
/* 第二个三角形 */
.fish-tail::after {
content: '';
width: 0;
height: 0;
border-left: 50px solid #00796b; /* 三角形的颜色 */
border-top: 25px solid transparent; /* 上边透明 */
border-bottom: 25px solid transparent; /* 下边透明 */
position: absolute;
left: 40px;
top: 50%; /* 垂直居中 */
transform: translateY(-50%) rotate(180deg); /* 旋转180度 */
}
</style>
</head>
<body>
<div class="fish-tail"></div>
</body>
</html>
获取汉字拼音码
// 拼音声母可能的首字母
const PINYIN_INITIAL_CONSONANT_LETTERS = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('');
// 拼音声母对应的边界中文
const PINYIN_BOUNDARY_CHAR = '驁簿錯鵽樲鰒餜靃攟鬠纙鞪黁漚曝裠鶸蜶籜鶩鑂韻糳'.split('');
/**
* 获取拼音首字母（大写）, 如果不是中文，返回原字符
* 示例
* '中文' => 'ZW'
* '中文123' => 'ZW123'
* 'abc' => 'abc'
*/
function getChinesePinyinAbbreviation(str) {
// 空字符串直接返回
if (!str) {
return '';
}
if (str.length > 1) {
return str.split('').map(getChinesePinyinAbbreviation).join('');
}
// 判断字符是否为中文,不是中文返回原字符
if (/[^\u4e00-\u9fa5]/.test(str)) {
return str;
}
const index = PINYIN_BOUNDARY_CHAR.findIndex((char) => {
return char.localeCompare(str, 'zh-CN-u-co-pinyin') >= 0;
});
return PINYIN_INITIAL_CONSONANT_LETTERS[index];
}
console.log(getChinesePinyinAbbreviation("中医科"))
JS 的call()和apply()
在 JavaScript 中，每个函数对象都带有
call()和apply()方法，即Function.prototype.call()和Function.prototype.apply()。 这两个方法都是挂载在原型上的。
call()和apply()这两个方法的作用可以简单归纳为改变this指向，从而让我们的this指向不在是谁调用了函数就指向谁。
let obj1 = {
name: "张三",
age: 24,
user: function (args) {
console.log("姓名：", this.name);
console.log("年龄：", this.age);
console.log("参数", args);
}
}
let obj2 = {
name: "李四",
age: 30,
user: function (args) {
console.log("姓名：", this.name);
console.log("年龄：", this.age);
console.log("参数", args);
}
}
// 正常的调用
obj1.user('我是参数');
obj2.user('我是参数');
// 改变this指向
obj1.user.call(obj2, "我是参数"); // 使用call方法改变
obj2.user.apply(obj1, ["我是参数"]); // 使用apply方法改变