前端通用样式调整方法(整理版)

本篇文章主要记录一些前端修改样式的通用写法，文章也会一直持续不断更新…

🔍推荐几个好用的工具网页

• 图片工具
  • 在线裁剪照片尺寸：https://phototool.cn/resize/
• 颜色工具
  • 渐变色在线查询：https://photokit.com/colors/color-gradient/?lang=zh
  • hex-rgb色值转换：https://tool.ip138.com/rgbhex/
  • 颜色选择器-色卡查询：https://www.ip138.com/yanse/selection.htm
  • 颜色选择器-明暗调节：https://www.fontke.com/tool/rgbschemes/
  • 在线图片取色：https://www.a1sck.com/
• 编码工具
  • 下划线驼峰互转：https://tool.ip138.com/underlinehump/
  • 英文小小写转换工具：https://www.2weima.com/daxiaoxie.html
  • 单词分割工具：https://www.2weima.com/daxiaoxie.html
  • 随机uuid生成器：https://www.hongfu951.com/uuid
  • 百分比计算器：https://gj.aizhan.com/percentage.html
  • JSON视图化：https://www.bejson.com/jsonviewernew/
• 下载工具
  • 文件代理下载：https://respeed.chromiumer.com/

🚩vue3

🖋️关于Dom

➕给ref dom元素添加class

//第一种方式：
ref.value.className = 'clazz'
//第二种方式：
ref.value.classList.add('clazz')

🖋️循环

➕循环map对象

    for (let [key, value] of map) {
        console.log(key + ' = ' + value);
    }

➕map循环遍历数组

（会分配内存空间存储新数组并返回）

	data.map((item, index) => {
		console.log(item) //表示的是每一项
		console.log(index) //表示的是数组的索引
	})

➕forEach循环遍历数组

（不会分配内存空间存储新数组并返回）

	//方法1
	data.forEach((item, index) => {
		console.log(item) //表示的是每一项
		console.log(index) //表示的是数组的索引
	})
	//方法2
	data.forEach(item => {
		console.log(item) //表示的是每一项
	})

➕filter过滤数组

（只保留满足条件的元素，返回一个新的数组，不会改变原来的数组）

	let data = [{
		name: '张三'
	}, {
		name: '李四'
	}, {
		name: '王五'
	}]
	let a = data.filter((item, index) => {
		return item.name == '张三'
	})
	console.log(a)
	

🖋️校验参数是否可用( 是否为空、是否为null… )

  /**
   * @description: 校验空值、null、undefined、[]
   * @param {*} val
   * @return {*}
   */
  verification(val) {
    let valString = val + ""
    let verificationType = ["", "null", "undefined"]
    return verificationType.includes(valString)
  }
  

🖋️时间格式化并自动刷新时间

import { ref, onMounted, onBeforeUnmount  } from 'vue';
import utils from '@/common/utils';

const now = ref();	//页面上取这个值
const getTime = () => {
    now.value = dateFormat(new Date(), 'time');
};
var timer = 0;

onBeforeUnmount(() => {
  clearInterval(timer); //清除定时器
  timer = 0;
});

onMounted(() => {
    timer = setInterval(() => {
        //设置定时器
        getTime(); //自定义事件
    }, 10);
});

utils.js:

const utils = {
  // 时间格式化
  dateFormatTime: (value) => {
    if (value == null) {
      return ''
    } else {
      let date = new Date(value)
      let y = date.getFullYear() // 年
      let MM = date.getMonth() + 1 // 月
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate() // 日
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours() // 时
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()// 分
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()// 秒
      s = s < 10 ? ('0' + s) : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
  },
  // 时间格式化
  dateFormatDate: (value) => {
    if (value == null) {
      return ''
    } else {
      let date = new Date(value)
      let y = date.getFullYear() // 年
      let MM = date.getMonth() + 1 // 月
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate() // 日
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours() // 时
      return y + '-' + MM + '-' + d
    }
  }
};

export default utils;

🖋️定时器

import { onMounted, onUnmounted } from 'vue';
 
const timer = setInterval(() => {
    console.log('定时器触发');
  }, 1000);
  
onUnmounted(() => {
  clearInterval(timer);
});

🖋️存储session会话存储

注释 .

sessionStorage.setItem('xxx/session/xx', JSON.stringify(userInfo));
//获取方式
//let str = sessionStorage.getItem('xxx/session/xx');

🖋️求百分比

/**
 * 求百分比
 * @param  num 当前数
 * @param  total 总数
 */
const getPercent = (num, total) =>{
  num = parseFloat(num);
  total = parseFloat(total);
  if (isNaN(num) || isNaN(total)) {
    return "-";
  }
  return total <= 0? "0%" : Math.round((num / total) * 10000) / 100.0 + "%";
}


//使用方法如下：
GetPercent(1,100)；//结果：1%

🚩css

🖋️文字居中

// align-items: center; /* 这将使子元素垂直居中 */
// justify-content: center; /* 如果你也想水平居中，可以添加这个 */

<div style="display: flex; justify-content: center; align-items: center;">
     <!-- 需要居中的内容..... -->
</div>

🖋️图片自动平铺拉宽

#img {
    background-size: cover; /* 图片填充整个容器，保持宽高比 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 不重复图片 */
    width: 100%; 
    height: 100%;
}

🖋️文字超长自动适应

<div class="text-container">
  这里是一段可能会超长的文本内容，需要在超出容器宽度时自动隐藏并显示省略号(ellipsis)。
</div>

.text-container {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

让文字显示在一行内

<div style="word-break:keep-all;">
   {{ text }}
</div>

🖋️固定文字不换行（固定文字在盒子内）

.text-container {
  word-wrap: break-word; /* 允许在长单词内部换行 */
  word-break: break-all; /* 允许在任意位置换行 */
}

🖋️文字超长带省略号

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

🖋️文字无法选中

.selectable-text {
  -webkit-user-select: auto; /* 针对Safari和Chrome */
  -moz-user-select: auto;    /* 针对Firefox */
  -ms-user-select: auto;     /* 针对IE和Edge */
  user-select: auto;         /* 标准语法 */
}

🚩疑难杂症

🖋️float:right;没有效果怎么办？

如果当前元素是子元素：在子级div 加 position:absolute;right:0px;

学习参考：
https://blog.csdn.net/A1123352950/article/details/132667845