nuxt中自定义全选指令

看两个例子来熟悉熟悉nuxt中如何自定义指令，一个简单的focus指令，一个是比较常用的全选功能。

一个简单的focus指令

在plugins文件夹下，新建文件directives.js，放入如下内容：

1
2
3
4
5
6
7

// focus指令的定义参考vuejs官方文档
import Vue from 'vue'
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

修改nuxt.config.js文件，添加自定义指令声明：

1
2
3

plugins: [
  '~/plugins/directives'
],

重启nuxt, 好了，可以开始使用了。

任意页面中添加:

1

<input v-focus>

效果：

全选实现

先看效果：

思路是给全选按钮一个class: select-all, 每个选项一个class：select-item， 最外面包一层指令: select-all-container. 这样所有相关的checkbox都在指令的el内了，这样就可以定位到对应的元素。

然后利用bind钩子函数，来给按钮添加change事件。

具体步骤基本同focus，只是directives.js的内容不一样，这里贴上指令的定义部分和示例的HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// plugins/directives.js
import Vue from 'vue'
import $ from 'jquery'

Vue.directive('select-all-container', {
  bind: function (el) {
    $(el).on('change', '.select-item', function() {
      const $items = $(el).find('.select-item')
      const allChecked = $items.length != 0 && $items.not(':checked').length == 0
      $(el).find('.select-all').prop('checked', allChecked)
    })

    $(el).on('change', '.select-all', function() {
      $(el).find('.select-item').prop('checked', this.checked)
    })
  }
})

调用bind钩子函数，给全选及单个子选项添加change事件。

HTML示例部分：

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

<template>
  <div v-select-all-container>
    <label>
      <input type="checkbox" class="select-all"> 全选
    </label>
    <ul class="list-unstyled ml-4">
      <li v-for="student in students" :key="student.id">
        <label>
          <input type="checkbox" :value="student.id" class="select-item">
          {{ student.name }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
      data() {
          return {
              students: [{ 'id': 1, 'name': "张三" },
                         { 'id': 2, 'name': "李四" },
                         { 'id': 3, 'name': "王五" },
                         { 'id': 4, 'name': "赵麻子" }]
          }
      }  
  }    
</script>

好，大功告成。

参考

Where do custom directives belong?

custom-directive

用Vue实现全选指令

问题描述：

在Vue项目中，使用flatpickr 做一个日期选择器DatePicker的组件，发现使用v-model时出了问题。

上图：

这里当我更新新的日期时，v-model并没有同步更新，而是保持着初始值。

对应的HTML及组件定义的代码如下：

HTML：

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

<template>
  <div>    
    <div class="form-group row">
      <label class="col-form-label text-right col-4">昵称</label>
      <div class="col">
        <input v-model="nickname" name="nickname" type="text" class="form-control">
      </div>
    </div>
    {{ nickname }}

    <div class="form-group row">
      <label class="col-form-label text-right col-4">生日</label>
      <div class="col">
        <DatePicker v-model="birthday" name="birthday">
      </div>
    </div>
    {{ birthday }}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nickname: 'lucia',
        birthday: '2018-12-26'  
      }  
    }
  }    
</script>

DatePicker组件的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <div class="input-group flatpickr" data-alt-input="true" data-locale="zh" data-alt-format="Y-m-d">
    <input :value="value" :name="name" class="flatpickr-input" data-input="true">
    <a class="input-group-append" data-toggle>
      <span class="input-group-text">
        <i class="far fa-calendar-alt" />
      </span>
    </a>
  </div>
</template>

<script>
import initFlatpickr from './flatpickr'

export default {
  props: [ "value", "name" ],
  mounted() {
    initFlatpickr(this.$el)
  }
}
</script>

「其中initFlatpickr用于创建flatpickr实例，这里它不是重点，具体内容略去。」

Google后，参考Adding v-model Support to Custom Vue.js Components，完美解决。

解决方法：

解决问题前，需要了解，v-model 是语法糖，以下两种写法得到的效果是一样的：

1
2
3

<input v-model="message" type="text">

<input :value="message" @input="message = $event.target.value" type="text">

而对于组件DatePicker，我只需要在发生input事件时，将值传给父组件的input事件即可。

接下来就自然而然了。

修改DatePicker组件的input部分内容，监听input事件，当发生input事件后调用updateDate()方法，emit父组件的input事件，将用户选中的值传给父组件。

