2023/3/16常用

置顶 lipenghao111

已于 2023-10-31 18:34:26 修改

阅读量94

点赞数

文章标签： servlet java excel

于 2023-03-16 11:06:18 首次发布

本文链接：https://blog.csdn.net/lipenghao111/article/details/129581953

版权

一、解决img拖拽有虚影的问题 draggable=“false”

1.1 document.querySelector("img").setAttribute("draggable", false)

1.2<img draggable="false" src="./imgs.png">

二、去除input number属性右边的上下箭头

<style>
      input::-webkit-outer-spin-button,
       input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
</style>

element-ui input里面type=number的去除上下箭头

::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
::v-deep input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
    -moz-appearance: textfield;
}

//第三种 完美解决
// 注意type类型是text
<el-input v-model="amount" type="text" @input="allNumber(amount)" >
</el-input>
 
<script>
  export default {
    data() {
     return {
        amount: '',
     }
    },
    methods: {
      allNumber(value) {
         value = value.replace(/[^\d]/g,""); //只能输入数字
         this.amount = value  //注意这里是string，你要数字类型记得自己转一下
         console.log(this.amount)
      }
    }
  };
</script>

三、去除textarea内容域右下角的拉动框

3.1resize: none;

四、图片变模糊处理

4.1.里面的单位越大越模糊

filter: blur(5px);

五、css盒子宽度计算

5.1calc(100%-10%)

六、点击按钮返回顶部

七、p标签不换行的原因

7.1 产生原因:1.英文会将不包含空格.换行的连续文本认为是一个词,所以在默认情况下不换行; 2.中文的话标点文字都是独立的,所以会自动换行;

7.2 解决方案: 在英文字不改变内容的情况下,通过设置p元素的 p{ word-wrap:break-word }

八、overflow 滑动样式

.biaoge::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.biaoge::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #9e9e9e;
    box-shadow: inset 0 0 5px rgba(0, 122, 204);
}
.biaoge::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #ededed;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}

九、超出范围显示省略号

div{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
超出二行显示省略号
div{
 overflow: hidden; 
 text-overflow: ellipsis; 
 display: -webkit-box; 
 -webkit-box-orient: vertical; 
 -webkit-line-clamp: 2;
}

　//状态和对应的颜色

                
   //变量
            basic: {
                state: {
                    "NEW": "待审核",
                    "ACCEPT": "审核通过",
                    "REFUSED": "审核拒绝",
                    "COMPLETE": "已发放",
                    "DELETE": "作废",
                },
                stateColor: {
                    "NEW": "",
                    "ACCEPT": "primary",
                    "REFUSED": "warning",
                    "COMPLETE": "success",
                    "DELETE": "error",
                },
            },
//状态和颜色
<v-chip :color="basic.stateColor[item.State]" small>{{ basic.state[item.State] }}</v-chip>