前端
不要放弃
前端初学者..
展开
-
react hooks 封装 scroll 组件
入门级react版scroll组件开发什么是scroll组件?一句话来说就是,能够在固定高度里进行滚动展示每个项目的组件功能:滚动到底部加载更多、错误提示、没有更多、没有更多数据底部提示技术栈react + react hooks + fetch开发第一步先把基础组件写好index.js function Index(props) { return ( <div className={'box-container'}>原创 2021-09-26 10:47:27 · 1093 阅读 · 0 评论 -
audio标签报错:DOMException: The play() request was interrupted by a new load request.
解决audio标签报错<audio :src="url"></audio>这是错误信息DOMException: The play() request was interrupted by a new load request.解决方法:<button @click="play"><audio ref="audio" :src="currentSong.url" @canplay="ready"><原创 2021-02-24 11:11:28 · 7182 阅读 · 0 评论 -
vue 2.0 -> vue3.0 组件通信篇
vue 2.0 -> vue3.0 组件通信篇父子组件通信vue 2.xthis.$emit()vue 3.0export default defindComponent({ emits: ['submit'], setup(props,context){ context.emit('submit','submit') }})兄弟通信vue 2.x事件总线 / vuexmain.jsVue.prototype.$bus = new Vue()组件里:this.$原创 2021-02-18 10:51:28 · 448 阅读 · 0 评论 -
vue 2.x 过渡和动画的使用
vue 2.x 过渡和动画的使用最近在开发移动端app的时候,多处地方需要使用transition组件去增添一些效果,例如: picker, popup, toast等自定义组件, 所以记录了一下使用方式通常配合v-show使用<!-- 这里模拟一个 picker 的效果 布局css : 外层fixed + top0 bottom 0 内层 absoluted bottom 0 height: 50px--><!-- 点击按钮 外层会原创 2021-02-09 16:06:20 · 180 阅读 · 0 评论 -
vue 3.0.0 + typescript 3.9.3 自定义表单( 父子组件通信 )
vue 3.0.0 + typescript 3.9.3 自定义校验表单( 父子组件通信 )首先我们先把表单创建出来ValidateInput.vue<template> <div class="validate-input-container"> <input class="form-control" v-model="inputItem" /> <span class="invalid原创 2021-02-05 10:45:42 · 785 阅读 · 0 评论 -
01移动开发常用CSS
移动开发常用CSS单行省略scss mixin:@mixin noWrap() { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}如果在flex多列布局使用单行省略需要使用width:100% / 设置其他宽度;多行省略$lines-to-show: 行数;-webkit-line-clamp: $lines-to-show;-webkit-box-orient: vertical;原创 2021-01-21 08:55:05 · 98 阅读 · 0 评论 -
js/a标签下载文件方法
<html> <a onclick=down()>xxxx</a></html>方法一:function down(){ var url = 'http://localhost:8080文件地址' window.location.href = url}方法二:不需要在页面展示a标签 点击任意按钮<script>downFile(){ var url = 'http://localhost:8080文件地址' v原创 2020-10-16 16:07:43 · 4118 阅读 · 0 评论 -
webpack 4 详解
Webpack4文章目录Webpack4@[toc]webpack默认配置图片 / 字体资源打包css / less / ...解析postcss: css兼容性处理plugins配置html重新构建到dist提取 css 成单独文件压缩css压缩 html 和 jsdevServerHMRJS兼容性处理(Babel)react打包环境多页面打包通用方案webpack默认配置1. npm init -y2. npm install webpack webpack-cli -D3. 创建src /原创 2020-08-09 14:05:24 · 1759 阅读 · 1 评论 -
js原生ajax发送get和post请求的实现
文章目录@[toc]JS原生ajax的实现创建一个node服务器(这里用了express框架)原生ajax实现知识点JS原生ajax的实现创建一个node服务器(这里用了express框架)// app.js// 引入express框架const express = require('express');// 路径处理模块const path = require('path');const fs = require('fs');// 创建web服务器const app = expre原创 2020-08-06 22:23:23 · 3326 阅读 · 0 评论 -
webpack4 入门第一天 待更新...
1. webpack默认配置(webpack版本4.44.1)今天边看视频边做的 关于webpack4的 笔记,做下笔记希望自己能记住,也希望能给向我一样的初学者带来一些帮助。1. npm init -y2. npm install webpack webpack-cli -D3. 创建src / index.js 文件运行webpack打包,使用npx 会在 node_module里面查找webpack模块3. npx webpack打包完成后 会生成 dist/main.js 文件原创 2020-08-03 23:57:16 · 228 阅读 · 0 评论