![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
vueer
菜
展开
-
Reflect 的 receiver 是个啥了?
Reflect receiver原创 2022-10-27 10:08:13 · 289 阅读 · 1 评论 -
uniapp-typescript网络请求封装
ts,uniapp,typescript原创 2022-07-29 09:58:12 · 1235 阅读 · 0 评论 -
typescript的axios封装,实现回调带有类型
需要实现的效果是请求成功之后使用返回的数据不需要抓包看属性,直接获取对象属性开始使用。原创 2022-07-26 16:10:16 · 684 阅读 · 1 评论 -
js遍历对象
js遍历方法第一种const obj = { id:1, name:'zhangsan', age:18} for(let key in obj){ console.log(key + '---' + obj[key]) }第二种const obj = { id:1, name:'zhangsan', age:18 }原创 2021-10-08 11:53:06 · 72 阅读 · 0 评论 -
js 控制滚动条位置,实现 锚点效果
<div id="test" style={{ backgroundColor: 'red' }} onClick={() => { let test = document.getElementById('a'); document.body.scrollTop = test?.getBoundingClientRect()?.top||0; }} .原创 2021-08-10 11:07:22 · 657 阅读 · 0 评论 -
react 实现一个简单的excel表格(可以改变宽度、实时输入、select *ui自行优化,思路可以参考)
首先看效果:1、首先就是主要代码 index.tsximport { FC, useEffect, useRef, useState } from "react";import columns, { columnsType } from "./config";import { Input } from "antd";import "./style.less";//是不是拖拽情况let isMouseWidth: boolean = false;//相同class的集合let clas原创 2021-08-03 22:22:26 · 1283 阅读 · 4 评论 -
es6的深拷贝
1、场景描述react项目 ,拿到后台数据之后需要经过处理之后显示在页面,所以:const [primary, setPrimary] = useState<OrderCargoDtoType[]>([]);const data = primary for (let i = 0; i < primary.length; i++) { data[i].itemVolume = data[i].itemVolume / 1000000; }上面的代码,看起来就原创 2021-07-01 11:43:35 · 1952 阅读 · 0 评论 -
react hook使用useState()更新状态(state)异步导致不能及时读取更新之后的数据
1、场景描述我在更新一个状态之后要立马用这个状态去更新其他状态我的源代码const onChange = (nextTargetKeys: any) => {//更新状态 setTargetKeys(nextTargetKeys); let v = 0; let n = 0; let g = 0; //立马使用 targetKeys.forEach((item: number, index) => { v += mockData[原创 2021-07-01 09:38:25 · 9420 阅读 · 0 评论 -
typescript+cookie的封装
/** * * @param key 就是key * @param value 就是value * @param time:number 以毫秒的形式设置过期时间 ===》3000 * @param time:string 以时间字符的形式设置过期时间 ===》Sat, 13 Mar 2017 12:25:57 GMT * @param time:Date 以Date设置过期时间原创 2021-05-28 14:22:09 · 1763 阅读 · 0 评论 -
vue路由拆分模块管理
路由拆分模块,便于管理,拆分之后的文件夹层级目录pano.js/** * 全景页面的路由 */export default [ { path: '/designDescription', name: 'designDescription', component: () => import('../../views/panoramas/DesignDescription.vue'), meta: { title: '设计说明'原创 2021-05-06 13:58:51 · 263 阅读 · 0 评论 -
uni-app,携带cookie(用户后台shiro的认证)
首先要知道的是,微信小程序是没有cookie机制的 ,也就是说,当uniapp运行在微信端是没有cookie供后台认证,需要开发者自定义cookie,并且让请求携带。android、ios同理。h5则不用考虑这个问题,uniapp自己携带无需考虑。const http = (options) => { return new Promise((resolve, reject) => { uni.request({ withCredentials: true, url: pubU原创 2021-04-25 11:23:04 · 15626 阅读 · 7 评论 -
uni-app网络请求的封装
http.js// 环境的切换let pubUrl = ""if (process.env.NODE_ENV === 'development') {// 开发环境 pubUrl = "http://192.168.1.101:8888/****"} else if (process.env.NODE_ENV === 'debug') { pubUrl = "" // 调试环境} else if (process.env.NODE_ENV === 'production') { pubUr原创 2021-04-25 11:21:45 · 1094 阅读 · 0 评论 -
vue检测div滚动到底部
nextTick(() => { const el = document.querySelector(".list"); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if...原创 2021-04-15 18:40:20 · 1217 阅读 · 0 评论 -
Vue实现简单的瀑布流
<template> <div> <div class="list"> <div :class="[ index == 1 ? 'listItem2' : 'listItem', index % 2 == 1 && index != 1 ? 'listItem3' : 'listItem', index==list.length-1&&原创 2021-04-15 16:15:47 · 172 阅读 · 0 评论 -
js转化对象为Formadata
//转化对象为formdataconst paramsToFormData = (json) => { const formData = new FormData(); Object.keys(json).forEach((key) => { if (json[key] instanceof Array) { json[key].forEach((item) => { formData.append(key, item); });原创 2021-04-15 11:36:13 · 315 阅读 · 0 评论 -
Vue3.0路由传参
Vue 之路由传参在 vue3.0 里面使用路由必须要引入 useRouter 和 useRouteimport { useRoute, useRouter } from 'vue-router'秉承谁长谁先死,Router 长 所以他负责跳转,Route 负责接收数据传参使用query和params,主要区别就是前者使用path进行跳转,后者使用name进行跳转//使用queryfunction useHooks() { const Router = useRouter() //跳转原创 2021-04-12 13:49:23 · 5569 阅读 · 0 评论 -
vue的axios网络请求的封装,包含请求时的加载提示(vue3.0环境)
1.处理跨域有些后台没有处理跨域,我们可以直接在前端进行处理vue.config.jsmodule.exports = { devServer: { open: true, //是否自动弹出浏览器页面 // host: "localhost", port: '8080', https: false, hotOnly: false, proxy: { '/api': { target: 'http://192原创 2021-04-02 16:59:09 · 824 阅读 · 0 评论 -
微信小程序网络请求的封装(request)
request的封装,这部分是每次请求的必经之路http.jsconst pubUrl = "https://api-hmugo-web.itheima.net/api/public/v1"//这是我要请求的数据接口的公共部分const http = (options) =>{ return new Promise((resolve,reject) => { wx.request({ url: pubUrl+options.url, method:opt原创 2021-03-29 14:05:32 · 286 阅读 · 0 评论 -
vue3.0获取dom
<div @click="test" ref="myRe">test</div> setup(props, context) { const state = reactive({ active: [], }); const myRef = ref("carousel"); const test = () => { console.log(myRef.value); }; onMoun...原创 2021-03-22 13:26:14 · 707 阅读 · 0 评论 -
Vue3.0子向父传参
1、父组件<template> <view class="index"> <BaseNavBar :showBack="false" title="首页" @onBack="onBack"></BaseNavBar> </view></template> <script>import { ref, reactive } from 'vue'; import BaseNavBar原创 2021-03-19 17:40:10 · 1097 阅读 · 0 评论 -
input选择图片预览
export default {props: [“msg”],setup(props) {const state = reactive({// myMsg:props.msgmyMsg: inject(“msg”),});function Id(id) {return document.getElementById(id);}function changeToop() {var file = Id(“file”);if (file.v...原创 2021-03-16 09:39:37 · 356 阅读 · 0 评论 -
Vue3.0全局.less文件
添加的依赖vue add style-resources-loadervue.config.js的配置const path = require("path");module.exports = { chainWebpack: (config) => { const types = ["vue-modules", "vue", "normal-modules", "normal"]; types.forEach((type) => addStyleResource(c原创 2021-03-14 09:19:04 · 213 阅读 · 0 评论 -
Vue.js 3.x学习笔记
1.setup()<template> <div class="about"> <h1>This is an about page</h1> <div>{{msg0}}</div> <div id="a" @click="changeMsg">{{ msg }}</div> </div></template><script>impor原创 2021-03-13 13:35:31 · 218 阅读 · 0 评论 -
axios封装(vue3.0环境)
1、http.jsimport axios from 'axios'// 环境的切换if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://10.22.160.24:8888/lanlema/user/' // 开发环境} else if (process.env.NODE_ENV === 'debug') { axios.defaults.baseURL = 'http://10.22原创 2021-03-13 13:34:39 · 646 阅读 · 0 评论 -
Less的学习笔记
Less的学习笔记1.首先附上less的官方网址https://less.bootcss.com/2.其次是自己的码云地址(gitee)https://gitee.com/wangming0123/less_note笔记内容:官方文档的demo实现。原创 2021-03-11 11:23:32 · 58 阅读 · 0 评论 -
vue登录操作cookie+导航守卫
1、cookieUtil/** * Created by Schon on 2018/9/13 0013. *///设置cookieexport function setCookie(key,value) { var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() +3000); //保存的天数,我这里写的是100年 //字符串拼接cookie window.document.cookie原创 2020-10-22 09:58:28 · 516 阅读 · 0 评论 -
vue子组件向父组件,父组件向子组件传递事件
https://blog.csdn.net/sisi_chen/article/details/81635216?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.原创 2020-10-16 16:05:45 · 878 阅读 · 0 评论 -
vue+shiro出现的跨域(登陆成功之后还是不能访问,存在拦截)
参考文章:https://blog.csdn.net/weixin_45492007/article/details/1054857821、首先vue使用的是axios进行网络请求的,他默认不会携带cookieaxios.defaults.withCredentials = true// 允许当前axios携带cookie在main.js配置2、后台存在跨域,当使用 @CrossOrigin 时,他不允许cookie,所以使用一下两种方式解决跨域1.基于WebMvcConfigu...原创 2020-10-16 10:03:26 · 1157 阅读 · 3 评论 -
Ajax上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com.原创 2020-10-15 23:15:00 · 71 阅读 · 0 评论