vue基础汇总-插件

vue插件汇总

日期插件 pikaday

github地址

安装:

npm install --save pikaday

cnpm install --save pikaday

# 安装 moment.js 时间格式化如, Fri May 01 2020 => 2020-05-01
npm install --save moment

导入 css 样式:

import 'pikaday/css/pikaday.css'

@import './node_modules/pikaday/css/pikaday.css';

或者

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

<!-- vue-cli -->
<!-- 在 public/index.html -->
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>//cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

引入:

<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/pikaday/1.8.0/css/pikaday.min.css">
<script src="http://cdn.staticfile.org/moment.js/2.2.1/moment.min.js"></script>
<script src="http://cdn.bootcdn.net/ajax/libs/pikaday/1.8.0/pikaday.min.js"></script>

<!-- vue-cli -->
<!-- 在 public/index.html -->
<!-- moment.js 时间格式化如, Fri May 01 2020 => 2020-05-01 -->
<!-- 地址失效请到 cdn 查找 https://www.bootcdn.cn/ -->
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>//cdn.bootcdn.net/ajax/libs/pikaday/1.8.0/css/pikaday.min.css">
<script src="<%= BASE_URL %>//cdn.staticfile.org/moment.js/2.2.1/moment.min.js"></script>
<script src="<%= BASE_URL %>//cdn.bootcdn.net/ajax/libs/pikaday/1.8.0/pikaday.min.js"></script>

使用:

<input type="text" id="datepicker">

var picker = new Pikaday({
   
    field: document.getElementById('datepicker')
});

格式:

1. 默认情况下，使用标准 JavaScript Date 对象格式化和解析日期。
2. 如果 Moment.js 在范围内可用，它将用于格式化和解析输入值。
3. 可以将其它格式选项传递给配置，该选项将传递给 moment 构造函数。
4. 详情查看 moment.js

moment().format('MMMM Do YYYY, h:mm:ss a'); // 五月 14日 2020, 7:58:32 晚上
moment().format('dddd');                    // 星期四
moment().format("MMM Do YY");               // 5月 14日 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                          // 2020-05-14T19:58:32+08:00

var picker = new Pikaday({
   
    field: document.getElementById('datepicker'),
    format: 'D MMM YYYY',
    onSelect: function() {
   
        console.log(this.getMoment().format('Do MMMM YYYY'));
    }
});

动画: vue-transition.css (类似于 animate.css)

vue相关的一些动画库整理

引入:

下载地址

也可以用 npm 下载

npm install vue-transition.css --save

下载后, 放入 src/public/ 文件夹中

<link rel="stylesheet" href="<%= BASE_URL %>vue-transition.min.css">

<!-- 非 .vue 文件 -->
<link rel="stylesheet" href="vue-transition.min.css&#