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


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

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

🚩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

相关推荐

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

    2024-06-09 22:00:02       5 阅读
  2. Vue 自定义组件库通过配置调整样式

    2024-06-09 22:00:02       11 阅读
  3. 前端跨页面通信方法

    2024-06-09 22:00:02       34 阅读
  4. 前端数组常用方法以及解释(手动整理

    2024-06-09 22:00:02       11 阅读
  5. 前端CSS样式(image)

    2024-06-09 22:00:02       11 阅读

最近更新

  1. 10月,2024北京养老展,北京老年生活用品展览会

    2024-06-09 22:00:02       0 阅读
  2. python之面向对象编程

    2024-06-09 22:00:02       0 阅读
  3. Python2.7中os.path模块常用函数记录

    2024-06-09 22:00:02       0 阅读

热门阅读

  1. web 前端开发培训:深入探索与实战应用

    2024-06-09 22:00:02       5 阅读
  2. 线程+线程池+锁

    2024-06-09 22:00:02       5 阅读
  3. 多维vector定义

    2024-06-09 22:00:02       4 阅读
  4. 计算各聚类中心

    2024-06-09 22:00:02       5 阅读
  5. 程序代码问题随时记录

    2024-06-09 22:00:02       6 阅读
  6. 栈和队列的转换

    2024-06-09 22:00:02       4 阅读
  7. 全面解析LG webOS:从开发到智能电视的演进

    2024-06-09 22:00:02       6 阅读
  8. 【CS.SE】Tomcat启动闪退问题解决方法

    2024-06-09 22:00:02       4 阅读