weixin_56993654的博客

原创 vue3.0分页组件

<template> <div class="xtx-pagination"> <a href="javascript:;" @click="changePage(-1)" :class="{ disabled: curPage === 1 }">上一页</a> <span v-if="curPage > 3">...</span> <a href="javascript:;"

原创 利用render函数做面包屑

render 是vue提供的一个渲染函数，优先级大于el,template等选项，用来提供组件结构。vue2.0 render函数提供render(h){}函数用来创建节点vue3.0 函数由 vue 直接提供，需要按需导入 import { h } from ‘vue’this.$slots.default() 获取默认插槽的节点结构，按照要求拼接结构。h函数的传参 tag 标签名|组件名称, props 标签属性|组件属性, node 子节点|多个节点不要在 xtx-bread 组件插槽写

原创 vue 批量自动化注册组件

一:用require提供的函数context,加载某一个目录下的所有.vue后缀的文件,代码写在index.js文件里二:context函数会返回一个导入函数inportFninportFn这个函数有一个keys()属性,能获取所有文件的路径三:遍历文件路径数组,再使用importFn根据路径导入组件对象四:遍历的同时全局注册const importFn=require.context('./',false,/\.vue$/)//参数:第一个是目录,第二个是是否加载子目录,第三是加载的正则匹配

原创 vue3.0 组件数据懒加载

装包:npm i @@vueuse/core@5.3.0// 封装一个通用的方法实现数据的懒加载import { useIntersectionObserver } from '@vueuse/core'import { ref } from 'vue'export const useLazyData = (apiFn) => { // target表示组件的最外层div元素 const target = ref(null) // 懒加载接口返回的数据 const resul

原创 vue 响应拦截器；请求拦截器

第一步:安装 axiosnpm i axios第二步:新建src/utils/request.js模块// 通用接口调用模块import axios from 'axios'import store from '@/store'import router from '@/router'// 接口调用基准路径export const baseURL = ''// 创建一个独立的实例对象const instance = axios.create({ baseURL: baseURL

原创 Vue 3.0 封装轮播图组件

第一步:封装通用的轮播图组件<template> <!-- 轮播图展示 --> <div class="xtx-carousel" @mouseleave="start" @mouseenter="stop"> <ul class="carousel-body"> <li v-for="(item, i) in imgs" :key="i" class="carousel-item" :class="{ fade: i ==

原创 Vue3.0 app.use() 注册全局组件

