木灵鱼儿

木灵鱼儿 4年前 JavaScript

目前前端下载文件的最佳实践

目前前端最佳的方案其实有两种：a元素下载iframe 无闪下载事实上这两种下载方式，其实都存在相同的一个问题，就是如果下载的文件是跨域的（不是同域名下的问题，或者其他原因）；并且这个文件浏览器可以直接打开的，比如：图片、文本文件。那么浏览器会直接打开文件，并不是触发下载，而如果下载的文件是安装包，压缩包zip这些，则是触发下载。这个问题就很头疼。a元素下载的缺点a元素下载，那么就必须设置download属性，这个属性可以接收一个参数，可以是带后缀的文件名，或者不带后缀。也可以为空，但是要设。不带后缀的话文件格式就会与下载的文件保持一致，如果带了格式后缀，可能导致下载的jpg文件，你设置为...

6818 12 0

javascript 下载文件 a

纯css来做表单校验样式

木灵鱼儿 4年前 CSS

纯css来做表单校验样式

css3新增了三个伪类：:required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过，表单元素和form表单都有的伪类:invalid 表示不通过，表单元素和form表单都有的伪类其实如果要做一个表单css校验样式，:valid和:invalid就行了，但是实际操作上，:invalid还是有一些问题的。当表单元素有required属性的时候，该表单元素默认就是:invalid，也就说，必填的表单元素，一开始就是不通过。所以，如果此时设置:invalid伪类样式，是不合适的。解决办法就是：使用:placeholder-shown...

4704 0 0

样式 css input

nuxt mixins全局混入

木灵鱼儿 4年前 nuxt

nuxt mixins全局混入

全局混入我考虑到可能会有多个混入，如果把混入的内容全部写在同一个js文件里面，那是非常混乱的，所以我采用模块化的写法，其实就是导入导出而已，一种方式。具体用法和全局过滤器一样，创建插件，激活插件。在plugins目录下创建mixins文件夹，mixins里面创建一个index.js作为入口文件，然后再创建一个modules目录，用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...

5472 0 0

vue nuxt mixins

nuxt filters全局过滤器

木灵鱼儿 4年前 nuxt

nuxt filters全局过滤器

nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器，我们需要写一个插件，并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...

5906 0 0

过滤器 filters vue

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

木灵鱼儿 4年前 nuxt

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

这是一个奇葩的报错，因为他居然是因为模板vue文件没有设置name导致的。也就是说，如果要解决这个问题，在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

8231 0 0

name nuxt 报错

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

木灵鱼儿 4年前 nuxt

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

出现这个问题，往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的，为什么会不同，举个例子：我们v-if判断客户端是否存在localstorage.getItem("token")，但实际上服务端永远不可能拿到，因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有，你浏览器上又有了，那不是就产生冲突了。于是就会报这个错，但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行，nuxt提供了一个自定义标签：client-only表示在这个标签内的内容，只有有客户端才会渲染运行，这样就可以让虚拟dom保持一致，且不...

5840 0 0

虚拟dom nuxt 报错

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

centos 不小心删除了安装源repo文件的救命稻草

木灵鱼儿 4年前教程

centos 不小心删除了安装源repo文件的救命稻草

折腾小主机的时候，不小心没备份成功，删除了repo安装源文件，导致现在yum干啥都报错，特别是，我没有安装wget，真的是叫天天不应，入地地无门。唯一的办法就是去别的地方拿一个相同版本的系统的安装源，要么重装。这时，我们就需要这根救命稻草了[hide]打开这个网址：阿里安装源找到你系统对应的版本，比如我是8.x的版本，我们就下载Centos-8.repo这个文件，下载完毕后上传到centos系统/etc/yum.repos.d目录下。上传前记得改名为：CentOS-Base.repo然后我们清理缓存，重建缓存yum clean all yum makecache完事搞定，yum又活过来了...

3936 0 0

centos 教程 yum

windows10 子系统ubuntu安装宝塔配置开发环境

木灵鱼儿 4年前教程

windows10 子系统ubuntu安装宝塔配置开发环境

我真的是被小主机给整疯了，不想再碰了，又准备回到虚拟机的行列，但是还用vw总感觉不合我意。docker安装看了下，确定了，不会用。于是打起来windows10的子系统的主意，虽然目前有一点瑕疵，但是问题不大。先开启功能控制面板 --- 程序和功能 --- 启用或关闭windows功能 --- 勾选：Hyper-v和适用于Linux的windows子系统下载最新的内核包：Linux 内核更新包下载完双击安装即可。安装完毕我们需要切换到wls2，打开PowerShell，输入以下命令wsl --set-default-version 2然后就是安装linux系统[hide]安装之前，以防万一...

4817 0 1

教程前端 windows10

nuxt 路由鉴权

木灵鱼儿 4年前 nuxt

nuxt 路由鉴权

