- 博客(69)
- 收藏
- 关注
RSS订阅原创 vue扭蛋机抽奖游戏
这个游戏的实现方式是通过CSS3的动画效果和JavaScript的定时器来控制小球的滚动和抽奖的过程。使用CSS3可以轻松地实现小球的滚动效果，而JavaScript则可以控制抽奖的流程和时间。该游戏的主要功能是通过点击按钮进行抽奖，抽奖过程中会显示滚动的小球，最终随机停止并显示一个中奖小球。html结构可根据自己需求重新开发，一下代码只是演示，抽奖思路,ball-box下面每个图片是根据index动态添加类名，在css中方便单独设置每个小球位置。最终效果就是上面视频的demo。
2023-12-14 16:22:33
879
3
原创 vue中实现使用相框点击拍照，canvas进行前端图片合并下载
注意图片按照自己的项目结构引入图片，navigator.mediaDevices.getUserMedia({})中video参数根据自己需求进行设置、调整。3:将拍好的照片和相框合成一张图片，返回一个base64的图片地址。拍照和相框合成，下载图片dome。2:显示调用摄像头效果。3:拍照后显示的图片。
2023-12-14 15:26:44
537
原创 点击空白处弹出框取消
全局使用在main.js中引入,我这里是在assets/js文件中，引入时按照自己的路径引入。页面使用，在弹框元素上添加v-clickoutside="事件名"新建click-outside.js文件。在methods中写相应的逻辑。
2023-10-27 17:48:58
284
原创 vue项目配置MongoDB的增删改查操作
这里遇到最不好找的问题就是Mongoose更新会弃用一些方法，例如删除remove，就会报错ArticleModel.remove is not a function，网上找一下mongoose推荐使用的方法，这里remove更推荐使用`deleteOne`或`deleteMany`方法，取决于你想要删除单个文档还是多个文档。然后，使用`mongoose.Schema`定义Article的数据模型，并使用`mongoose.model`创建Article模型。(这里的数据模型就是你页面数据的字段)。
2023-09-04 17:38:07
1281
1
原创 请求数据中断请求
XHR是没有取消请求的功能，axios实际上用的就是XHR，这种请求不能中断网络传输，如果要中断网络传输只能用fetch，虽然效果都是一样的，但是传输效率上会提高很多，减少了很多不必要的传输。如何做到可以真正饿中断网络传输的取消请求，可以应用到导航栏切换，搜索等功能。
2023-04-23 17:45:13
155
原创 input类型为number取消右边箭头
这样就可以取消`input`元素中的右边箭头了。在Vue中可以将该样式应用到组件的`style`标签中，或者在全局CSS中进行定义。可以通过给`input`元素添加样式来取消右边箭头。具体的样式可以使用如下CSS代码。
2023-04-23 17:25:01
739
原创 vue页面点击按钮复制文字
引入 import { copyToClipboard } from "../../utils/util";新建一个util.js文件。传入要复制的参数例如手机号。
2023-02-13 10:21:20
318
原创 导出csv文件
2：引入导出文件import {excel} from '../../assets/js/util/export-excel';1:将导出文件写在util文件中。
2023-02-13 10:20:17
324
原创 前端请求出现unable to decode value错误
请求时如图出现unable to decode value 错误分析：是因为PRIMEWEEK5%OFF20222fa69b57中有%非法字符传输的参数中含有- _ . ! ~ * ’ ( )% 等非法字符都会出现错误解决办法：使用encodeURI函数
2022-07-12 14:11:25
1602
原创 Vue中watch监听第一次不触发、深度监听
第一次不触发一：handler：其值是一个回调函数。即监听到变化时应该执行的函数。二：是deep：其值是true或false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。)三：immediate：其值是true或false；确认是否以当前的初始值执行handler的函数例如：我将父组件中的WatchId传递到这个子组件页面我要根据id来获取数据watch监听不到一次的数据变化，下面是我的例子<script>export defaul
2022-04-26 16:09:36
9252
原创 修改单选框(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
1215
原创 vue路由判断跳转404页面
beforeEach函数这是路由跳转前处理的函数import PageNotFound from '@/views/pages/404.vue'Vue.use(Router)const routes=[ { path: '*', name: 'PageNotFound', component: PageNotFound, },]const router = new Router({ mode: 'history', routes: routes}.
2022-03-18 17:04:34
3565
原创 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
2414
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
2226
原创 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
471
原创 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
424
原创 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
312
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
593
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
182
原创 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
2489
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
278
原创 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
2296
原创 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
378
原创 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
364
原创 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
440
原创 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
383
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人