m0_45043105-CSDN博客

原创 ES8 async await 详解

异步函数 async function()1.作用避免有更多的请求操作，出现多重嵌套，也就是俗称的“回调地狱”，比如登录之后获取用户信息操作this.$http.jsonp('/login', (res) => { this.$http.jsonp('/getInfo', (info) => { // do something })})因此提出了ES6的Promise,将回调函数的嵌套，改为了链式调用：var promise = new Promise((resol

2021-02-18 16:30:46 203

原创 ts 常用声明的数据类型

/** * 1.1 ts 如何声明一个boolean, number, string类型的值 */// 在js中，定义 isFlag 为true, 但是后面还可以重新给它赋值为字符串，而ts中就不行，同理，声明number, string 也一样let bool: boolean = true;// 会报错：不能将类型“"str"”分配给类型“boolean”。// isFlag = "str"let str: string = "a";// 会报错：不能将类型“1”分配给类型“string

2020-11-09 15:27:03 1865

原创 vue+typescript element expandTable展开表格封装

<template> <div> <el-table :data="tableData" style="width: 100%" :show-header="true"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="

2020-07-29 01:54:33 660

原创 vue+typescript Table 动态编辑表格

子组件<template> <section class="ces-table-page">  <section class="ces-table"> <el-table :data="tableData" :size="size" :border="isBorder" @select="select" @selec

2020-07-28 03:35:06 1262

原创 vue动态渲染星期

流动性预测

2020-07-28 02:20:55 97

原创 ts二次封装element-ui的table表格，带loading，分页

新建文件tablePage.vue<template> <div id="table_page"> <el-table ref="vtable" v-loading="loading" @row-click="rowClick" @select="select" @select-all="select"

2020-07-26 18:28:38 593

原创 vue+typescript封装简单查询组件

**组件的整体思路是通过一个 config 数组生成列表的头部表单：**设计出 config 的数据结构 data.ts/* * data.ts * * 数据类型 - table-header 组件 */export class SelectOptionItem { public value: String | Number; public label: String | Number;}export class HeaderConfigItem { public tit

2020-07-26 18:20:43 373

原创 vue 自动生成路由，path和name默认去除index

router.js/** * 规则： * 一、例如：index/index，shop/index以index结尾的，path和name默认去除index * 二、例如：shop/list，默认生成name为shop_list（如果结尾为index，例如shop/index则是shop） * 三、填写后不会自动生成 * **/let routes = [{ redirect: { name: 'index' }, // component: () =>.

2020-07-26 17:24:56 1464

原创创建相册，批量删除，图片预览，上传图片

<template> <div> <el-container style="position:absolute;top:130px;bottom:0;left:0;right:0;">  <el-header class="d-flex align-items-center border-bottom"> <div class="d-flex mr-auto"&g.

2020-07-26 17:14:51 245

原创 vue布局样式

<div class="media align-items-center border"> <span class="border-right px-3 py-4 bg-light">昨日销量</span> <div class="media-body" style="font-size:14px;"> <div class="border-..

2020-07-26 17:05:51 1360

原创 vue 引入js-cookie

创建个文件夹，创建个js文件import Cookies from 'js-cookie'const TokenKey = 'JSESSIONID'export function getToken() { return Cookies.get(TokenKey)}export function setToken(token) { return Cookies.set(TokenKey, token)}export function removeToken() { retur

2020-07-26 16:34:52 431 1

原创 vue处理number数据类型千分位计算

定义一个methods方法 // 千分位匹配价钱 isMoney(val) { if (typeof val === "number") { return val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"); } },请求到数据遍历数据处理价钱做千分位计算 this.tableData = res.data.data.items; // console.log(this.

2020-07-26 16:22:57 2327

原创 vue 全选，选中删除功能实现

<p> <input type="checkbox" @click="change" :checked="isSelectAll" /><span >全选</span > </p>利用vue computed计算属性，计算选中状态computed: { // 全选状态 isSelectAll() { if (this.addlist.length =.

2020-07-26 15:57:44 2877

原创 Vue.filter时间过滤器

Vue.filter('timer',function(str){ if(!str) return ''; let textDate=new Date(str); let time=new Date().getTime()-textDate.getTime(); if (time < 0) { return ''} else if ((time / 1000 < 30)) { return '刚刚'} else if (time / 1000 < 6

2020-07-26 14:59:34 309

原创 vue基于Blob.js和 Export2Excel.js做前端导出

1安装三个依赖包npm install -S file-savernpm install -S xlsxnpm install -D script-loader2导入两个js下载Blob.js和Export2Excel.js，在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件，下面有Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27

2020-07-26 14:49:33 910

原创 vue-clipboard2(vue剪切板功能)

安装npm install --save vue-clipboard2在main.js中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)例如：<span>{{invitationCode}}</span><img src="../../static/img/d1.png" v-clipboard:copy="invitationCode" v-clipboard:success

2020-07-26 14:36:31 151

原创 vue图片裁剪组件封装

本文封装了一个上传图片裁剪功能的组件，这里引入了vue-cropper插件。安装npm install vue-cropper使用import VueCropper from 'vue-cropper'Vue.use(VueCropper)创建个子组件<template> <div class="cropper-box" > <VueCropper :style="{width:option.autoCropWidth+'px

2020-07-24 13:59:20 346

原创 download:post下载

本文写了一个ts封装的小方法，download下载功能的实现，首先建立一个ts文件：import axios from 'axios'//post 下载export const download = (url: string, obj: any, fileName: string, format: string): void => { axios.request({ method:'post', url: url, data: obj, responseType:'arraybuffe

2020-07-24 13:47:25 389

原创如何把if-else代码重构成高质量代码，愿你未来的人生里，不只是有if/else/switch

前提我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子先看一段代码/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick = (s

2020-06-09 11:04:06 223

原创 vue+element-ui实现聊天表情包

我是用的本地json数据实现的，表情不是很多，首先创建个json文件，代码如下：[{ "codes": "1F600", "char": "????", "name": "grinning face" }, { "codes": "1F603", "char": "????", "name": "grinning face with big eyes" }, { "codes": "1F604", "char": "????"

2020-06-08 16:18:28 2459

原创 vue axios封装方法

创建个request.js 文件import axios from "axios";import { throwErr } from "../utils"; //utils 捕捉服务端http状态码的方法import store from "@/store"; //引入vuex的相关操作// eslint-disable-next-line no-unused-varsimport router from "@/router";//过滤请求axios.interceptors.request

2020-06-04 16:06:22 170

原创前端处理时间格式，时间戳的转换封装

首先建立个js文件const WEEK_ARR = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']export class DateFormat { date constructor (date = new Date()) { this.date = this.getDate(date) } getTimestamp (days) { return days * 24 * 60 * 60 * 1000 } add (co

2020-06-04 15:42:25 318

原创原生js实现贪吃蛇小游戏

废话不多说直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>贪吃蛇游戏</title></head><style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } c

2020-05-25 16:06:10 597

原创 js十大经典排序算法

名词解释：n: 数据规模k:“桶”的个数In-place: 占用常数内存，不占用额外内存Out-place: 占用额外内存稳定性：排序后2个相等键值的顺序和排序之前它们的顺序相同冒泡排序（Bubble Sort）冒泡排序算法的原理如下：1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。2.对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。3.针对所有的元素重复以上的步骤，除了最后一个。4.持续每次对越来越少的元素重复上面的步骤，.

2020-05-25 10:01:34 248

原创价钱金额，千分位计算

废话不多说直接上代码 // 千分位匹配价钱 isMoney(val) { if (typeof val === "number") { return val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"); } }, // 根据请求回来的数据处理数据格式 this.tableData.forEach(v => { // 千分位匹配价钱

2020-05-25 09:27:08 284

原创 element-ui多级菜单+面包屑导航封装

根据文件结构依次贴出代码好了，里面有请求的接口数据header index.vue 这个文件是到航头面包屑导航<template> <div class="header"> <div id="header-sidebar-open-close"> <i :class="[ getsidebar.opened ? 'el-icon-s-unfold' : 'el-icon-s-fold',

2020-05-22 15:29:26 2106

原创滚动条css样式

2020-05-22 15:12:47 82

原创解决刷新保存vuex里面保存的数据

只需要在app.vue里面写入以下代码<template> <div id="app"> <router-view /> </div></template><script>export default { data() { return {}; }, created() { if (sessionStorage.getItem("store")) { this.$store

2020-05-22 15:09:55 293

原创 element-ui table表格+分页器封装

表格组件代码：Table.vue<template><section class="ces-table-page">  <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :size="item.size || size" :type="ite

2020-05-22 15:06:12 1689 2

原创表单防抖，防止表单重复提交

首先新增一个js文件，用来放防抖等工具方法。// 防抖防止表单重复提交export const Debounce = (fn, t) => { let delay = t || 300 let timer return function () { let args = arguments; if (timer) { clearTimeout(timer) } let callNow = !timer timer = setTim

2020-05-22 11:03:01 876

原创 js的函数防抖与函数节流

做了一个小例子，深入的了解函数节流与防抖的区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2019-12-11 19:51:52 314

原创 js获取浏览器和元素对象的尺寸

1.屏幕尺寸，这种方式获取的是屏幕的大小，这个不会随着浏览器窗口大小而变化，这个值是固定的1 window.screen.height //屏幕分辨率的高2 window.screen.width //屏幕分辨率的宽3 window.screen.availHeight //屏幕可用工作区的高4 window.sc...

2019-12-11 16:56:54 151

原创树形菜单导航Vue和Element实现

最近做项目时遇到一小难点，动态渲染element-ui 的侧边栏导航菜单，有三级路由，有二级的，渲染完事了发现二级的跳转不了路由，这可着急坏了，出了一身汗。。。。二级里面的订单列表不能跳转路由，三级里面才可以跳转，而且还有个小箭头，经过几个小时的研究最终搞定，最终是利用vue name属性，然后实现递归编写一个自定义zMenu.vue组件，其中实现递归逻辑<template&...

2019-12-07 19:50:29 941 1

原创 Vue 3.0使用高德地图 vue-amap

这篇文章写一下高德地图的简单应用，本人也是刚入坑，在研究阶段注册高德开发者账号，申请KEY完成注册注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框：vue安装vue-amapnpm install vue-amap --saveindex.html 引入<script type="text/javascript" src="h...

2019-12-07 00:54:03 7650 3

原创 ios和Android常见的兼容问题

二十五：ios和Android常见的兼容问题1.滑动不流畅问题，这个滑动不流畅好像局限于局部的滚动，建议都写成全局滚动，在css样式中加上：body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}解决流畅度。2.ios下下拉上滑会出现出界情况浏览器自带黑色背景色，解决方案：使用 scroll...

2019-12-06 13:22:34 1828

原创饿了么了加入购物车小球抛物

饿了么加入购物车小球抛物动画效果<template> <div class="wrapper"> <div class="list-wrapper"> <div class="item"> <div class="left"> <img src="../../assets/...

2019-12-05 20:29:25 364

原创 vue 饿了么菜单左右联动

最近写了一个小demo ,饿了么菜单左右联动效果，由于公司的后台太差劲，到现在还没有给我接口文档，就用本地数据写了一下，写得注释超级详细，主要是点击左侧右侧可以滑动到指定位置，滑动右侧左侧联动效果，回弹动画效果，别的还没有写，直接上代码有需要改进的地方，欢迎各位提出宝贵的意见基于better-scroll 做的首先需要下载npm install better-scroll --save...

2019-12-05 01:27:12 1615 1

原创布局瀑布流布局

用 vue 实现了一个瀑布流布局，注释写得超详细 ,直接上代码吧<template> <div id="ref"> <div class="fox" v-for="(item,index) in imgList" ref="box" :key="index"> <img :src="item.pic" ...

2019-12-04 12:12:28 155

原创前端面试题

上篇文章主要整理了一些vue 的面试题，但是那些还远远不够这篇文章继续整理前端常被面试官问到的问题：一：什么是BFC?什么时候触发BFC?　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。　**　BFC...

2019-12-02 08:32:35 5191

原创 Vue 中常见的面试题/知识点整理

看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。（都是一些基础的vue面试题，大神不用浪费时间往下看）一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以...

2019-12-01 20:10:28 1015 1

空空如也

空空如也