component_ryl_v3 1.1.0

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "component_ryl_v3",
+  "private": false,
+  "version": "1.1.0",
+  "type": "module",
+  "description": "Vue3 login form component with Element Plus",
+  "main": "./dist/component_ryl_v3.js",
+  "module": "./dist/component_ryl_v3.js",
+  "exports": {
+    ".": {
+      "import": "./dist/component_ryl_v3.js"
+    },
+    "./dist/style.css": "./dist/component_ryl_v3.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "component",
+    "login",
+    "form",
+    "element-plus"
+  ],
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.14.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.3",
+    "sass-embedded": "^1.100.0",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^6.3.5"
+  }
+}

package/src/App.vue

@@ -0,0 +1,215 @@
+<template>
+  <hand-header
+    :userInfo="userInfo"
+    collapse
+     :defaultActive="menuActive"
+    :menuList="menuList"
+  >
+    <template #headElseTitle>
+      <div style="color:#fff;text-align:center;font-size:20px;">
+        {{ menuList.name }}
+      </div>
+    </template>
+    <template #headElseInfo>
+      这是头部补充的内容
+    </template>
+    <template #headElseInfoRight>
+      工单
+          <div class="dropDown initWork">
+            <em class="san"></em>
+            <a
+              class="color"
+              target="_blank"
+              >提交工单</a
+            >
+          </div>
+    </template>
+    <template #headElseHand>
+      <ul>
+        <li>1</li>
+        <li>2</li>
+      </ul>
+    </template>
+    <template #content>
+      <h6>Tab</h6>
+      <hand-tab :list="[{ label: '全部', value: 'all' }, { label: '待处理是的', value: 'pending' }, { label: '已处理', value: 'processed' }]" @getStatus="getStatus" />
+      <h6>图片预览</h6>
+      <img src="https://img.alicdn.com/bao/uploaded/i3/2206588314948/O1CN01KjFgoO1mQEsQjnFbC_!!2206588314948-0-C2M.jpg" alt="" style="width:60px;height: 60px;" @click="openPreview($event.target.currentSrc)">
+      <hand-see-img ref="handSeeImgRef" />
+      <h6>分页</h6>
+      <div>
+        <hand-paging :currentPage="handPagingRef.page" :total="handPagingRef.total" :pageSize="handPagingRef.pageSize" :size="handPagingRef.size" @page-change="handlePageChange" />
+      </div>
+      <h6>空数据提示</h6>
+      <hand-no-data title="暂无数据" />
+      <h6>弹窗</h6>
+      <el-button @click="openDialog" type="danger">打开弹窗</el-button>
+      <hand-dialog
+          v-model="dialogAcess"
+          title="添加/编辑快捷入口"
+          :center="false"
+          @cancel="exitDialog"
+          @confirm="saveAccess"
+          customClass="sldkslfd"
+          >
+          <template #content>
+            111
+          </template>
+      </hand-dialog>
+      <h6>询问窗口</h6>
+      <el-button v-debounce="[openConfirm,300,[1,2,3,4,5,6,7]]" type="success">打开询问窗口</el-button>
+      <h6>自定义指令</h6>
+      <span>防抖</span>
+      <el-input v-model="inputValue" v-debounce:input="handleInput" placeholder="请输入"></el-input>
+      <span>节流</span>
+      <el-input v-model="inputValue" v-throttle:input="handleInput" placeholder="请输入"></el-input>
+      <span>金额格式</span>
+      <el-input v-model="inputMoney" v-money="{max:100}" placeholder="请输入"></el-input>
+      <span>复制</span><br>
+      <el-button v-copy="['这是复制的内容',copyBack]">点击复制</el-button>
+    </template>
+  </hand-header>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import HandHeader from './packages/handHeader/handHeader.vue'
+import HandTab from './packages/handTab/handTab.vue'
+import HandSeeImg from './packages/handSeeImg/handSeeImg.vue'
+import HandPaging from './packages/handPaging/handPaging.vue'
+import HandNoData from './packages/handNoData/handNoData.vue'
+import HandDialog from './packages/handDialog/handDialog.vue'
+import { ElButton, ElInput } from 'element-plus'
+import { handConfirmNew } from '@/packages/handConfirmNew'
+//#region Tab组件
+const getStatus = (v) => {
+  console.log(v)
+}
+//#endregion Tab组件
+//#region 图片预览组件
+const handSeeImgRef = ref(null)
+const openPreview = (imageSrc) => {
+  handSeeImgRef.value.openPreview(imageSrc)
+}
+//#endregion 图片预览组件
+//#region 分页组件
+const handPagingRef = ref({page: 1, total: 100, pageSize: 10})
+const handlePageChange = (v) => {
+  handPagingRef.value.page = v.page
+  handPagingRef.value.pageSize = v.pageSize
+}
+//#endregion 分页组件
+//#region 弹窗组件
+const dialogAcess = ref(false)
+const openDialog = () => {
+  dialogAcess.value = true
+}
+const saveAccess = () => {
+  dialogAcess.value = false
+  console.log('确认弹窗')
+}
+const exitDialog = () => {
+  dialogAcess.value = false
+  console.log('取消弹窗')
+}
+//#endregion 弹窗组件
+//#region 用户信息
+const userInfo = ref({
+  name: '1112', // 登录人的名称
+  copyRight: `<div><p>网上有害信息举报专区 | <a href=\"https://www.12377.cn/\" target=\"_blank\">中央网信办（国家网信办）违法和不良信息举报中心</a></p>\r\n<span style=\"color: #a3a3a3;\">Copyright © 2021-2023.</span>\r\n            <a href=\"/\">四川聚达鼎盛信息技术有限公司</a>&nbsp;&nbsp;\r\n            <a href=\"https://beian.miit.gov.cn/#/Integrated/index\" target=\"_blank\">蜀ICP备20002637号-1</a>&nbsp;&nbsp;\r\n            <a href=\"https://saas-1259468876.cos.ap-shanghai.myqcloud.com/saas/other/%E7%94%B5%E4%BF%A1%E5%A2%9E%E5%80%BC.jpg\" target=\"_blank\">电信增值业务许可证</a>&nbsp;&nbsp;\r\n            <a href=\"https://saas-1259468876.cos.ap-shanghai.myqcloud.com/saas/other/%E8%90%A5%E4%B8%9A%E6%89%A7%E7%85%A7.jpg\" target=\"_blank\">营业执照</a></div>`,
+})
+const menuActive = ref('/third')
+const menuList = ref( {
+  name: "控",
+  list: [
+    {
+      path: "/third",
+      meta: { title: "菜单3", icon: "icon-kuaijierukou" },
+      tips: { name: "num", value: 32 },
+      id:1
+    },
+    {
+      path: "/third_pre",
+      meta: { title: "菜单3Prev", icon: "icon-tuiguang1" },
+      tips: { name: "num", value: 8 },
+      id:12
+    },
+    {
+      path: "/third2",
+      meta: { title: "级菜单", icon: "icon-shangchuan" },
+      tips: { name: "hot" },
+      id:2,
+      children: [
+        {
+          path: "/home",
+          meta: { title: "水电费" },
+          tips: { name: "new" },
+        },
+      ],
+    },
+    {
+      path: "/third3",
+      icon: "iconicon-test",
+      meta: { title: "三级菜单", icon: "icon-daochu" },
+      tips: { name: "run",value: 'HOT' },
+      id:4,
+      children: [
+        {
+          path: "/sd",
+          meta: { title: "实力坑爹" },
+          id:5,
+        },
+        {
+          path: "/sd1",
+          meta: { title: "实力" },
+          id:6,
+        },
+        {
+          path: "/third3-1",
+          icon: "iconicon-test",
+          meta: { title: "皮斯柯达"},
+          id:6,
+          children: [
+            {
+              path: "/psmdsl",
+              id:7,
+              meta: { title: "历史课"},
+            }
+          ],
+        }
+      ],
+    }
+  ],
+})
+//#endregion 用户信息
+//#region 询问窗口组件
+const openConfirm = () => {
+  handConfirmNew({
+    text: '塑料袋建设路口封建势力扩大发啦建设<br />路口到付件老师的开<b>发老师快</b>递费了收快递费塑料袋建设路口封建势力扩大发啦建设路口到付件老师的开发老师快递费了收快递费',
+    type:2,
+    title:'提示'
+  }).then(() => {
+    console.log('确认删除')
+  }).catch(() => {
+    console.log('取消删除')
+  })
+}
+//#endregion 询问窗口组件
+//#region 自定义指令
+const inputValue = ref('')
+const handleInput = () => {
+  console.log(inputValue.value)
+}
+const inputMoney = ref('')
+const handleMoney = () => {
+  console.log(inputMoney.value)
+}
+const copyBack = (err, success) => {
+    if (success) {
+        console.log('复制成功')
+    } else {
+        console.log(err || '复制失败')
+    }
+}
+//#endregion 自定义指令
+</script>

