前端
关注
分享
扫一扫
至_臻
残酷的现实，需要你去拼搏，需要你去奋斗。
展开
-
vue使用websocket语音识别连续流式输出
vue中语音识别文字websocket连续流式输出原创 2023-05-28 15:45:41 · 5318 阅读 · 1 评论 -
花瓣呼吸动效
【代码】花瓣呼吸动效。原创 2023-02-13 10:16:40 · 155 阅读 · 0 评论 -
vue全屏显示
【代码】vue全屏显示。原创 2023-02-06 17:35:29 · 203 阅读 · 0 评论 -
element ui导航栏自定义嵌套
【代码】element ui导航栏自定义嵌套。原创 2023-02-06 17:07:44 · 586 阅读 · 0 评论 -
锚点滚到导航栏高亮
【代码】锚点滚到导航栏高亮。原创 2023-02-06 16:57:52 · 226 阅读 · 0 评论 -
el-menu菜单箭头改为右下
【代码】el-menu菜单箭头改为右下。原创 2023-02-03 18:05:50 · 441 阅读 · 0 评论 -
页面滚动切换图片
页面滚动切换图片。原创 2022-11-16 14:51:10 · 293 阅读 · 0 评论 -
点击页面滚动到指定元素位置
【代码】点击页面滚动到指定元素位置。原创 2022-11-16 14:39:43 · 667 阅读 · 0 评论 -
地址栏参数中的中文乱码解决
地址栏参数中的中文乱码解决原创 2022-10-27 14:42:33 · 1335 阅读 · 0 评论 -
截取URl地址栏参数
截取url中的参数原创 2022-10-27 14:35:07 · 241 阅读 · 0 评论 -
vue element ui 上传图片压缩
vue element ui 上传图片压缩原创 2022-08-31 17:42:11 · 1267 阅读 · 0 评论 -
前端请求出现unable to decode value错误
请求时如图出现unable to decode value 错误分析：是因为PRIMEWEEK5%OFF20222fa69b57中有%非法字符传输的参数中含有- _ . ! ~ * ’ ( )% 等非法字符都会出现错误解决办法：使用encodeURI函数原创 2022-07-12 14:11:25 · 2249 阅读 · 0 评论 -
Vue中watch监听第一次不触发、深度监听
第一次不触发一：handler：其值是一个回调函数。即监听到变化时应该执行的函数。二：是deep：其值是true或false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。)三：immediate：其值是true或false；确认是否以当前的初始值执行handler的函数例如：我将父组件中的WatchId传递到这个子组件页面我要根据id来获取数据watch监听不到一次的数据变化，下面是我的例子<script>export defaul原创 2022-04-26 16:09:36 · 10850 阅读 · 0 评论 -
修改单选框(radio)和复选框(checkbox)选中样式
html部分 <div class="subject-list"> <div class="title">"Where Ever you Go, it Can Go" is the Slogan of which of the following products?</div> <div class="text"> <div class="splitit-checkbox"> ..原创 2022-04-11 15:59:24 · 1303 阅读 · 0 评论 -
vue简单的倒计时功能
template部分<ul> <li> <div class="item">{{day}}</div> <div class="name">Days</div> </li> <li> <div class="item">{{hour}}</div> <div class="name">Hours</di.原创 2022-03-16 10:26:05 · 2494 阅读 · 1 评论 -
发布自己的Vue组件库到npm让别人可以下载，像element-ui一样一个npm包发布多个组件
组件样式发布自己的npm包注册npm账号 https://www.npmjs.com/第一步：使用 vue init webpack-simple yyl-npm-practice 初始化项目提示: 不要用 vue init webpack npm-practice 初始化项目，因为我们就开发个组件，不需要那么多配置，webpack-simple就够了。初始完项目，按照提示输入项目信息即可，然后 npm install , npm run dev 让项目跑起来...原创 2022-01-29 17:25:36 · 2740 阅读 · 0 评论 -
react导航栏二级联动
效果图js代码import { Component } from "react";import './scroll.less'class Scroll extends Component { constructor(...args) { super(...args) this.state = { list: [ { id: 1, title: '列表1' },原创 2021-09-06 21:44:01 · 550 阅读 · 0 评论 -
react配置反向代理
反向代理配置到src下的setupProxy.js文件里面第一步：下载插件http-proxy-middlewarenpm ihttp-proxy-middleware -D下载之后启动如果报错 1.0.的话就加花括号 如果没有报错就不用加代码const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use(...原创 2021-09-02 21:39:12 · 482 阅读 · 0 评论 -
react原生下拉刷新 上拉加载 图片预加载
首先配置好px转rem 我的是按照750转的css部分.load-more { position: relative; .load-more-loading { width: 80px; height: 80px; background: url('../img//loading.gif') no-repeat; background-size: cover; position: absolute;.原创 2021-09-02 21:35:02 · 366 阅读 · 1 评论 -
react图片懒加载LazyLoad
React图片懒加载页面新建js文件 写入一下代码LazyLoad.jsimport React from 'react'const threshold = [0.01]class LazyLoad extends React.Component { constructor(props) { super(props) this.state = { io: null, refs: null,原创 2021-09-01 16:23:16 · 670 阅读 · 2 评论 -
react配置redux
第一步：下载 react-redux 和reduxnpm i react-redux redux -D第二步：src路径下新建store文件store文件下新建index.js文件import { createStore } from "redux";//引入公用的方法import { SET_NSME } from './action' //传值 name:姓名 age: 年龄function user(state = { name: 'blue', age:.原创 2021-08-31 14:20:43 · 215 阅读 · 0 评论 -
react配置路由跳转页面
在React中使用react-router-dom路由第一步：首先下载插件npm install react-router-dom -D使用react-router-config库来进行路由配置。 下载插件 npm install react-router-config -D页面这个时候package.json文件就会有这两个配置了页面使用，首先在src下的index修改代码原本是React.StrictMode,修改为Router在上面引入r...原创 2021-08-30 15:02:16 · 2632 阅读 · 1 评论 -
react中配置redux
redux可以说是react里面非常重要的一个东西，加减，上下当前的数字一起改变首先创建一个store文件，专门存放redux代码store中创建一个index.jsimport {createStore} from 'redux'import reducer from './reducer.js'const store = createStore(reducer)export default store创建一个公共方法名constants.jsexport cons原创 2021-08-30 14:33:37 · 321 阅读 · 0 评论 -
react中使用antd-mobile
1.首先打开antd-mobile的官方文档 地址：https://mobile.ant.design/docs/react/use-with-create-react-app-cn2.在项目中安装antd-mobile 使用npm install antd-mobile -D3.在项目中要用的文件中导入要使用的组件 列如在：App.js文件中import {Button} from 'antd-mobile' 使用组件直接在组件中进行使用即可im...原创 2021-08-26 16:59:46 · 2634 阅读 · 0 评论 -
react 暴露webpack.config.js
第一步：npm run eject如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下继续在npm中输入 git add . git commit -m '自定义名' npm run eject 这个时候在你创建的文件里面就可以直接看见文件夹：config...原创 2021-08-26 14:40:14 · 457 阅读 · 0 评论 -
react项目配置less
首先说一下怎么配置less1：下载less插件npm install less-loader -D npm install less -D2. 查找node_modules 下面的react-scripts/config/webpack.config.js 如果找webpack.config.js太费劲 可以看我的另一篇文章 ：react暴露webpack.config 默认已经帮你配置了sass环境 (只要安装sass环境 npm install sas...原创 2021-08-26 14:34:51 · 461 阅读 · 0 评论 -
react项目中px转rem
第一步：安装 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sassnpm insatll lib-flexible sass-loader node-sass postcss-px2rem-exclude --save第二步：找到webpack.config.js路径：node_modules>react-scripts>config>webpack.config.js先引入postcss-px2rem-e..原创 2021-08-25 17:00:08 · 545 阅读 · 0 评论 -
react 原生下拉刷新
react是基于vue下拉刷新做了一个小小的改动我是用js写的 用jsx文件转化为jsx格式 ，如果用下载的react项目需要稍微改一下html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="原创 2021-08-24 16:19:43 · 452 阅读 · 0 评论 -
vue 原生下拉刷新
这是动画样式文字样式html代码<template> <div class="car-box"> <div class="car">下拉刷新</div> <div class="box" @touchstart="fnstart" ref="Element"> <div class="con-txt">上拉刷新</div> </div> ...原创 2021-08-24 16:13:31 · 364 阅读 · 0 评论 -
取消移动端中的滚动条
标签::-webkit-scrollbar{display:none;}原创 2021-08-23 15:17:11 · 339 阅读 · 0 评论 -
BFC是什么 创建BFC
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素满足这几个条件就能创建BFC1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible...原创 2021-08-23 15:15:48 · 282 阅读 · 0 评论 -
vue 上拉加载数据
页面下面显示文字<tuijianlp :tuijlpList="tuijlpList" /> //组件<p class="morelp"> {{ nomore ? "没有更多了" : "正在加载..." }}</p>jsdata() { return { tuijlpList: [], area_id: 3, datacounts: 0, //数据总条数，计算总页数 scro.原创 2021-08-23 14:22:45 · 442 阅读 · 0 评论 -
vue 图片懒加载(vue-lazyload)
第一步：下载 npm install vue-lazyload -S第二步：全局注册 main.jsmain.js 文件import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// 配置项Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', //图片 attemp...原创 2021-08-23 14:20:17 · 97 阅读 · 0 评论 -
react 实现简单的拖拽
src文件夹下新建文件夹demo 然后在创建两个文件js和cssdemo.js文件代码// react实现拖拽import React from 'react'// 引入css样式import './demo.css'class Drag extends React.Component { constructor(props) { super(props); this.state = { translateX: 0,..原创 2021-08-22 18:55:05 · 963 阅读 · 1 评论 -
vue.js 小球滑动交叉
<template> <div class="about"> <div class="box"> <!-- 默认线 --> <div class="Line"></div> <!-- 蓝色的线 --> <div class="slider-Line" ref="slider-Line"></div> <!-- 左边小球 -.原创 2021-08-21 20:16:05 · 316 阅读 · 0 评论 -
vue移动端原生小球滑块
效果用到的一些事件 阻止默认事件 ：ev.preventDefault && ev.preventDefault(); 获取宽度：getBoundingClientRect().width 点击位置在元素的位置：ev.changedTouches[0].pageX<template> <div id="app"> <div class="slider"> ...原创 2021-08-20 11:37:36 · 245 阅读 · 0 评论 -
webpack 的使用
webpack 官网https://webpack.docschina.org/guides/development/#using-webpack-dev-serverloder的执行顺序loader的顺序编程了从右往左，如果webpack选择了pipe的方式，那么大家现在写loader的时候的顺序就变成从左往右了webpack是用来干什么的工具 用来：html css js 压缩代码 图片 热更新 边写边看一.安装webpacknpm i webpac...原创 2021-08-20 11:23:39 · 194 阅读 · 0 评论 -
git 的提交步骤
git提交步骤克隆：git clone 地址进入克隆文件：cd 项目名创建分支：git branch dev-wxh创建dev：git branch dev查看分支：git branch查看修改文件：git status选中所有文件提交到缓存区：git add .提交本地仓库并添加feat描述：git commit -m "feat:修改"push到分支上：git push 地址 当前分支名切换到dev：git checkout dev把线上dev拉下来：g...原创 2021-08-20 10:59:55 · 408 阅读 · 0 评论 -
vue七天免登陆cookie封装
设置cookie 设置好cookie调用这个方法 例如：this.setCookie(name,password,7) 第一个是用户名 第二个是密码，第三个是失效时间 // 设置cookie 传入用户名 和密码 还有天数 setCookie(c_name, c_pwd,exdays) { // console.log(c_name,c_pwd,exdays) let exdate = new Date(); //获取时间 e...原创 2021-08-18 19:17:49 · 598 阅读 · 1 评论 -
vue input弹出数字键盘 移动端访问打电话
<input type="number" pattern="\d*" placeholder="请输入11位手机号" oninput="if(value.length>11)value=value.slice(0,11)" />oninput="if(value.length>11)value=value.slice(0,11)" 这是判断最大能输入几个数字原创 2021-08-15 19:52:27 · 661 阅读 · 1 评论