数字滚动特效

使用方法

1
<numberRoll :number="9866.66"></numberRoll>
阅读全文
闭包

词法作用域

1
2
3
4
5
6
7
8
function init() {
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
function displayName() { // displayName() 是内部函数,一个闭包
alert(name); // 使用了父函数中声明的变量
}
displayName();
}
init();

init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数,仅在该函数体内可用。displayName() 内没有自己的局部变量,然而它可以访问到外部函数的变量,所以 displayName() 可以使用父函数 init() 中声明的变量 name 。但是,如果有同名变量 name 在 displayName() 中被定义,则会使用 displayName() 中定义的 name 。

阅读全文
获取时间范围内的每一天

代码见详情

阅读全文
APP 调用 HTML 页面是如何传递消息

js2app 为 APP 端定义的方法名称

1
2
3
4
5
window.webkit.messageHandlers.js2app.postMessage({
type: 1,
title: response.data.code,
content: response.data.message
});

阅读全文
遍历菜单数组,获取选中的子节点的所有父节点元素

遍历菜单数组,获取选中的子节点的所有父节点元素

  1. 假设有一个数组如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    let menus = [
    {
    key: "menu1",
    label: "一级菜单1",
    icon: "",
    },
    {
    key: "menu2",
    label: "一级菜单2",
    icon: "",
    },
    {
    key: "menu3",
    label: "一级菜单3",
    icon: "",
    children: [
    {
    key: "menu3_1",
    label: "一级菜单3_1",
    icon: "",
    children: [
    {
    key: "menu3_1_1",
    label: "一级菜单3_1_1",
    icon: "",
    },
    ],
    },
    {
    key: "menu3_2",
    label: "一级菜单3_2",
    icon: "",
    },
    ],
    },
    {
    key: "menu4",
    label: "未开发页面演示",
    icon: "",
    },
    ];
  2. 需要获取到选中菜单 menu3_1_1 的所有父元素,即 menu3,menu3_1 和 menu3_1_1,js 代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    /**
    * selectMenus 切换菜单时候触发的事件,参数为更改的菜单 key
    * breadCrumb 选中菜单的所有父元素的数组集
    */
    let breadCrumb = [];
    // 遍历菜单
    function eachMenus(item, name) {
    for (let i = 0, j = item.length; i < j; i++) {
    breadCrumb.push(item[i].label);
    if (item[i].children) {
    eachMenus(item[i].children, name);
    } else {
    if (item[i].key === name) {
    return;
    } else {
    breadCrumb.splice(this.breadCrumb.length - 1, 1);
    }
    }
    }
    breadCrumb.splice(this.breadCrumb.length - 1, 1);
    }

    function selectMenus(name) {
    breadCrumb = [];
    eachMenus(menus, name);
    }
阅读全文
cli 脚手架工具封装

工程结构

工程目录结构如下
/bin # —— 命令执行文件
/lib # —— 工具模块
package.json

使用 commander.js 开发命令行工具

nodejs 内置了对命令行操作的支持,node 工程下 package.json 中的 bin 字段可以定义命令名和关联的执行文件。

1
2
3
4
5
6
7
8
{
"name": "demo-cli",
"version": "1.0.0",
"description": "我的cli",
"bin": {
"demo": "./bin/demo.js"
}
}

在bin目录下创建一个 demo.js 文件,用于处理命令行的逻辑。
在 demo.js 中编写命令行的入口逻辑

1
2
3
4
5
6
7
8
#!/usr/bin/env node

const program = require('commander') // npm i commander -D

program.version('1.0.0')
.usage('<command> [项目名称]')
.command('hello', 'hello')
.parse(process.argv)

接着,在 bin 目录下创建 demo-hello.js,放一个打印语句

1
2
touch ./bin/demo-hello.js
echo "console.log('hello, commander')" > ./bin/demo-hello.js

这样,通过 node 命令测试一下

1
node ./bin/demo.js hello

可以在终端上看到一句话:hello, commander。

阅读全文
.sync 修饰符的用法

子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<input v-model="value">
</template>

<script>
export default {
props: {
title: {
type: String,
default: ''
}
},
data() {
return {
value: ''
}
},
watch: {
value(newValue, oldValue) {
this.$emit('update:title', newValue)
}
}
}
</script>

父组件代码

  1. 某些情况下,我们需要子组件改变某个值的时候,父组件的值也更改,常规的实现方法如下:

    1
    2
    3
    4
    5
    // 父组件中有个 title 的值传递到子组件中
    <text-document
    :title="title"
    @update:title="title = $event"
    ></text-document>
  2. 通过 .sync 修饰符,可以简写父组件,子组件中增加的方法不变:

    1
    2
    // 父组件写法
    <text-document :title.sync="title"></text-document>
阅读全文
Vue + TypeScript

项目相关配置在哪里写?

由于采用vue-cli@3.x版本来初始化工程,所以没有了2.x版本对外暴露的webpack配置文件,所以如果相对项目进行一些配置,需要在项目根目录下新建vue.config.js.
比如需要修改项目启动的端口号,去掉打包后文件名的哈希值,如下:

1
2
3
4
5
6
7
module.exports = {
baseUrl: '/', // 默认为根目录下 '/'
devServer: {
port: 8989
},
filenameHashing: false
}

Vue.prototype 定义的全局变量无法使用

如果在main中定义了一个全局变量

1
2
import apiConfig from "@/apiConfig";
Vue.prototype.apiConfig = apiConfig;

但是在组件中无法使用该变量,需要在 .d.ts 文件中加入如下代码:

1
2
3
4
5
6
import Vue from "vue";
declare module "vue/types/vue" {
interface Vue {
apiConfig: any;
}
}

以上代码可在官方文档找到

阅读全文
Vue 遍历本地图片

需要循环遍历本地图片地址时,打包后会出现图片找不到,解决方法,可以把图片通过 js import 进来,之后使用 import 的变量来循环

阅读全文
更换主题颜色
  1. 把 css 文件放到服务器上,通过 XMLHttpRequest 请求文件,获取到文件内容之后替换颜色。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    getFile(url: string) {
    return new Promise((resolve, reject) => {
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.responseType = "text";
    client.onreadystatechange = () => {
    if (client.readyState !== 4) {
    return;
    }
    if (client.status === 200) {
    const urlArr = client.responseURL.split("/");
    resolve({
    data: client.response,
    url: urlArr[urlArr.length - 1],
    });
    } else {
    reject(new Error(client.statusText));
    }
    };
    client.send();
    });
    }

    getIndexStyle() {
    this.getFile("//doc.mamaezhan.com/web/my_theme.css")
    .then(({data}: any) => {
    this.originalStyle = this.getStyleTemplate(data);
    this.writeNewStyle();
    });
    }
阅读全文
Algolia