component_ryl_v3 1.1.0

package/README.md

@@ -0,0 +1,134 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+
+# 项目功能介绍
+
+# 询问窗口组件
+    # 使用方法
+    handConfirmNew({
+        text: '塑料袋建设路口封建势力扩大发啦建设<br />路口到付件老师的开<b>发老师快</b>递费了收快递费塑料袋建设路口封建势力扩大发啦建设路口到付件老师的开发老师快递费了收快递费',
+        type:2,
+        title:'提示',
+        dangerouslyUseHTMLString: true,
+    }).then(() => {
+        console.log('确认删除')
+    }).catch(() => {
+        console.log('取消删除')
+    })
+
+    * 组件属性定义
+        {Object} options - 配置选项
+        {number} [options.type=1] - 类型：1(自定义/常用样式), 2(默认)
+        {string} options.text - 提示内容
+        {string} [options.title=''] - 提示标题（type为2时才传）
+        {boolean} [options.showCancelButton=true] - 是否显示取消按钮
+        {string} [options.icon='warning'] - 图标
+        {string} [options.confirmButtonText='确定'] - 确认按钮文本
+        {string} [options.cancelButtonText='取消'] - 取消按钮文本
+        {string} [options.customClass=''] - 自定义样式类
+        {boolean} [options.dangerouslyUseHTMLString=false] - 是否把传入的文案当成html处理
+
+# 弹窗组件
+    # 使用方法
+    <hand-dialog
+        v-model="dialogAcess"
+        title="添加/编辑快捷入口"
+        :center="false"
+        @cancel="dialogAcess = false"
+        @confirm="saveAccess"
+        >
+        <template #content>
+          <h1>
+            添加/编辑快捷入口
+          </h1>
+        </template>
+    </hand-dialog>
+    * 组件属性定义
+    {string} customClass - 自定义样式类名
+    {boolean} showClose - 是否显示右上角关闭按钮
+    {boolean} modelValue - 弹窗显示状态（v-model 默认prop）
+    {string} title - 弹窗标题
+    {string} title_img_url - 标题图片地址
+    {string} title_img_style - 标题图片样式
+    {string} title_img_class - 标题图片类名
+    {number} width - 弹窗宽度（像素）
+    {boolean} center - 是否居中布局
+    {number} btnCount - 按钮数量（0/1/2）
+    {string} confirmText - 确定按钮文本
+    {string} cancelText - 取消按钮文本
+    {string} cancelTextClass - 取消按钮类名
+    {string} cancelTextStyle - 取消按钮样式
+    {string} confirmTextClass - 确定按钮类名
+    {string} confirmTextStyle - 确定按钮样式
+
+# 分页组件
+    # 使用方法
+    <hand-paging @@page-change="handlePageChange" />
+    # 按钮方法
+    const handlePageChange = (v) => {
+        handPagingRef.value.page = v.page
+        handPagingRef.value.pageSize = v.pageSize
+    }
+    * 组件属性定义
+    {number} currentPage - 当前页码
+    {number} pageSize - 每页条数
+    {number} total - 总记录数
+    {boolean} disabled - 是否禁用分页
+    {boolean} hideOnSingle - 只有一页时是否隐藏
+    {string} layout - 分页布局（'total,sizes,prev, pager, next'）
+    {string} size - 分页大小（'small' | 'default' | 'large'） 默认'small'
+
+# 空数据提示组件
+    # 使用方法
+    <hand-no-data title="暂无数据" />
+    * 组件属性定义
+    {string} title - 提示标题
+
+
+# 图片预览组件
+    # 使用方法
+    <hand-see-img ref="handSeeImgRef" @click="openPreview($event.target.currentSrc)"/>
+    # 按钮方法
+    const openPreview = (imageSrc) => {
+        handSeeImgRef.value.openPreview(imageSrc)
+    }
+    * 组件属性定义
+    {string} imageSrc - 图片路径
+
+# Tab组件
+    # 使用方法
+    <hand-tab :list="[{ label: '全部', value: 'all' }, { label: '待处理是的', value: 'pending' }, { label: '已处理', value: 'processed' }]" @getStatus="getStatus" />
+    # 按钮方法
+    const getStatus = (v) => {
+        console.log(v)
+    }
+    * 组件属性定义
+    {array} list - Tab列表，每个元素为{ label: '标签', value: '值' }
+
+
+
+# 自定义指令
+    # 防抖指令 节流指令
+    # 输入框方法
+    <el-input v-model="inputValue" v-debounce:input="handleInput" placeholder="请输入"></el-input>
+    <el-input v-model="inputValue" v-throttle:input="handleInput" placeholder="请输入"></el-input>
+    # 按钮方法
+    <el-button v-debounce="[openConfirm,200,[1,2,3,4,5,6,7]]" type="success">打开询问窗口</el-button>
+    <el-button v-throttle="[openConfirm,200,[1,2,3,4,5,6,7]]" type="success">打开询问窗口</el-button>
+
+    # 复制指令
+    <el-button v-copy="['这是复制的内容',copyBack]">点击复制</el-button>
+    # 按钮方法
+    const copyBack = (err, success) => {
+        if (success) {
+            console.log('复制成功')
+        } else {
+            console.log(err || '复制失败')
+        }
+    }
+
+    # 金额格式指令
+    <el-input v-model="inputMoney" v-money="{max:100,min:0}" placeholder="请输入"></el-input>

