- 博客(54)
- 收藏
- 关注
RSS订阅
原创 vue的slot插槽如何使用和理解？
slot插槽：分为三种类型：匿名插槽、具名插槽、作用域插槽；简单来说，就是在子组件内放一个slot标签，作为占位符；具体展示什么，是父组件决定的，下面举三个小例子；1、匿名插槽子组件代码如下：<template> <div> <header>公用头部</header> <section>公用主体部分</section> <slot></slot> <!--此为匿
2021-08-05 15:49:07
1048
1
原创 vue 注册组件的方法有哪些？
vue 注册组件的常用方法有局部注册和全局注册局部注册使用就是哪里需要就引入，全局注册就是在main,js中挂载局部注册组件使用：父组件代码如下：<template> <div> <childA></childA> </div></template><script>import childA from "@/components/childA"; //导入组件export default {
2021-08-05 11:27:41
1113
1
原创 vue父传子、子传父、兄弟组件之间传值如何实现？
1、父传子：在子组件标签上绑定自定义属性名toChildVal,属性值为父组件需要传递的数据val;子组件内部通过props接受自定义属性名toChildVal输入框输入传值父组件代码如下：<template> <div> <input type="text" v-model="val"> <childA :toChildVal="val" style="margin-top:20px"></childA> <
2021-08-04 19:21:38
554
1
原创 element-ui 自定义日历组件calendar怎么实现？
最近做了一个自定义日历组件的功能，主要是对某些日期添加不同的标记，效果图如下：话不多说，代码如下，拿去即用：<template> <div> <el-col class="dayEL" :span="12"> <el-calendar style="height: 530px;" v-model="nowdate"> <template #dateCell="{data}"> <
2021-08-04 11:20:15
4174
3
原创 vuex使用方法（语法糖和modules使用）
上一篇文章我们介绍了vuex的基本使用方法，但是当你项目比较大，vuex的数据比较多，使用过程中，你就会发现，有很多问题第一个问题是：数据不太容易维护改进方案：因为你的所有同步和异步方法都写在了一个index.js文件中，其实我们可以通过modules划分来解决这个问题第二个问题是：我们获取数据，更改数据代码过于繁琐之前写法如下：获取数据时：使用 this.store.state.xxx提交同步方法时：使用this.store.state.xxx提交同步方法时：使用 this.store.
2021-08-03 17:19:07
736
1
原创 vuex的基本使用（超级详细）
vuex在vue中起到一个数据状态共享的作用，类似于一个数据大仓库，接下来具体讲下vuex的使用方法。主要讲述如何定义数据，组件内如何获取数据，如何同步，异步更改数据1、在src目录下新建store文件夹，在store文件夹下新建index.js文件2、main.js引用import store from './store'new Vue({ router, store, render: h => h(App)}).$mount('#app')3、index.js下代码如下
2021-08-03 15:14:41
2743
1
原创 前端怎么解析pdf流文件，并展示在页面上
前言：最近做了一个在前端展示发票的功能，后端接口返回ofd格式的文件，前端获取到ofd格式的下载文件url，然后通过url调用后端接口，获取到pfd流文件，之后前端需要把流文件转为blob链接在页面展示，步骤如下：1、前端下载vue-pdf插件命令行输入： npm install --save vue-pdf导入组件： import pdf from ‘vue-pdf’注册组件： components: {pdf}data中定义： src: ‘’2、前端请求接口获取pdf流文件页面里展示,不
2021-05-27 15:46:49
10668
26
原创 vsCode保存代码时自动格式化
在编辑器中找到 文件 > 首选项 > 设置 打开settings.json,配置如下代码：{ // "terminal.integrated.shell.windows": "D:\\git\\Git\\bin\\bash.exe", "workbench.colorTheme": "Atom One Dark", "[vue]": { "editor.defaultFormatter": "octref.vetur" },
2020-12-21 17:13:58
2077
原创 js如何删除一个数组中重复的所有对象？
js删除一个数组中重复的所有对象（不是去重）思路如下：1、首先把原始数组赋值给一个新数组newArr，然后循环两个数组，当属性值完全相同时，记录count计数器的大小；2、判断count是否大于1，大于1说明重复；3、删除重复对象，索引集合为indexArr，记得每次删除，索引减一，因为每次删除，newArr数组都会改变代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> &l
2020-09-18 22:57:47
4627
原创 vue表格实现固定表头和首列
前言前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，你们抄个什么劲？有意义？？？没办法，只有自己写一个了。效果图实现思路1、首先分为四部分，左上角固定不动的表头，表头部分，首列部分，表格主体部分2、整个表格添加定位position: relative；左上角表头添加position: fixed;3、给白色主体部分添加滚动监听事
2020-07-08 15:26:38
8125
9
原创 vue怎么让子元素横向内容过多，产生滚动条
vue子元素过多，产生横向滚动条1. 步骤：完整代码如下<template> <div> <div class="box"> <div v-for="(item,i) in 4" :key="item"></div> </div> </div></template><style scoped lang="scss"> .box{ width:375
2020-06-09 21:59:17
2183
4
原创 uniapp 使用uni-popup组件时，禁止蒙层下方滑动，禁止点击弹窗外关闭弹窗如何实现？
uniapp 使用uni-popup组件时，禁止蒙层下方滑动，禁止点击弹窗外关闭弹窗如何实现？
2022-11-10 18:23:41
4813
3
原创 js 数组对象获取某个属性集合怎么处理？
let arr = [ { a: "张三1", b: "李四1", c: "王五1" }, { a: "张三2", b: "李四2", c: "王五2" }, { a: "张三3", b: "李四3", c: "王五3" }, ]; let newArr = arr.map(item => item.a) console.log(..
2022-04-06 11:09:20
604
原创 vue对象新增属性、删除属性，直接通过下标修改数组、页面未更新如何处理？
使用this.$set（）方法处理，具体如下：<template> <div class="home"> <div v-show="obj.sex"> 性别：{{obj.sex}} </div> <button @click="addSex">添加性别</button> <div> {{arr}} </div> <button @
2022-03-23 15:13:46
1754
原创 vue 隔代传值provide/inject方法如何使用？（响应式）
vue 组件传值的方法有很多，但是项目中有些时候需要隔代传值，例如从曾祖父代网曾孙子代传值，普通的父子传值就比较麻烦，而使用vuex又不太划算，那么这个时候可以使用provide/inject方法；可以隔很多代往下传，但是必须是从上往下传代码如下所示：爷爷组件代码如下：<template> <div class="home"> <button @click="tap">爷爷组件传值</button> <child1><
2022-03-03 15:57:07
914
原创 element 表格里，每一行都循环使用el-popover组件，关闭按钮失效问题如何解决？
代码如下，拿去就用：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .item:hover
2022-03-02 16:55:26
1302
原创 element 下拉框如何套输入框？
代码如下：<el-form-item> <el-input v-model="formData.number" placeholder="请输入账号" clearable> <el-select v-model="formData.type" slot="prepend" placeholder="请选择类型"> <el-option label="微信" value="1"></el-option> <e
2022-01-06 14:23:29
1354
原创 element 表格翻页勾选带分页（记忆勾选）如何实现？
不多bb，代码拿走不谢，代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <di
2021-12-24 09:48:26
1384
1
原创 vue手写轮播图
代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
2021-11-05 17:06:08
758
原创 pc端中间内容1200，宽度减少，主题内容左右留白，横向滚动展示主体内容如何实现？
效果如下图：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2021-11-05 10:57:09
255
原创 vue 监听刷新事件如何写？
在网上找了很多都不能用，用下方这串代码，亲测有用，直接放在mounted执行即可： mounted() { window.addEventListener("load", () => { //写入你想要执行的代码 }); },
2021-10-21 16:15:29
1666
5
原创 vue rem自适应布局如何实现？
找到main.js,最下方加上如下代码即可实现（页面中写代码时把设计稿除以100即可，例如：100px就是1rem）：;(function(win) { var tid; function refreshRem() { let designSize = 1920; // 设计图尺寸,如果是移动端改为750 let html = document.documentElement; let wW = html.clientWidth;// 窗口宽度 let r
2021-09-26 19:53:41
401
原创 vue 项目中 sass 如何复用？
前言：vue项目中，我们在使用scss编写代码的时候，有些时候可能会有很多样式代码是重复的，这个时候我们可以把公共的部分提取出来，文件结构如下图：步骤1：在assets目录下新建css目录，存放css资源，在css目录下新建styles.scss 文件，编写代码如下：@mixin publicCss($width,$height){ //publicCss是css方法； $width和$height是入参变量,动态变化 .childBox { > div {
2021-09-23 17:01:28
614
原创 display: inline-flex的妙用以及和display: flex 的区别是什么？
有时候我们使用了display: flex属性后，子元素横向排列，你可能会发现如下图现象：父级元素不设置宽度，背景宽度默认100%，如果这时想让父级元素随着子元素宽度自适应，怎么处理？接下来，上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> .wrap { display: flex;
2021-09-17 14:00:17
5673
原创 手写element 级联面板如何实现？
<!DOCTYPE html><html><head> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <meta charset="UTF-8"> <!-- import CSS --> <style>
2021-09-17 11:34:20
1045
1
原创 element 中如何利用递归函数将一层结构数据组装为树形结构数据？
使用element 中Tree 树形控件时，有时候后端接口没有返回嵌套好的树形结构，而是返回一级的数据源，那我们前端该如何处理呢？重点是调用filters递归函数，代码如下所示：<!DOCTYPE html><html><head> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&
2021-09-15 12:48:44
537
原创 element 下拉菜单el-dropdown如何更改样式？
<el-dropdown trigger="click" placement="bottom"> <span class="el-dropdown-link"> 下拉菜单 </span> <el-dropdown-menu slot="dropdown" class="header-new-drop"> <el-dropdown-item>菜单1</el-dropdown-item> <el-d
2021-09-14 16:01:34
9924
4
原创 svg图标如何修改大小？
//css中写入如下代码，更改宽高即可 .svg-icon { width: 2em; height: 2em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
2021-09-13 14:14:48
10167
原创 js对象赋值，只把相同key赋值给另一个对象怎么做？
let obj = { name: "张三", age: "20"}let newObj = { name: "李四", age: "30", id: "4"}Object.keys(obj).forEach((key) => { obj[key] = newObj[key];});console.log(obj); //obj打印结果为如下：{ name: "李四", age: "30"}...
2021-09-13 10:33:36
1119
原创 element-ui中 el-popover组件如何改变背景色和小三角箭头？
使用过el-popover组件的同学都会发现，直接修改背景色是修改不掉的，重新定义一个类名就可以了，代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.c
2021-09-01 13:54:09
9005
4
原创 element-ui的滚动条组件el-scrollbar（官方没有写）
//在使用时要设置外层容器高度。并且要设置el-scrollbar 的高度为100%<div style="height:600px;"> <el-scrollbar style="height:100%"> <div style="width:700px;height:700px;border:solid;" > test </div> </el-scrollbar> &l
2021-09-01 12:48:00
237
原创 vue 子组件直接修改父组件props传来的值报错如何解决？
报错信息： Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.原因：报错原因：props传值是单向数据流，只能由父组件传递给子组件，子组件被动接受，一旦子组件自己试图修改props中的值，就会报上述错误，这样
2021-08-23 10:36:21
2109
原创 element 日期组件怎么更改placeholder的字体颜色？
/deep/ .el-input__inner,/deep/ .el-date-editor .el-range-input { color: #fff; &::placeholder { color: #fff; } &::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */ color: #fff; } &:-moz-placeholder { /* Mozill
2021-08-16 23:36:05
1254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人