这里只显示修改部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
    ......
  <input :value="value" :name="name" class="flatpickr-input" data-input="true" @input="update" ref="datePicker" @input="updateDate">
    ......
</template>


<script>
  .......
export default {
  .......
  methods: {
    updateDate() {
      this.$emit('input', this.$refs.datePicker.value)
    }
  }
}
</script>

这时再看刚刚的页面，问题解决。

参考

Adding v-model Support to Custom Vue.js Components

说实在的，读完的时候，并没有觉得写得多好，甚至觉得平平无奇。

故事很简单，说的是一家三口，生来便带有遗传病的儿子时生穿越时间的隧道，回到了当年父亲拓实的年少时代，彼时的拓实二十三岁，还是个愣头青，不愿脚踏实地工作，浑浑噩噩，终日无所事事，还时不时跟在酒吧上班的女票千鹤要钱，时生跟父亲拓实成为了朋友，在经历过一次次失望后，千鹤给拓实留下分手的纸条，与爱慕她的工薪族冈部一起去了大阪，并卷入了一场受贿案件中，而两股势力团伙也随后找上了拓实，拓实带着时生踏上了寻找千鹤的道路，历经种种阻拦，最终救出了千鹤，而在这趟拯救千鹤的旅途中，拓实也解开了自己的身世之谜，原谅了当年不得已将自己交由他人抚养的母亲，与其说是拯救千鹤，不如说是一个愣头青开始一步步成长起来，不再选择逃避，而是学着面对，学着担当。

看到时生穿越到拓实的年代，想起港片《新难兄难弟》里面的情节，穿越这个梗真的是用不烂。

我看豆瓣上的内容简介部分是这么介绍这本书的：

《时生》为东野圭吾迄今风格最独特的一部，以惊天动地的想象和鬼斧神工的解谜，将幻想、悬疑、穿越、推理、亲情熔为一炉，东野圭吾更称其为迄今“集大成之作”，在东野粉丝站上长期高踞“读者票选5佳”，超人气日剧《给父亲的口信》原著作品。其感人肺腑、泪中带笑的故事令人无不唏嘘动容……

也许是为了宣传，才这么夸张的介绍吧。

以前都是听说东野圭吾，从来没有读过他的作品，这是我读的的第一本，我想也是最后一本，文化水平有限，大师的水准真心欣赏不来。

很久没看到这样好看的武侠片了，刷完意犹未尽，全程无尿点，刷完看了下，竟是2010年的作品，如果放在现在，定然大卖。

忍不住要剧透了。

故事发生在明朝，800年前，天竺人罗摩渡海来中原弘法，净身入梁武帝宫中说法，后渡江，在九华山面壁十九年，练就绝世武功，死后数年，遗体被盗，并被分成上下两部，江湖传闻，谁拿到遗体，就能练就绝世武功，称霸武林，一时江湖风云骤起。当时，其一半的遗体为当朝首辅张海端所有，著名的暗杀组织黑石，对遗体蠢蠢欲动，其首领转轮王，带领手下三名高手细雨，雷彬，彩戏师连绳，血洗了太师府，混乱中，细雨夺走了遗体，不知所踪，随后转轮王悬赏重金买细雨人头，细雨一路遭众江湖人士追杀，全身而退后，她找到了名医李鬼手， 易容化名为曾静，隐居市井，过上了普通百姓的生活。在这里，她遇到了以跑腿为生的江阿生【类似现在送快递的小哥】，两人互生情愫，结为夫妻。而与此同时，转轮王也找到了一位细雨的替代品：叶绽青。

这里要提一下，在易容前，细雨向李鬼手讲述了夺走遗体那晚发生的事情：在她过桥出城的时候，遇到了一身重伤的张人凤，张海端的儿子，两人交手时，细雨些许迟疑，张人凤被刺伤，落桥。也是在这里，细雨遇到了陆竹，而这个带发修行的高手，用佛法和剑道，外搭自己一条命，点化了细雨。【这段讲述极为重要，为后面的诸多地方埋下了伏笔】

贼喜欢陆竹教细雨四招的那段，行云流水，拍的真TM好看。

婚后半年，一次两人去钱庄取钱，遇上危险，细雨为救阿生，不得已出手，暴露了行踪，转轮王随后集结了手下雷彬，彩戏师和叶绽青，来与细雨谈判，为了救自己的丈夫，细雨答应了转轮王的要求，交出自己拿到的那部分遗体，同时和雷彬，彩戏师合作，帮助他拿到遗体的另一部分。在他们合力抢夺另一份遗体时，黑石内乱，彩戏师连绳想要拿到遗体，内乱中，细雨被转轮王重伤，连绳被杀。

