备注：<=> 意为等价于； 1、npm install <=> npm i --save <=> -S --save-dev <=> -D npm run start <=> npm start // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev <packname> 工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader… 3、npm i --save <packname> 项目（运行时、发布到生产环境时）依赖；例：antd , element,react… 4、对应关系如下（至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题，用反了项目一样可以跑起来（对于安装依赖正确时），但会给其他看你项目的人带来误解、可能会导致一些bug的出现，还有一些配置的错乱等） 5、使用 npm i 安装package.json里的依赖时，两部分的包都会pull下来 5-1、使用 --prod、 npm i --prod <=> npm i --production // 仅会拉取dependencies中的依赖 5-2、设置NODE_DEV=production时 // 效果同上，仅会拉取dependencies中的依赖 (注意等号两边没空格) 5-2-1、命令行设置（注意不同环境时的"分割符"） window => cmd ：set NODE_ENV=production && xxxx mac => shell : NODE_ENV=production 空格 xxxx 5-2-2、package.json=>script命令中设置 彩蛋：在新建package.json文件时，我们可以使用npm init -y 快速创建（yes 表示一路默认创建，还有 -f 表示 force） from:https://blog.csdn.net/jwl_willon/article/details/81054978
View Details解决方案： npm config set user 0 npm config set unsafe-perm true 报错： Unable to save binary /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor/linux-x64-64 : { Error: EACCES: permission denied, mkdir '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' at Object.mkdirSync (fs.js:753:3) at sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:71:13) at Function.sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:77:24) at checkAndDownloadBinary (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:114:11) at Object.<anonymous> (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/scripts/install.js:157:1) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) errno: -13, syscall: 'mkdir', code: 'EACCES', path: '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' } > node-sass@4.11.0 postinstall /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass > node scripts/build.js ———————————————— 版权声明：本文为CSDN博主「T&K」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/sinat_41780498/article/details/88737365
View Details背景 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
View Details将日期时间转换为指定格式，如：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 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details在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
View DetailsCSS 有几个不同的单位用于表示长度。 一些设置 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 。 相对长度 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 单位 描述 在线实例 […]
View Details实例 从开始到结束的不同速度过渡效果：
|
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
View Details实例 使用 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
View Details转载: 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
View Details代码如下所示：
|
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
View Details