由于nuxt无法配置路由信息，所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案，大概流程如下：创建一个路由中间件auth，用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时，auth进行判断：重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js：export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...

6459 0 2

vue 鉴权 nuxt

nuxt vuex持久化

木灵鱼儿 4年前 nuxt

nuxt vuex持久化

老规矩，还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕，在plugins目录创建一个localStorage.js文件localStorage.js：import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { ...

5103 0 0

vue nuxt vuex持久化

解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

木灵鱼儿 4年前 nuxt

解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

在使用vant框架的时候，一般都是使用rem自动适配，这个东西有好有坏，具体就不细说，我们这次处理的问题就是使用了rem适配，他样式第一次加载闪烁的问题。其实出现这个问题，大多数都是使用了plugins插件的方式加载rem适配。具体如下：在plugins目录下创建了lib-flexible.js文件，文件名随意打开文件，在里面写入import 'amfe-flexible'打开nuxt.config.js，在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' }...

6963 25 0

amfe-flexible nuxt rem适配

element input异步校验+自定义错误提示

木灵鱼儿 4年前 vue 项目实战

element input异步校验+自定义错误提示

主要的效果就是用户注册时，输入的账号如果已经注册了，要提示已经注册，然后提供一个按钮，直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

1.3w 0 1

vue element input

element input表单验证数字类型方法大全

木灵鱼儿 4年前 vue 项目实战

element input表单验证数字类型方法大全

是不是常常头疼数字类型的校验，整数，小数，往往无法通过一个rules的type属性搞定，自定义校验又五花八门，是否有一套标准流程呢？整数校验整数校验简单，input使用.number修饰符，rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数：" pr...

1.1w 116 0

vue element 浮点数

异步队列管理器

木灵鱼儿 4年前 JavaScript

异步队列管理器

造这个轮子其实也是没得办法，搜不到合适的轮子用，就只能自己干了。使用场景我们有N个异步任务promise，他们没有顺序关系，谁先触发都无所谓，但是我们只关心一点，如果某一个任务出错，后续就不要运行了，只有全部都success完成，那么才运行成功后的处理方式then。当然，我们肯定不能使用Promise.all运行N个任务，这等于是同步触发了，如果我有2000个任务，难道你也一口气发2000个任务，那这就不现实了，所以这里我们要引入线程概念，一个进程可以有多个线程，那么进程就是管理器，线程就是我们一次可以发多少个请求。线程是可以配置的，我们可以指定触发多少个线程，当1个线程完成后，我们要填...

4906 0 0

管理器 javascript promise

Iterator 和 for...of 循环

木灵鱼儿 4年前 ES6

Iterator 和 for...of 循环

Iterator（遍历器）的概念JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：一是为各种数据结构，提供一个统一...

4000 14 0

es6 Iterator for...of

Promise

木灵鱼儿 4年前 ES6

Promise

基本了解Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfil...

3839 0 0

promise es6

Reflect

木灵鱼儿 4年前 ES6

Reflect

Reflect也是es6新增的api，他的出现主要是解决以下几点问题：将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上修改Object对象的一些方法的返回结果，比如：Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。// 老写法 try { Object.defineProperty(target, property, attributes); //...

3832 0 0

javascript es6 前端

移动端适配iPhoneX和安卓底部小黑条

木灵鱼儿 4年前 CSS

移动端适配iPhoneX和安卓底部小黑条

这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover...

4919 0 0

css 移动端 iPhoneX

fetch和ajax获取不到头信息的解决办法

木灵鱼儿 4年前 vue 项目实战

fetch和ajax获取不到头信息的解决办法

今天就遇到一个问题，后端从头信息给我携带了数据，我需要在请求头中获取，但是不管怎么get，返回的永远是null，但是f12去看响应头，那个数据就在那，亮瞎了眼。一个大大的问号？why？？？谷歌查了下原因，大概就两种：安全限制，不允许客户端获取部分头信息跨域了，对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ，在“Access-Control-Allow-Headers”中加了无效说到底，还是后端的设置，如果是nigix可以参考下面的代码：以token头信...

4522 0 0

AJAX 跨域 vue

Proxy 代理

木灵鱼儿 4年前 ES6

Proxy 代理

简介proxy用于修改某些操作的默认行为，由于是在语言层做出了修改，所以属于一种“元编程”，也可以理解为代理层，可以对外界的访问进行过滤改写。var proxy = new Proxy(target, handler);new 出Proxy，接收两个参数，一个是需要被代理的对象target，一个是代理的拦截器配置对象。var proxy = new Proxy({}, { get: function(target, propKey) { return 35; } }); proxy.time // 35 proxy.name // 35 proxy.title // 3...

4523 0 0

es6 proxy 代理

移动端开发调式插件-VConsole

木灵鱼儿 4年前 nuxt

移动端开发调式插件-VConsole

简单使用移动端开发最蛋疼的是什么？当然是调试了，在真机测试阶段，console输出看不了，只能alert，alert又不是能查看对象这种复杂的东西，请求信息也没法看，总之就是有点难受。为什么手机就不能像电脑那样f12出来个控制台呢？于是乎，vConsole 出现了，他是一款移动端的前端开发者调试面板，可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行，基本就是一个小控制台了，满足了日常开发调试所需。这个插件是由腾讯开发的，应该是为了微信小程序顺便开发的，github地址在此：vConsole使用方法也很简单...

7108 0 3

nuxt 移动端 VConsole

关于element el-checkbox组件click事件的一些想法

木灵鱼儿 4年前 vue 项目实战

关于element el-checkbox组件click事件的一些想法

el-checkbox本身是没有click事件的，但是我们可以通过native的方式穿透下去，但是这样的话会有一个问题，我们先看下代码：<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出，你会发现，click实际上运行了两次，native本身是将事件绑定给了组件的根元素，这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果，因为stop只能防止根元素往上冒泡，并不能阻止他本身...

8594 1 0

vue element el-checkbox

Set和WeakSet、Map和WeakMap数据结构

木灵鱼儿 4年前 ES6

Set和WeakSet、Map和WeakMap数据结构

Set 基本用法es6提供了一种新的数据结构Set，他是一个构造函数，初始化时可以接收一个参数，这个参数可以是数组，或者是带有iterable接口的数据。const s = new Set([1,2,3,4,1,2]); [...s]; //[1,2,3,4]从这里我们看的出来，set有一个非常棒的特性，就是去重，重复的值会被自动忽略。而带iterable接口的数据有数组，dom类数组等等，一般常用的就是数组了。set是如何判断是否相等，用的算法叫Same-value equality；他类似于全等运算符===；但对于NaN的判断略有不同。在全等中两个NaN是不想等的，但是在set中，...

4386 0 0

Set WeakSet Map

文件上传时对input标签的重置

木灵鱼儿 4年前 JavaScript

文件上传时对input标签的重置

今天就遇到了这个需求，当我上传文件超时或者失败后，再选择同一个文件上传，是不会触发change事件的，所以失败或者成功后我们需要重置下元素。<form action="" id="uploads"> <input type="file" id="fileUp"/> </form>1# 将整个form表单重置 $("#uploads")[0].reset(); //重置 2# 将当前input标签的value值设为空 document.getElem...

3252 0 0

javascript input 重置

vue 通过js触发element ui的图片预览组件

木灵鱼儿 4年前 vue 项目实战

vue 通过js触发element ui的图片预览组件

element ui的图片预览组件并没有单独提供出来，默认是在image组件里面一起使用，但是有的时候，我们需要点击某一个自定义按钮，然后弹出图片预览，但是，又不需要使用el-image组件，于是乎，有了这篇笔记。首先思路并不是我的，我也是看了下同事，他网上找的教程，然后我看了下，在掘金找到一篇文章：《Vue中使用element-ui的内置组件实现图片预览全局调用功能》；深受启发，于是也记下自己的笔记。首先思路是两个：element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来，new出来的这个构造器，他的属性为组件的属性以及其他（其他就...

7490 0 0

vue element 图片预览

木灵鱼儿

目前前端下载文件的最佳实践

纯css来做表单校验样式

nuxt mixins全局混入

nuxt filters全局过滤器

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

centos 不小心删除了安装源repo文件的救命稻草

windows10 子系统ubuntu安装宝塔配置开发环境

nuxt 路由鉴权

nuxt vuex持久化

解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

element input异步校验+自定义错误提示

element input表单验证数字类型方法大全

异步队列管理器

Iterator 和 for...of 循环

Promise

Reflect

移动端适配iPhoneX和安卓底部小黑条

fetch和ajax获取不到头信息的解决办法

Proxy 代理

移动端开发调式插件-VConsole

关于element el-checkbox组件click事件的一些想法

Set和WeakSet、Map和WeakMap数据结构

文件上传时对input标签的重置

vue 通过js触发element ui的图片预览组件

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

目前前端下载文件的最佳实践

纯css来做表单校验样式

nuxt mixins全局混入

nuxt filters全局过滤器

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

centos 不小心删除了安装源repo文件的救命稻草

windows10 子系统ubuntu安装宝塔配置开发环境

nuxt 路由鉴权

nuxt vuex持久化

解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

element input异步校验+自定义错误提示

element input表单验证数字类型方法大全

异步队列管理器

Iterator 和 for...of 循环

Promise

Reflect

移动端适配iPhoneX和安卓底部小黑条

fetch和ajax获取不到头信息的解决办法

Proxy 代理

移动端开发调式插件-VConsole

关于element el-checkbox组件click事件的一些想法

Set和WeakSet、Map和WeakMap数据结构

文件上传时对input标签的重置

vue 通过js触发element ui的图片预览组件

最近评论

博客文章RSS订阅

博客评论RSS订阅