木灵鱼儿

木灵鱼儿 5年前 ES6

es6 正则

new RegExp 调整原来es5的时候，new一个正则出来，如果第一参数就是正则，那么只会返回这个正则参数出来，并且是不能使用第二个参数的。否则就会报错。es6调整了一下，即便第一个参数是正则，我们也能使用第二个参数给他指定修饰符，这个修饰符会覆盖原来参数自带的修饰符//传统 const a = new RegExp('one','ig'); //输出 /one/ig const b = new RegExp(/one/ig); //输出 /one/ig //es6 const c = new RegExp(/one/ig,...

4886 0 0

正则

vue 文件分析插件 webpack-bundle-analyzer 安装使用

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

vue 文件分析插件 webpack-bundle-analyzer 安装使用

安装npm install --save-dev webpack-bundle-analyzer配置webpack.base.conf.js没有这个文件就手动创建，和package.json文件同级别module.exports = vuxLoader.merge(webpackConfig, { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: ...

4288 0 0

文件分析

gravatar头像获取

木灵鱼儿 5年前教程

gravatar头像获取

gravatar的头像很容易获取，他的格式可以理解为三段，第一段为基本地址，第二段为用户邮箱，第三段为头像的参数。这里拿我自己的头像地址来讲：https://gravatar.loli.net/avatar/947695cdd998ee8dd50e153e12b35ff1?s=70其中https://gravatar.loli.net/avatar/为第一段。第二段为947695cdd998ee8dd50e153e12b35ff1；这是一个加密的邮箱地址，加密方式是md5。第三段为?s=70用于get请求是发送头像要求。我们只需要修改第二段就可以获取不同人的头像，方法也很简单，找一个md...

6249 0 3

gravatar

代码字符连字特性的字体

木灵鱼儿 5年前教程

代码字符连字特性的字体

最近沉迷Jetbrains Mono字体，首先是他字符好看，16px的大小视觉效果堪称一流，配合Atom One Dark主题配置，完美使用，代码显示优雅漂亮。然后我发现了一款新的字体，由微软出的，名为连字特性的字体;也就是说，一些一元运算符在书写的时候，可以缩写为更短的字符，三个等于号变为三横线符号，还有数学的大于等于符号那些上个效果图：下载地址：githubvs code使用字体安装后，在设置里面的控制字体系列添加上'Cascadia Code'如果只需要大于号等于号连字效果而不想改变原来的字符字体，可以丢到第二位，第一位放你自己喜欢的字体名字。然后搜索Font ...

4263 0 0

连字特性的字体代码字符

vue keep-alive 白名单(include)和黑名单(exclude)

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

vue keep-alive 白名单(include)和黑名单(exclude)

keep-alive作为vue的缓存标签，有时候也会遇到一些问题，比如，某些页面我们不想缓存，以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。但现在不一样了，以前的那种方法并不适合现在了，因为keep-alive自带了黑名单和白名单，在白名单中的路由或者组件将会缓存，黑名单中的则不会缓存。例子 <keep-alive include="a,b" exclude="c,d"> <router-view/> </keep-alive>多个组件用英文逗号隔开，单个就写...

7413 0 0

keep-alive 白名单 include

vant框架Layout布局中col元素不够宽度变形的解决办法

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

vant框架Layout布局中col元素不够宽度变形的解决办法

用Layout的时候，我设置的是一行三个元素显示，但是有时候，遍历的对象可能无法满足一行三个显示，结果发现col元素会把拉伸一部分宽度。这就很尴尬了，我在使用其他框架的这种布局的时候都没遇到这种情况，没办法，只能用死办法，我给你补上几个空col了那么，如何计算需要补充几个呢？假设我们要遍历的数组名为：oneArr创建一个计算属性：fillArr() { const remainder = Math.ceil(this.indusArr.length % 3); if (remainder !== 0) { return 3 - remainder;...

6288 0 0

vant layout col

vue 组件开关变量的小技巧

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

vue 组件开关变量的小技巧

以前的我，很喜欢用vuex来做一个元素的开关存储，因为简单粗暴，我不用考虑组件之间要怎么才能传参，怎么去更新，只需要设置一个变量，getters获取，mutations设置一下，一个开关变量就做好了。但是随着东西越来越多，我发现，vuex重复书写的代码非常多，我觉得这应该是以后vuex优化的一大方向，所以，我有点不太想用vuex来存储所有组件的开关状态了。于是我想到了props，父组件向子组件传参的方式传替布尔值开关。再利用sync修饰符，通过预设的更新方法更新内容。父组件<Child :switch.sync="open"> <script>...

4283 0 0

vuex

js 数组随机排序

木灵鱼儿 5年前 JavaScript

js 数组随机排序

记录一个常用的数组方法let arr = [1,2,3,4,5]; arr.sort(function() { return Math.random() > 0.5 ? -1 : 1; });sort方法在原数组上进行操作，不会生成新的数组。

2963 0 0

数组随机排序

数组克隆和对象克隆

木灵鱼儿 5年前 JavaScript

数组克隆和对象克隆

今天写vue组件的时候碰到一个问题，我创建了一个子组件，这个子组件会通过父组件传过来的数组对象进行遍历，然后生成多个筛选菜单，这不是一个菜单，而是有多个，比如地区菜单，分类菜单，标签菜单，反正很多。每个菜单都要有对应的active状态，我才能知道他选中了没有，所以又传给子组件一个对象，对象里面包含了所有的菜单id的键值对，但是值是空的，等待子组件状态发生变化，再修改对象中的值。本来我是想省点事，不用vuex，然后利用对象的特性，引用类型，子组件可以直接修改对象里的属性，我父组件也能监控得到，但是问了下群友，说这种方式到时候很乱，所以我又改用了官方建议的方式，用emit。为此就用了sync...

3259 0 0

克隆对象克隆数组

es6 字符串的方法

木灵鱼儿 5年前 ES6

es6 字符串的方法

原来如果要遍历一个字符串用的是for循环，通过输出下标的方式遍历每个字符。但是如果字符是大于0xFFFF的unicode字符，那么就无法正确输出了，所以现在推荐使用新的方法遍历。for of遍历用法和for in一样for (let code of "for"){ console.log(code); } //f //o //r查找方法原来的字符只有一个indexOf方法用于查找，现在新增三个方法：startsWith()它是用于判断字符的头部是否存在对应的字符，并返回布尔值，有两个参数，第一个是要查找的字符，第二个是起步的位置它这个可以理解为正则的开头匹配吧！...

4219 0 0

字符串

npm yarn 换淘宝源

木灵鱼儿 5年前教程

npm yarn 换淘宝源

项目经常要用到sass，这个东西，你翻墙都不一定能装上去，所以很烦，只能换源的方式安装。npm 换源npm config set registry https://registry.npm.taobao.org/ // 设置npm镜像源为淘宝镜像 npm config get registry // 查看npm当前镜像源yarn 换源yarn config set registry https://registry.npm.taobao.org/ // 设置yarn镜像源为淘宝镜像 yarn config get registry // 查看yarn当前镜像源

4376 0 0

yarn npm 换源

关于vetur自动格式化导致自动转rem的大写Px方法失效的解决办法

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

关于vetur自动格式化导致自动转rem的大写Px方法失效的解决办法

在使用了amfe-flexible自动px转rem的插件后。遇到过这个问题，发现无解啊，只要在组件的style里面书写大写的Px单位，vetur都会给你自动转成小写，很尴尬，特别是在用scss的情况下，组件内通过大小单位来让元素大小不自动转rem，无法完成，除非你关闭自动格式化，但是那是不可能的，太难了。有种鱼和熊掌不可兼得的感觉。但是作为一个成年人，怎么可能要做选择，我都要...这个办法也是我灵光一现，突然有的，我说下我的思路。[hide]首先自动转换时因为插件的功能，针对.vue格式的文件，所以在vue文件里面怎么弄，都很难达到理想的需求。那么，如果我们在其他文件里面呢？宾狗！！！是...

1.8w 0 23

vetur 自动格式化 rem

es6 解构笔记

木灵鱼儿 5年前 ES6

es6 解构笔记

es6的解构，解构的是一个对象才行，如果不是对象，则先把右边的内容转成对象再进行解构。数组和对象的解构比较简单，这里就不多说了，主要讲讲另外几个对象类型的解构：string类型的解构解构一段文本内容，文本内容会被转换成类似数组的对象。let [a,b,c] = "one"; console.log(a); // o console.log(b); // n console.log(c); // e数值和布尔类型的转换这两个和字符不同，他们的转换后不是数组，而是一个继承了Number或者Boolean的所有方法的对象，可以尝试理解为是一个继承了他们类型的所有方法...

3832 0 0

解构

vuetify 两种表单验证方式

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

vuetify 两种表单验证方式

vuetify的验证，官方好像没有多说怎么弄，只有一个单一的例子，并且是丢在数组中的，此时我们是没办法通过this拿到vue的上下文的，这样做就会导致很多自定义的办法无法做到。这里我们就了解一下两个绑定表单验证的方法：官方<v-text-field v-model="user.pass" label="密码：" name="pass" type="password" :rules="rules.pass" outlined clearable></v-text-field...

6718 0 0

vuetify 表单验证自定义函数验证

jQ 鼠标点击出现富强、民主...随机字体颜色的特效

木灵鱼儿 5年前锋利的JQuery

jQ 鼠标点击出现富强、民主...随机字体颜色的特效

以前写过一个这个效果，当时刚学js，所以很多东西都是自己写的，从现在的角度看，以前的写的未免不太好，因为平台不通用啊。所以这次我写了一个jq版本，相对来说通用很多，拿上就能用的效果，不多说，先上预览图：预览图源码直接把代码保存在新建的js文件中，然后在jq之后引入即可。[hide] ; jQuery(document).ready(function ($) { let fqIndex = 0; const fqArr = ["富强", "民主", "文明", "和谐", "自由&qu...

1.8w 0 19

点击特效富强民主

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

木灵鱼儿 5年前 Bootstrap4

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

入正后发现官方的这个版本主题是不保存配置了，相对于以前的版本，这次改了好多东西，很多之前的css错位，无奈只能慢慢找方法。本教程只适合购买正版的用户，因为app.js没有被压缩存储主题配置默认都是存储在本地存储的，key值为_HYPER_CONFIG_；所以只能自己去找对应的方法了，然后发现有一段代码：/** * Preserves the config */ LayoutThemeApp.prototype._saveConfig = function (newConfig) { $.extend(this._config, ne...

4764 0 0

Hyper 主题设置

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

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

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

vue使用better-scroll制作左右菜单联动better-scroll是一个纯js的插件，官方推荐配合vue这种纯前端开发使用，在vue中使用需要注意一些地方，比如初始化的时机，html的布局，事件的触发机制安装我现在都是用yarn 方便一些，未来的安装包管理器yarn add better-scrollyarn不写--save默认就是save，如果要--save-dev 如下写法yarn add better-scroll --dev安装完毕后可以在main.js文件中作为全局调用，也可以在对于的组件内调用，我是在组件中的，所以在组件的script元素中import<sc...

8112 2 1

better-scroll 左右菜单联动饿了么菜单

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

木灵鱼儿 5年前 CSS

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

当我们给元素做了flex后，flex内的子元素宽度自适应，但是当我们给子元素设置文本溢出的时候，发现时候无效的，原因是因为他们的宽度没有限制，也就是说原始的宽度无限制，那么这个原始宽度又怎么说呢？他有一个优先级：优先级：flex-basis > width > 内容宽度。我们可以通过设置max-width或者min-width来限制他的宽度，但是并不是很合适，因为这两个只是一个区间，而我们的设备宽度是不固定的，所以设置一个固定的区间并没有用，我们需要的是这个元素它能在自适应的情况的下文本溢出依旧有效。我们给这个flex子元素设置width:0;即可，设置一个极小的宽度。

6407 3 0

flex 文本溢出

vue cli4 创建全局scss变量

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

vue cli4 创建全局scss变量

之前我的用法就是，哪个组件需要引入这个变量就import引入，现在感觉有点麻烦，就想能不能做一个全局的，所有组件都可以直接引入这个scss文件中的内容。首先我们需要安装一个插件：style-resources-loadervue add style-resources-loader回车后会有提示四个选项，我们scss就选择scss然后回车。安装完毕后在项目根目录创建一个vue的配置文件，有就不用创建，直接用。创建vue.config.js文件，将下面的代码丢进去，自己改下路径地址：const path = require("path"); module.exports...

5302 0 0

vue cli4 scss scss全局变量

yarn 安装vant并启动自动按需引入 core-js报错

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

yarn 安装vant并启动自动按需引入 core-js报错

官方新增了个自动按需引入，非常棒，前提是需要安装babel的一个插件babel-plugin-import，安装完后在babel.config.js文件中加上{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }然后就报错了，错误来源是router路由文...

6444 0 0

yarn vant 按需引入 core-js

yarn 安装node-sass报错的解决办法

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

yarn 安装node-sass报错的解决办法

听说yarn很好用，所以这次初始化项目的时候使用的就是yarn，在安装完yarn后，再用vue create会自动调用yarn进行初始化，应该是吧，我初始化的时候显示用的yarn。但是安装node-sass的时候会报错，原因可能是因为网络问题，所以需要给yarn更换为国内的源：yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g两段命令都提示success就ok了，再重新安...

5715 0 0

vue yarn node-sass

typecho 完美自定义分页

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

typecho 完美自定义分页

大人，时代变了！目前typecho最完美的解决方案了，因为百度只能看到固定思维的代码。先看看实际生成的html代码截图，干净到让人窒息完全的自定义，包括给li元素加上class，给a元素加上class，给上一页下一页加上class，去除typecho自带用于表示更多的li标签。甚至里面的内容我也能添加一些文字。废话不多说，上源码：[hide]<nav class="my-5"> <?php ob_start(); $this->pageNav('«','&...

18.9w 0 196

typecho 分页自定义分页

typecho 自定义文章分类

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

typecho 自定义文章分类

默认情况下，官方给的代码<?php $this->category(','); ?>是一个a链接，然后多个则用第一个参数逗号分隔。如果我们不想要a链接，可以给第二个参数传个false，这样输出的就是文本了。<?php $this->category(',',false); ?>即便是这样也不方便，因为我们可能需要对这个a元素添加class，但是官方这个生成的是定死的，不太方便，所以我搞了半天，写了个完全自定义的文章分类。[hide]<?php $categories = $this->categor...

2.1w 0 31

typecho 分类自定义

帮群友写了个落地页

木灵鱼儿 5年前 HTML

帮群友写了个落地页

帮群友写了个落地页参考了下某框架里面的主题落地页，花了几个小时做出来了，满意，虽然可能赶时间，class的命名有点怪怪的，哈哈哈。。。

3594 0 0

落地页

typecho 获取指定独立页链接

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

typecho 获取指定独立页链接

<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?> <?php while ($pages->next()) : ?> <?php if($pages->slug === 'about') :?> <li> <a href="<?php $pages->permalink(); ?>"><?php $pages->t...

4224 0 0

typecho

木灵鱼儿

es6 正则

vue 文件分析插件 webpack-bundle-analyzer 安装使用

gravatar头像获取

代码字符连字特性的字体

vue keep-alive 白名单(include)和黑名单(exclude)

vant框架Layout布局中col元素不够宽度变形的解决办法

vue 组件开关变量的小技巧

js 数组随机排序

数组克隆和对象克隆

es6 字符串的方法

npm yarn 换淘宝源

关于vetur自动格式化导致自动转rem的大写Px方法失效的解决办法

es6 解构笔记

vuetify 两种表单验证方式

jQ 鼠标点击出现富强、民主...随机字体颜色的特效

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效

vue cli4 创建全局scss变量

yarn 安装vant并启动自动按需引入 core-js报错

yarn 安装node-sass报错的解决办法

typecho 完美自定义分页

typecho 自定义文章分类

帮群友写了个落地页

typecho 获取指定独立页链接

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

es6 正则

vue 文件分析插件 webpack-bundle-analyzer 安装使用

gravatar头像获取

代码字符 连字特性的字体

vue keep-alive 白名单(include)和黑名单(exclude)

vant框架Layout布局中col元素不够宽度变形的解决办法

vue 组件开关变量的小技巧

js 数组随机排序

数组克隆和对象克隆

es6 字符串的方法

npm yarn 换淘宝源

关于vetur自动格式化导致自动转rem的大写Px方法失效的解决办法

es6 解构笔记

vuetify 两种表单验证方式

jQ 鼠标点击出现富强、民主...随机字体颜色的特效

Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

vue使用better-scroll制作左右菜单联动以及vant框架导致滚动失效的解决办法

flex自适应宽度由后text-overflow:ellipsis;失效 文本溢出失效

vue cli4 创建全局scss变量

yarn 安装vant并启动自动按需引入 core-js报错

yarn 安装node-sass报错的解决办法

typecho 完美自定义分页

typecho 自定义文章分类

帮群友写了个落地页

typecho 获取指定独立页链接

最近评论

博客文章RSS订阅

博客评论RSS订阅

代码字符连字特性的字体

flex自适应宽度由后text-overflow:ellipsis;失效文本溢出失效