weixin_50789445的博客

原创 如何让div中的img上下左右居中

这里使用了flex布局，并通过justify-content: center使图片水平居中，align-items: center使图片垂直居中。设置容器的宽度和高度，width: 100%使其填满父容器的宽度，height: 100vh使其占满视口的高度。元素的样式中，使用max-width: 100%和max-height: 100%来确保图片在容器中适应大小，保持比例。您可以根据实际情况调整代码，例如添加更多的样式来定义边距、背景色等。中上下左右居中，可以使用CSS和布局技巧来实现。

原创 js监听a标签并动态添加scm参数

js监听a标签并动态添加scm参数

原创 antv/g6图表决策代码

antv/g6在react项目使用js引用

原创 react之hook的使用

简单状态管理useSetState管理临时状态export default () => { const [state, setState] = useSetState({ hello: '', count: 0, }); return ( <div> <pre>{JSON.stringify(state, null, 2)}</pre> <p> <button typ

原创 前端兼职接单网站

1.程序员客栈：https://www.proginn.com2.码市：https://codemart.com3.开源众包：https://zb.oschina.net4.智城外包：http://taskcity.com5.实现网：https://shixian.com6.猿急送：https://www.yuanjisong.com7.人人开发：http://rrkf.com8.开发邦：https://www.kaifabang.com9.电鸭社区：https://eleduck.com

原创 正则表达式,支持中英文只去除中文中间的空格

正则let str = "你棒棒 是 好 ni hao 你 好" str.replace(/([^u4e00-u9fa5])(\s)(?=[^u4e00-u9fa5])/g, '$1')console.log(str.replace(/([^u4e00-u9fa5])(\s)(?=[^u4e00-u9fa5])/g, '$1')) // 你棒棒是好 ni hao 你好

原创 用Vue.extend()来做一个全局提示组件

相信很多人用vuejs构建单页应用时都会用到一些全局方法，比如发ajax请求时喜欢用axios挂载到vue原型上，如下：// 1 引入vue和axiosimport Vue from 'vue'import axios from 'axios'// 2 对axios的一些封装// code ...// 3 然后挂载到原型上Vue.prototype.$axios = axios用的时候就直接上this.$axios// 用axios.get()方法可以这样用this.$axios.g

原创 记录工作中vsCode的一些插件

原创 关于less的一些封装

工作中使用一些less的封装,灵活使用可以增加开发效率/*** 定义样式* */.bgd(@color) { background: @color;}.bgAll(@color) { background: @color;}.rgba(@val) { background: rgba(@val);}.bgimg(@imgUrl){ background-image: url(@imgUrl); background-repeat: no-repeat; back

原创 关于ajax请求的二次封装

创建http导出ajax请求http.js/** * ajax: 引入axios 返回promise对象 * jsonp:引入jsonp插件，返回promise对象*/import originJsonp from 'jsonp'import router from '../router'const axios = require('axios')axios.defaults.withCredentials = trueaxios.defaults.timeout = 100000

原创 css里面自适应计算距离

cala(100%-10px) //css里面自适应计算距离

原创 vue 具名插槽在没有slot传入使其v-if隐藏

<slot v-if="Object.keys($slots).includes('drawerTitle')" name="drawerTitle"></slot>

原创 vue检测当前是什么浏览器

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) {//判断是否Opera浏览器 return "Opera" }; if (userAgent.indexOf("Firefox") > -1) {//判断是否Firefox浏览器 retu...

原创 点击图标时把内容复制到粘贴板

copyHtml { //获取盒子的内容 let val = document.getElementById('rightHtml').innerText // 创建一个文本域 let oInput = document.createElement('textarea') //设置文本域的id oInput.setAttribute('id', 'cp_hgz_input') // 把之前获取的值赋值给创建的文...

原创 css里面的display: table-cell和vertical-align

使用display: table-cel可以使两个元素并排,然后使用vertical-align的top或者bottom来决定对齐的方式

原创 vue 监听路由变化

方法一：通过 watch// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},或// 监听,当路由发生变化的时候执行watch: { $route: { handler: function (val, oldVal){ console.log(val); }, // 深度观察监听 deep: true }},

原创 父组件调用子组件方法

this.$refs.xxx(子组件ref名称).xxx(方法名称或者属性值) this.$parent.xxx(方法名称或者属性值)

原创 获取到对象里面的key或者value值

遍历对象的key值let arr={a:1,b:2}Object.keys(arr) ===> [a,b] 返回的一个数组Object.values(arr) ===> [a,b] 返回的一个数组示例 watch: { showData: { handler (newVal, oldVal) { console.log(newVal) Object.keys(newVal).forEach(element => { .

原创 删除对象里面的一个属性

delete object.name (对象里面的属性名)

原创 滚动加载数据

滚动条事件 const el = document.querySelector('.mgn-tables-roll') el.onscroll = () => { // 获取滚动方向 console.log('0', this.rollReference, el.scrollTop) let scroll = el.scrollTop - this.rollReference this.rollReference = el.scrollTop.

原创 屏幕尺寸高度

屏幕高度document.documentElement.clientHeight(网页可见区域)网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen.height...

原创 watch监听器的使用

watch监听器watch:{ name:{ //需要监听的属性名称 handler (newname, oldname) { console.log(newname, oldname) this.name = newname }, immediate: true // 页面加载时首次执行 deep: true // 监听对象深层的数据 }}--------------------------避免代码臃肿.

原创 数组拆分splice

数组拆分let arr=[1,2,3,4,5,6]arr.splice(index,1) =========> index索引值,数字拆分几个

原创 split拆分字符串

字符串拆分数组"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]"|a|b|c".split("|") //将返回["", "a", "b", "c"]

原创 concat方法

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。let hege = ["Cecilie", "Lone"];let stale = ["Emil", "Tobias", "Linus"];hege.concat(stale); ========================>Cecilie,Lone,Emil,Tobias,Linus...

原创 reduce函数的使用

reduce 函数的使用语法 arr.reduce(callback回调函数,[initialValue初始值])callback （执行数组中每个值的函数，包含四个参数）1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue （数组中当前被处理的元素）3、index （当前元素在数组中的索引）4、array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一个参数.

原创 切换镜像源

vsCode 切换镜像源切换源npm set registryhttp://192.168.0.80:4873http://registry.npmjs.org/ #npm 的源查看源npm get registry展示ip地址#创建用户npm adduser ...