- 博客(30)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue项目路由导航守卫
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。to:即将要进入的目标路由对象from:当前导航正要离开的路由next:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。如果next函数没有执行或是传入了false等值，这个跳转就会被终止掉。
2022-10-24 14:30:00
724
原创 Element UI 日期封装自定义组件
日常工作中我们会遇到要封装日期组件的情况，例如：element组件日期选择开始时间，结束时间组件不能直接使用时，重复使用到日期选择，我们就不得不去封装。例如：以上就是今天要讲的内容，本文仅仅简单介绍了时间组件的封装使用，组件封装几乎同理，如有问题，可私信联系。
2022-09-16 11:21:17
1868
原创 js获取当前设备信息
工作中我们可能会遇到各种需求，例如：要通过前端的写的某一个页面去获取当前登录设备的信息，其实很简单，下边我就教大家如何获取！！例如：以上就是今天要讲的内容，如有疑惑或问题可以私信询问。...............
2022-08-11 10:08:34
10201
原创 vue项目中怎么控制隐藏（显示）分页
大家都知道，在vue中我们可以使用v-if或者v-show去做隐藏显示， 这里我使用的是v-show，因为此元素进入页面后,此元素会频繁的改变显示状态,此时用v-show更加合适2.在data数据中写入3.在methods模拟数据请求4.通过watch去监听totalnumber变化从而改变分页状态总结例如：以上就是今天要讲的内容，本文仅仅简单介绍了vue中如何使用......
2022-07-14 14:52:26
2834
原创 HTML简单网页制作，好玩又有趣
这样简单的页面大概的样式就完成了，这里我们使用的是https://docs.tenapi.cn/提供的数据接口没有找到js文件，这里引入即可以上就是今天要讲的内容，如有疑问可私信联系我
2022-07-05 09:52:30
2862
原创 vue项目中Tab切换，以及不同状态如何显示
前言例如：这里主要讲到项目中我们会遇到的Tab切换，以及订单状态的显示。一、Tab切换要如何去写？代码如下（示例）：<el-tabs type="border-card"> <el-tab-pane label="全部"> <el-table :data="auditData" style="width: 100%; margin-top: 1%" :header-cell-st
2022-04-21 09:59:20
1538
2
原创 vue动态改变当前样式(css)
文章目录前言一、要怎么做？二、使用步骤1.首先，在data中要有样式数据2.在computed中添加这段代码3.在需要改变样式的地方添加总结前言例如：项目中我们需要动态改变当前页面的样式一、要怎么做？示例：1.首先我们要拿到数据中背景图数据2.然后在你需要的添加背景图div出添加定义的style二、使用步骤1.首先，在data中要有样式数据代码如下（示例）：data: { //动态背景图片 leftStyle: { background: "#AF7F3F" }}2.在c
2022-03-20 17:30:53
4262
原创 vue动态更改背景图
文章目录前言一、要怎么做？二、使用步骤1.在data中写入数据2.添加背景图到div处总结前言例如：项目中我们需要动态改变背景图。一、要怎么做？示例：1.首先我们要拿到数据中背景图数据2.然后在你需要的添加背景图div出添加定义的style二、使用步骤1.在data中写入数据代码如下（示例）：data: { //动态背景图片 bg: {backgroundImage: "url(" + ("./img/1.png") + ")"}}2.添加背景图到div处代码如下（示例
2022-03-20 17:25:39
12763
原创 vue路由传参的几种方式(路由带参跳转)
1.动态路由传参路由配置：{ path: '/xxx/:uid/:name', //uid参数、name参数 name: 'xxx', component: () => import('@/views/xxx.vue'), children : []}; 路由跳转this.$router.push('/xxx/xxx/xxx'); //如果没有添加对应参数，页面出现404，不会到达对应页面在对应页面中拿到路由参数mounted(){
2022-03-17 15:35:01
965
原创 前端H5支付（支付宝）
废话不多说，直接上代码 ALIpayOrder() { var urlStr = '接口地址'; var data = { 'alipayUserid': this.userInfo.alipayUserid, 'alipayNickname': this.userInfo.alipayNickname, 'alipayH
2022-03-17 15:15:27
2729
2
转载 Ajax和Axios那个更好，更实用，举个例子，一目了然
Ajax 和 Axios究竟那个更实用1.jQuery ajax$.ajax({ type: 'get', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关
2021-12-22 10:58:13
3544
原创 cookie有效时间设置，手把手教你设置
1.cookie是否有效时间限定？cookie是有有效时间的，并且可以自定义有效时间2.如何设置cookie？这里我是直接封装起来，直接贴代码，不懂可以私信！！！ // 设置cookie static setCookie(key, value, expiremHours) { var exdate = new Date(); exdate.setTime(exdate.getTime() + expiremHours * 60 * 60 * 1000); document
2021-10-13 09:56:01
8310
原创 Element表格数据导出指定数据到 Excel，并可以修改表头
<template> <!-- 表格导入导出 --> <div> <el-card> <el-button @click="handleBtn">导出文件</el-button> <template> <el-table :data="tableData" style="width: 100%"> <
2021-09-10 09:35:01
445
原创 vue+element 导出数据列表（excel表格）
1.首先安装依赖npm install --save xlsx file-saver2.在要导出的vue组件中的script引入import FileSaver from "file-saver"import XLSX from "xlsx"3.在方法中写入exportExcel() {//执行此方法导出Excel表格 // 为el-table添加一个id：out-table // 当el-table使用了fixed时会导出两次数据，所以要先进行判断 .
2021-09-09 11:15:37
201
原创 H5页面使用js生成二维码
uniapp，vue皆可使用首先去下载qrcode.js 链接 可以在根目录中新建utils文件夹，把下载的js放进去）1.引入js 并创建data变量import qrcode from '@/utils/qrcode.js'data() { return { url: "", qrcodeURL: "" } }, methods: { //生成url二维满 creatQrCode(){ this.url = window.location.h
2021-08-17 15:42:34
1024
原创 H5如何获取内网IP和公网IP
前端H5开发，获取内网IP和公网IP可直接打开，简答便捷，重要的事情说三遍直接使用！直接使用！直接使用！获取内网IP<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>内网ip</li> </ul&g
2021-08-12 10:12:10
3751
4
原创 Element 日期选择器（今天，昨天，本月，上个月），以及未发生的时间禁选
Element 日期选择器今天，昨天，本月，上个月<template> <div class="dashboard-editor-container"> <el-date-picker v-model="dataTime" type="daterange" align="right" size="small" unlink-panels rang
2021-06-04 20:28:47
899
原创 vscode终端无法使用解决的办法
vscode终端报错在vscode中想要查看webpack的版本号输入webpack -v ，报错webpack : 无法加载文件 E:\NPM\npm_global\webpack.ps1，因为在此系统上禁止运行脚本。解决办法在终端输入以下代码get-ExecutionPolicy显示结果Restricted，表示状态是禁止的。然后输入set-ExecutionPolicy RemoteSignedget-ExecutionPolicy显示结果RemoteSigned问题完
2021-05-31 16:38:02
846
1
原创 HTML获取的value值，设置radio、checkbox 的选中状态
单选按钮系列操作：1、获取单选按钮选中的值：$("input[name='zhiFu']:checked").val()2、根据后台传入的值，显示单选按钮的选中状态：$("input[name='zhiFu'][value='"+data.zhiFu+"']").prop("checked", "checked");多选按钮系列操作：1、获取多选按钮选中的值：遍历取得选中的多选按钮的值，存在字符串中：var eight="";$("input:checkbox[name='eight'
2021-05-28 17:38:17
1627
原创 Nginx Windows详细安装部署教程
一、Nginx简介Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站点（俄文：Рамблер）开发的.它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。先下载直接去官网nginx.org分别有Linux和Windows两个版本点击后就会下载，下载完成后开始安装，其
2021-05-28 17:34:41
150
原创 vue项目中使用webSocket进行数据实时传输
在vue中怎样正确封装使用webSocket在vue项目中，每个组件里使用webSocket比较简单，但是webSocket的使用是在整个项目中的时候呢，我们就需要封装成一个公共的文件；1.新建一个 socket.js 文件var websock = null;var global_callback = null;var serverPort = '5000'; //webSocket连接端口 function getWebIP(){ var curIP = window.locati
2021-05-20 14:52:59
3215
2
原创 vue radio单选框获取当前项的value值，原来这么简单
前言本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句 v-for 写在 input标签上就可以1、使用v-for循环的radio单选框需要注意的是，这是使用的是 change 事件，而不是 click 点击事件<template> <div> <label v-for="(item, index) in radioData" :key="index"> <input type="radio"
2021-05-06 16:09:43
3878
原创 H5中背景图片自适应
写在html中body中，即可<body background="images\bg.jpg" style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;"></body>
2021-04-24 11:53:43
1267
原创 uniapp 常用提示框
1、成功提示框提交表单的时候，提交成功弹出的提示框。uni.showToast({title: ‘提交成功’,duration: 2000});2、加载框uni.showLoading({title: ‘加载中’});setTimeout(function () {uni.hideLoading();}, 2000);3、去掉图标，只显示文字提示框uni.showToast({title: ‘请填写员工工号’,icon:‘none’,duration: 2000});4
2021-04-08 11:55:18
2070
原创 vux的使用
首先自己要先新建一个vue项目，cmd进入到项目目录下，进行安装1.在项目目录下安装vux（也可以使用yarn安装，本人没有使用过就不多介绍了，我是用npm安装，网速慢的话可以使用淘宝镜像安装）npm install vux --save安装淘宝镜像npm install --registry=https://registry.npm.taobao.orgnpm config get registry //判断淘宝镜像是否安装成功使用淘宝镜像安装vuxcnpm install vux -
2021-04-07 14:34:35
2135
原创 uni-app tab切换
uni-app tab切换<template> <view class="content"> <!-- 头部 --> <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(inde
2021-04-02 11:03:21
2937
2
H5缺省页（pc端禁止f12调试等操作）
2022-06-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人