重伤逃出的细雨回到家中，叮嘱阿生离开京城，阿生将重伤晕倒的细雨放在床上，此时，雷彬和叶绽青赶来，阿生不慌不忙取出藏在地板下面的剑，原来他就是当年那个落桥的张人凤，他没有死，醒来后被救起，并在李鬼手那里换了张脸。阿生杀死了雷彬，偷走了遗体，并与转轮王相约城外决战。而逃走的叶绽青最终被转轮王活埋。至于转轮王得到遗体的目的，其实挺狗血的。弄到头，竟然是为了这个，我擦嘞。

决战前，细雨醒来，知道了阿生的真实身份，原来她是害他家破人亡之人，两人交手，细雨施计让阿生假死，独自一人赴约，在城外与转轮王决战，最终细雨身受重伤，转轮王中剑而亡，阿生醒来，两人和好。

片中有几处挺让人感动的。

易容后的细雨，找到了见痴师父，问师父陆竹的那句“愿化身石桥，受五百年风吹，五百年日晒，五百年雨打“是何意，师父说了阿难的典故，然后转头说了句：“他对你很好啊”。

每次落雨时，阿生都会快步跑到细雨的摊位，说：“正好路过，我来帮你收拾。”

阿生坐在桌前啃着细雨给他买的那份豆皮。

雷彬拖着重伤，奄奄一息回到自己家中，看着熟睡中的妻儿，吃那一口面的满足。

细雨满身血迹，看着倒地的阿生，吐出那句：“我愿化身石桥，受五百年风吹，日晒，雨打。”

阿生抱起受伤的细雨：

“走吧，我们回家吧”

“回家后，你写一封休书给我吧”

“说什么傻话，以后的日子还长着呢”

裂墙推荐。

问题描述：

参考Vue js 2.x - Select All Checkbox, 完成了全选的功能。

先上效果图：

Vue js 2.x - Select All Checkbox的原代码:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
    <div>
      <table>
        <tr>
          <th>Name</th>
          <th>Select All<input type="checkbox" @click="selectAll" v-model="allSelected" 		  </th>
        </tr>
        <tr v-for="user in users">
          <td>{{ user.name }}</td>
          <td><input type="checkbox" v-model="userIds" @click="select" :value="user.id">    		  </td>
        </tr>
      </table>
    </div>
  <span>Selected Ids: {{ userIds }}</span>
</div>

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
27
28
29
30
31

// taken from https://jsfiddle.net/okv0rgrk/3747/

new Vue({
    el: '#app',
    data: {
        users: [
            { "id": "Shad", "name": "Shad" },
            { "id": "Duane", "name": "Duane" },
            { "id": "Myah", "name": "Myah" },
            { "id": "Kamron", "name": "Kamron" },
            { "id": "Brendon", "name": "Brendon" }
        ],
        selected: [],
        allSelected: false,
        userIds: []
    },
    methods: {
        selectAll: function() {
            this.userIds = [];

            if (this.allSelected) {
                for (user in this.users) {
                    this.userIds.push(this.users[user].id.toString());
                }
            }
        },
        select: function() {
            this.allSelected = false;
        }
    }
})

参考的这份代码里面，有个小小的bug，就是当选中所有的子选项时，全选没有被选中。

解决方法：

点击子选项的时候，调用的是select函数，初步的想法是修改select函数，当选中的选项userIds等于users中的所有的ids即可。

1
2
3
4
5
6
7
8

// 修改select
select: function() {
    if (this.userIds.length == this.users.length) {
        this.allSelected = true;
    } else {
        this.allSelected = false;
    }
}

发现修改后，没有任何效果，此处有个坑:

1

<input type="checkbox" v-model="userIds" @click="select" :value="user.id">

这里v-model的userIds，其实对应的是checked之后的值，也就是点击完最后一个子选项时，调用select函数，此时this.userIds.length = this.users.length - 1， 解决方法也很简单，修改click事件为change事件即可。这样调用select时，userIds已经更新。

改进后的代码：

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
    <div>
      <table>
        <tr>
          <th>Name</th>
          <th>Select All<input type="checkbox" @click="selectAll" v-model="allSelected" 		  </th>
        </tr>
        <tr v-for="user in users">
          <td>{{ user.name }}</td>
          <td><input type="checkbox" v-model="userIds" @change="select" :value="user.id">    		  </td>
        </tr>
      </table>
    </div>
  <span>Selected Ids: {{ userIds }}</span>
