苏落

摘要： 实现效果： 如上所示，需要改变每个步骤的图标，在process和finish下显示不同颜色。 实现代码： 1.html： <el-steps :active="active"> <el-step title="企业基本信息"> <i class="step01" slot="icon"></i> < 阅读全文

摘要： 有时候需要预览PDF文件，需要实现可放大、缩小、下载、打印等功能，我使用了iframe框架。 有时候需要嵌套一个外来页面进行展示，且需要通过地址传入一些参数。 实现效果： 实现代码： <iframe :src="pageUrl" frameborder="0" style="width: 100%; 阅读全文

摘要： 实现效果： 进入页面时，获取到当前时间，可以按秒更新 实现代码： setInterval(()=>{ let date= new Date(); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' 阅读全文

摘要： margin指外边距，padding指内边距，在盒模型中（暂不考虑部分浏览器兼容问题）： 默认情况下，元素的宽度与高度计算方式如下： width(宽) + padding(内边距) + border(边框) = 元素实际宽度 height(高) + padding(内边距) + border(边框) 阅读全文

摘要： 通过点击 复制 按钮复制对应的内容，然后Ctrl+v实现粘贴。 实现效果： 实现代码： 1.html： <el-button @click="clickCopy(item)">复制</el-button> 2.js方法： //点击复制 clickCopy(item){ let url = item. 阅读全文

摘要： 级联选择器如下： 基本用法： <el-cascader v-model="value" :options="options" @change="handleChange"> </el-cascader> 操作： 1.后端返回的数据格式名称跟前端需要的名称不一致： 使用:props动态改变 :prop 阅读全文

摘要： 在UI框架中，表格通过:data来给行数据赋值，生成多行数据，一般列是固定的，不能改变。 想要实现动态改变列，可以通过循环。 实现效果： 实现代码： 1.子组件： <template> <div class="contrainer"> <el-table :data="tableData" styl 阅读全文

摘要： 使用websocket建立客户端与服务器的双向连接 实现效果： 实现代码： 1.init方法： path变量： 2.建立连接： 3.给服务端发送消息： 4.接收消息： 5.断开连接： 6.错误提醒方法： 注意： 1.可以手动关闭websocket连接：this.socket.close(); 2.若 阅读全文

摘要： 文本有3种显示办法： 1.默认显示，按照浏览器的默认处理； 2.不换行，用省略号...显示； 3.强制换行，涉及到是否单词内换行； 实现效果： 1.默认显示，按照浏览器的默认处理； 2.不换行，用省略号...显示； 3.强制换行； 单词内不换行： 单词内换行： 实现代码： html: <div cl 阅读全文

摘要： 比如在一个vue项目中，需要重复使用某个方法或是某个数据，可以将该方法/数据封装在一个js文件中，然后在需要使用该方法/数据的.vue文件中直接导入该js文件，使用js文件中的方法/数据。 实现代码： 使用js文件中的方法： 1.js： export default{ //时间戳转换为正常时间格式 阅读全文