自定义指令集合 （/directive 介绍）

自定义指令，目前仅适用于H5端。原因如下：
1、数据不能响应：全局自定义指令中更改变量值时，不能同时响应到页面的变量。即数据无法同步响应。这一块后期考虑是否可以通过VUEX来实现
2、节点内容不能更改：由于在APP端，目前未找着类似dom的 $().html(...)等语法，目前无法更改节点内容。createSelectorQuery()也仅能获取位置等信息。况且通过更改节点内容，也不符合数据驱动视图的模形

 

但以下指令不影响H5端使用。

我们可以自定义指定，比如: 

<span v-format-date="'yyyy-MM-dd'">2022-3-29 8:33:50</span> // 实现格式化日期的效果。

自定义分为全局指令和局部指令。

全局指令：

所有全局指令定义在/directive/index.js 内。在/main.js内已自动引入全站。所以使用时，不需要单独导入直接使用。

 

局部指令：

它存储在/directive/内，具体定义和使用方式见 /directive/vMy.js 说明。使用它时，需要单独引入再使用。

 

全局指令列表：

一、数字格式化指令： v-format-number

// 方式一：保留二位小数，输出结果为 25.00
<span v-format-number>25</span>


// 方式二：默认保留二位小数
<span v-format-number="25">/span>

// 方式三：指定小数位及是否逗号分隔
<span v-format-number="{value:25, digit:0, comma:false}"></span>

 

二、日期格式化指令： v-format-date

// 方式一： 格式hh:mm
<span v-format-date>2022-3-29 8:33:50</span>


// 方式二：指定格式
// <span v-format-date="'yyyy-MM-dd'">2022-3-29 8:33:50</span>


// 方式三：将时间戳转换成日期
<span v-format-date="{value:1648459853, format:'yyyy-MM-dd'}"></span>

 

三、时间戳转日期：v-detimestamp

// 自定义格式： yyyy-MM-dd
<span v-detimestamp="{value:1648459853, format:'yyyy-MM-dd'}"></span>

// 默认格式： yyyy-MM-dd hh:mm:ss
// <span v-detimestamp='1648459853'></span>

// 默认格式： yyyy-MM-dd hh:mm:ss
// <span v-detimestamp>1648459853</span>  默认格式: yyyy-MM-dd hh:mm:ss