package/dist/component_ryl_v3.css

@@ -0,0 +1 @@
+@charset "UTF-8";.mainMenu[data-v-e79ba81c]{display:inline-block;position:relative}.mainMenu .elbadge[data-v-e79ba81c]{color:red;font-style:normal}.mainMenu .elbadge.hot[data-v-e79ba81c]:after{display:inline-block;content:"";width:8px;height:8px;background-color:red;border-radius:100%;transform:scale(.9);position:absolute;top:10px;right:-10px}.mainMenu .elbadge.new[data-v-e79ba81c]:after{display:inline-block;content:"new";background-color:red;color:#fff;padding:0 4px 1px;line-height:16px;border-radius:4px;transform:scale(.9);position:absolute;top:6px;right:-32px}.mainMenu .elbadge.run[data-v-e79ba81c]{display:inline-block;color:#fff;background-color:red;min-width:20px;padding:0 2px;text-align:center;height:16px;line-height:16px;border-radius:4px;animation:changeRun 1.5s ease-in-out 0s infinite}.mainMenu .elbadge.num[data-v-e79ba81c]{display:inline-block;background-color:red;color:#fff;width:20px;text-align:center;height:16px;line-height:16px;border-radius:4px;transform:scale(.9);position:absolute;top:6px;right:-22px}.mainMenu .elbadge.num.nine[data-v-e79ba81c]{width:26px;right:-28px}.mainMenu .elbadge.num.nine em[data-v-e79ba81c]{position:relative;top:-4px}.el-menu-item span[data-v-e79ba81c],.el-sub-menu__title span[data-v-e79ba81c]{font-size:14px}.handHeaderContent{position:relative;z-index:999;height:100vh}.handHeaderContent .el-container.is-vertical{position:relative}.handHeaderContent .inner_header{padding:0;background:#fff;justify-content:space-between;height:50px!important}.handHeaderContent .inner_header .colSpan{width:60px;background-color:transparent;justify-content:center;align-items:center}.handHeaderContent .inner_header .colSpan .hide{width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAA2hJREFUeF7t3Vtu5DAMRFFlZ9nZzKwsS0ugTBswGnnYLkqkVddAkC+1Q9YBrXb68dJae28cth14AYBt9p+FA8A7fwCY5w8AALAJtDbAHsA6fjaB5vEDAADcB/A2wB7AO3+eBprnDwAAcB/A2gB7AOv4eRpoHv9/AK/2XTBuQAfAYdwBABiHv70gxLwF3uUzAbzz/9wEchh3AADG4bMHMA8fAABgD+BugD2AuQAAAMC8A+blMwEAYN4B8/IrTIC/rbX+w5HQgWwAW/AASAg/+0ZQD/1Pa+0fEyAp/cfnA2ScfQu/nxsAGQk8zplxCdiHD4DE8DMuAc/hKwB4LWMAnpkT4KvwVQBvAT2wfohZAL4LHwDJ/GYA+Cl8ACwO4LfwAbAwgCPhA2BRAEfDB8CCAM6ED4DFAJwNHwALAbgSPgAWAXA1fAAsAEAJHwA3B6CGD4AbA4gIHwA3BRAVPgBuCCAyfADcDEB0+AC4EYAR4SsAklu3xumP/jt4VPgASHZ0BMDI8AFQHMDo8AFQGMCM8AFQFMCs8AFQEMDM8AFQDMDs8AFQCEBG+AAoAiArfAAUAJAZPgAAwLuDMw1sdwIzpwBvD08UsL8VnIUAAEUA9D8jAwEACgHIQACAYgBmIwBAQQAzEQCgKIBZCABQGMAMBAAoDmA0AgDcAMBIBFcB9E8J40OiRDxHXhO4P8WI+wQAEENUlp8FMGISAEBJUFx7BUA0AgCIISrLrwKIRAAAJUFxrQIgCgEAxBCV5SqACAQAUBIU10YAUBEAQAxRWR4FQEEAACVBcW0kgKsIACCGqCyPBnAFAQCUBMW1IwCcRQAAMURl+SgAZxAAQElQXDsSwFEEABBDVJaPBnAEAQCUBMW1MwD8hgAAYojK8lkAfkKgAFBqZ23CF0dGfm0cAQZ0YOYE2P7cZwRXJ0BA+TxEBoDnywEAEh1mAdgjAIApgA3B/ndiKzxPnTkB9nuCvi/gSOhABQAJZXPKrQMAMLcAAACYd8C8fCYAAMw7YF4+EwAA5h0wL58JAADzDpiXzwQAgHkHzMtnAgDAvAPm5fcJ0D9sicO0Ax3Au2ntlP14VTAAjCkwAYzD76UDAADsAZwNMAGc0+cSYJ4+AADAJcDcAAAAwLMAZwNMAOf02QSapw8AAHAJMDcAAHMAH9uzwUGCPXdSAAAAAElFTkSuQmCC) no-repeat;background-size:contain;cursor:pointer;transition:all .2s}.handHeaderContent .inner_header .colSpan .hide.rotate{transform:rotate(180deg)}.handHeaderContent .inner_header .saasInfo .img{align-items:center;justify-content:center;height:50px;margin-right:20px;cursor:pointer}.handHeaderContent .inner_header .saasInfo .img:hover .dropDown{display:block}.handHeaderContent .inner_header .saasInfo .img img{width:33px;height:33px;border-radius:50%;margin-right:5px;border:1px solid #eff2f5}.handHeaderContent .inner_header .saasInfo .img i{font-size:14px;font-weight:700;color:#5a5a5a}.handHeaderContent .dropDown{position:absolute;right:10px;top:50px;width:170px;background:#fff;box-shadow:0 0 4px #1919191a;border-radius:2px;display:none;z-index:999}.handHeaderContent .dropDown .san{display:inline-block;width:10px;height:10px;border:1px solid #fff;border-top-style:none;border-right-style:none;transform:rotate(135deg);position:absolute;top:-4px;right:38px;background:#fff}.handHeaderContent .dropDown .user{padding:11px;align-items:center;border-bottom:1px solid #f5f5f5}.handHeaderContent .dropDown .user span{line-height:normal;font-size:14px}.handHeaderContent .dropDown .exit{font-size:14px;line-height:39px;height:39px;border-top:1px solid #EFF2F5;text-align:center;padding:0;color:#5a5a5a}.handHeaderContent .aside{height:100%;transition:all .2s;overflow:overlay}.handHeaderContent .aside .init-el-menu{padding-bottom:38px}.handHeaderContent .aside.hideMenu .el-tooltip{text-align:center}.handHeaderContent .aside.hideMenu .el-submenu__title{text-align:center!important}.handHeaderContent .aside.hideMenu i.iconfont{margin-right:0}.handHeaderContent .aside.hideMenu .deldom,.handHeaderContent .aside.hideMenu .el-submenu__icon-arrow{display:none}.handHeaderContent .aside i.iconfont{font-size:16px;display:inline-block;width:18px;margin-right:4px;color:#747c81}.handHeaderContent .main{padding:0;background-color:#eff2f5}.handHeaderContent .main.scroll{overflow-y:scroll}.handHeaderContent .main.scroll .inner_content,.handHeaderContent .main.scroll .inner_content.normal{height:auto}.handHeaderContent .main.scrollX{overflow-x:scroll}.handHeaderContent .main .content_mar{padding:18px}.handHeaderContent .main .inner_content{background-color:#fff;height:calc(100vh - 86px);border-radius:4px}.handHeaderContent .main .inner_content.normal{background-color:transparent}.handHeaderContent .inner_footer{color:#666;text-align:center;padding-top:18px;justify-content:center}@keyframes changeRun{0%{transform:translateY(0) scale(.9)}25%{transform:translateY(-6px) scale(.9)}50%{transform:translateY(0) scale(.9)}75%{transform:translateY(-2px) scale(.9)}to{transform:translateY(0) scale(.9)}}.initNoData[data-v-0b0e3718]{width:100%;align-items:center;justify-content:center}.initNoData .inner[data-v-0b0e3718]{text-align:center}.initNoData .inner p[data-v-0b0e3718]{color:#666;margin-top:12px;line-height:normal}.initPaging[data-v-1d8ef8c9] .el-select__placeholder{text-align:center}.previewFix[data-v-14d38dc6]{width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999;background-color:#00000080;display:flex;justify-content:center;align-items:center}.previewFix img[data-v-14d38dc6]{max-width:98%;max-height:98%}.status_search[data-v-e6bbcf18]{display:inline-block}.status_search span[data-v-e6bbcf18]{min-width:40px;height:30px;padding:0 10px;display:inline-block;text-align:center;line-height:30px;border:1px solid #d9d9d9;border-right:1px solid transparent;cursor:pointer}.status_search span[data-v-e6bbcf18]:first-child{border-radius:2px 0 0 2px}.status_search span[data-v-e6bbcf18]:last-child{border-radius:0 2px 2px 0;border-right:1px solid #d9d9d9}.status_search .active[data-v-e6bbcf18]{background:#06f;color:#fff;border-color:#06f}