前端
Richard Yates Boy
盡可嬉戲玩鬧棒球帽
展开
-
在web页面实现代码编辑器
使用此技术,您可以将文件与路径对应起来,并创建一个完全多模型的编辑器。突然想起来之前一个需求,就是web页面画一个能输入代码的框子,这个我也找了好几个库,比如codemirror,不知道这个库是不是没有更新了还是怎么,怎么都下不下来依赖,最后选择了monaco-editor。产品一开始是希望输入代码还能出提示,出报错,就跟ieda,vscode那样,那不是痴人说梦,哪个在线运行代码能做到这样,连依赖都不确定,就给你报错,Java,Python都不可能给你语法报错的,只有js可能会报个语法错误。原创 2023-06-13 15:48:32 · 1100 阅读 · 0 评论 -
antd实现tree动态增删改和拖拽效果
react antd tree组件原创 2022-11-21 17:35:40 · 1244 阅读 · 2 评论 -
发布npm功能模块到私有服务器进行复用
发布在项目目录下运行npm run buildbuid成功后cd build配置镜像地址 到服务器指定资源路径位置npm config set registry=http://xxx:18000/mm/n/登录服务器 (到资源位置处)npm login -registry=http://xxx:18000/mm/n/输入用户名,密码,邮箱 ,提示登录成功后,输入发布命令npm publish调用进入到需要用到插件的项目第一种方案: 存插件到本地(从服务器下载不下来的情原创 2021-03-02 15:33:49 · 294 阅读 · 0 评论 -
使用react-beautiful-dnd进行拖拽
使用:npm i react-beautiful-dnd在项目组件中使用如下:class组件代码:import React, { Component } from "react";import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; //初始化数据const getItems = count => Array.from({ length: count }, (v, k) => k原创 2021-03-01 15:47:21 · 1099 阅读 · 7 评论 -
流量单位换算的几种方式
function bytesToSize(bytes) { if (bytes === 0) return '0 b'; var k = 1024, // or 1024 or 1000 sizes = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'], i = Math.floor(Math.log(bytes) / Math.log(k));//Math.floor返回小于等于x的最大整数:,Math.log返回k的自然对原创 2021-02-03 15:49:24 · 883 阅读 · 0 评论 -
echarts甜甜圈中插入自定义图片和鼠标悬浮不放大效果,和甜甜圈瘦身效果
效果如图:代码如下:{ tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, graphic: { elements: [ { type: 'image', style: { image: "https://gitee.com/Frankenstein4原创 2020-09-17 18:40:53 · 675 阅读 · 1 评论 -
在antd design pro 项目里使用iconfont图标
因为antd 官方的一些图标无法满足开发需求,需要在矢量图标库里引入一些图标,但是怎么导入pro项目呢,很简单。首先在矢量图标库生成自己的图标库链接,接着在pro项目中的defaultSetting.js里面修改iconfontUrl,如下接着在config.js文件的路由那块加上自己的图标就可以了。...原创 2020-09-04 17:13:42 · 1256 阅读 · 4 评论 -
react hook 父子组件传值示例
我司现在技术栈是react,用的是开箱即用的pro,我个人习惯用函数式组件,所以用hook比较多。现在写个父子组件传值的示例,希望能帮助到你。父组件:import React, { useState,createContext} from "react";import Counter from './index1'const myContext = createContext();function App() { const [count, setCount] = useState(0)原创 2020-08-26 14:02:40 · 2538 阅读 · 3 评论 -
vue按需导入ant-design-vue
安装依赖npm i --save ant-design-vue接着在项目的main.js引入要让它生效要在babel.config.js引入"plugins": [ [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": 'css' } ] ](注意在这步之前,先要保证项目了里面已经原创 2020-07-20 13:44:13 · 665 阅读 · 0 评论 -
微信小程序商城实战项目
个人微信实战项目 实现了商品渲染,购买,支付,订单,我的等多个模块,效果接近真实数据。基本功能已经实现,能走完整流程。流程因为是视频向,故此在此贴上项目预览效果地址: 微信小程序实战项目 ...原创 2020-07-07 16:57:43 · 998 阅读 · 0 评论 -
使用promise封装Ajax(备忘)
function ajax(options){ var promise= new Promise((resolve,reject)=>{ var xhr = null; var params = formsParams(options.data);//key=value&key=value; console.log(params) //创建对象 if(w...原创 2020-06-24 00:35:31 · 172 阅读 · 0 评论 -
then()返回值的深层嵌套
在promise.then()里面不停地return一个新的promise,嵌套再嵌套,就这样不知不觉给自己出了个题目,晕晕,觉得挺好玩地感兴趣地可以看一下 let p2=new Promise((resolve,reject)=>{ resolve('fulfilled') }).then(value=>{ return new Promise((resolve,reject)=>{ reject('解决了')原创 2020-06-23 16:14:16 · 1139 阅读 · 0 评论 -
使用promise封装异步加载图片并展示.then()的用法
只作自己备忘。随手写的例子<script> var loadImage=function(src){ var promise=new Promise((resolve,reject)=>{ let image=new Image(); image.src=src; image.onload=()=>{ resolve(image)原创 2020-06-23 12:05:39 · 1019 阅读 · 0 评论 -
一个题目说明js执行顺序
setTimeout(function(){ console.log(1); },0); new Promise(function(a,b){ console.log(2); for(var i=0;i<10;i++){ ... } console.log(3); setTimeout(f...原创 2020-06-22 23:46:43 · 161 阅读 · 0 评论 -
在子组件中修改数据不去影响父组件数据(备忘)
app.vue<template> <div> <inputNumber :tabs="tabs" @itemChange="handleItemChange"> </inputNumber> <div class="tabs"> <p v-show="tabs[0].isActive">11</p> <p v-show="tabs[1].is原创 2020-06-18 15:31:21 · 501 阅读 · 0 评论 -
一个例子弄懂vue父子组件之间传值,用tabs为例子讲述
写一个简单的例子弄清楚vue父子组件之间如何动态传值取值,父传递子,子改变父的。要实现的结果如图,就像手机端的tab那样。首先父组件通过components引入子组件,如果要传入子组件的值是动态的.可以将该值双向绑定在调用的子组件上,子组件只需要做一件事,那就是通过props接收,如下:但因为不建议子组件直接修改 props的数据,所以把它作为 data的初始值。这时候只需要这样操作就行了...原创 2020-06-18 12:40:28 · 1682 阅读 · 1 评论 -
vue音乐网站
项目预览添加链接描述这个项目是自己根据一些视频慢慢敲出来的,因为视频太慢了(害,那就自己敲敲呗),写的是一个网页版音乐播放器,使用的接口是别人处理过的,我也不知道哪一天会不会崩溃,自己写完部署到自己的服务器中的。真的是卡上加卡。附上几张效果图(噢,学习地址添加链接描述项目地址可以看一下添加链接描述...原创 2020-06-17 20:09:44 · 2170 阅读 · 8 评论 -
使用Array map() 方法来过滤数据
array.map(function(currentValue,index,arr), thisValue)原创 2020-06-06 23:32:46 · 1709 阅读 · 0 评论