From c37a6de593d876179f4ac5f2cd228554560d41e4 Mon Sep 17 00:00:00 2001 From: juzi <819872918@qq.com> Date: Fri, 16 Dec 2022 10:05:19 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 24 + index.js | 23 + package.json | 7 + src/assets/iconfont/demo.css | 539 ++++++++++++++++++ src/assets/iconfont/demo_index.html | 260 +++++++++ src/assets/iconfont/iconfont.css | 30 + src/assets/iconfont/iconfont.eot | Bin 0 -> 2448 bytes src/assets/iconfont/iconfont.js | 1 + src/assets/iconfont/iconfont.json | 30 + src/assets/iconfont/iconfont.svg | 25 + src/assets/iconfont/iconfont.ttf | Bin 0 -> 2280 bytes src/assets/iconfont/iconfont.woff | Bin 0 -> 1416 bytes src/assets/iconfont/iconfont.woff2 | Bin 0 -> 976 bytes src/components/BaseDialog/index.vue | 99 ++++ src/components/BaseDialog/js/drag.js | 77 +++ src/components/BaseTable/index.vue | 241 ++++++++ .../BaseTable/subcomponents/InputArea.vue | 37 ++ .../BaseTable/subcomponents/MethodBtn.vue | 162 ++++++ src/components/Pagination/index.vue | 104 ++++ src/components/SearchBar/SearchBar.vue | 258 +++++++++ 20 files changed, 1917 insertions(+) create mode 100644 README.md create mode 100644 index.js create mode 100644 package.json create mode 100644 src/assets/iconfont/demo.css create mode 100644 src/assets/iconfont/demo_index.html create mode 100644 src/assets/iconfont/iconfont.css create mode 100644 src/assets/iconfont/iconfont.eot create mode 100644 src/assets/iconfont/iconfont.js create mode 100644 src/assets/iconfont/iconfont.json create mode 100644 src/assets/iconfont/iconfont.svg create mode 100644 src/assets/iconfont/iconfont.ttf create mode 100644 src/assets/iconfont/iconfont.woff create mode 100644 src/assets/iconfont/iconfont.woff2 create mode 100644 src/components/BaseDialog/index.vue create mode 100644 src/components/BaseDialog/js/drag.js create mode 100644 src/components/BaseTable/index.vue create mode 100644 src/components/BaseTable/subcomponents/InputArea.vue create mode 100644 src/components/BaseTable/subcomponents/MethodBtn.vue create mode 100644 src/components/Pagination/index.vue create mode 100644 src/components/SearchBar/SearchBar.vue diff --git a/README.md b/README.md new file mode 100644 index 0000000..18243ba --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# code-brick + +## Project setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run serve +``` + +### Compiles and minifies for production +``` +npm run build +``` + +### Lints and fixes files +``` +npm run lint +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/index.js b/index.js new file mode 100644 index 0000000..a8f6db6 --- /dev/null +++ b/index.js @@ -0,0 +1,23 @@ +import SearchBar from './src/components/SearchBar/SearchBar.vue' +import BaseDialog from './src/components/BaseDialog/index.vue' +import Pagination from './src/components/Pagination/index.vue' +import BaseTable from './src/components/BaseTable/index.vue' +import InputArea from './src/components/BaseTable/subcomponents/InputArea.vue' +import MethodBtn from './src/components/BaseTable/subcomponents/MethodBtn.vue' + +let ModuleObj = { + SearchBar, + BaseDialog, + Pagination, + BaseTable, + InputArea, + MethodBtn +} +let MyModule = {} +MyModule.install = (Vue) => { + for (let i in ModuleObj) { + Vue.component(i, ModuleObj[i]) + } +} + +export default MyModule diff --git a/package.json b/package.json new file mode 100644 index 0000000..df61c77 --- /dev/null +++ b/package.json @@ -0,0 +1,7 @@ +{ + "name": "code-brick-zj", + "version": "0.0.3", + "private": false, + "description": "组件封装", + "main": "index.js" +} diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html new file mode 100644 index 0000000..5b4d21c --- /dev/null +++ b/src/assets/iconfont/demo_index.html @@ -0,0 +1,260 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    detail
    +
    &#xe601;
    +
    • + +
  • + +
    edit
    +
    &#xe602;
    +
    • + +
  • + +
    delete
    +
    &#xe603;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot?t=1670833747896'); /* IE9 */
