self_challenge-CSDN博客

原创 vue 竖向纵向仿表格动态渲染表头表格根据id填充单元格

关于布局这里不多说，上篇为此发过一篇，因需求布局稍微改动一下。移步至布局篇。如产品所说，一些数据是已封装好的，最后不要轻易动，既然这样、原本简单的需求必须由多接口返回数据，前端进行拼接并填充。后端提供3个接口供提取数据，分别是顶部任务对象，左侧树形结构，中间填充区域。加粗样式...

2020-12-18 14:04:13 1695

转载 js倒计时

<html> <head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> </head> <body onload="countTime()" > <div> <span id="_d">00</span> <span id

2020-12-11 15:34:00 331

原创 vue竖向表格 - 利用element实现解决纵向循环仿表格布局

实现效果图需求是完成纵向显示数据，支持表格分组、表头数据均可动态渲染<template> <div class="box"> <div class="tableHead"> <template v-for="(i,j) in tableHead"> <el-row :key="j"> <el-col :span="i.

2020-12-11 09:56:49 4240 1

原创 js+jq实现简单分割线分页器

分享这篇博文完全是因为懒得用插件…实现一些小功能，不过代码也确实简单，毫无技术可言，算是记录一下吧。路过的大神忍不住轻喷~<span class="btn"> <span id="first_page">首页</span> <span id="prev_page">上一页</span> <span> <span id="current_page">1</spa

2020-12-07 17:00:43 1145

1、页面跳转传值<button bindtap="byValueFun">点击传值</button>// 点击函数byValueFun: function () {//点击事件 wx.navigateTo({ url: '../xxx?id=xxx'//传值})// 页面创建时获取数据onLoad: function (options) { console.log('data',options)}...

2020-06-24 21:24:54 275

原创微信小程序路由跳转

wx.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面wx.reLaunch()关闭所有页面，打开到应用内的某个页面（包括 tabBar页面）wx.redirectTo()关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。wx.navigateTo()保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层wx.navigateBac.

2020-06-24 00:12:23 485

原创微信小程序生命周期

