component_ryl_v3 1.1.0

package/src/main.js

@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import 'element-plus/dist/index.css'
+import "@/assets/styles/index.scss"
+import "@/assets/styles/element-plus-theme.scss"
+import App from './App.vue'
+import directives from './packages/directives'
+
+const app = createApp(App)
+
+app.use(directives)
+app.mount('#app')

package/src/packages/directives/copy/index.js

@@ -0,0 +1,47 @@
+export default {
+    mounted(el, binding) {
+        const [text, callback] = Array.isArray(binding.value) ? binding.value : [binding.value]
+        
+        el.$copyText = text
+        
+        const handleClick = async () => {
+            if (!el.$copyText) {
+                callback?.('暂无复制内容', false)
+                return
+            }
+            
+            try {
+                await navigator.clipboard.writeText(el.$copyText)
+                callback?.(null, true)
+            } catch {
+                const textarea = document.createElement('textarea')
+                textarea.value = el.$copyText
+                textarea.style.position = 'absolute'
+                textarea.style.left = '-9999px'
+                document.body.appendChild(textarea)
+                textarea.select()
+                
+                try {
+                    document.execCommand('copy')
+                    callback?.(null, true)
+                } catch (err) {
+                    callback?.(err.message || '复制失败', false)
+                } finally {
+                    document.body.removeChild(textarea)
+                }
+            }
+        }
+        
+        el.addEventListener('click', handleClick)
+        el.$copyHandler = handleClick
+    },
+    
+    updated(el, binding) {
+        const [text] = Array.isArray(binding.value) ? binding.value : [binding.value]
+        el.$copyText = text
+    },
+    
+    unmounted(el) {
+        el.removeEventListener('click', el.$copyHandler)
+    }
+}

package/src/packages/directives/debounce/index.js

@@ -0,0 +1,17 @@
+export default {
+    mounted(el, binding) {
+        const { value, arg = 'click' } = binding
+        const [fn, delay = 300, ...args] = Array.isArray(value) ? value : [value]
+        
+        let timer = null
+        
+        el.addEventListener(arg, () => {
+            if (timer) {
+                clearTimeout(timer)
+            }
+            timer = setTimeout(() => {
+                fn.apply(el, args)
+            }, delay)
+        })
+    }
+}

package/src/packages/directives/index.js

@@ -0,0 +1,18 @@
+import money from './money'
+import copy from './copy'
+import debounce from './debounce'
+import throttle from './throttle'
+let directives = {
+    money,
+    debounce,
+    throttle,
+    copy
+}
+
+export default {
+    install(app) {
+        Object.keys(directives).forEach((key) => {
+            app.directive(key, directives[key])
+        })
+    },
+}

package/src/packages/directives/money/index.js

@@ -0,0 +1,84 @@
+export default {
+    mounted(el, binding) {
+        const input = el.querySelector('input') || el
+        
+        const handleInput = () => {
+            let value = input.value
+            
+            if (!value) return
+            
+            if (value.startsWith('.')) {
+                value = '0.'
+            }
+            
+            value = value.replace(/[^\d.]/g, '')
+            
+            const parts = value.split('.')
+            if (parts.length > 2) {
+                value = parts[0] + '.' + parts.slice(1).join('')
+            }
+            
+            if (parts[0] && parts[0].length > 1 && parts[0].startsWith('0')) {
+                parts[0] = parts[0].replace(/^0+/, '') || '0'
+                value = parts.length === 1 ? parts[0] : parts[0] + '.' + parts[1]
+            }
+            
+            if (parts[1] && parts[1].length > 2) {
+                value = parts[0] + '.' + parts[1].substring(0, 2)
+            }
+            
+            if (binding.value) {
+                const { min = 0, max } = binding.value
+                
+                const numValue = parseFloat(value) || 0
+                
+                if (!isNaN(numValue)) {
+                    if (numValue < min) {
+                        value = String(min)
+                    } else if (max !== undefined && numValue > max) {
+                        value = String(max)
+                    }
+                }
+            }
+            
+            if (input.value !== value) {
+                input.value = value
+                input.dispatchEvent(new Event('input'))
+            }
+        }
+        
+        const handleBlur = () => {
+            let value = input.value
+            
+            if (!value) return
+            
+            const parts = value.split('.')
+            
+            if (parts[1] && parts[1].length === 0) {
+                value = parts[0] || '0'
+            }
+            
+            if (binding.value) {
+                const { min = 0, max } = binding.value
+                
+                const numValue = parseFloat(value) || 0
+                
+                if (!isNaN(numValue)) {
+                    if (numValue < min) {
+                        value = String(min)
+                    } else if (max !== undefined && numValue > max) {
+                        value = String(max)
+                    }
+                }
+            }
+            
+            if (input.value !== value) {
+                input.value = value
+                input.dispatchEvent(new Event('input'))
+            }
+        }
+        
+        input.addEventListener('input', handleInput)
+        input.addEventListener('blur', handleBlur)
+    }
+}