+  src: url('iconfont.eot?t=1670833747896#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAAsAAAAACOgAAAOEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDDAqFLIQ+ATYCJAMQCwoABCAFhGcHQBuuBxEVnK3Ifhw4bsPKemuJufIlJ6qEJtJ/DgLK2Waz25KLIeL68gZe14KfiOD6U5E2QABZ5KNTuwgOKAujXT79x/1YSS7XBUAFLGCF+j/HTJeEH0SWWbjW+YAG1mlRhHuzvBKkO5ZXHqRr/nkXBGBQTxtapy69BuHMGr9oDiUovFoBZaiYNX3qeHTJR42ECnQEXuhEhViPB7RQ7SywLr29eEODdNDwSLxl+k3pPInjz8VzKX1BH+Rd4hoEuLMGeAAJ1DqZUAwblw9A5vZaJEafXFGFtFYIeC6DQZ6LGH/uf3kg0JAgvHh0C2MbOSQ8FyGNlKFhGpghMQrS3ZigAzbwFviHxyxFPbxoePJhhM2p74R/ShGj1BLHHwa+cDNvIFIIN2JY/cEW+6LTA5mxbkyGPy1K0864xM0NZKP5th8+aTj+00d3Co+769gZ0w6Eh/vCwgzLvzsrDuXbcmDRbfflJooxkZnZ0YUmhaVlRMTEFp3rzxFSvSrLIN7hWVMN4V5WHX4RDH+WL9vMH8h1c+a4ucumZYM13fJfVqNmd7Bza9EXm0040ctGslkoaKHSkko12tRfWSTvrYTSCbfKxMXVqixFkwecCiUbOAXKrb53spxT7uS91RhnrNU85OXaAmtfhjQv2ObQk4JOifhbJRy2qL0kNKm+ETp5xRAlz7RrBjNsg5Xf6hrSi1HpUVtwriiOm5j5z/8Ma1W5YeUaNKZVmE1xtsJe7VpawqqBra0muTlJA/SjjHp0DWoSpR9RDThSuSHz8LaS67TrELwmc2VNCD6UybL8//EZPrmfmozN2+qbbioAHhyOuJLqgtcU8AB0NBD4v4ExCphX2QZQqo8cEv8wwVDeuFUDDF8NQawu4P4azILgYBDoFCxBIw8lQaJTAamwNcCDSQPwotMaDGrqPN2koHlIhAoBqliFQJBPNmg4HACJkM8HqbBf8CjiB175/MEwJHsxU5XUllAwapBv8GooJmBx2ugJ7T0J6rLckGaPTdBWTdN1xIK0xJD5YTtmA4aGDAe+HaY0wEhDQMWVYx77ujZ9V6nUkBdbBAkMaUB6A54yKEycn+v3d4Ksu0QgIPImJTPFkcZBq9IAkEd6AeU8yTKzB6vDmAEMQs4MHKQUJcs+AGN/uwAprOJmWEe92s9noPRqf2a+vHWAwVtSpQkplPDgHbLwaTNZey59EjIuFg==') format('woff2'),
+       url('iconfont.woff?t=1670833747896') format('woff'),
+       url('iconfont.ttf?t=1670833747896') format('truetype'),
+       url('iconfont.svg?t=1670833747896#iconfont') format('svg');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + detail +
    +
    .icon-detail +
    +
    • + +
  • + +
    + edit +
    +
    .icon-edit +
    +
    • + +
  • + +
    + delete +
    +
    .icon-delete +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    detail
    +
    #icon-detail
    +
    • + +
  • + +
    edit
    +
    #icon-edit
    +
    • + +
  • + +
    delete
    +
    #icon-delete
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..3e5c87f --- /dev/null +++ b/src/assets/iconfont/iconfont.css @@ -0,0 +1,30 @@ +@font-face { + font-family: "iconfont"; /* Project id 3821755 */ + src: url('iconfont.eot?t=1670833747896'); /* IE9 */ + src: url('iconfont.eot?t=1670833747896#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAAsAAAAACOgAAAOEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDDAqFLIQ+ATYCJAMQCwoABCAFhGcHQBuuBxEVnK3Ifhw4bsPKemuJufIlJ6qEJtJ/DgLK2Waz25KLIeL68gZe14KfiOD6U5E2QABZ5KNTuwgOKAujXT79x/1YSS7XBUAFLGCF+j/HTJeEH0SWWbjW+YAG1mlRhHuzvBKkO5ZXHqRr/nkXBGBQTxtapy69BuHMGr9oDiUovFoBZaiYNX3qeHTJR42ECnQEXuhEhViPB7RQ7SywLr29eEODdNDwSLxl+k3pPInjz8VzKX1BH+Rd4hoEuLMGeAAJ1DqZUAwblw9A5vZaJEafXFGFtFYIeC6DQZ6LGH/uf3kg0JAgvHh0C2MbOSQ8FyGNlKFhGpghMQrS3ZigAzbwFviHxyxFPbxoePJhhM2p74R/ShGj1BLHHwa+cDNvIFIIN2JY/cEW+6LTA5mxbkyGPy1K0864xM0NZKP5th8+aTj+00d3Co+769gZ0w6Eh/vCwgzLvzsrDuXbcmDRbfflJooxkZnZ0YUmhaVlRMTEFp3rzxFSvSrLIN7hWVMN4V5WHX4RDH+WL9vMH8h1c+a4ucumZYM13fJfVqNmd7Bza9EXm0040ctGslkoaKHSkko12tRfWSTvrYTSCbfKxMXVqixFkwecCiUbOAXKrb53spxT7uS91RhnrNU85OXaAmtfhjQv2ObQk4JOifhbJRy2qL0kNKm+ETp5xRAlz7RrBjNsg5Xf6hrSi1HpUVtwriiOm5j5z/8Ma1W5YeUaNKZVmE1xtsJe7VpawqqBra0muTlJA/SjjHp0DWoSpR9RDThSuSHz8LaS67TrELwmc2VNCD6UybL8//EZPrmfmozN2+qbbioAHhyOuJLqgtcU8AB0NBD4v4ExCphX2QZQqo8cEv8wwVDeuFUDDF8NQawu4P4azILgYBDoFCxBIw8lQaJTAamwNcCDSQPwotMaDGrqPN2koHlIhAoBqliFQJBPNmg4HACJkM8HqbBf8CjiB175/MEwJHsxU5XUllAwapBv8GooJmBx2ugJ7T0J6rLckGaPTdBWTdN1xIK0xJD5YTtmA4aGDAe+HaY0wEhDQMWVYx77ujZ9V6nUkBdbBAkMaUB6A54yKEycn+v3d4Ksu0QgIPImJTPFkcZBq9IAkEd6AeU8yTKzB6vDmAEMQs4MHKQUJcs+AGN/uwAprOJmWEe92s9noPRqf2a+vHWAwVtSpQkplPDgHbLwaTNZey59EjIuFg==') format('woff2'), + url('iconfont.woff?t=1670833747896') format('woff'), + url('iconfont.ttf?t=1670833747896') format('truetype'), + url('iconfont.svg?t=1670833747896#iconfont') format('svg'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-detail:before { + content: "\e601"; +} + +.icon-edit:before { + content: "\e602"; +} + +.icon-delete:before { + content: "\e603"; +} + diff --git a/src/assets/iconfont/iconfont.eot b/src/assets/iconfont/iconfont.eot new file mode 100644 index 0000000000000000000000000000000000000000..8857d9996f83b2548a7e459c083b063f07d36e5f GIT binary patch literal 2448 zcmd^B-D@0G6hCL~>?XU}%w|7anoScYn`|E1vPsv;+LlcyjcpVwmVQJ7?cXptf!K2-Xm=!36?`t@R81RrecOQ{86TU3M=d=Q$AzdJMQHcNtkfS0-F z{?6~5b3e|VnS0Osi0*b1F)1XALLOlQFy~pK{RbSqEo~ZV=H8hWY#XVMij=1+RcPLp z7Hk?FB$F2C1eGX9buclS15>9ZcuQZMwo{5GU|BC7v>d62mPydW?4cuj^s~uVLGA#1 z_}N3_>1^!DpP;`7{b;_NtKFG+<~QgMB)3pHJ%6tD^bC=>fE9kRXyyuu4_~!cM zF67X^6UneiD}!Ns4BH>mJx?AC_pb5-tmmATf2TAfvi%Ohwx%4I-&>$>8{80fK1kf8 zWjL(Oh9U=ixI)EP*mq!L)v8iWhHu@Zt@&jJBQ+&a)W~OD2-E=p2BBM zJe=?jay0hXa5^)^#+djIoufmXo@OJ(35`P=D&p;x?}e%gWtWPw0e)~-ix0-N4TbWZ zN9+(DTQq-NA1kq7JQ$1*NzuHvK9*Toy)Hh-*C@X&Vk47|Jras)%E)jcrA&s5X$9*a z;;6=8GzGRH1~aWpifJC=F4j1uWF8mA$Uw9|HKniI*QZkb67f!7(1)jaH8Q$67*E9& zO#;m~5M^KUBX20w>ruUYR*OWm=AW%7MU%)E3TZwsjWYQSJBCx3=39qxS##qwGU^%ft z9>#vRL+xE}cci=!2!}U?!(aD?Lj55Q^N$ydWb;PSxB#M8sE{k)gaW)J5NdwRZ#0i4 z4furvd@&FPFy058MHhkQWhvX3|IQ{2BbkL0o~$%xSB@A-mLv5x_t@TF*^x6z`xOt< zE%&cM6hRi`doE=+GzTlxMFTDt;1e!Zfw#EWgHtH&VlVh97yD@|?R9YvdaTJmlZw+7 z|D!iu%sAXWbFqR$@v@5r_^U2ffq!#wFk|G6Qx|erMB8Rv%XZUR`l(ui54|$R?K>wCtlF;eaXF6UQ~7F{W^kIDINdGC0_k*&PD6Iy1v>S$_kvDqr@sE3 zq0?&?GpN|Ni_Y0B(MjAw(wL)#+lh`^$L*sGw9mb(n7E;ofOTx3v>iu3d3dL2(T=Lo xE_^WK|K4p{{we#;Q?~z>_IoAI;Pr~i3JX@*L*9aE<%%WMEEFx^l4+Sl{{W>xP&NPn literal 0 HcmV?d00001 diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..b4ae1c6 --- /dev/null +++ b/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_3821755='',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var a,i,o,c,d,l=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}a=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3821755,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),a()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=a,c=n.document,d=!1,v(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){d||(d=!0,o())}function v(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(v,50)}s()}}(window); \ No newline at end of file diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json new file mode 100644 index 0000000..fe01bb3 --- /dev/null +++ b/src/assets/iconfont/iconfont.json @@ -0,0 +1,30 @@ +{ + "id": "3821755", + "name": "component", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "封装的组件中的icon", + "glyphs": [ + { + "icon_id": "33347867", + "name": "detail", + "font_class": "detail", + "unicode": "e601", + "unicode_decimal": 58881 + }, + { + "icon_id": "33347918", + "name": "edit", + "font_class": "edit", + "unicode": "e602", + "unicode_decimal": 58882 + }, + { + "icon_id": "33347930", + "name": "delete", + "font_class": "delete", + "unicode": "e603", + "unicode_decimal": 58883 + } + ] +} diff --git a/src/assets/iconfont/iconfont.svg b/src/assets/iconfont/iconfont.svg new file mode 100644 index 0000000..8a63c78 --- /dev/null +++ b/src/assets/iconfont/iconfont.svg @@ -0,0 +1,25 @@ + + + + Created by iconfont + + + + + + + + + + + + + + diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..d72f15bb725ece6a7f5c8023ed452a538a47e4a3 GIT binary patch literal 2280 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 +
+ + + + + +
+ + + diff --git a/src/components/BaseDialog/js/drag.js b/src/components/BaseDialog/js/drag.js new file mode 100644 index 0000000..44dadf1 --- /dev/null +++ b/src/components/BaseDialog/js/drag.js @@ -0,0 +1,77 @@ +export default { + bind(el, binding, vnode) { + const dialogHeaderEl = el.querySelector('.el-dialog__header') + const dragDom = el.querySelector('.el-dialog') + dialogHeaderEl.style.cssText += ';cursor:move;' + dragDom.style.cssText += ';top:0px;' + + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); + const getStyle = (function () { + if (window.document.currentStyle) { + return (dom, attr) => dom.currentStyle[attr] + } else { + return (dom, attr) => getComputedStyle(dom, false)[attr] + } + })() + + dialogHeaderEl.onmousedown = (e) => { + // 鼠标按下，计算当前元素距离可视区的距离 + const disX = e.clientX - dialogHeaderEl.offsetLeft + const disY = e.clientY - dialogHeaderEl.offsetTop + + const dragDomWidth = dragDom.offsetWidth + const dragDomHeight = dragDom.offsetHeight + + const screenWidth = document.body.clientWidth + const screenHeight = document.body.clientHeight + + const minDragDomLeft = dragDom.offsetLeft + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth + + const minDragDomTop = dragDom.offsetTop + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight + + // 获取到的值带px 正则匹配替换 + let styL = getStyle(dragDom, 'left') + let styT = getStyle(dragDom, 'top') + + if (styL.includes('%')) { + styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100) + styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100) + } else { + styL = +styL.replace(/\px/g, '') + styT = +styT.replace(/\px/g, '') + } + + document.onmousemove = function (e) { + // 通过事件委托，计算移动的距离 + let left = e.clientX - disX + let top = e.clientY - disY + + // 边界处理 + if (-left > minDragDomLeft) { + left = -minDragDomLeft + } else if (left > maxDragDomLeft) { + left = maxDragDomLeft + } + + if (-top > minDragDomTop) { + top = -minDragDomTop + } else if (top > maxDragDomTop) { + top = maxDragDomTop + } + + // 移动当前元素 + dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` + + // emit onDrag event + vnode.child.$emit('dragDialog') + } + + document.onmouseup = function () { + document.onmousemove = null + document.onmouseup = null + } + } + } +} diff --git a/src/components/BaseTable/index.vue b/src/components/BaseTable/index.vue new file mode 100644 index 0000000..2f23b5e --- /dev/null +++ b/src/components/BaseTable/index.vue @@ -0,0 +1,241 @@ + + + + + diff --git a/src/components/BaseTable/subcomponents/InputArea.vue b/src/components/BaseTable/subcomponents/InputArea.vue new file mode 100644 index 0000000..1389448 --- /dev/null +++ b/src/components/BaseTable/subcomponents/InputArea.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/components/BaseTable/subcomponents/MethodBtn.vue b/src/components/BaseTable/subcomponents/MethodBtn.vue new file mode 100644 index 0000000..0c044e0 --- /dev/null +++ b/src/components/BaseTable/subcomponents/MethodBtn.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue new file mode 100644 index 0000000..2a931a7 --- /dev/null +++ b/src/components/Pagination/index.vue @@ -0,0 +1,104 @@ + + + + + + diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue new file mode 100644 index 0000000..5a62ea3 --- /dev/null +++ b/src/components/SearchBar/SearchBar.vue @@ -0,0 +1,258 @@ + + +