一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

（几乎）完美实现 el-table 列宽自适应

背景 Element UI 是 PC 端比较流行的 Vue.js UI 框架，它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求，组件本身可能没办法满足。最近在项目里就碰到了。 很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数比较多的情况，如果el-table宽度限定在容器内，单元格里的内容就会换行。强制不换行，内容要么在单元格内滚动，要么就会溢出或被截断。 产品想要的效果是：内容保持单行显示，列间距保持一致，表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的，在内容宽度可预知的情况下，也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项，应该是组件本身不支持。 技术方案 于是想到了动态计算内容宽度的方案。网上也有人提过这个思路，做法是根据内容字符数来计算宽度。这种方法有几个局限： 内容必须是文本 不同字符宽度不一，结算结果不够准确 需要在渲染前操作数据，不利于解耦 我采用了另一种思路，还是动态计算内容宽度，但是根据实际渲染后的 DOM 元素宽度，这样就能解决上面三个问题。 具体怎么做呢？通过查看渲染后的 DOM 元素发现，el-table 的表头和内容分别用了一个原生table，通过colgroup设置每列的宽度。就从这里入手，col的name属性值和对应的 td的class值是一致的，这样就可以遍历对应列的所有单元格，找出宽度最大的单元格，用它的内容宽度加上一个边距作为该列的宽度。 具体实现 怎么计算内容宽度呢？这是个比较关键的步骤。渲染后的每个单元格有个.cell类，用white-space: nowrap; overflow: auto;设置为不允许换行，内容超出后可滚动，同时设置display: inline-block;以便计算实际内容宽度。这样，最终的宽度可通过.cell元素的scrollWidth属性得到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function adjustColumnWidth(table) {
  const colgroup = table.querySelector("colgroup");
  const colDefs = [...colgroup.querySelectorAll("col")];
  colDefs.forEach((col) => {
    const clsName = col.getAttribute("name");
    const cells = [
      ...table.querySelectorAll(`td.${clsName}`),
      ...table.querySelectorAll(`th.${clsName}`),
    ];
    // 忽略加了"leave-alone"类的列
    if (cells[0]?.classList?.contains?.("leave-alone")) {
      return;
    }
    const widthList = cells.map((el) => {
      return el.querySelector(".cell")?.scrollWidth || 0;
    });
    const max = Math.max(...widthList);
    const padding = 32;
    table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {
      el.setAttribute("width", max + padding);
    });
  });
}

  中间的探索过程比较繁琐，但最终的代码实现却非常简洁。在什么时候触发列宽计算呢？自然是组件渲染完成后。为了方便重用，我采用了 Vue 自定义指令的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.directive("fit-columns", {
  update() {},
  bind() {},
  inserted(el) {
    setTimeout(() => {
      adjustColumnWidth(el);
    }, 300);
  },
  componentUpdated(el) {
    el.classList.add("r-table");
    setTimeout(() => {
      adjustColumnWidth(el);
    }, 300);
  },
  unbind() {},
});

  更进一步，我封装了一个 Vue 插件叫v-fit-columns，已经发布到 npm 仓库，直接安装即可使用。 安装：

1
npm install v-fit-columns --save

  引入：

1
2
3
import Vue from 'vue';
import Plugin from 'v-fit-columns';
Vue.use(Plugin);

  使用：

1
2
3
4
5
<el-table v-fit-columns>
  <el-table-column label="No." type="index" class-name="leave-alone"></el-table-column>
  <el-table-column label="Name" prop="name"></el-table-column>
  <el-table-column label="Age" prop="age"></el-table-column>
</el-table>

  源码仓库在这：https://github.com/kaysonli/v-fit-columns ，欢迎各位不吝赐教和 Star！ 总结 这个方案多少有点 Hack 的意味，只顾实现需求，可能在其他方面还有点瑕疵，比如渲染完后会稍微闪一下（因为要重新调整宽度，会出现 reflow）。不过从最终实现的效果来看，还算令人满意，至少产品经理提着他的两米大刀走了……他可是为了这个效果，蹲守在我电脑前半个下午，非要我实现不可！在手摸手的胁迫下，总算完事交差了……   from:https://www.cnblogs.com/lzkwin/p/13575805.html

龙生   08 Apr 2021
View Details

js 日期时间的格式化

将日期时间转换为指定格式，如：YYYY-mm-dd HH:MM表示2019-06-06 19:45

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

  用法：