什么是生命周期？通俗来说比如像是一个人的生老病死，换成微信小程序的角度来看就是创建、开始、暂停、唤起、停止、销毁的一个过程。1、应用生命周期当用户首次打开小程序，触发 onLaunch() 这个全局中只触发一次onShow() 监听小程序显示当小程序启动，或者从后台进入前台显示，都会触发 onShowonHide () 监听小程序隐藏当小程序从前台进入后台，会触发 onHideApp({ onLaunch: function (options) { console.log

2020-06-22 23:36:01 391

原创 js判断当前浏览器是否是在移动端

判断当前浏览器是否是在移动端if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { // console.log('移动端'); this.isPc=false;} else { // co

2020-06-19 23:46:41 1695

原创 JS数组与字符串之间相互转换

toString() 将数组转换成一个字符串toLocalString() 把数组转换成本地约定的字符串join() 将数组元素连接起来以构建一个字符串toString()数组中 toString() 方法能够把每个元素转换为字符串，然后用逗号连接输出显示。var a = [1,2,3,4,5,6,7,8,9,0];var s = a.toString(); //把数组转换为字符串console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0”consol.

2020-06-18 23:08:46 1443 1

原创 js时钟代码

html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>独家自制</title

2020-06-18 00:10:21 518

原创 js实现随机文字大小及颜色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do

2020-06-16 22:43:06 1874

原创 vue后台管理系统用户的修改和删除

在CustomerDetails.vue的详情页面添加删除和修改按钮，删除的逻辑比较简单，直接通过按钮的click事件来请求网络完成删除，而编辑事件需要我们去新建一个Edit.vue组件来完成，Edit.vue和Add.vue很像，仿照来写就好CustomerDetails.vue<template> <div class="details container" > <router-link to="/" class="btn btn-default">返

2020-06-15 23:06:49 2625

原创 vue中axios封装思路

第一步安装npm install axios; // 安装axios第二步引入我会在项目的src目录中，新建一个http文件夹，在里面新建一个request.js和一个api.js文件以及port.js。request.js文件用来封装我们的axios，api.js用来统一管理我们的接口，port.js管理我们请求的路径。// 在request.js中引入axiosimport axios from 'axios'; // 引入axios设置接口请求前缀// 环境的切换if (proce

2020-06-15 10:06:01 201

原创 javascript生成随机验证码并验证

布局 <span id="code" style="background-color: #ccc">1010</span> <input type="button" value="刷新" onclick="randomCode()"><br> <input type="text" id="txt" placeholder="请输入验证码"> <input type="button" value="提交" onclic

2020-06-12 23:46:34 214

原创给dom元素绑定js事件的三种方式

在html标签中直接绑定；js中获取到相应的dom元素后绑定；使用addEventListener方法实现绑定； <button onclick="alert('执行了html绑定的方法')"></button>这种写法维护性差，用的很少。<button class="btn">dom0级绑定事件</button>var btn = document.querySelector('.btn.

2020-06-03 22:40:51 1433

原创 js的new操作符做了什么操作

new一个构造函数时，中间有什么过程？创建了一个空对象obj将构造函数的prototype赋给对象的__proto__构造函数对象作用域及this指针指向obj返回对象// 定义构造函数function Person (name='李四', age=20) { this.name = name this.age = age this.action = function () { console.log(`${this.name}今年${this.age

2020-06-02 21:46:41 143

原创 vue自定义简易封装弹框组件

<template> <div class="box"> <div class="shade" v-show="maskLayer"/> <div class="showElementBox" @click="closeEvent && closeTier()"> <div class="showElementTier"> <slo

2020-06-01 21:43:06 737

原创 vue监听指定元素滚动返回顶部

2020-05-28 23:37:18 667

原创 vue中防抖

防抖是我们在开发中很常用优化性能的方式，使用场景文本框输入搜索（避免连续输入时多次去请求接口）export function antiShake(fn, delay) { var delay = delay || 200; // 记录上一次触发的定时器 var timer = null; return function () { const th = this; var args = arguments; if (time.

2020-05-27 21:31:09 174

原创 vue函数节流

写项目时会用到监听scroll滚动条滚动事件。这个事件触发的很频繁，当监听器的回调函数越多越复杂，对性能影响越来越严重。我们可以利用定时器，让事件的回调函数在监听中按指定的时间间隔触发，而不是每像素移动都触发。function throttle(fn,delay){ // 记录上一次函数触发的时间以及定义一个定时器 var lastTime,timer; // 延迟多长时间 var delay = delay || 200; return function() { var.

2020-05-26 22:34:45 1429

原创 vue监听某一个元素是否滚动到底部

<div class="roll" @scroll="scrollEvent"></div>scrollEvent () { // 可存this指向 const ts = this document.querySelector('.roll').addEventListener('scroll', function () { // scrollHeight: 内容区域的总高度 clientHeight: 内容可视区域的高度 scrollTo

2020-05-25 22:39:02 2745

原创 vue对后端返回的时间戳进行转换自定义格式

一开始我们得到后台从数据库中拿到的数据我们希望格式是2020年3月16日 18时18分30秒　或 2020/3/16 18:18:30然而我们得到的只是一段数字（时间戳，毫秒数）1584354600刚开始拿到挺懵逼的，后来想到曾写过使用时间戳完成前一天后一天，那个都可以完成这个自然也不在话下。首先举一个例子下边的时间戳已是我从后台拿到的时间戳乘以1000，使用toLocaleString方法转换为字符串格式。var time = new Date(1584354600 * 1000).toLo

2020-05-23 23:02:18 1858

原创 Vue（踩坑）[Vue warn]: Error in render: TypeError: Cannot read property name of undefined

在项目中遇到这个报错在使用vuex遇到的错误，异步显示的数据先显示vuex中的初始数据，再显示请求的数据，一开始在vuex中state中的初始数据为空，报错是因为在显示初始数据的时候报错。解决办法加判断，避免在没有数据的时候显示加载（有数据再渲染），报错也不存在了。...

2020-05-23 00:45:16 15297 1

原创关于postcss-pxrem和vant - ui组件库冲突页面变小的问题

在vue移动开发中，使用px2rem-loader，它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem，最后影响样式。这个问题浪费了很长时间，在这总结一下以免忘了。。。安装npm install postcss-pxtorem --save在postcss.config.js中写入：const pxtorem = require('postcss-pxtorem')const autoprefixer =

2020-05-21 21:59:07 2847 2

原创 vue-cli3.0+环境切换

在项目里面，我们一般都需要配置生产环境和测试环境来进行管理，仅供参考。首先安装npm install cross-env –save-devpackage.json配置"scripts": { "serve": "cross-env BUILD_ENV=dev vue-cli-service serve", "build": "cross-env BUILD_ENV=prod vue-cli-service build"},vue.config.js配置module.exp

2020-05-20 20:56:25 445

原创 vue封装axios接口请求

Home.vue<template> <div class="home"> <button @click="getVeryTakeInformation">get非携参请求数据</button> <button @click="getTakeInformation">get携参请求数据</button> <button @click="postData">post携参请求数据</butto

2020-05-19 21:23:21 197

原创使用vue-cli 3.0+搭建项目

整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不详说了，网上一堆例子。有些人觉得npm安装较慢可以使用cnpm，全局安装cnpm，这里简单提一下。npm install cnpm -g --registry=https://registry.npm.taobao.org全局安装vue-clinpm install -g @vue/cli...

2020-05-18 23:16:27 111

原创 typescript

今天学习typescript的几种类型，在此记录总结，有不对的地方多多指正。tstypescript数据类型JS基本数据类型有 number,string,boolean,undefined,nullJS引用类型：Array,Object,functionTS还新增了一些类型：元组、枚举、Any,Void,Never等支持所有的JS数据类型。因为ts是强类型语言，所以对于已给定的值的类型不能修改为其他类型，否则将报错。 var person = '张三'; person = 222

2020-05-16 00:17:48 282

原创继承及模块化

首先定义一个父类：// 定义一个人名function Person (name) { // 属性 this.name = name || 'Person'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); }}// 原型方法Person.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food).

2020-05-14 22:14:31 315

原创 webpack构建工具配置和常用插件总结

webpack构建工具已经火了好几年，也是当下狠火狠方便的构建工具，我们没有理由不去学习。既然选择webpack就要跟着时代走，我们要追随大牛的步伐，大牛等等我。一、webpack基础在根目录使用npm init 命令创建package.json，创建过程中一路回车。本地安装webpack命令：npm install webpack webpack-cli --save-dev 安装成功后写入package.js的devDependencies中，可以通过 npm node_modules/.bin

2020-05-10 00:02:47 940

空空如也

空空如也