- 博客(103)
- 收藏
- 关注
RSS订阅
原创 关于前端的那些事儿~
简述CSS的盒子模型：盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)两种方式：content-box：标准盒模型（W3C盒模型）border-box：怪异盒模型（ IE 盒子模型）一般浏览器和IE9+默认值是content-box两者区别：content-box：padding和border不被包含在定义的width和heigh...
2020-07-21 18:31:53
360
原创 VS code常用插件
进入文件>首选项>设置，打开设置界面，在常用设置下找到Editor:Word Wrap选项，默认为off,设置为on即可。4.Bracket Pair Colorizer（将匹配的括号染成相同的颜色，便于快速找到代码块）5.open in browser 使用默认浏览器打开文件，如html。2.Auto Rename Tag （自动完成另一侧标签的同步修改）1.Auto Close Tag （自动闭合HTML/XML标签）6.GitLens 多人协同合作时可以看到代码是谁编辑的。
2024-02-19 11:05:09
211
转载 关于el-form中的el-input回车自动刷新页面
可能是因为在回车键按下时，表单提交事件被触发，从而导致整个页面重新加载。可以通过在 @keyup.enter.native阻止默认的表单提交行为。给el-form的设置@submit.native.prevent="return false;给其中一个input设置display:none属性。回车会因为页面的自动刷新。
2024-01-24 10:54:58
195
1
原创 vue组件传值：子传父 $emit
案例-自定义事件案例-删除列表项在子组件中设置自定义事件，触发父组件的监听事件函数调用this.$emit(自定义事件名 XXX, 数据传递) 在父组件中定义事件监听函数，并引用子组件标签上 v-on 绑定事件监听。@自定义事件名=事件监听函数 <child @xxx="deleteHobby"> < /child>如图：将B页面（子）事件 传到 A页面（父）A页面引入B组件显示具体写法：代码如下：A页面（父组件）<!-- @自定义事件.
2022-05-26 16:48:33
427
原创 vue组件传值：父传子 props
案例-表格渲染如图：将A页面（父）传到 B页面（子）A页面引入B组件显示具体写法：代码如下：A页面（父组件）<tableChild :tableDataChild = "tableData"></tableChild><!-- <tableChild :tableData= "tableData"></tableChild> -->import tableChild from "./tableModule";expor.
2022-05-26 14:44:18
1033
1
原创 vue组件传值：父传子 props传递的类型和写法
props写法方式：1.指定传递属性名 ,数组形式props: ['id', 'name','list'] //不限制数据类型 2.指定传递属性名和数据类型,对象形式props: { id: Number, name: String, isRequired: Boolean, list: Array, info: Object, addFn: Function }3.指定属性名、数据类型、必要性、默认值props: { // 基础的类型检查 (`null` .
2022-05-26 12:11:17
1837
原创 根据接口返回数字展示对应的状态文字
<el-button>{{status}}</el-button>methods(){ async getList() { const res = await this.$api.queryVoucherLog(参数); const {data} = res; this.tableData = data?.map((item) => { item.status = this.getStatus(item.status);
2022-05-10 10:57:13
398
原创 vue 判断页面是首次进入还是再次刷新
需求：默认打开页面请求相应的接口，执行任务当页面刷新时则代表放弃该任务，请求新的任务进行执行created(){ //刷新页面代表放弃任务 let refreshNumsValue //判断页面是否含有缓存，有则代表再次刷新，无则代表首次进入页面 if(localStorage.getItem("refreshNums")){ refreshNumsValue = Number(localStorage.getItem("refreshNums"));.
2022-05-09 19:00:46
1908
原创 vue组件传值：非父子传值 $bus（总线）
比如将A页面中的事件传到B页面需求：管理后台右上角用户信息当B页面点击时需弹出确认框并请求接口判断；其他页面点击则直接跳转//A页面 navBar.vue<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-item @click.native="jumpPage"> 任务明细 </el-dropdown-item> <el-dro
2022-05-09 18:54:12
1033
原创 判断点击的是不是同一个内容，优化请求接口
data() { return { clickContent:null, content:"" } }; },if (this.clickContent== null) { console.log("第一次点击"); //请求接口 } else { if (this.clickContent != this.content) { console.log("点击的不同"); //请求接口 }
2022-04-29 11:36:04
169
原创 获取地址栏参数 验证地址参数 query
例：“https://baidu.com/?aa=zhangsan&bb=C080000003&cc=MBA&sign=CF24FBB255B0BE66EF0D151A”let searchs = window.location.search 获取？后部分在这里插入代码片function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$).
2022-03-01 16:31:12
254
原创 element ui----关于el-tooltip提示文字多行/多行显示
<el-tooltip class="item" effect="dark" placement="top-start"> <!-- 使用插槽 --> <div slot="content" class="tooltip-content"> <div> 第一行 </div> <div> 第二行 </div> </div>
2022-02-17 14:42:25
2144
原创 将邮件模板内容拷贝到邮箱中（含样式）
注：邮件样式仅支持行内，且不支持部分CSS3样式<div> <div class="fixBtn"> <el-button type="primary" @click="copyInfo()">复制</el-button> </div> <!-- 复制内容开始 --> <div ref="htmlData"> <div style="width: 700px.
2022-02-15 16:02:59
1133
1
原创 vxe-table处理分页
<vxe-pager align="center" size="mini" background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump',
2022-02-09 12:00:52
2997
原创 滚动条样式修改
::-webkit-scrollbar { width: 8px; height: 10px;} ::-webkit-scrollbar-track { background: rgb(239, 239, 239); border-radius: 2px;} ::-webkit-scrollbar-thumb { background: #bfbfbf; border-radius: 10px;} ::-webkit-scrollbar-thumb:hover { b
2022-02-09 11:31:49
267
原创 动态类添加，根据条件判断添加对应样式类
方式一:class="['其它类名（可选）', {'btn1': 判断条件}, {'btn2': 判断条件}, {'btn3': (item.status)==3}].btn1{ border: 1px solid #f2f6fc;}.btn2{ border: 1px solid #409eff;}.btn3{ border: 1px solid #E6A23C;}方式二:class="条件1 == 条件2 ? '添加类名' : .
2022-01-26 13:27:25
1296
原创 间隔X秒执行函数
节流：延迟X秒执行函数（在规定时间内执行一次）只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。<button @click="save">保存</button>data(){ return{ timeout: null, }}, methods: { save() { if (this.timeout) { clearTimeout(this.timeout);.
2022-01-11 16:07:42
195
原创 后端返回的数据中带换行符，前端渲染时处理-vue
<span v-html="text"></span>data() { return { text: '', }},mounted() { let str = 'PHONE00644[2021123109442733041111]订单已锁定，不能生效！；\nPHONE00645[202112310945032522217]订单已锁定，不能生效！；\nPHONE0063[2021123109451054533337]订单已锁定，不能生效！；\n
2022-01-04 14:06:02
1038
原创 npm run dev 启动一半卡住不动问题
因为这个项目是我用来平时写demo和测试的，没有关联仓库，不注意修改了啥也不清楚，再一次打开就一直启动不了，如图：重启不管用卸载依赖包重新安装不管用我要崩溃了…然后挨个注释路由组件，哎，找到问题了template只能存在一个根元素，这里不知道什么时候敲了个字母导致的错误以后遇到这个问题可以先从路由文件开始部分注释看一看...
2021-12-20 13:48:44
4593
5
原创 Element UI文件拖拽上传至oss（结合vxe弹框）
<el-button size="small" type="primary" @click="addFile()">新增文件</el-button> <vxe-modal ref="xModal" v-model="attachment" row-id="id" title="上传文件"
2021-11-24 10:13:25
432
原创 for in 和 for of 的使用及区别
浅显说明：for in遍历获取对象的key值、value值，for of不可遍历对象for in遍历的是数组的索引，for of遍历的是数组元素值。记住for in 遍历对象 for of 遍历数组即可let data1 = [ { "id":"1","projectNo":"001","projectName":"测试项目1" }, { "id":"2","projectNo":"002",".
2021-11-10 16:14:44
444
原创 数据整合（数组里面嵌套多层数组）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script&
2021-11-10 15:28:02
1527
原创 将对象转为需要的数组形式
let aa = { meeting_site_photos: "会议现场照片&&线下会议，需能显示会议规模的照片", other: "其他&&其他", material: "易拉宝，横幅等物料&&如有" } let ccc = [] for (let i in aa) { let info = aa[i].split('&&') ccc.push({ key: i, v.
2021-11-10 10:09:57
414
原创 调用view.officeapps.live.com预览文档（word、ppt、xls），解决无法读取oss私有文件问题
encodeURIComponent(url)let result= "http://xxx.oss-cn-shanghai.aliyuncs.com/report/work.docx?OSSAccessKeyId=LTAI4GGvJTbm7fTKs&Expires=1636425239&Signature=c6xf8qQ5rV78Y%3D"let resultNew= encodeURIComponent(result)let url= 'http://view.officeap.
2021-11-09 10:49:37
10608
6
原创 获取url后缀，截取字符串，判断数组是否包含某个元素（indexOf()、lastIndexOf()、substring()）
indexOf()indexOf方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。也可以检索数组元素首次出现的位置var str2="Hello world!"console.log(str2.indexOf("e")) //1console.log(str2.indexOf("Hello")) //0console.log(str2.indexOf("World")) //-1console.log(str2.indexOf("world")) //6var f.
2021-11-08 15:57:22
570
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人