package/src/packages/directives/throttle/index.js

@@ -0,0 +1,29 @@
+export default {
+    mounted(el, binding) {
+        const { value, arg = 'click' } = binding
+        const [fn, delay = 300, ...args] = Array.isArray(value) ? value : [value]
+        
+        let timer = null
+        let lastTime = 0
+        
+        el.addEventListener(arg, () => {
+            const now = Date.now()
+            const remaining = delay - (now - lastTime)
+            
+            if (remaining <= 0 || remaining > delay) {
+                if (timer) {
+                    clearTimeout(timer)
+                    timer = null
+                }
+                lastTime = now
+                fn.apply(el, args)
+            } else if (!timer) {
+                timer = setTimeout(() => {
+                    lastTime = Date.now()
+                    timer = null
+                    fn.apply(el, args)
+                }, remaining)
+            }
+        })
+    }
+}

package/src/packages/handConfirmNew/index.js

@@ -0,0 +1,79 @@
+import { ElMessageBox } from "element-plus";
+
+/**
+ * 二次封装 Element Plus MessageBox
+ * 
+ * @param {Object} options - 配置选项
+ * @param {number} [options.type=1] - 类型：1(自定义/常用样式), 2(默认)
+ * @param {string} options.text - 提示内容
+ * @param {string} [options.title=''] - 提示标题（type为2时才传）
+ * @param {boolean} [options.showCancelButton=true] - 是否显示取消按钮
+ * @param {string} [options.icon='warning'] - 图标
+ * @param {string} [options.confirmButtonText='确定'] - 确认按钮文本
+ * @param {string} [options.cancelButtonText='取消'] - 取消按钮文本
+ * @param {string} [options.customClass=''] - 自定义样式类
+ * @param {boolean} [options.dangerouslyUseHTMLString=false] - 是否把传入的文案当成html处理
+ * @returns {Promise} - Promise对象，resolve表示确认，reject表示取消
+ */
+export function handConfirmNew({
+  type = 1,
+  text,
+  title = '',
+  showCancelButton = true,
+  icon = 'warning',
+  confirmButtonText = '确定',
+  cancelButtonText = '取消',
+  customClass = '',
+  dangerouslyUseHTMLString = false
+}) {
+  return new Promise((resolve, reject) => {
+    if (type === 1) {
+      return ElMessageBox.confirm(text, '', {
+        showCancelButton,
+        type: icon,
+        confirmButtonText,
+        cancelButtonText,
+        closeOnClickModal: false,
+        center: true,
+        dangerouslyUseHTMLString,
+        customClass: 'initMsg_in ' + customClass
+      })
+        .then(() => {
+          setTimeout(() => {
+            resolve();
+          }, 200);
+        })
+        .catch(() => {
+          setTimeout(() => {
+            reject();
+          }, 200);
+        });
+    } else {
+      return ElMessageBox.confirm(text, title, {
+        showCancelButton,
+        type: icon,
+        confirmButtonText,
+        cancelButtonText,
+        closeOnClickModal: false,
+        dangerouslyUseHTMLString,
+        distinguishCancelAndClose: true,
+        customClass: 'defaultMsg_in ' + customClass
+      })
+        .then(() => {
+          setTimeout(() => {
+            resolve();
+          }, 200);
+        })
+        .catch((action) => {
+          // 只有点 取消 按钮，才 reject()
+          if (action === 'cancel') {
+            reject();
+          }
+        });
+    }
+  });
+}
+
+export default {
+  handConfirmNew
+}

