![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
allen_csdns
这个作者很懒,什么都没留下…
展开
-
react实现拖动排序
效果图:原创 2021-01-11 13:50:48 · 762 阅读 · 2 评论 -
react实现分页列表滚动到某一位置,点击跳转到详情页返回继续保持进入的位置
原理:利用react-activation插件实现页面位置的保持,然后使用redux进行数据的更新一、安装react-activation插件怎么使用react-activation可以参考:https://github.com/CJY0208/react-activation/blob/master/README_CN.md二、列表页使用组件页面内引入 import KeepAlive, { withAliveScope } from ‘react-activation’;注意KeepAliv原创 2021-01-11 11:03:59 · 2191 阅读 · 0 评论 -
使用svg定制化绘制圆环、漏斗
成品展示图:直接上代码//svg绘制漏斗 svgRender( left, index, text, topWidth, height, bottomWidth, colorOne, colorTwo, isActive ) { return ( <div style={{ position: 'relative', width: { to原创 2020-10-27 13:46:16 · 452 阅读 · 0 评论 -
前端工作中非常实用的工具
一、开发工具vscode,sublime,atom,webstorm插件插件描述Beautify格式化代码,统计编码风格Bracket Pair Colorizer给括号加上不同的颜色,便于区分不同的区块Markdown Preview Enhanced实时预览markdown,markdown使用者必备open in browser在浏览器打开文件.支持自定义浏览器Path Intellisense自动提示文件路径,支持各种快速引入文件Rea原创 2020-10-27 13:34:28 · 219 阅读 · 2 评论 -
原生js和jquery实现头部tab栏点击滚动居中
效果图:直接上demo<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title>原创 2020-05-09 10:01:26 · 844 阅读 · 2 评论 -
移动端调试神器:vConsole调试console
前言因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试使用首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址:js下载地址或者使用 npm 安装:npm install v...原创 2020-04-07 14:08:50 · 1187 阅读 · 0 评论 -
解决数据库的一段内容中有两个空格,从后台读取后显示到前端页面上只有一个的问题
因为浏览器默认只认同字符中间的一个空格,其他忽略如果用以上两个标记强制浏览器按照你的预编排的格式的话,那就严格按照你的数据格式输出把数据放到HTML代码的<pre></pre>标记或<xmp></xmp>标记里面,就解决了注意,放在标记中间的HTML标记会按照原样输出...原创 2020-04-01 17:31:22 · 2570 阅读 · 0 评论 -
基于three.js超级炫酷的元素周期表和中国地图(html版本和vue版本)
一、元素周期表演示地址:https://demo.demohuo.top/jquery/10/1035/demo/效果图:二、中国地图效果图:如果要使用在vue项目里,并且全屏显示则需要通过iframe标签将源码引入即可<template> <div style="margin:0px;padding:0px;overflow:hidden"> &...原创 2020-03-24 11:01:54 · 1957 阅读 · 1 评论 -
vue和html两种方式实现可拖拽对话框以及最小化
html方式:<!doctype html><html><head><meta charset="utf-8"><title>弹框(拖动)</title><style type="text/css">.pannel{ width: 500px; height: 300px; b...原创 2020-03-12 15:41:44 · 2149 阅读 · 1 评论 -
Vue适配test环境变量从而判断开发,测试和生产环境
VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL通过process.env做判断和处理1,找到项目配置文件夹:config文件夹2,进入如下三个文件:dev.env.js 对应开发环境test.env.js 对应测试环境prod.env.js 对应生产环境找到如下代码:// 开发环境module.exports = merge(prodEnv...原创 2020-03-11 14:35:27 · 1499 阅读 · 0 评论 -
html5选择多张图片在页面内预览
需求:点击选择图片(可选多张),确定后将选择的图片显示在页面上,点击提交将图片提交给后台。效果图:源码demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>showImages</title><style type="text/css"...原创 2020-03-09 16:38:34 · 2673 阅读 · 0 评论 -
H5移动端点击按钮复制文本到粘贴板
前端H5移动端点击按钮文本信息使用开源项目 clipboard.js,官网:https://clipboardjs.com/可以通过script标签引入也可以通过npm安装,npm install clipboard.js --save-dev(注:这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本 必须先设置一个input或者t...原创 2020-02-27 11:20:35 · 2912 阅读 · 0 评论 -
vue 点击图片预览大图
简单插件:1.安装vue-directive-image-previewer命令行输入npm install vue-directive-image-previewer -D2.main.js中引入import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-im...原创 2020-02-26 10:13:12 · 6532 阅读 · 6 评论