1
2
3
let date = new Date()
dateFormat("YYYY-mm-dd HH:MM", date)
>>> 2019-06-06 19:45`

  2020-11-23: 如果对日期时间处理的需求较多, 推荐moment.js这个日期处理类库, 简单方便. 作者：雷子_ 链接：https://www.jianshu.com/p/49fb78bca621 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   07 Apr 2021
View Details

Vue watch 中 this 注意事项

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: (newVal, oldVal) => {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

  箭头函数要改为function的形式，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: function(newVal, oldVal) {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

    from:https://blog.csdn.net/liubangbo/article/details/115242420

龙生   07 Apr 2021
View Details

CSS 单位 2

CSS 有几个不同的单位用于表示长度。 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。 长度有一个数字和单位组成如 10px, 2em, 等。 数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。 对于一些 CSS 属性，长度可以是负数。 有两种类型的长度单位：相对和绝对。 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 不支持 19.0 不支持 20.0 注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。 相对长度 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。   单位 描述 在线实例 […]

龙生   02 Apr 2021
View Details

CSS cubic-bezier() 函数

实例 从开始到结束的不同速度过渡效果：

1
2
3
4
5
6
7
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

定义与用法 cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。 贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。 从上图我们需要知道的是 cubic-bezier 的取值范围:

1
2
3
4
<span class="pln">P0</span><span class="pun">：默认值</span> <span class="pun">(</span><span class="lit">0</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">)</span><span class="pln">
P1</span><span class="pun">：动态取值</span> <span class="pun">(</span><span class="pln">x1</span><span class="pun">,</span><span class="pln"> y1</span><span class="pun">)</span><span class="pln">
P2</span><span class="pun">：动态取值</span> <span class="pun">(</span><span class="pln">x2</span><span class="pun">,</span><span class="pln"> y2</span><span class="pun">)</span><span class="pln">
P3</span><span class="pun">：默认值</span> <span class="pun">(</span><span class="lit">1</span><span class="pun">,</span> <span class="lit">1</span><span class="pun">)</span>

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。 最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。 cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。 支持版本：CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 函数 cubic-bezier() 4.0 10.0 4.0 3.1 10.5 CSS 语法

1
<span class="pln">cubic</span><span class="pun">-</span><span class="pln">bezier</span><span class="pun">(</span><span class="pln">x1</span><span class="pun">,</span><span class="pln">y1</span><span class="pun">,</span><span class="pln">x2</span><span class="pun">,</span><span class="pln">y2</span><span class="pun">)</span>

值 描述 x1,y1,x2,y2 必需。数字值，x1 和 x2 需要是 0 到 1 的数字。   实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
 
div:hover {
  width:300px;
}
</style>
</head>
<body>
 
<h1>cubic-bezier() 函数</h1>
 
<p>鼠标移动到 div 元素上，查看效果。</p>
 
<div></div>
 
<p><b>注意:</b> Internet Explorer 9 及其更早版本的浏览器不支持该效果。</p>
 
</body>
</html>

  from:https://www.runoob.com/cssref/func-cubic-bezier.html

龙生   02 Apr 2021
View Details

CSS calc() 函数

实例 使用 calc() 函数计算 <div> 元素的宽度:

1
2
3
4
5
6
7
8
9
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 支持版本：CSS3 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。 函数 calc() 26.0 19.0 -webkit- 9.0 16.0 4.0 -moz- 7.0 6.0 -webkit- 15.0 CSS 语法

1
<span class="pln">calc</span><span class="pun">(</span><span class="pln">expression</span><span class="pun">)</span>

值 描述 expression 必须，一个数学表达式，结果将采用运算后的返回值。   from:https://www.runoob.com/cssref/func-calc.html

龙生   02 Apr 2021
View Details

三种JS截取字符串方法

转载: https://www.cnblogs.com/zccfun/p/6054533.html JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" 使用两个参数 alert(stmp.slice(1,5))//从第2个字符开始，到第5个字符；返回"cinn" alert(stmp.substring(1,5));//从第2个字符开始，到第5个字符；返回"cinn" 如果只用一个参数并且为0的话，那么返回整个参数 alert(stmp.slice(0));//返回整个字符串 alert(stmp.substring(0));//返回整个字符串 返回第一个字符 // 1.位位截取 alert(stmp.slice(0,1));//返回"r" alert(stmp.substring(0,1));//返回"r" //上面的例子中我们可以看出slice()和substring()的用法是相同的，返回的值也一样， //但当参数为负数时，他们的返回值却不一样，看下面的例子 alert(stmp.slice(2,-5));//返回"i"；实际上是slice(2,3)，负数加上字符串长度转换成正3，(若第一位 >= 第二位, 则返回空字符串); alert(stmp.substring(2,-5));//返回"rc"； 实际上是substring(2,0),负数都转换为0,  substring总是把较小的数作为起始位置。 // 2. 位位截取 和 位数截取 alert(stmp.substring(1,5))//从第1位开始，截取到第5位；返回"cinn" alert(stmp.substr(1,5));   //从第1位开始，截取5个字符；返回"cinn." var phone = 15989012100; phone.slice(-6) 取倒数后6位(第二个参数不用写0)，return ‘012100 ’； phone.slice(-6，-4) 取倒数后4位到倒数6位，（-6+11，-4+11）=（5,7）；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 日期比较大小 当日期每个月都小1时
var nowdate = new Date();
item = 2016-7-16;
temp = item.split('-');
if (temp[0] != curYear || temp[1] != curMonth) {
    return;
}
temp[1] = parseInt(temp[1]) + 1;
date = new Date(temp.join('-'));
if(date>=nowdate){
执行A；
}else{
执行B；
}

替换指定字符串后的字母

1
2
3
var abc = 'adadada=ss';
var j = abc.substring(abc.indexOf('=')+1,abc.length);
var dsd =abc.replace(j,'haha');  -->   dsd = 'adadada=haha'

  frm:https://blog.csdn.net/qq_38719039/article/details/82219912

龙生   01 Apr 2021
View Details

html直接引用vue和element-ui的方法

代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button round @click="visible = true">圆角按钮</el-button>
        <br>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <br>
        <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"
            active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <br>
        <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
            placeholder="选择时间范围">
        </el-time-picker>
        <el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" placeholder="选择时间范围">
        </el-time-picker>
        <br>
        <el-progress type="circle" :percentage="0"></el-progress>
        <el-progress type="circle" :percentage="25"></el-progress>
        <el-progress type="circle" :percentage="100" status="success"></el-progress>
        <el-progress type="circle" :percentage="70" status="warning"></el-progress>
        <el-progress type="circle" :percentage="50" status="exception"></el-progress>
        <br>
        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
        <br>
        <el-steps :active="1" finish-status="success">
            <el-step title="已付款"></el-step>
            <el-step title="退款中"></el-step>
            <el-step title="已退款"></el-step>
            <el-step title="待结算"></el-step>
            <el-step title="已结算"></el-step>
        </el-steps>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        }
    })
</script>
</html>

效果如图： 总结 到此这篇关于html直接引用vue和element-ui的方法的文章就介绍到这了,更多相关html引用vue和element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！   from:https://www.jb51.net/web/743299.html

龙生   24 Mar 2021
View Details

js对url进行编码和解码（三种方式区别）

*** 只有 0-9[a-Z] $ – _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。 ***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。 1、escape 和 unescape 原理：对除ASCII字母、数字、标点符号 @  *  _  +  –  .  / 以外的其他字符进行编码。 编码：escape('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1" escape('张') 结果："%u5F20" 解码：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1") 结果："http://www.baidu.com?name=zhang@xiao@jie&order=1" unescape("%u5F20") 结果："张" 2、encodeURI 和 decodeURI 原理：返回编码为有效的统一资源标识符 (URI) 的字符串，不会被编码的字符：! @ # $ & * ( ) = : / ; ? + ' encodeURI()是Javascript中真正用来对URL编码的函数。 编码：encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http://www.baidu.com?name=zhang@xiao@jie&order=1" 解码：decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1") 结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1" 3、encodeURIComponent 和 decodeURIComponent 原理：对URL的组成部分进行个别编码，而不用于对整个URL进行编码 编码：encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1" 解码：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1") 　　　"http://www.baidu.com?name=zhang@xiao@jie&order=1"   from:https://www.cnblogs.com/z-one/p/6542955.html

龙生   04 Mar 2021
View Details

Electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。 Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。   比你想象的更简单 如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。 Web 技术 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 开源 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。 跨平台 Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

龙生   05 Feb 2021
View Details
1 … 11 12 13 … 59

Copyright © 2026 Longsheng All rights reserved