用**app.use()**注册全局组件,Vue会当做一个插件来使用如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 app 作为参数传入。第一步:先准备好一个将要被全局使用的组件第二步:在一个js文件夹下import PageTools from './PageTools'export default { install: function(app) { app.component('PageT

原创 git 管理项目

第一步 : 初始化git init第二步:添加到本地仓库git add .git commit -m ‘初始化’第三步: 创建远程仓库第四步:添加远程仓库的别名git remote add origin 远程仓库地址第五步:推送代码到远程git push -u origin master第六步:之后每次写好代码,直接git add .git commit -m ‘说明’git push...

原创 vue3项目中,当我们想使用路径别名@提示路径,设置以下配置文件

文件名: jsconfig.json 设置在项目的根下面与src文件夹同级文件内容:```javascript{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"]}

原创 vue3 脚手架创建项目

原创 clientX,pageX,screenX,offsetX的区别

原创 Vue组件的实例

数据相关的有：包括props、data状态，自定义方法，计算属性，监听。<template> <div> <div>路由传递参数{{id}}</div> <div @click="show">控制台打印</div> <div>计算属性{{add}}</div> <Nav /> </div></template><scr

原创 Vue项目打包优化去掉console.log

一:vue.config.js文件中二:在chainWebpack(config){}中配置三:最后的结果chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })}...

原创 less和scss样式穿透的三种写法

1. ::v-deep 在scss中使用<style scoped lang="scss"> ::v-deep img{ width: 100px; height: 100px; }</style> 2. >>> 在less中使用<style scoped lang="less"> >>> img{ width: 100px; height: 100px; }..

原创 props:{}自定义属性在传递数据的过程中是异步操作

props里的值是只读的,不能直接修改props的值,准备修改的时候要把它里面的值转存到data(){return{}}中假如在组件中,操作不到父组件通过自定义属性传来的值得时候,这时,我们可以利用$nextTick()这个回调函数,等DOM全都更新完再操作子组件中props: { // 父级的部门的id id: { type: String, required: true } }methods:{async getD

原创 $nextTick(()=＞{})巧妙解决Vue中异步操作用

Vue是异步执行DOM更新的$nextTick()的原理是等组件的DOM更新完之后再执行回调函数;从而保证回到函数能操作到最新的数据更新后的DOM元素第一步:子组件需要拿到父组件的ID,来渲染页面,父传子,自定义属性props:{}子组件在父组件中,导入,注册,使用import Roles from './components/Roles.vue'components: { Roles }<Roles :id="cId" ref="roles" @cl

原创 ref的作用

获取引用ref添加在普通DOM上,就可获取DOM对象添加在子组件身上,可获取子组件,子组件身上的属性和方法统统可以调用

原创 .native

在Vue组件身上不能绑定事件,绑定的任何事件都是自定义事件所以要通过 .native 这个修饰符,这样就可以把事件变成原生的例如: @click.native="helloFn"

原创 Vue2.0 Vue.use注册全局组件

用Vue.use()注册全局组件,Vue会当做一个插件来使用如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。第一步:先准备好一个将要被全局使用的组件第二步:在一个js文件夹下import PageTools from './PageTools'export default { install: function(Vue) { Vue.component('Page..

原创 数组转Tree结构,非递归的方法

// 把下面例子中平铺的数组包对象的数据转成树形结构//[// { id: '01', pid: '', name: '老王', children: [] },// { id: '02', pid: '01', name: '小王', children: [] },// { id: '03', pid: '02', name: '小小王', children: [] },// { id: '04', pid: '', name: '小张', children: [] },//.

原创 v-model和修饰符.sync的区别

一个组件上只能有一个v-model，.sync修饰符可以有多个v-model的原理<com1 v-model="num"></com1>等价于<com1 :value="num" @input="(val)=>this.num=val"></com1>.sync修饰符的原理// 正常父传子：<com1 :a="num" :b="num2"></com1>// 加上sync之后父传子：<com1..

原创 联想菜单关键字高亮用正则的方法

一:定义一个全局的高亮函数exportconstlightFn=(str,target)=>{constreg=newRegExp(target,'ig')returnstr.replace(reg,match=>{return`<spanstyle="color:red">${match}</span>`})}二:在需要的组件导入这个函数import{lightFn}from...

原创 如何在新项目使用svg-icon组件 步骤

1.安装依赖npm i svg-sprite-loader@4.1.32.配置 vue.config.jsconst path = require('path')function resolve (dir) { return path.join(__dirname, dir)}补充一个配置{ }{ // 省略其他... chainWebpack (config) { // set svg-sprite-loader config.module .r...

原创 当前路由信息对象

router.currentRoute:当前路由信息对象this.$router.options.routes :拿到完整的路由表数据,不同ID的人进入到页面展示的路由信息不同,拿到完整的再做分配

原创 vue路由导航对象

1.$route.path 当前路由的路径部分,是绝对路径'/layout/user'2.$route.fullPath被解析后包含查询参数的完整路径3.$route.query查询参数,就是hash地址后?后面的参数

原创 路由参数对象

把hash地址中可变的部分定义为参数项,它的使用场景是对于ID不同的用户对应的组件相同,就可以用动态路径参数,提高路由的复用性const router=new VueRouter({routes:[{path:'/movie/:id',component:Movie}]})动态路径参数以冒号开头:获取路径参数的方法:this.$route.paramshash地址中?后面的参数叫查询参数,在路由参数对象中获取查询参数的方法:this.$route.query获取当前路由的路径

原创 判断数组中的元素出现的个数

constarr=['b','c','b','c','a','b','c']constobj={}arr.forEach(i=>{//初始循环的次数0letnum=0arr.forEach(j=>{if(i===j){num++}})return(obj[i]=num)})console.log(obj)//==>{a：1，b:3,...

原创 数组的方法

数组是特殊的对象letarr=[1,2,3,55,66,8]1. push()是在数组尾部添加任意个元素//arr.push(20,90)//console.log(arr)//[1,2,3,55,66,8,20,90]2.unshift是在数组头部添加元素//arr.unshift(77)//console.log(arr)//[77,1,2,3,55,66,8]3.pop删除数组中最后一个元素，返回删除的那...

原创 数组转对象2种方法

constarr=[{label:'男',value:0},{label:'女',value:1}]functionf(arr){//写代码//reducereturnarr.reduce((obj,item)=>{obj[item.value]=item.labelreturnobj},{})}constobj=f(arr)console.log(ob...

原创 对象转成一个新的数组

constobj={0:'男',1:'女'}functionf(obj){letarray=[]for(letkeyinobj){array.push({label:obj[key],value:key})}returnarray}constarr=f(obj)console.log(arr)//arr===>[{label:'男',value:0},{label:...

原创 表格设置宽度的小技巧

做表格时,剩余一列最好不给宽度,让其自适应

原创 下载第三方包不知道是开发还是生产依赖,看这里

开发依赖:npm i 包名 -save-dev或者-D,最终上线的时候是不被使用的包生产依赖:npm i 包名 -S 也可不写-S,默认就是生产依赖了,最终上线也会被使用的包