package/src/assets/styles/common.scss

@@ -0,0 +1,239 @@
+// table 区域
+.JD_table.el-table {
+  &::before {
+    height: 0 !important;
+  }
+  width: 100%;
+  th,th.el-table__cell {
+    background-color: rgba(239,242,245,.5);
+    padding: 0;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: none !important;
+    .cell {
+      font-weight: normal;
+      color: #999999;
+      text-align: left;
+      white-space: nowrap;
+    }
+  }
+  td,td.el-table__cell {
+    padding: 0;
+    height: 48px;
+    line-height: 48px;
+    .cell {
+      line-height: normal;
+    }
+  }
+}
+
+// table 添加了 border属性，把多余的边框 隐藏
+.el-table--group, .el-table--border{
+  border: none !important;
+  &::after{
+    width: 0 !important;
+  }
+}
+.el-table--border .el-table__cell,.el-table--border td{
+  border-right: none !important;
+}
+.el-table--border th.el-table__cell{
+  border-right: 1px solid #ebeef5 !important;
+}
+// table内容居中
+.el-table .cell{
+  text-align: center !important;
+}
+//解决 elementUI 在IE下 table 表格宽度不是100%的问题
+.el-table__header,
+.el-table__empty-block,
+.el-table__body {
+  width: 100% !important;
+}
+
+// button
+.el-button {
+  border-radius: 2px !important;
+}
+
+// input 
+.el-input input{
+  border-radius: 2px;
+}
+
+// 导航菜单
+// hover效果
+.el-sub-menu__title:hover,.el-sub-menu .el-menu-item:hover,.el-menu-item:hover {
+  color: #fff !important;
+  background-color: #06f !important;
+  i.iconfont{
+    color: #fff !important;
+  }
+}
+// 有下级的hover效果(暂时不用)
+.el-sub-menu__title:hover{
+  // background-color: #1e222d !important;
+}
+.el-sub-menu .el-menu-item.is-active,.el-menu-item.is-active,.el-sub-menu__title.is-active{
+  background-color: #06f !important;
+  i.iconfont{
+    color: #fff !important;
+  }
+}
+.el-sub-menu__title {
+  text-align: left !important;
+}
+// 二级菜单颜色
+.el-sub-menu .el-menu-item{
+  min-width: auto !important;
+  background-color: #151822 !important;
+  padding-left: 46px !important;
+  position: relative;
+  &::after{
+    content: '';
+    width: 4px;
+    height: 4px;
+    background: #7C878E;
+    border-radius: 50%;
+    position: absolute;
+    top:19px;
+    left: 26px;
+  }
+}
+// 二级菜单栏（整个模块）的背景颜色
+.el-sub-menu .el-menu{
+  background-color: #151822 !important;
+}
+.el-menu {
+  border-right: none !important;
+}
+.el-menu-item,
+.el-sub-menu__title{
+  height: 38px !important;
+  line-height: 38px !important;
+  margin-top: 2px;
+  *{
+    vertical-align: middle;
+  }
+}
+.el-submenu__title i.el-sub-menu__icon-arrow{
+  color: #C0C5C7;
+  font-weight: bold;
+}
+
+/* 自定义弹窗 -- 询问弹窗 */
+.el-message-box {
+  width: 400px !important;
+}
+// 自定义版本
+.initMsg_in{
+  padding: 20px 0 !important;
+  .el-message-box__header {
+    padding: 0 !important;
+    .el-message-box__headerbtn {
+      display: none;
+    }
+    .el-message-box__status {
+      font-size: 50px !important;
+      svg{
+        font-size: 100%;
+      }
+    }
+  }
+  .el-message-box__content {
+    padding: 30px !important;
+    .el-message-box__message {
+      letter-spacing: 1px;
+    }
+  }
+  .el-message-box__btns {
+    padding: 0 !important;
+    button {
+      min-width: 100px;
+      height: 40px;
+      border-radius: 4px;
+      &:nth-child(2) {
+        margin-left: 20px !important;
+      }
+    }
+  }
+}
+// 默认版本
+.defaultMsg_in{
+  .el-message-box__container{
+    align-items: flex-start;
+  }
+  .el-message-box__title{
+    span{
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+  .el-message-box__headerbtn .el-message-box__close{
+    font-size: 18px;
+    svg{
+      font-size: 100%;
+    }
+  }
+  .el-message-box__headerbtn{
+    top:7px;
+    right: 10px;
+  }
+  .el-message-box__status{
+    top:0;
+    transform: none;
+    svg{
+      font-size: 100px;
+    }
+  }
+  .el-message-box__btns {
+    button {
+      min-width: 68px;
+      height: 32px;
+      border-radius: 4px;
+      border: none;
+      &:nth-child(2) {
+        // margin-left: 20px !important;
+      }
+    }
+  }
+}
+
+
+// 是否是ie浏览器
+.ieBro {
+  position: fixed;
+  padding: 10px;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #fffade;
+  border: 1px solid #f9d878;
+  justify-content: space-between;
+  span,
+  a {
+    font-size: 12px;
+  }
+  .color {
+    text-decoration: underline;
+  }
+}
+
+// 单选框，复选框，下拉框等样式字号
+.el-radio__label,.el-checkbox__label,.el-form-item__label{
+  font-size: 12px !important;
+}
+
+// form表单，横向排列的间距
+.el-form--inline .el-form-item{
+  margin-right: 18px !important;
+}
+.el-form-item__label{
+  padding: 0 !important;
+}
+
+// tinymce 显示 自定义的 placeholder 重影优化
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{
+  content: '' !important;
+}

package/src/assets/styles/dialog.scss

@@ -0,0 +1,45 @@
+.jddsDialog {
+  &.el-dialog {
+    border-radius: 4px;
+  }
+  .el-dialog__title,.zbt {
+    font-size: 16px;
+    color: #272727;
+    line-height: normal;
+  }
+  .el-dialog__body .el-form-item {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-dialog__headerbtn{
+    top:5px;
+    right: 0;
+    i{
+      font-size: 18px;
+      svg{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .btn {
+    width: 88px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 4px;
+    padding: 0;
+  }
+  .exit {
+    font-size: 14px;
+  }
+  .header-title{
+    display: flex;
+    align-items: center;
+  }
+  &.el-dialog--center{
+    .header-title{
+      justify-content: center;
+    }
+  }
+}

package/src/assets/styles/element-plus-theme.scss

@@ -0,0 +1,15 @@
+/**
+ * Element Plus 主题色覆盖
+ * 使用 CSS 变量改变主题色
+ */
+
+:root {
+  /* 主题色 */
+  --el-color-primary: #06f;
+
+  /* 成功色 */
+  --el-color-success: #35B84B;
+
+  /* 危险色 */
+  --el-color-danger: #FC1334;
+}

package/src/assets/styles/index.scss

@@ -0,0 +1,93 @@
+// 引入其他css
+@use "./dialog.scss";
+@use "./common.scss";
+
+*,
+#app,
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
+  font-size: 12px;
+}
+a {
+  text-decoration: none;
+  color: #5a5a5a;
+}
+li {
+  list-style: none;
+}
+
+.flex {
+  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
+  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
+  display: -moz-box; /* 老版本语法: Firefox (buggy) */
+  display: -ms-flexbox; /* 混合版本语法: IE 10 */
+}
+.flex_row {
+  flex-direction: row;
+}
+.flex_col {
+  flex-direction: column;
+}
+
+// 取消textarea缩放
+.initTextarea > .el-textarea__inner {
+  resize: none;
+}
+
+// 默认-滚动条自定义
+::-webkit-scrollbar{
+    width:8px;
+    height:8px;
+}
+// 整个滚动条的背景
+::-webkit-scrollbar-track{
+    background: transparent;
+    border-radius:4px;
+}
+// 滚动条内 滑块的背景
+::-webkit-scrollbar-thumb{
+  background-color: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-thumb:hover{
+    background: #c2c2c2;
+}
+::-webkit-scrollbar-corner{
+    background: transparent;
+}
+
+// 特殊情况下 需要默认显示出滚动条
+.common_show_scroll{
+  &::-webkit-scrollbar-thumb{
+    background: #c2c2c2;
+  }
+}
+
+// 处理tinymce默认标签的样式
+.tinymce-editor-JustOne *:not(h1,h2,h3,h4,h5,h6){
+  font-size:  inherit;
+}
+.tinymce-editor-JustOne {
+  h1{
+    font-size: 32px;
+  }
+  h2{
+    font-size: 28px;
+  }
+  h3{
+    font-size: 24px;
+  }
+  h4{
+    font-size: 20px;
+  }
+  h5{
+    font-size: 16px;
+  }
+  h6{
+    font-size: 12px;
+  }
+}

package/src/index.js

@@ -0,0 +1,33 @@
+import HandDialog from './packages/handDialog/handDialog.vue'
+import HandHeader from './packages/handHeader/handHeader.vue'
+import HandNoData from './packages/handNoData/handNoData.vue'
+import HandPaging from './packages/handPaging/handPaging.vue'
+import HandSeeImg from './packages/handSeeImg/handSeeImg.vue'
+import HandTab from './packages/handTab/handTab.vue'
+import { handConfirmNew } from './packages/handConfirmNew/index.js'
+import directives from './packages/directives'
+
+
+
+export {
+  HandDialog,
+  HandHeader,
+  HandNoData,
+  HandPaging,
+  HandSeeImg,
+  HandTab,
+  handConfirmNew,
+  directives
+}
+
+export default {
+  install(app) {
+    app.component('HandDialog', HandDialog)
+    app.component('HandHeader', HandHeader)
+    app.component('HandNoData', HandNoData)
+    app.component('HandPaging', HandPaging)
+    app.component('HandSeeImg', HandSeeImg)
+    app.component('HandTab', HandTab)
+    app.use(directives)
+  }
+}