</div>

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
27
28
29
30
31
32
33
34
35

// taken from https://jsfiddle.net/okv0rgrk/3747/

new Vue({
    el: '#app',
    data: {
        users: [
            { "id": "Shad", "name": "Shad" },
            { "id": "Duane", "name": "Duane" },
            { "id": "Myah", "name": "Myah" },
            { "id": "Kamron", "name": "Kamron" },
            { "id": "Brendon", "name": "Brendon" }
        ],
        selected: [],
        allSelected: false,
        userIds: []
    },
    methods: {
        selectAll() {
            this.userIds = [];

            if (this.allSelected) {
                for (user in this.users) {
                    this.userIds.push(this.users[user].id.toString());
                }
            }
        },
        select() {
          if (this.userIds.length == this.users.length) {
            this.allSelected = true
          } else {
            this.allSelected = false;
          }
        }
    }
})

Google时，看到有使用自定义组件的方式来实现全选功能的：用Vue实现一个全选指令，照着在nuxt下实作了下，发现坑有些多，作罢，后续解决了再补上。

参考：

Vue js 2.x - Select All Checkbox

写在前面

之前在nuxt里面引入fontawesome的时候，用的是别人封装好的组件nuxt-fontawesome，还写了在Nuxt项目中引入fontawesome记录下来操作方法，后面引入Echarts的时候，也是引用封装好的组件v-charts， 结果老大review代码的时候，全部否定，改用引入原生的fontawesome 和echarts，修改后，代码看着清晰简单，记录下。

引入fontawesome

参考官网上的setup，先安装。

npm:

1

npm install --save-dev @fortawesome/fontawesome-free

Yarn:

1

yarn add --dev @fortawesome/fontawesome-free

安装后，在assets/stylesheets目录下，新增文件fontawesome.scss：

1

@import '@fortawesome/fontawesome-free/css/all.css';

最后配置下nuxt.config.js。

在nuxt.config.js的css 部分，添加如下代码：

1
2
3
4

 css: [
......
   '~assets/stylesheets/fontawesome.scss'
 ],

修改配置后，重启。

大功告成，直接在页面使用即可，比如添加一个音乐的icon：

1

<i class="fas fa-music"></i>

引入echarts

安装：

npm:

1

npm install echarts --save

Yarn:

1

yarn add echarts

安装后，在需要使用Echarts的组件中，引入echarts，设置好配置项即可。

以index.vue为例，组件中使用了柱状图：

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

## pages/xxx/index.vue
<template>
  <div id="echart" />
</template>

