- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue中获取客户端IP地址
获取IP的方法export function getUserIP(onNewIP) { let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; let pc = new MyPeerConnection({ iceServers: [] }); let noop = () => { }; let l
2021-10-27 18:27:00
1706
原创 用vue解决element-ui级联选择器最后暂无数据的问题
//获取系统分类管理列表getSystemTypeApi(){getSystemTypeApi({}).then((res)=>{if(res.data.code==200){this.systemTypeList=this.getTreeData(res.data);//this.systemTypeList=res.data;}});},//...
2021-07-06 09:33:28
450
原创 vue全选和反选简单案例
<template> <div> <div> <span>全选</span> <input type="checkbox" v-model="all"/> <button @click="fanFn">反选</button> </div> <ul> <li v-for="(obj,index) in arr.
2021-06-08 21:37:42
114
原创 表单检验(使用插件)
第一步安装检验插件npm i vee-validate@4.0.3第二步导入校验组件,注册好就可以使用import { Form, Field } from 'vee-validate'第三步定义校验规则一般应用的表单校验可能多个地方都需要使用，所以我们有必要把所有的规则集中管理起来例如// 定义校验规则提供给vee-validate组件使用export default { // 校验account account (value) { // v
2021-05-26 10:11:35
654
原创 封装加载更多组件
<template> <div class="xtx-infinite-loading" ref="target"> <div class="loading" v-if="isLoading"> <span class="img"></span> <span class="text">正在加载...</span> </div> <div class="n.
2021-05-22 19:55:59
119
原创 项目中图片放大镜效果(Vue3的写法)
实现效果代码落地<template> <div class="goods-image"> <!-- 大图容器 --> <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.backgroundPos
2021-05-22 19:53:43
367
原创 Vue3全局指令
vue2的全局指令形式 Vue.directive('指令',{ inserted(el,binding){ // el: 绑定了指令的dom元素 // binding: value代表指令绑定表达式的值 } }) 在new Vue()之前vue3的全局指令形式 const app = createApp({}) app.directive('指令名称',{
2021-05-18 17:25:57
1435
原创 Vue3组件数据懒加载
1.解决的问题:网络层面的优化,只有组件进入视口才会获取数据(渲染层面优化)2.实现思路:监听组件是否已经进入到视口区域 在进入之后发送ajax请求3.技术手段:用到VueUse中的useIntersectionObserver(https://vueuse.org/core/useintersectionobserver/) 对目标元素进行监听 然后满足条件执行回调 回调中就可以发送ajax请求4.注意点 target ref对象 正常情况下 每次进入视口移出视口都会再次.
2021-05-18 12:01:33
521
原创 封装轮播图组件
<template> <div class="box" style="height:500px"> <div class="xtx-slider"> <ul class="slider-body" @mouseenter="mouseEnter" @mouseleave="mouseLeave"> <li class="slider-item" v-for="(item, .
2021-05-18 11:55:35
113
原创 Less自动化导入使用
手动导入方案1,准备样式变量文件// 主题@xtxColor:#27BA9B;// 辅助@helpColor:#E26237;// 成功@sucColor:#1DC779;// 警告@warnColor:#FFB302;// 价格@priceColor:#CF4444;2手动引入其中的变量<style scoped lang='less'> @import '~@/styles/variables.less'; .xtx-home-page{
2021-05-15 17:23:14
242
原创 vue2和vue3的吸顶代码
思路: 准备一个吸顶组件，准备一个类名，控制样式让其固定在顶部 监听页面滚动，判断滚动距离，距离大于78px添加类名 vue2的写法<template> <div class="app-header-sticky" :class="{show : isShow}"> <div class="container"> <RouterLink class="logo" to="/" /> <Head
2021-05-15 17:17:32
382
原创 防抖函数
time: null, // 保存 - 防抖函数的定时器searchChangeFn () { clearTimeout(this.time) this.list = [] //清空数组 if (this.kw.length === 0) { return // 空值不要去获取搜索数据 } // 监测输入框改变input事件 // 防抖: 等待n秒后执行最后一次, 如果再次触发重新计时 thi..
2021-05-14 11:56:07
98
原创 Vue3的逻辑复用
基础代码<template> <div v-if="loadingRef">loading...</div> <div v-if="!loadingRef">list</div></template><script>import { onMounted, ref } from 'vue'export default { setup() { let loadingRef = ref(fals
2021-05-13 19:46:11
1180
原创 axios封装处理
import axios from 'axios'import store from '@/store'import router from '@/router'// 1.实例化 create方法// baseURL 接口根路径// timeout 接口最长等待时间const instance = axios.create({ baseURL: 'http://pcapi-xiaotuxian-front.itheima.net/', timeout: 5000})// .
2021-05-13 17:24:55
120
原创 Vuex持久化
使用插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节1安装vuex-persistedstate插件npm i vuex-persistedstate2.vuex中准备要存储的数据例如:在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js// 用户状态export default { namespaced: true, state: () => { return {
2021-05-13 17:16:47
286
原创 render实现标题组件
render实现标题组件render相对于template更加灵活！目标写一个组件，功能是根据传入的prop值，还决定到底是h1,....h6<my-headeing :level="1">标题1</my-heading> ---> <h1>标题1</h1><my-headeing :level="6">标题6</my-heading> ---> <h6>标题6</h6>..
2021-05-12 20:02:41
56
原创 render和template区别
一个组件的内容有两种书写的方式template:常见的写法,通过模板语法来指定组件的内容render:通过render函数来确定组件的内容如果在组件定义的时候,两者同时存在,会以render为准例如:对于.vue(单文件来说),相当于把原来要写在组件内部的template配置项,移动到了外面render用来决定组件的内容(一般情况,用template来决定)render相对于template更加灵活...
2021-05-12 20:01:12
822
原创 svg图标的处理-工程化的方案
第一步安装loaderyarn add svg-sprite-loader@4.1.3第二步配置vue.config.js文件chainWebpack(config) { // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons')
2021-05-12 19:59:36
85
原创 虚拟DOM和真实DOM的区别
虚拟dom(VNode),假的,不是真实的dom真实的DOM在浏览器通过dom.api操作的,复杂的对象虚拟DOM:可以通过this.$slots.default查看真实的dom是一个对象,它的属性非常多,在浏览器中做dom操作,会比较消耗性能虚拟dom是一个对象,它的属性相比较于真实的dom就比较少---用少量的属性描述一个dom,无法在浏览器中直接显示真实的DOM虚拟DOM为什么在vue中会用到虚拟dom?有两点好处:1.虚拟dom比真实dom体积小,操.
2021-05-12 19:57:45
13439
1
原创 平铺数组转成树状结构
function arrToTree(data) { let result = [] let map = {}; data.forEach(item => { map[item.id] = item; }); data.forEach(item => { let parent = map[item.pid]; if (parent) { (parent.children || (pa.
2021-05-12 19:56:18
369
原创 退出登录
用户点击退出登录时所在的页面,下次登录之后还是去的那个页面在退出时，跳回login时，回传当前的路径点击登录的时候注意：$route.path:只有路径的信息$route.fullPath：路径+查询参数的信息return_url： 这个名字是自己约定的，它要和login/index.vue中跳转代码保持一致。...
2021-05-12 19:53:32
274
原创 动态生成菜单栏
分析例如:登陆的时候,根据个人信息中的权限信息,在所有的动态路由表中进行选取主要用到vue-router对象中的addRoutes把router中直接静态写死的动态路由表改造成通过addRoutes 方法调用添加的形式import { asyncRoutes } from './router'router.beforeEach(async(to, from, next) => { // 开启进度条 NProgress.start() // 获取本地tok.
2021-05-12 19:52:08
187
原创 promise封装ajax
const getJSON = function (url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() // 第三个参数表示是异步还是同步，true表示异步，false表示同步 xhr.open('GET', url, true) xhr.onreadystatechange = function () { // readyState .
2021-05-12 19:47:16
33
原创 封装XHR
// 1.把参数进行处理// 1.1 拼接为特定格式字符串！// 1.2 需要对字符串处理 encodeURI();let str="name=张三&age=18";str = encodeURI(str);console.log(str); // 没有%？只能中文!传输数据编码格式 urlencoded 只支持ASCII;// 2.xhr实例化let xhr = new XMLHttpRequest();// 3.设置方式，url// 3.1 getx.
2021-05-12 19:45:49
485
原创 element-ui实现下拉框二级联动
静态页面是基于element开发的 <el-select v-model="provAndCity.province" @change="handleProvince" clearable > <el-option v-for="item in provinceList" :key="item" :label="item" :value="item"> </el-option> </e
2021-05-09 08:54:43
3102
原创 RBAC权限设计详解
权限设置1.权限点权限:在一个系统内是否具有做某个操作的权利 权限分为两个级别 1.菜单权限:是否有权限访问某个菜单 2.按钮权限:是否有权限操作 页面上的某个按钮功能2.业务逻辑对于权限数据来说,有两个级别的设置1.能不能访问谋个页面2.在页面上,能不能操作某个按钮3.RBAC权限设计思想目标:不同账号登录系统后看到不同的页面, 能执行不同的功能模式如下三个关键点:用户： 就是使用系统的人权...
2021-05-02 15:25:33
4027
原创 Excel的导入和导出
导入使用的是vue-admin-template进行的二次开发,自身就有excel批量导入的功能注意,excel读入的时候注意时间格式第一步,把excel的数据从本地硬盘上读出来,解析成js数据监听的方法 <!-- 在这里使用全局注册的组件,用作excel读取--> <upload-excel :on-success="handleSuccess" //用来监听excel的成功的方法 :before-upload="beforeUpload"
2021-04-27 20:09:18
122
原创 v-model实现父组件和子组件之间的传值
父组件中设置为:<template> <div> <!-- msg变量传给Child的value属性(props) --> <Child v-model="msg"></Child> 外面{{msg}} </div></template>import Child from './Child'export default { data () { return {
2021-04-26 16:12:26
415
原创 js原生简单事件数据的双向绑定
页面->数据, 借助 oninput事件 数据->页面, 借助Object.defineProperty() 监听一个对象的属性值的变化 let _data = { message: "" }; // 临时存储值 function change(ev){ data.message = ev.target.value; // 获取输入框里最新的值 } let data = { // 准备类似data里的数据 ..
2021-04-25 20:45:02
73
原创 Vue中图片上传到第三方云上,地址存到自己服务器
Vue中为了减少自己服务器的内存,可以通过第三方云服务器来存储地址,把图片的地址存到自己的服务器上这个案例是用element-ui组件库中的upload组件只是针对于elment-ui组件库有效,如果使用其他的组件库,需要做更改 <!-- show-file-list 是否显示文件名字 before-upload 上传之前的回调函数 on-success 上传成功的回调函数 http-request 自定义上传,覆盖默认的上传行为 --> <el-up
2021-04-25 19:37:23
438
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人