feat(utils): 添加多种数据格式化过滤器功能

- 新增身份证号掩码过滤器MaskIdCard，用于隐藏敏感信息
- 新增银行卡号掩码过滤器MaskBankCard，保护支付信息安全
- 新增百分比格式化过滤器FormatPercent，支持自定义小数位
- 新增文件名截取过滤器TruncateFileName，防止超长文件名显示异常
- 新增文本截取过滤器TruncateText，控制文本长度显示
- 新增首字母大写过滤器Capitalize，统一文本格式
- 新增大小写转换过滤器ToUpperCase和ToLowerCase，灵活格式控制
- 新增相对时间格式化过滤器FormatRelativeTime，显示友好时间提示
- 新增星期几格式化过滤器FormatWeekday，便捷日期展示
- 新增布尔值转换过滤器FormatBoolean，支持自定义文本显示
- 新增开关状态过滤器FormatSwitch和启用状态过滤器FormatEnabled
- 新增时长格式化过滤器FormatDuration，将秒数转换为可读格式
- 新增数组转字符串过滤器ArrayToString，自定义分隔符连接
- 新增JSON对象格式化过滤器JsonToString，支持缩进美化显示
- 新增数字转中文过滤器NumberToChinese，实现数字的中文表达
- 新增URL链接格式化过滤器FormatUrl，自动补全协议前缀
- 新增货币格式化过滤器FormatCurrency，支持多币种金额显示

cutejava-front/src/main.js

@@ -9,9 +9,6 @@ import Element from 'element-ui'
 // 数据字典
 import dict from './components/Dict'
 
-// 防止二次提交
-import { preventReClick } from '@/plugins/PreventReClickDirective'
-
 // 一键复制插件
 import VueClipboard from 'vue-clipboard2'
 
@@ -35,10 +32,11 @@ import './router/index'
 
 // 过滤器
 import * as filters from './utils/filters'
+// 指令
+import * as directives from './utils/directives'
 
 Vue.use(checkPer)
 Vue.use(permission)
-Vue.directive(preventReClick)
 Vue.use(dict)
 Vue.use(VueClipboard)
 Vue.use(Element, {
@@ -48,11 +46,17 @@ Vue.use(Element, {
 Vue.component('split-pane', SplitPane)
 
 // 注册全局过滤器
-// 使用方法：{{ value | filter-key }}
+// 使用方法：{{ value | 过滤器方法名 }}
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+// 注册全局指令
+// 使用方法：<el-button v-指令方法名></el-button>
+Object.keys(directives).forEach(key => {
+  Vue.directive(directives[key])
+})
+
 Vue.config.productionTip = false
 
 Vue.config.errorHandler = function(err, vm, info) {

cutejava-front/src/utils/directives.js

@@ -1,21 +1,21 @@
-import Vue from 'vue'
+import Vue from 'vue'
-
+
-/**
+/**
- * 防止重复提交指令，需要在main.js中全局注册 Vue.directive('preventReClick', preventReClick)
+ * 防止重复提交指令，需要在main.js中全局注册 Vue.directive('preventReClick', preventReClick)
- * 使用默认的 3000 毫秒防重复点击时间
+ * 使用默认的 3000 毫秒防重复点击时间
- * 例子: <el-button v-prevent-re-click >提交</el-button>
+ * 例子: <el-button v-prevent-re-click >提交</el-button>
- * 自定义防重复点击时间为 5000 毫秒
+ * 自定义防重复点击时间为 5000 毫秒
- * 例子: <el-button v-prevent-re-click >提交</el-button>
+ * 例子: <el-button v-prevent-re-click >提交</el-button>
- */
+ */
-export const preventReClick = Vue.directive('preventReClick', {
+export const preventReClick = Vue.directive('preventReClick', {
-  inserted(el, binding) {
+  inserted(el, binding) {
-    el.addEventListener('click', () => {
+    el.addEventListener('click', () => {
-      if (!el.disabled) {
+      if (!el.disabled) {
-        el.disabled = true
+        el.disabled = true
-        setTimeout(() => {
+        setTimeout(() => {
-          el.disabled = false
+          el.disabled = false
-        }, binding.value || 3000)
+        }, binding.value || 3000)
-      }
+      }
-    })
+    })
-  }
+  }
-})
+})

cutejava-front/src/views/components/dev/CuteScreenShot.vue

@@ -17,7 +17,7 @@
         截屏
       </el-button>
     </div>
-    <div id="{{ key }}" style="padding: 15px">
+    <div :id="key" style="padding: 15px">
       <slot />
     </div>
   </div>