<script>
import echarts from 'echarts'

    export default {
        mounted() {
			const barChartElement = this.$el.querySelector("#echart")
    		const barChart = echarts.init(barChartElement)
            const options = {
                title: {
                    text: '柱形图示例'
                },
                tooltip: {},
                legend: {
                    data:['含糖量']
                },
                xAxis: {
                    data: ["苹果","橙子","西瓜","菠萝","雪梨","柿子"]
                },
                yAxis: {},
                series: [{
                    name: '含糖量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
			barChart.setOption(options)
        }
    }  
</script>

各个图表的详细配置可以参考Echarts文档。

参考

Font Awesome

Echarts

需求：

前端调用接口，需要后端返回指定页面的数据。由于之前的接口没有涉及到分页，需要做微调，前端调用接口时，传参数page。

比如：api/v2/users?page=2， 返回第二页的用户列表信息。

返回的分页信息要求放在header而不是body中。

解决方法：

google到的解决思路是：

先在服务器端设置Access-Control-Expose-Headers，让前端调用接口时，可以拿到header信息。【如果不设置，前端通过response.header拿到的就只有cache-control, content-type.】

然后再将需要传递的分页信息，比如pageCount, perPage塞进response的header中即可。

一步步来。

后台Rails项目中，已经安装了gem：rack-cors 和 kaminari, 将借用这两个gem来完成这项工作。

Step1:

查看rack-cors文档，找到用于设置Access-Control-Expose-Headers的options expose。

参考文档，修改Rack的配置，假定我们需要塞进header中的是：X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count。

1
2
3
4
5
6
7
8
9

use Rack::Cors do
  allow do
    origins '*'
    resource '/public/*',
      headers: :any,
      methods: :any
      expose: ['X-Pagination-Current-Page', 'X-Pagination-Page-Count', 'X-Pagination-Per-Page', 'X-Pagination-Total-Count']
  end
end

重启服务器。

Step2:

kaminari的文档中，列出了current_page, total_pages等多个可以获取分页信息的方法。

以User的index 接口为例，修改users_controller.rb文件，在index部分的最后，添加如下代码：

1
2
3
4
5
6
7
8
9
10

def index
    .....
    if params[:page]
        @users = @users.page(params[:page])
        response.headers['X-Pagination-Current-Page'] = @users.current_page
        response.headers['X-Pagination-Page-Count'] = @users.total_pages
        response.headers['X-Pagination-Per-Page'] = @users.limit_value
        response.headers['X-Pagination-Total-Count'] = @users.total_count
    end
end

【鉴于其他接口也难免会涉及到分页，可以将这部分代码封装成一个方法，放在API的BaseController中，让所有继承该类的controllers可直接调用该方法。】

OK，搞定。

这时前端调接口，可以看到获取的header中含有pagination相关信息：

看的是第二版，全书共12章，除前面几章涉及历史及语法外，剩下的8章都是通过实例来学习，非常喜欢这种实战型的学习方式。

距离第二版出版（出版于2011年）已经过去了将近8年了，原书中给到的代码参考网站friendsofed 已经无法访问，示例代码中有些地方还是有坑的，比如chapter11中的视频部分，我照着书中的示例代码，重敲了一遍，详见DOM Scripting，所有的功能都可以正常运行，图片视频等素材简单在Google上找了下，如果你也在学它，也许可以做个参考。

书比较薄，而且主要的篇幅集中在示例上，就简单梳理下书中的要点以备忘。

文档其实是一堆nodes的集合，基本操作：新增，修改，查找，或者删除node。

node的三个基本类型：

元素节点，文本节点，属性节点。

DOM提供的使用最为频繁的方法：

getElementById

getElementsByTagName

getElementsByClassName

getAttribute

setAttribute

最佳实践需要记住：

平稳退化：让访问者可以在浏览器不支持Javascript的情况下，仍能顺利浏览网站。

渐进增强：用一些额外的信息去包裹原始数据，其目的是分离Javascript，让结构和行为分离。

要记住的知识点并不多，个人感觉主要的收获来源实践，跟着书中内容敲一遍，不花多少时间，但是感觉非常好，“用餐”很愉快，五星推荐。

12月底，公司TB，去了海南，30号回上海后，匆匆赶回老家，回来后觉得还是有必要整理下，偷个懒， 少字多图，记录下沿途风景。

玉带滩：

随处可见的小菠萝，水分足，推荐。

海水是咸的。

分界洲岛：

弹琴的小姐姐。

阳光从云缝中洒下来。

天涯海角：

日出：

正午：

亚龙湾：

over。

引入 moment

• 安装

  yarn:

  1	yarn add moment

  npm:

  1	npm i moment

• 配置

  在plugins目录下，新建文件：moment.js，放入以下内容：

  1 2 3 4 5 6 7

  import Vue from 'vue' import moment from 'moment' Vue.filter('moment', function(value, pattern = 'YYYY-MM-DD HH:mm:ss') { if (!value) { return null } return moment(value).format(pattern) })

  这里设置了默认的时间样式是YYYY-MM-DD HH:mm:ss。

  最后，在nuxt.config.js文件的plugins中添加：

  1 2 3 4 5

  plugins: [ 'xxxx', // 引入我们刚刚新增的文件moment.js '~/plugins/moment' ]

OK ,重启后就可以开始用了。

全局设置多种格式

比如需要配置两种格式，日期型和时间型。

修改plugins/moment.js:

1
2
3
4
5
6
7
8
9
10
11
12
13

import Vue from 'vue'
import moment from 'moment'

const formats = {
  "date": "YYYY-MM-DD",
  "datetime": "YYYY-MM-DD hh:mm:ss"
}

Vue.filter('moment', function(value, format='date') {
  if (!value) { return null }
  const pattern = formats[format]
  return moment(value).format(pattern)
})

这里，设置默认为日期格式。

页面使用

比如需要显示商品创建时间：

1
2
3
4
5

{{ product.created_at | moment('datetime') }}

// 或者仅仅显示日期
{{ product.created_at | moment('date') }}
{{ product.created_at | moment }}

因为设置了参数format默认是date, 当moment内不传参数时，则采用日期样式。

参考

how to format date for display