木灵鱼儿

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

木灵鱼儿 4年前 ·

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

主要问题还是因为样式的问题，实际上嵌套的el-form如果正确配置了数据，如：model、rules、prop，那么如果rules里面没有配置必填，那么是不会有必填的效果的，只是因为受到父组件必填的样式影响。我们先看下官方的选择器：.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:befor...

4046 0 0

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

木灵鱼儿 4年前 JavaScript

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

json在格式化对象是，如果是普通的键值对对象还是没有问题的，但是如果他的值是一个函数，在格式化之后，函数就会被剔除。const a = { name: '我爱你', fn: function(){ console.log("我也爱你！") } }; const b = JSON.stringify(a);当你输出变量b的时候，你得到的会是："{\"name\":\"我爱你\"}"fn不见了！引用JSON.stringify()方法描述中的一段解释：undefined...

5946 0 0

对象函数 json

nuxt 一文读懂@nuxtjs/axios的用法

木灵鱼儿 4年前 nuxt

nuxt 一文读懂@nuxtjs/axios的用法

在nuxt中，有一个专门的axios版本：@nuxtjs/axios；但是由于nuxt的文档，或者说是资料不是很齐全（零散），初步了解后觉得这个插件并不是很方便，很多时候，我们都是模块化的axios写法，在使用@nuxtjs/axios时，会发现有点束手束脚，于是转而放弃使用，而是单独引入axios，然后一顿操作。当我们单独封装axios的时候，有没有这种想法：报错了能不能跳转到nuxt的错误页面？；但是实现时发现，除了在asyncData这些方法里面可以解构到error对象然后利用它跳转，好像在单独的一个js文件里面，没办法直接跳转。但是，如果我们使用@nuxtjs/axios，那么我...

1.1w 0 14

proxy 拦截器 nuxt

vue 横向滚动组件

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

vue 横向滚动组件

最近遇到这么一个需求，就是内容一行显示，滚轮滚动的时候，进行横向滚动。本来想尝试下css能不能做到，最后发现，即便改变了流的布局，并不能改变滚动条的方向，最后还是只能用js做了。滚动兼容性滚轮只存在pc的时候，所以触摸事件是不考虑的，触摸的话可以直接用better-scroll插件。滚动事件需要兼容火狐和谷歌：火狐滚动事件：DOMMouseScroll谷歌滚动事件：mousewheel其中DOMMouseScroll的event对象，他有一个detail字段，向下滚动是3，往上滚动是-3mousewheel的event对象是deltaY，往下滚动是125，往上是-125，具体数值记不清了...

7963 0 0

vue 横向滚动 DOMMouseScroll

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

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

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

莫名其妙就提示css冲突和顺序问题，而且组件里面的样式和class类名完全不相干，不知道怎么就给你冲突了。顺序都有点莫名其妙，这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然，反正就是大量的警告，18年就有人提出这个问题了，唉，头疼issues目前普遍的解决办法就是忽略这个警告，因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹，插入以下代码：module.exports = { css: { extract: { ignoreOrder: true }, }, }保存，然后重新打包，不会再提示冲突和顺序问题了

3836 0 0

警告 vue vue cli

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

做个笔记判断对象中是否存在某个属性

木灵鱼儿 4年前 JavaScript

做个笔记判断对象中是否存在某个属性

本来是一个很简单的需求：const a = { b:1 }本来我的需求是判断，这个a对象里面b是否存在，但是b的值不确定，他可能是布尔值false，也可能是数字0，或者是空字符。那么if(a.b)就不太行了，一般来说，老前端一般都是用in 操作符。"b" in a; //true但是es6后，一般来说，不建议这样使用的，同时不建议的还有delete操作符。于是问了下群友，因为我记得es6有那么一个方法，可以判断一个对象的属性是否存在，并且不会去查prototype上的内容。但是我忘了啥名字来着！const a = { b:1 } a.hasOwnPrope...

6796 0 7

javascript hasOwnProperty

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

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

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

这个奇葩的问题，搞得我人都傻了，怎么软件内置的浏览器不能上传文件呢？？？就离谱！一开始我以为是软件的安全限制，后来发现不对，为什么别人的网页可以上传？？[hide]解决方法把input的accept属性去了就行了<input type="file">去掉了accept，就没办法限制文件类型了，只能前端js做判断，我就顺带提供一个vue中使用的限制方法。前端限制文件类型方法假设我们data中有一个accept属性，他是一个数组，表示允许上传的文件类型<script> export default { data(){ return { ...

1.1w 0 13

vue 内置浏览器上传文件

typecho 真的很简单的自定义评论列表

木灵鱼儿 4年前 Typecho博客教程

typecho 真的很简单的自定义评论列表

以前写过一个关于自定义评论的文章，时至如今来看，还是有很多不足的，昨晚再新写主题的时候，也重新写了一次自定义评论，嗯，有了新的理解，因为其实真的很简单，仔细阅读本篇文章，相信你会有收获的。[hide]自定义评论模板到底要怎么做很简单，可以理解为两步：编写自定义评论的模板通过php渲染出自定义模板评论而为什么大多数人不会，其实就是因为官方的文档真的是，如果懂php的人，可能看了一两遍后明白了怎么回事，但是如果是小白入门，纯前端的童鞋，可能看的一脸蒙蔽。就算是原封不动的copy官方的示例代码也还是会报错，心累...因为，你不知道他要做什么，我编写了自定义模板函数threadedComment...

10.1w 0 122

typecho 评论自定义评论

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

木灵鱼儿 4年前 JavaScript

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

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

6599 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...

4558 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("我是一个全局混入方法"); }...

5271 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...

5696 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", }问题解决。

7988 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保持一致，且不...

5640 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又活过来了...

3801 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]安装之前，以防万一...

4590 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: ...

6126 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 { ...

4912 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' }...

6731 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.2w 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个线程完成后，我们要填...

4729 0 0

管理器 javascript promise

Iterator 和 for...of 循环

木灵鱼儿 4年前 ES6

Iterator 和 for...of 循环

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

3824 14 0

es6 Iterator for...of

Promise

木灵鱼儿 4年前 ES6

Promise

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

3667 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); //...

3655 0 0

javascript es6 前端

木灵鱼儿

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

nuxt 一文读懂@nuxtjs/axios的用法

vue 横向滚动组件

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

做个笔记判断对象中是否存在某个属性

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

typecho 真的很简单的自定义评论列表

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

纯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

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

nuxt 一文读懂@nuxtjs/axios的用法

vue 横向滚动组件

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

做个笔记 判断对象中是否存在某个属性

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

typecho 真的很简单的自定义评论列表

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

纯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

最近评论

博客文章RSS订阅

博客评论RSS订阅

做个笔记判断对象中是否存在某个属性