package/src/packages/handDialog/handDialog.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <!-- 弹窗组件 -->
+    <ElDialog
+      :modal-class="'jddsDialog '+customClass"
+      v-model="show"
+      :width="width + 'px'"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      :show-close="showClose"
+      :center="center"
+      align-center
+      @close="handleClose"
+    >
+      <!-- 弹窗标题 -->
+      <template #header>
+        <div class="header-title">
+          <img :src="title_img_url" :style="title_img_style" :class="title_img_class"/>
+          <span class="zbt">{{title}}</span>
+        </div>
+      </template>
+      
+      <!-- 弹窗内容插槽 -->
+      <slot name="content" />
+      
+      <!-- 弹窗底部按钮区域 -->
+       <template #footer>
+          <template v-if="btnCount == 2">
+            <ElButton @click="exit" class="btn exit" :class="cancelTextClass" :style="cancelTextStyle">
+              {{ cancelText == '关闭' ? '取消' : cancelText }}
+            </ElButton>
+            <ElButton
+              type="primary"
+              class="btn save"
+              :class="confirmTextClass"
+              :style="confirmTextStyle"
+              :loading="loading"
+              @click="save"
+            >
+              {{ confirmText }}
+            </ElButton>
+          </template>
+          <template v-if="btnCount === 1">
+            <ElButton @click="exit" class="btn exit" :class="cancelTextClass" :style="cancelTextStyle">
+              {{ cancelText }}
+            </ElButton>
+          </template>
+       </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 弹窗组件
+ * 功能：提供通用弹窗封装，支持自定义标题、按钮、样式等配置
+ */
+
+// 导入Vue响应式API
+import { ref, watch } from 'vue'
+// 导入Element Plus弹窗组件
+import { ElDialog, ElButton } from 'element-plus'
+
+/**
+ * 组件属性定义
+ * @property {string} customClass - 自定义样式类名
+ * @property {boolean} showClose - 是否显示右上角关闭按钮
+ * @property {boolean} modelValue - 弹窗显示状态（v-model 默认prop）
+ * @property {string} title - 弹窗标题
+ * @property {string} title_img_url - 标题图片地址
+ * @property {string} title_img_style - 标题图片样式
+ * @property {string} title_img_class - 标题图片类名
+ * @property {number} width - 弹窗宽度（像素）
+ * @property {boolean} center - 是否居中布局
+ * @property {number} btnCount - 按钮数量（0/1/2）
+ * @property {string} confirmText - 确定按钮文本
+ * @property {string} cancelText - 取消按钮文本
+ * @property {string} cancelTextClass - 取消按钮类名
+ * @property {string} cancelTextStyle - 取消按钮样式
+ * @property {string} confirmTextClass - 确定按钮类名
+ * @property {string} confirmTextStyle - 确定按钮样式
+ */
+const props = defineProps({
+  customClass: {
+    type: String,
+    default: "",
+  },
+  showClose: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "提示",
+  },
+  title_img_url: {
+    type: String,
+    default: "",
+  },
+  title_img_style: {
+    type: String,
+    default: "",
+  },
+  title_img_class: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: Number,
+    default: 400,
+  },
+  center: {
+    type: Boolean,
+    default: true,
+  },
+  btnCount: {
+    type: Number,
+    default: 2,
+  },
+  confirmText: {
+    type: String,
+    default: "确定",
+  },
+  cancelText: {
+    type: String,
+    default: "关闭",
+  },
+  cancelTextClass: {
+    type: String,
+    default: ''
+  },
+  cancelTextStyle: {
+    type: String,
+    default: ''
+  },
+  confirmTextClass: {
+    type: String,
+    default: ''
+  },
+  confirmTextStyle: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 事件定义
+ * @event cancel - 取消事件
+ * @event confirm - 确认事件
+ * @event update:modelValue - 更新可见性事件（用于 v-model 绑定）
+ */
+const emit = defineEmits(['cancel', 'confirm', 'update:modelValue'])
+
+/**
+ * 弹窗显示状态
+ * @type {import('vue').Ref<boolean>}
+ */
+const show = ref(false)
+
+/**
+ * 加载状态
+ * @type {import('vue').Ref<boolean>}
+ */
+const loading = ref(false)
+
+/**
+ * 监听modelValue属性变化，同步显示状态
+ * modelValue: v-model 默认prop
+ */
+watch(() => props.modelValue, (val) => {
+  show.value = val
+})
+
+/**
+ * 右上角关闭按钮触发的关闭方法
+ * 只关闭弹窗，不触发 cancel 事件
+ */
+const handleClose = () => {
+  show.value = false
+  emit('update:modelValue', false)
+}
+
+/**
+ * 取消按钮触发的方法
+ * 关闭弹窗并触发 cancel 事件
+ */
+const exit = () => {
+  show.value = false
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+
+/**
+ * 确认按钮触发的方法
+ * 触发 confirm 事件（不自动关闭弹窗，由父组件控制）
+ */
+const save = () => {
+  emit('confirm')
+}
+</script>