css的样式

最新推荐文章于 2024-08-21 23:06:40 发布

Ybittersweet

最新推荐文章于 2024-08-21 23:06:40 发布

阅读量42

点赞数

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/Ybittersweet/article/details/128700311

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了前端开发中的一些常见技巧，包括使用text-overflow实现文本溢出隐藏并在hover时显示完整内容，table边框合并，input去除边框的方法，以及渐变色背景的CSS写法。此外，还展示了在Vue项目中关闭eslint检查的配置，以及实现el-table的前端搜索功能的代码示例。

摘要由CSDN通过智能技术生成

文本溢出隐藏+hover时默认显示完整内容

:content=“name”
text-overflow: ellipsis;

  <el-tooltip class="item" effect="dark" :content="name" placement="top">
          <span class="header-ellipsis"> {{ name }}</span>
        </el-tooltip>
        
 .header-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 230px;
  display: inline-block;
}

table边框合并

<table border="1" cellspacing="0"></table>
table, td{
    border: 1px solid #000000;
    border-collapse: collapse;
}

input去掉边框

  <input type="text" name="" class="myttpp">
  .myttpp{
    border: none;
    background: #ccc;
}

渐变色写法

属性值	方向
to top	从下到上
to right	从左到右
to bottom	从上到下
to left	从右到左

background:linear-gradient（方向，开始颜色，结束颜色）；

鼠标hover显示与隐藏

<div class="father">
<div class="child "></div>
</div>
.father .child {
  display: none;
}

.father:hover .child {
  display: block;
}

vue如何关闭eslint检测

vue.config.js文件

module.exports = {
  lintOnSave: false
},

el-table 前端搜索

 <el-table
              :cell-style="{ textAlign: 'center' }"
              height="650"
              :header-cell-style="{ background: '#d6e9fa', color: '#1f2021', textAlign: 'center' }"
              ref="multipleTable"
              :data="tables[0].slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
                    </el-table>
computed: {
    tables() {
      const search = this.searchContent
      //当将input框清空时，使列表自动展示搜索前的完整数据，并返回至首页，防止叠加搜索
      if (this.inputContent == '') {
        this.searchContent = ''
        this.currentPage = 1
        return [this.tableData, (this.count = this.tableData.length)]
      }
      if (search !== '') {
        return [
          this.tableData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return (
                String(dataNews[key])
                  .toLowerCase()
                  .indexOf(search) > -1
              )
            })
          }),
          (this.count = this.tableData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return (
                String(dataNews[key])
                  .toLowerCase()
                  .indexOf(search) > -1
              )
            })
          }).length)
        ]
      }
      return [this.tableData, (this.count = this.tableData.length)]
    }
  },