前端常见操作-持续更新_const disableddate =ref()-优快云博客

本文链接：https://blog.youkuaiyun.com/oBoLuoMi1/article/details/120041119

这篇博客分享了CSS的一些实用技巧，包括透明度的兼容写法、滚动条样式定制、元素居中和文字省略等。此外，还介绍了ElementUi中el-date-picker组件的配置，如何实现禁止选择大于当前年份或月份的日期。同时，提供了人民币格式化的函数。涉及到的技术包括CSS、前端框架ElementUi以及JavaScript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS常用的方法技巧：

/*透明度兼容写法*/
{
    filter:alpha(opacity=50);   
    -moz-opacity:0.5;   
    -khtml-opacity: 0.5;   
    opacity: 0.5;  
}

/*滚动条*/
&::-webkit-scrollbar{width: 5px;height:5px;background-color:#ccc;}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track{background-color:#eee;}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb{background-color:#ccc;}
 

/*图标上下居中*/
i{display: inline-block; vertical-align: middle; margin-top: -2px;}


/*超出省略号1行*/
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;


/*超出省略号2行*/
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;



/*ul列表前面加点*/
list-style: inside; color:#999;


/*图片居中显示*/
div.image{
	width:100%; height:152px; position: relative;
	img{
		position: absolute; top:0; left:0; right:0; bottom: 0; margin: auto;
		display: block; max-height:152px; max-width:100%; border-radius: 4px;
	}
}

常用写不出来的单词：

description：描述
avatar ：头像

版本问题：

//vue项目中使用sass，注意版本问题
cnpm i node-sass@4.14.1 cnpm i sass-loader@7.3.1 --save-dev

常用方法：

//清空对象里的每个属性的值
Object.keys(data.newData).forEach(key => data.newData[key] = '');

打包成war包：

建立：install.bat

例如： yarn test & cd dist & jar -cvf oabi.war *

说明：打包命令 & cd dist & jar -cvf  名称.war

ElementUi el-date-picker大于当前年份置为灰色不可选

<!--
    大于当前年份置为 灰色 不可选
-->
<!--HTML部分-->
<el-date-picker
  type="year"
  placeholder="选择年份"
  format="YYYY"  
  value-format="YYYY"
   :disabled-date="disabledDate"
>
</el-date-picker>

<!--script部分-->

const disabledDate = (time) => {
  let currentMonth=new Date().getMonth()+1;
  if(currentMonth==1){
    let timeStamp = Date.now();
    timeStamp -= (365 * 24 * 60 * 60 * 1000);
    return time.getTime() > timeStamp
  }else{
    return time.getTime() > Date.now()
  }
}


<!--当前年月日之后不可选-->
const disabledDate=(time)=>{
   const currentDate = new Date();
   return time> currentDate;
}

<!--大于2020年小于本年的年份-->
const disabledDate = (time) => {
    const now = new Date();
    const minYear = 2020;
    const maxYear = now.getFullYear();
    const timeYear = time.getFullYear();
    return timeYear < minYear || timeYear > maxYear;
}

ElementUi el-date-picker 大于当前月份置为灰色不可选

<el-date-picker
   type="month"
   placeholder="选择月份"
   format="YYYY-MM"  
   value-format="YYYY-MM"
   :disabled-date="disabledMonth"
 />


const disabledMonth=(time)=>{
    let timestamp = Date.now();
    let dateObj = new Date(timestamp);
    dateObj.setMonth(dateObj.getMonth() - 1);
    return time.getTime() >= dateObj
}

人民币格式化

export const fixedToMoney=(value)=>{
    if (!value) return '--'
    var intPart = Number(value).toFixed(0) // 获取整数部分
    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
    var floatPart = '.00' //预定义小数部分
    var value2Array = value.toFixed(2).toString().split('.')
    // =2表示数据有小数位
    if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分
        if (floatPart.length === 1) {
            // 补0
            return intPartFormat + '.' + floatPart + '0'
        } else {
            return intPartFormat + '.' + floatPart
        }
    } else {
        return intPartFormat + floatPart
    }
}

动画按钮


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷按钮</title>
    <style>
        /* 在这里添加 CSS 样式 */


	body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background: #1a1a1a;
}

.button-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glow-button {
    position: relative;
    width: 240px;
    height: 72px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--btn-color);
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    line-height: 72px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 1px var(--btn-color);
    transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

.glow-button:hover {
    background-color: var(--btn-color);
    color: #fff;
    box-shadow: 0 0 5px var(--btn-color), 0 0 25px var(--btn-color), 0 0 50px var(--btn-color), 0 0 100px var(--btn-color);
}

.glow-button:active {
    background-color: var(--btn-color);
    color: #fff;
    box-shadow: 0 0 15px var(--btn-color), 0 0 30px var(--btn-color), 0 0 60px var(--btn-color), 0 0 120px var(--btn-color);
    transform: scale(0.95);
}

.border-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.line {
    position: absolute;
    display: block;
    background: linear-gradient(90deg, transparent, var(--btn-color));
}

.top {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    animation: topAnim 4s linear infinite;
}

@keyframes topAnim {
    0% {
        left: -100%;
    }
    50%,
    100% {
        left: 100%;
    }
}

.right {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    animation: rightAnim 4s linear infinite 1s;
    background: linear-gradient(180deg, transparent, var(--btn-color));
}

@keyframes rightAnim {
    0% {
        top: -100%;
    }
    50%,
    100% {
        top: 100%;
    }
}

.bottom {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    animation: bottomAnim 4s linear infinite 2s;
    background: linear-gradient(270deg, transparent, var(--btn-color));
}

@keyframes bottomAnim {
    0% {
        right: -100%;
    }
    50%,
    100% {
        right: 100%;
    }
}

.left {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    animation: leftAnim 4s linear infinite 3s;
    background: linear-gradient(360deg, transparent, var(--btn-color));
}

@keyframes leftAnim {
    0% {
        bottom: -100%;
    }
    50%,
    100% {
        bottom: 100%;
    }
}


    </style>
</head>
<body>
    <div class="button-container">
        <button class="glow-button" onclick="handleClick()" style="--btn-color: #2af598;">
            炫酷按钮
            <div class="border-lines">
                <span class="line top"></span>
                <span class="line right"></span>
                <span class="line bottom"></span>
                <span class="line left"></span>
            </div>
        </button>
    </div>

    <script>
        function handleClick() {
            console.log('Button clicked!');
        }
    </script>
</body>
</html>