@@ -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/). |
@@ -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 |
@@ -0,0 +1,7 @@ | |||
{ | |||
"name": "code-brick-zj", | |||
"version": "0.0.3", | |||
"private": false, | |||
"description": "组件封装", | |||
"main": "index.js" | |||
} |
@@ -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; | |||
} |
@@ -0,0 +1,260 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"/> | |||
<title>iconfont Demo</title> | |||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> | |||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> | |||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> | |||
<link rel="stylesheet" href="demo.css"> | |||
<link rel="stylesheet" href="iconfont.css"> | |||
<script src="iconfont.js"></script> | |||
<!-- jQuery --> | |||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> | |||
<!-- 代码高亮 --> | |||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> | |||
<style> | |||
.main .logo { | |||
margin-top: 0; | |||
height: auto; | |||
} | |||
.main .logo a { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.main .logo .sub-title { | |||
margin-left: 0.5em; | |||
font-size: 22px; | |||
color: #fff; | |||
background: linear-gradient(-45deg, #3967FF, #B500FE); | |||
-webkit-background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div class="main"> | |||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> | |||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> | |||
</a></h1> | |||
<div class="nav-tabs"> | |||
<ul id="tabs" class="dib-box"> | |||
<li class="dib active"><span>Unicode</span></li> | |||
<li class="dib"><span>Font class</span></li> | |||
<li class="dib"><span>Symbol</span></li> | |||
</ul> | |||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3821755" target="_blank" class="nav-more">查看项目</a> | |||
</div> | |||
<div class="tab-container"> | |||
<div class="content unicode" style="display: block;"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">detail</div> | |||
<div class="code-name">&#xe601;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">edit</div> | |||
<div class="code-name">&#xe602;</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont"></span> | |||
<div class="name">delete</div> | |||
<div class="code-name">&#xe603;</div> | |||
</li> | |||
</ul> | |||
<div class="article markdown"> | |||
<h2 id="unicode-">Unicode 引用</h2> | |||
<hr> | |||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> | |||
<ul> | |||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> | |||
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li> | |||
</ul> | |||
<blockquote> | |||
<p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p> | |||
</blockquote> | |||
<p>Unicode 使用步骤如下:</p> | |||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> | |||
<pre><code class="language-css" | |||
>@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'); | |||
} | |||
</code></pre> | |||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> | |||
<pre><code class="language-css" | |||
>.iconfont { | |||
font-family: "iconfont" !important; | |||
font-size: 16px; | |||
font-style: normal; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
} | |||
</code></pre> | |||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> | |||
<pre> | |||
<code class="language-html" | |||
><span class="iconfont">&#x33;</span> | |||
</code></pre> | |||
<blockquote> | |||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> | |||
</blockquote> | |||
</div> | |||
</div> | |||
<div class="content font-class"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<span class="icon iconfont icon-detail"></span> | |||
<div class="name"> | |||
detail | |||
</div> | |||
<div class="code-name">.icon-detail | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont icon-edit"></span> | |||
<div class="name"> | |||
edit | |||
</div> | |||
<div class="code-name">.icon-edit | |||
</div> | |||
</li> | |||
<li class="dib"> | |||
<span class="icon iconfont icon-delete"></span> | |||
<div class="name"> | |||
delete | |||
</div> | |||
<div class="code-name">.icon-delete | |||
</div> | |||
</li> | |||
</ul> | |||
<div class="article markdown"> | |||
<h2 id="font-class-">font-class 引用</h2> | |||
<hr> | |||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> | |||
<p>与 Unicode 使用方式相比,具有如下特点:</p> | |||
<ul> | |||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> | |||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> | |||
</ul> | |||
<p>使用步骤如下:</p> | |||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> | |||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> | |||
</code></pre> | |||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> | |||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> | |||
</code></pre> | |||
<blockquote> | |||
<p>" | |||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> | |||
</blockquote> | |||
</div> | |||
</div> | |||
<div class="content symbol"> | |||
<ul class="icon_lists dib-box"> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#icon-detail"></use> | |||
</svg> | |||
<div class="name">detail</div> | |||
<div class="code-name">#icon-detail</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#icon-edit"></use> | |||
</svg> | |||
<div class="name">edit</div> | |||
<div class="code-name">#icon-edit</div> | |||
</li> | |||
<li class="dib"> | |||
<svg class="icon svg-icon" aria-hidden="true"> | |||
<use xlink:href="#icon-delete"></use> | |||
</svg> | |||
<div class="name">delete</div> | |||
<div class="code-name">#icon-delete</div> | |||
</li> | |||
</ul> | |||
<div class="article markdown"> | |||
<h2 id="symbol-">Symbol 引用</h2> | |||
<hr> | |||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> | |||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> | |||
<ul> | |||
<li>支持多色图标了,不再受单色限制。</li> | |||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> | |||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> | |||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> | |||
</ul> | |||
<p>使用步骤如下:</p> | |||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> | |||
<pre><code class="language-html"><script src="./iconfont.js"></script> | |||
</code></pre> | |||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> | |||
<pre><code class="language-html"><style> | |||
.icon { | |||
width: 1em; | |||
height: 1em; | |||
vertical-align: -0.15em; | |||
fill: currentColor; | |||
overflow: hidden; | |||
} | |||
</style> | |||
</code></pre> | |||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> | |||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> | |||
<use xlink:href="#icon-xxx"></use> | |||
</svg> | |||
</code></pre> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<script> | |||
$(document).ready(function () { | |||
$('.tab-container .content:first').show() | |||
$('#tabs li').click(function (e) { | |||
var tabContent = $('.tab-container .content') | |||
var index = $(this).index() | |||
if ($(this).hasClass('active')) { | |||
return | |||
} else { | |||
$('#tabs li').removeClass('active') | |||
$(this).addClass('active') | |||
tabContent.hide().eq(index).fadeIn() | |||
} | |||
}) | |||
}) | |||
</script> | |||
</body> | |||
</html> |
@@ -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"; | |||
} | |||
@@ -0,0 +1 @@ | |||
window._iconfont_svg_string_3821755='<svg><symbol id="icon-detail" viewBox="0 0 1024 1024"><path d="M902.428444 190.748444H332.401778a7.964444 7.964444 0 0 0-7.793778 8.021334v56.206222a7.964444 7.964444 0 0 0 7.793778 8.078222h570.026666A7.964444 7.964444 0 0 0 910.222222 254.976v-56.206222a7.964444 7.964444 0 0 0-7.793778-8.021334z m0 285.127112H332.401778a7.964444 7.964444 0 0 0-7.793778 7.964444v56.32a7.964444 7.964444 0 0 0 7.793778 7.964444h570.026666a7.964444 7.964444 0 0 0 7.793778-7.964444v-56.32a7.964444 7.964444 0 0 0-7.793778-7.964444z m0 285.070222H332.401778a7.964444 7.964444 0 0 0-7.793778 8.078222v56.206222a7.964444 7.964444 0 0 0 7.793778 8.021334h570.026666a7.964444 7.964444 0 0 0 7.793778-8.021334v-56.206222a7.964444 7.964444 0 0 0-7.793778-8.078222zM113.777778 226.872889c0 20.081778 10.410667 38.684444 27.306666 48.696889a53.361778 53.361778 0 0 0 54.670223 0 56.547556 56.547556 0 0 0 27.306666-48.696889 56.547556 56.547556 0 0 0-27.306666-48.696889 53.361778 53.361778 0 0 0-54.613334 0A56.547556 56.547556 0 0 0 113.777778 226.872889zM113.777778 512c0 20.081778 10.410667 38.684444 27.306666 48.696889a53.361778 53.361778 0 0 0 54.670223 0A56.547556 56.547556 0 0 0 223.061333 512a56.547556 56.547556 0 0 0-27.306666-48.696889 53.361778 53.361778 0 0 0-54.613334 0A56.547556 56.547556 0 0 0 113.777778 512z m0 285.127111c0 20.081778 10.410667 38.684444 27.306666 48.696889a53.361778 53.361778 0 0 0 54.670223 0 56.547556 56.547556 0 0 0 27.306666-48.696889 56.547556 56.547556 0 0 0-27.306666-48.696889 53.361778 53.361778 0 0 0-54.613334 0 56.547556 56.547556 0 0 0-27.363555 48.696889z" fill="#0B58FF" ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M873.016889 500.736a32.824889 32.824889 0 0 1 65.649778 0v273.806222a164.124444 164.124444 0 0 1-164.124445 164.124445h-525.084444A164.124444 164.124444 0 0 1 85.333333 774.542222v-525.084444A164.124444 164.124444 0 0 1 249.457778 85.333333h312.32a32.824889 32.824889 0 1 1 0 65.649778h-312.32a98.417778 98.417778 0 0 0-98.474667 98.417778v525.141333c0 54.385778 44.088889 98.474667 98.417778 98.474667h525.141333a98.417778 98.417778 0 0 0 98.474667-98.417778V500.679111z m-14.222222-362.097778a32.824889 32.824889 0 0 1 48.014222 44.771556L548.750222 567.466667a32.824889 32.824889 0 1 1-48.014222-44.771556l358.115556-384.056889z" fill="#0B58FF" ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M601.024 749.76a29.632 29.632 0 0 1-29.696-29.696V392.96a29.632 29.632 0 1 1 59.456 0v326.848a29.76 29.76 0 0 1-29.76 29.888z m-178.24 0a29.632 29.632 0 0 1-29.696-29.696V392.96a29.632 29.632 0 1 1 59.392 0v326.848a29.76 29.76 0 0 1-29.696 29.888z m475.52-505.216h-148.544v-59.456c0-49.152-39.616-89.088-88.512-89.088H363.392c-49.216 0-89.152 39.936-89.152 89.088v59.456H125.696a29.632 29.632 0 1 0 0 59.392h772.608a29.632 29.632 0 1 0 0-59.392z m-564.608-59.456c0-16.256 13.44-29.696 29.696-29.696h297.856c16.32 0 29.056 13.12 29.056 29.696v59.456H333.696v-59.456zM720 928h-416a89.152 89.152 0 0 1-89.088-89.088V392.768a29.632 29.632 0 1 1 59.456 0v446.08c0 16.512 13.44 29.76 29.696 29.76h416.064a29.632 29.632 0 0 0 29.696-29.696V393.856a29.632 29.632 0 1 1 59.456 0v445.056A89.536 89.536 0 0 1 720 928z" fill="#FF5454" ></path></symbol></svg>',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("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}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); |
@@ -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 | |||
} | |||
] | |||
} |
@@ -0,0 +1,25 @@ | |||
<?xml version="1.0" standalone="no"?> | |||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | |||
<svg xmlns="http://www.w3.org/2000/svg"> | |||
<metadata>Created by iconfont</metadata> | |||
<defs> | |||
<font id="iconfont" horiz-adv-x="1024"> | |||
<font-face | |||
font-family="iconfont" | |||
font-weight="400" | |||
font-stretch="normal" | |||
units-per-em="1024" | |||
ascent="896" | |||
descent="-128" | |||
/> | |||
<missing-glyph /> | |||
<glyph glyph-name="detail" unicode="" d="M902.428444 705.251556H332.401778a7.964444 7.964444 0 0 1-7.793778-8.021334v-56.206222a7.964444 7.964444 0 0 1 7.793778-8.078222h570.026666A7.964444 7.964444 0 0 1 910.222222 641.024v56.206222a7.964444 7.964444 0 0 1-7.793778 8.021334z m0-285.127112H332.401778a7.964444 7.964444 0 0 1-7.793778-7.964444v-56.32a7.964444 7.964444 0 0 1 7.793778-7.964444h570.026666a7.964444 7.964444 0 0 1 7.793778 7.964444v56.32a7.964444 7.964444 0 0 1-7.793778 7.964444z m0-285.070222H332.401778a7.964444 7.964444 0 0 1-7.793778-8.078222v-56.206222a7.964444 7.964444 0 0 1 7.793778-8.021334h570.026666a7.964444 7.964444 0 0 1 7.793778 8.021334v56.206222a7.964444 7.964444 0 0 1-7.793778 8.078222zM113.777778 669.127111c0-20.081778 10.410667-38.684444 27.306666-48.696889a53.361778 53.361778 0 0 1 54.670223 0 56.547556 56.547556 0 0 1 27.306666 48.696889 56.547556 56.547556 0 0 1-27.306666 48.696889 53.361778 53.361778 0 0 1-54.613334 0A56.547556 56.547556 0 0 1 113.777778 669.127111zM113.777778 384c0-20.081778 10.410667-38.684444 27.306666-48.696889a53.361778 53.361778 0 0 1 54.670223 0A56.547556 56.547556 0 0 1 223.061333 384a56.547556 56.547556 0 0 1-27.306666 48.696889 53.361778 53.361778 0 0 1-54.613334 0A56.547556 56.547556 0 0 1 113.777778 384z m0-285.127111c0-20.081778 10.410667-38.684444 27.306666-48.696889a53.361778 53.361778 0 0 1 54.670223 0 56.547556 56.547556 0 0 1 27.306666 48.696889 56.547556 56.547556 0 0 1-27.306666 48.696889 53.361778 53.361778 0 0 1-54.613334 0 56.547556 56.547556 0 0 1-27.363555-48.696889z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="edit" unicode="" d="M873.016889 395.264a32.824889 32.824889 0 0 0 65.649778 0v-273.806222a164.124444 164.124444 0 0 0-164.124445-164.124445h-525.084444A164.124444 164.124444 0 0 0 85.333333 121.457778v525.084444A164.124444 164.124444 0 0 0 249.457778 810.666667h312.32a32.824889 32.824889 0 1 0 0-65.649778h-312.32a98.417778 98.417778 0 0 1-98.474667-98.417778v-525.141333c0-54.385778 44.088889-98.474667 98.417778-98.474667h525.141333a98.417778 98.417778 0 0 1 98.474667 98.417778V395.320889z m-14.222222 362.097778a32.824889 32.824889 0 0 0 48.014222-44.771556L548.750222 328.533333a32.824889 32.824889 0 1 0-48.014222 44.771556l358.115556 384.056889z" horiz-adv-x="1024" /> | |||
<glyph glyph-name="delete" unicode="" d="M601.024 146.24a29.632 29.632 0 0 0-29.696 29.696V503.04a29.632 29.632 0 1 0 59.456 0v-326.848a29.76 29.76 0 0 0-29.76-29.888z m-178.24 0a29.632 29.632 0 0 0-29.696 29.696V503.04a29.632 29.632 0 1 0 59.392 0v-326.848a29.76 29.76 0 0 0-29.696-29.888z m475.52 505.216h-148.544v59.456c0 49.152-39.616 89.088-88.512 89.088H363.392c-49.216 0-89.152-39.936-89.152-89.088v-59.456H125.696a29.632 29.632 0 1 1 0-59.392h772.608a29.632 29.632 0 1 1 0 59.392z m-564.608 59.456c0 16.256 13.44 29.696 29.696 29.696h297.856c16.32 0 29.056-13.12 29.056-29.696v-59.456H333.696v59.456zM720-32h-416a89.152 89.152 0 0 0-89.088 89.088V503.232a29.632 29.632 0 1 0 59.456 0v-446.08c0-16.512 13.44-29.76 29.696-29.76h416.064a29.632 29.632 0 0 1 29.696 29.696V502.144a29.632 29.632 0 1 0 59.456 0v-445.056A89.536 89.536 0 0 0 720-32z" horiz-adv-x="1024" /> | |||
</font> | |||
</defs> | |||
</svg> |
@@ -0,0 +1,99 @@ | |||
<template> | |||
<div class="baseDialog"> | |||
<el-dialog | |||
v-el-drag-dialog | |||
:visible.sync="dialogShow" | |||
v-bind="$attrs" | |||
v-on="$listeners" | |||
> | |||
<template #title> | |||
<slot name="title"> | |||
<div class="titleStyle">{{ dialogTitle }}</div> | |||
</slot> | |||
</template> | |||
<slot /> | |||
<template #footer> | |||
<!--对外继续暴露footer插槽,有个别弹框按钮需要自定义--> | |||
<slot name="footer"> | |||
<!--将取消与确定按钮集成到内部--> | |||
<el-row slot="footer" type="flex" justify="end"> | |||
<el-col :span="24"> | |||
<el-button size="small" class="btnTextStyle" @click="$_handleCancel">取消</el-button> | |||
<el-button type="primary" class="btnTextStyle" size="small" @click="$_handleConfirm"> | |||
确定 | |||
</el-button> | |||
</el-col> | |||
</el-row> | |||
</slot> | |||
</template> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
<script> | |||
import elDragDialog from './js/drag' | |||
export default { | |||
inheritAttrs: false, | |||
name: 'BaseDialog', | |||
directives: { elDragDialog }, | |||
props: { | |||
dialogVisible: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
dialogTitle: { | |||
type: String, | |||
required: true, | |||
default: '请填入标题' | |||
} | |||
}, | |||
computed: { | |||
dialogShow: { | |||
get() { | |||
return this.dialogVisible | |||
}, | |||
set(val) { | |||
this.$emit('update:dialogVisible', val) | |||
} | |||
} | |||
}, | |||
methods: { | |||
$_handleConfirm() { | |||
this.$emit('confirm') | |||
}, | |||
$_handleCancel() { | |||
this.$emit('cancel') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss"> | |||
.baseDialog { | |||
.el-dialog__header { | |||
font-size: 16px; | |||
color: rgba(0, 0, 0, 0.85); | |||
font-weight: 500; | |||
padding: 13px 24px; | |||
border-bottom: 1px solid #e9e9e9; | |||
.titleStyle::before{ | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 16px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
position: relative; | |||
top: 2px; | |||
} | |||
} | |||
.el-dialog__body { | |||
padding-left: 24px; | |||
padding-right: 24px; | |||
} | |||
.btnTextStyle { | |||
letter-spacing:6px; | |||
padding: 9px 10px 9px 16px; | |||
font-size: 14px; | |||
} | |||
} | |||
</style> |
@@ -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 | |||
} | |||
} | |||
} | |||
} |
@@ -0,0 +1,241 @@ | |||
<template> | |||
<div class="baseTable"> | |||
<el-table | |||
:data="renderData" | |||
v-bind="$attrs" | |||
@current-change="currentChange" | |||
@selection-change="handleSelectionChange" | |||
style="width: 100%" | |||
:header-cell-style="{ | |||
background: '#F2F4F9', | |||
color: '#606266' | |||
}" | |||
> | |||
<!-- 多选 --> | |||
<el-table-column | |||
v-if="selectWidth" | |||
type="selection" | |||
:width="selectWidth" | |||
/> | |||
<!-- 序号 --> | |||
<el-table-column | |||
v-if="page && limit" | |||
prop="_pageIndex" | |||
:width="pageWidth" | |||
align="center" | |||
fixed | |||
> | |||
<template slot="header"> | |||
<el-popover placement="bottom-start" width="300" trigger="click"> | |||
<div | |||
class="setting-box" | |||
style="max-height: 400px; overflow-y: auto" | |||
> | |||
<el-checkbox | |||
v-for="(item, index) in tableProps" | |||
:key="'cb' + index" | |||
v-model="selectedBox[index]" | |||
:label="item.label" | |||
/> | |||
</div> | |||
<i slot="reference" class="el-icon-s-tools" /> | |||
</el-popover> | |||
</template> | |||
</el-table-column> | |||
<el-table-column | |||
v-for="item in renderTableHeadList" | |||
:key="item.prop" | |||
v-bind="item" | |||
:label="item.label" | |||
:prop="item.prop" | |||
:fixed="item.fixed || false" | |||
:show-overflow-tooltip="item.showOverflowtooltip || false" | |||
:sortable="item.sortable || false" | |||
> | |||
<template slot="header"> | |||
<span>{{ item.label }}</span> | |||
</template> | |||
<!-- 多表头 --> | |||
<template v-if="item.children"> | |||
<el-table-column | |||
v-for="sub in item.children" | |||
:prop="sub.prop" | |||
:key="sub.prop" | |||
v-bind="sub" | |||
:label="sub.label" | |||
> | |||
<template slot-scope="scopeInner"> | |||
<component | |||
:is="sub.subcomponent" | |||
v-if="sub.subcomponent" | |||
:key="scopeInner.row.id" | |||
:inject-data="{ ...scopeInner.row, ...sub }" | |||
@emitData="emitData" | |||
/> | |||
<span v-else>{{ | |||
scopeInner.row[sub.prop] | commonFilter(sub.filter) | |||
}}</span> | |||
</template> | |||
</el-table-column> | |||
</template> | |||
<template slot-scope="scope"> | |||
<component | |||
:is="item.subcomponent" | |||
v-if="item.subcomponent" | |||
:key="scope.row.id" | |||
:itemProp="item.prop" | |||
:inject-data="{ ...scope.row, ...item }" | |||
@emitData="emitData" | |||
/> | |||
<span v-else>{{ | |||
scope.row[item.prop] | commonFilter(item.filter) | |||
}}</span> | |||
</template> | |||
</el-table-column> | |||
<slot name="handleBtn" /> | |||
</el-table> | |||
<!-- 表格底部加号 --> | |||
<el-button | |||
v-if="addButtonShow" | |||
class="addButton" | |||
icon="el-icon-plus" | |||
@click="emitButtonClick" | |||
>{{ addButtonShow }}</el-button | |||
> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'BaseTable', | |||
filters: { | |||
commonFilter: (source, filterType = (a) => a) => { | |||
return filterType(source) | |||
} | |||
}, | |||
props: { | |||
tableData: { | |||
type: Array, | |||
required: true, | |||
default: () => { | |||
return [] | |||
} | |||
}, | |||
tableProps: { | |||
type: Array, | |||
default: () => { | |||
return [] | |||
} | |||
}, | |||
page: { | |||
type: Number, | |||
required: false, | |||
default: 0 | |||
}, | |||
pageWidth: { | |||
type: Number, | |||
required: false, | |||
default: 70 | |||
}, | |||
limit: { | |||
type: Number, | |||
required: false, | |||
default: 0 | |||
}, | |||
selectWidth: { | |||
type: Number, | |||
required: false, | |||
default: 0 | |||
}, | |||
addButtonShow: { | |||
type: String, | |||
required: false, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
return { | |||
selectedBox: new Array(100).fill(true) | |||
} | |||
}, | |||
computed: { | |||
renderTableHeadList() { | |||
return this.tableProps.filter((item, index) => { | |||
return this.selectedBox[index] | |||
}) | |||
}, | |||
renderData() { | |||
return this.tableData.map((item, index) => { | |||
return { | |||
...item, | |||
_pageIndex: (this.page - 1) * this.limit + index + 1 | |||
} | |||
}) | |||
} | |||
}, | |||
beforeMount() { | |||
this.selectedBox = new Array(100).fill(true) | |||
}, | |||
methods: { | |||
currentChange(newVal, oldVal) { | |||
this.$emit('current-change', { newVal, oldVal }) | |||
}, | |||
handleSelectionChange(val) { | |||
this.$emit('selection-change', val) | |||
}, | |||
emitData(val) { | |||
this.$emit('emitFun', val) | |||
}, | |||
emitButtonClick() { | |||
this.$emit('emitButtonClick') | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.baseTable { | |||
.show-col-btn { | |||
margin-right: 5px; | |||
line-height: inherit; | |||
cursor: pointer; | |||
} | |||
.el-icon-refresh { | |||
cursor: pointer; | |||
} | |||
} | |||
</style> | |||
<style lang="scss"> | |||
.baseTable { | |||
.el-table__body tr.current-row>td.el-table__cell { | |||
background-color: #EAF1FC; | |||
} | |||
.el-table .el-table__cell { | |||
padding: 0; | |||
height: 35px; | |||
} | |||
.addButton { | |||
width: 100%; | |||
height: 35px; | |||
border-top: none; | |||
color: #0b58ff; | |||
border-color: #ebeef5; | |||
border-radius: 0; | |||
} | |||
.addButton:hover { | |||
color: #0b58ff; | |||
border-color: #ebeef5; | |||
background-color: #fff; | |||
} | |||
.addButton:focus { | |||
border-color: #ebeef5; | |||
background-color: #fff; | |||
} | |||
} | |||
.el-tooltip__popper.is-dark { | |||
background: rgba(0, 0, 0, 0.6) !important; | |||
} | |||
.el-tooltip__popper .popper__arrow, .el-tooltip__popper .popper__arrow::after { | |||
border-top-color: rgba(0, 0, 0, 0.4) !important; | |||
} | |||
</style> |
@@ -0,0 +1,37 @@ | |||
<template> | |||
<div class="tableInner"> | |||
<el-input v-model="list[itemProp]" @blur="changeInput" /> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'InputArea', | |||
props: { | |||
injectData: { | |||
type: Object, | |||
default: () => ({}) | |||
}, | |||
itemProp: { | |||
type: String | |||
} | |||
}, | |||
data() { | |||
return { | |||
list: this.injectData | |||
} | |||
}, | |||
methods: { | |||
changeInput() { | |||
console.log(this.list) | |||
this.$emit('emitData', this.list) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="css"> | |||
.tableInner .el-input__inner { | |||
border: none; | |||
padding: 0; | |||
height: 33px; | |||
} | |||
</style> |
@@ -0,0 +1,162 @@ | |||
<template> | |||
<el-table-column | |||
v-if="methodList.length > 0" | |||
slot="handleBtn" | |||
prop="operation" | |||
v-bind="$attrs" | |||
> | |||
<template slot-scope="scope"> | |||
<span v-for="(item, index) in methodList" :key="'btn' + index"> | |||
<span | |||
v-show="index === 0 ? false : true" | |||
style="margin: 0 4px; font-size: 18px; color: #e5e7eb" | |||
>|</span | |||
> | |||
<el-button | |||
:disabled=" | |||
item.showParam ? !showFilter(item.showParam, scope.row) : false | |||
" | |||
type="text" | |||
style="margin: 5px 0; padding: 0" | |||
@click=" | |||
clickButton({ | |||
data: scope.row, | |||
type: item.type | |||
}) | |||
" | |||
> | |||
<span | |||
v-if=" | |||
item.type === 'delete' || | |||
item.type === 'edit' || | |||
item.type === 'detail' | |||
" | |||
class="iconfont" | |||
:class=" | |||
item.type === 'delete' | |||
? 'icon-delete' + | |||
(item.showParam | |||
? !showFilter(item.showParam, scope.row) | |||
? '' | |||
: ' delete-color' | |||
: ' delete-color') | |||
: item.type === 'edit' | |||
? 'icon-edit' + | |||
(item.showParam | |||
? !showFilter(item.showParam, scope.row) | |||
? '' | |||
: ' primary-color' | |||
: ' primary-color') | |||
: item.type === 'detail' | |||
? 'icon-detail' + | |||
(item.showParam | |||
? !showFilter(item.showParam, scope.row) | |||
? '' | |||
: ' primary-color' | |||
: ' primary-color') | |||
: '' | |||
" | |||
></span> | |||
<span v-else>{{ item.btnName }}</span> | |||
</el-button> | |||
</span> | |||
</template> | |||
</el-table-column> | |||
</template> | |||
<script> | |||
/** | |||
* 传入的组件prop格式 | |||
* methodList<MethodItem> = [] | |||
* Interface MethodItem = { | |||
* btnName: string, | |||
* type: string | |||
* } | |||
* | |||
*/ | |||
export default { | |||
name: 'MethodBtn', | |||
props: { | |||
methodList: { | |||
type: Array, | |||
default: () => { | |||
return [] | |||
} | |||
} | |||
}, | |||
methods: { | |||
clickButton(raw) { | |||
this.$emit('clickBtn', { | |||
data: raw.data, | |||
type: raw.type | |||
}) | |||
}, | |||
showFilter(showParam, row) { | |||
let showStatus = true | |||
const showStatusArr = showParam.data.map((item) => { | |||
let showStatusItem = true | |||
if (item.type === 'unequal') { | |||
if (row[item.name] !== item.value) { | |||
showStatusItem = true | |||
} else { | |||
showStatusItem = false | |||
} | |||
} | |||
if (item.type === 'equal') { | |||
if (row[item.name] === item.value) { | |||
showStatusItem = true | |||
} else { | |||
showStatusItem = false | |||
} | |||
} | |||
if (item.type === 'more') { | |||
if (row[item.name] >= item.value) { | |||
showStatusItem = true | |||
} else { | |||
showStatusItem = false | |||
} | |||
} | |||
if (item.type === 'less') { | |||
if (row[item.name] <= item.value) { | |||
showStatusItem = true | |||
} else { | |||
showStatusItem = false | |||
} | |||
} | |||
if (item.type === 'indexof') { | |||
if (item.value.indexOf(row[item.name]) >= 0) { | |||
showStatusItem = true | |||
} else { | |||
showStatusItem = false | |||
} | |||
} | |||
if (item.type === 'unindexof') { | |||
if (item.value.indexOf(row[item.name]) < 0) { | |||
showStatusItem = true | |||
} else { | |||
showStatusItem = false | |||
} | |||
} | |||
return showStatusItem | |||
}) | |||
if (showStatusArr.indexOf(false) >= 0 && showParam.type === '&') { | |||
showStatus = false | |||
} | |||
if (showStatusArr.indexOf(true) < 0 && showParam.type === '|') { | |||
showStatus = false | |||
} | |||
return showStatus | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
@import './../../../assets/iconfont/iconfont.css'; | |||
.delete-color { | |||
color: #ff5454; | |||
} | |||
.primary-color { | |||
color: #0b58ff; | |||
} | |||
</style> |
@@ -0,0 +1,104 @@ | |||
<template> | |||
<div v-show="total > 0" class="pagination-container"> | |||
<el-pagination | |||
small | |||
:current-page.sync="currentPage" | |||
:page-size.sync="pageSize" | |||
:layout="layout" | |||
:page-sizes="pageSizes" | |||
:total="total" | |||
v-bind="$attrs" | |||
@size-change="handleSizeChange" | |||
@current-change="handleCurrentChange" | |||
/> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'Pagination', | |||
props: { | |||
total: { | |||
required: true, | |||
type: Number | |||
}, | |||
page: { | |||
type: Number, | |||
default: 1 | |||
}, | |||
limit: { | |||
type: Number, | |||
default: 20 | |||
}, | |||
pageSizes: { | |||
type: Array, | |||
default() { | |||
return [10, 20, 30, 50] | |||
} | |||
}, | |||
layout: { | |||
type: String, | |||
default: 'total, sizes, prev, pager, next, jumper' | |||
} | |||
}, | |||
computed: { | |||
currentPage: { | |||
get() { | |||
return this.page | |||
}, | |||
set(val) { | |||
this.$emit('update:page', val) | |||
} | |||
}, | |||
pageSize: { | |||
get() { | |||
return this.limit | |||
}, | |||
set(val) { | |||
this.$emit('update:limit', val) | |||
} | |||
} | |||
}, | |||
methods: { | |||
handleSizeChange(val) { | |||
this.$emit('pagination', { page: this.currentPage, limit: val }) | |||
}, | |||
handleCurrentChange(val) { | |||
this.$emit('pagination', { current: val, limit: this.pageSize }) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.pagination-container { | |||
background: #fff; | |||
padding-top: 20px; | |||
text-align: right; | |||
} | |||
</style> | |||
<style lang='scss'> | |||
.pagination-container { | |||
.el-pagination { | |||
position: relative; | |||
} | |||
.el-pagination__jump { | |||
margin-left: 125px; | |||
} | |||
.el-pagination__sizes { | |||
position: absolute; | |||
right: 100px; | |||
} | |||
.el-pager li.active { | |||
background-color: #0b58ff; | |||
color: #fff; | |||
} | |||
.el-input--mini .el-input__inner { | |||
height: 22px; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,258 @@ | |||
<template> | |||
<el-form | |||
:inline="true" | |||
ref="searchBarForm" | |||
:model="formInline" | |||
class="searchBar" | |||
> | |||
<span class="blue-block" v-if="removeBlue ? false : true"></span> | |||
<template v-for="item in formConfig"> | |||
<el-form-item | |||
v-if="item.type !== ''" | |||
:key="item.param" | |||
:label="item.label ? item.label : ''" | |||
:required="item.required ? item.required : false" | |||
:style="{ float: item.float ? item.float : 'left' }" | |||
> | |||
<el-input | |||
v-if="item.type === 'input'" | |||
v-model="formInline[item.param]" | |||
:size="item.size ? item.size : 'small'" | |||
clearable | |||
:disabled="item.disabled ? item.disabled : false" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
:placeholder="item.placeholder ? item.placeholder : ''" | |||
/> | |||
<el-select | |||
v-if="item.type === 'select'" | |||
v-model="formInline[item.param]" | |||
:size="item.size ? item.size : 'small'" | |||
:filterable="item.filterable ? item.filterable : false" | |||
:multiple="item.multiple ? item.multiple : false" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
:placeholder="item.label" | |||
@change=" | |||
item.onchange | |||
? $emit('select-changed', { | |||
param: item.param, | |||
value: formInline[item.param] | |||
}) | |||
: null | |||
" | |||
> | |||
<el-option | |||
v-for="(sub, i) in item.selectOptions" | |||
:key="i" | |||
:label="item.labelField ? sub[item.labelField] : sub['name']" | |||
:value="item.valueField ? sub[item.valueField] : sub['id']" | |||
/> | |||
</el-select> | |||
<el-date-picker | |||
v-if="item.type === 'datePicker'" | |||
:key="item.param" | |||
:size="item.size ? item.size : 'small'" | |||
v-model="formInline[item.param]" | |||
:type="item.dateType" | |||
:format="item.format ? item.format : 'yyyy-MM-dd'" | |||
:value-format="item.valueFormat ? item.valueFormat : null" | |||
:default-time="item.defaultTime || null" | |||
:range-separator="item.rangeSeparator || null" | |||
:start-placeholder="item.startPlaceholder || null" | |||
:end-placeholder="item.endPlaceholder || null" | |||
:placeholder="item.placeholder" | |||
:picker-options="item.pickerOptions ? item.pickerOptions : null" | |||
:style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:340px' : (item.dateType === 'daterange' ? 'width:220px' : 'width:140px'))" | |||
/> | |||
<el-autocomplete | |||
v-if="item.type === 'autocomplete'" | |||
v-model="formInline[item.param]" | |||
:value-key="item.valueKey ? item.valueKey : 'value'" | |||
:fetch-suggestions="item.querySearch" | |||
:placeholder="item.placeholder" | |||
:clearable="item.clearable === false ? false : true" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
filterable | |||
/> | |||
<el-cascader | |||
v-if="item.type === 'cascader'" | |||
v-model="formInline[item.param]" | |||
:options="item.selectOptions" | |||
:props="item.cascaderProps" | |||
:clearable="item.clearable === false ? false : true" | |||
:show-all-levels="item.showAllLevels === false ? false : true" | |||
:collapse-tags="item.collapseTags === true ? true : false" | |||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" | |||
@change=" | |||
item.onChange | |||
? $emit('cascader-change', { | |||
param: item.param, | |||
value: formInline[item.param] | |||
}) | |||
: null | |||
" | |||
></el-cascader> | |||
<el-button | |||
v-if="item.type === 'button'" | |||
:type="item.color" | |||
:size="item.size ? item.size : 'small'" | |||
:plain="item.plain ? item.plain : false" | |||
:round="item.round ? item.round : false" | |||
@click="headBtnClick(item.name)" | |||
>{{ item.btnName }}</el-button | |||
> | |||
<!-- 可用于显示其他按钮 --> | |||
</el-form-item> | |||
</template> | |||
<el-form-item> | |||
<slot></slot> | |||
</el-form-item> | |||
</el-form> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'SearchBar', | |||
props: { | |||
formConfigs: { | |||
type: Array, | |||
default: () => { | |||
return [] | |||
} | |||
}, | |||
removeBlue: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
data() { | |||
const formInline = {} | |||
const formConfig = this.formConfigs | |||
let hasExtraOptions = false | |||
for (const obj of formConfig) { | |||
if (obj.type !== 'button') { | |||
if (obj.defaultSelect === false || obj.defaultSelect === 0) { | |||
formInline[obj.param] = obj.defaultSelect | |||
} else { | |||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项 | |||
} | |||
} | |||
if (obj.extraOptions) { | |||
hasExtraOptions = true | |||
} | |||
} | |||
return { | |||
formInline, | |||
formConfig, | |||
hasExtraOptions | |||
} | |||
}, | |||
watch: { | |||
formConfig: { | |||
handler() { | |||
for (const obj of this.formConfig) { | |||
if (obj.defaultSelect) { | |||
this.formInline[obj.param] = obj.defaultSelect | |||
} else if (obj.defaultSelect === null) { | |||
// 需要手动从外部清除选项缓存的情况,确保在外部配置项中可直接设置null | |||
this.formInline[obj.param] = '' | |||
} | |||
} | |||
}, | |||
deep: true, | |||
immediate: true | |||
}, | |||
formInline: { | |||
handler: function () { | |||
this.$forceUpdate() | |||
}, | |||
deep: true, | |||
immediate: true | |||
} | |||
}, | |||
mounted() { | |||
this.$nextTick(() => { | |||
this.init() | |||
}) | |||
}, | |||
methods: { | |||
init() { | |||
if (this.hasExtraOptions) { | |||
// 如果有额外参数就处理,如果没有就算了 | |||
for (const obj of this.formConfig) { | |||
if (obj.extraOptions) { | |||
// 注: 对obj.extraOptions的选择是互斥的! | |||
this.$watch( | |||
`formInline.${obj.param}`, | |||
function (newVal) { | |||
let deleteCount = 0 | |||
if (obj.index + 1 < this.formConfig.length) { | |||
// 如果obj不是最后一个配置 | |||
const nextConfig = this.formConfig[obj.index + 1] | |||
if (nextConfig.parent && nextConfig.parent === obj.param) | |||
deleteCount = 1 | |||
} | |||
const currentConfig = Object.assign( | |||
{}, | |||
obj.extraOptions[newVal] | |||
) | |||
this.formConfig.splice( | |||
obj.index + 1, | |||
deleteCount, | |||
currentConfig | |||
) | |||
// 修改 formInline | |||
this.$set(this.formInline, currentConfig.param, '') | |||
}, | |||
{ immediate: true } | |||
) | |||
} | |||
} | |||
} | |||
}, | |||
headBtnClick(btnName) { | |||
this.formInline.btnName = btnName | |||
this.$emit('headBtnClick', this.formInline) | |||
}, | |||
resetForm() { | |||
this.$refs.searchBarForm.resetFields() | |||
const formInline = {} | |||
const formConfig = this.formConfigs | |||
for (const obj of formConfig) { | |||
if (obj.type !== 'button') { | |||
if (obj.defaultSelect === false || obj.defaultSelect === 0) { | |||
formInline[obj.param] = obj.defaultSelect | |||
} else { | |||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项 | |||
} | |||
} | |||
} | |||
this.formInline = formInline | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss"> | |||
.searchBar { | |||
.blue-block { | |||
float: left; | |||
display: inline-block; | |||
width: 4px; | |||
height: 16px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
margin-top: 12px; | |||
} | |||
.el-form-item { | |||
margin-bottom: 10px; | |||
} | |||
.el-date-editor .el-range__icon { | |||
font-size: 16px; | |||
color:#0B58FF; | |||
} | |||
.el-input__prefix .el-icon-date { | |||
font-size: 16px; | |||
color:#0B58FF; | |||
} | |||
} | |||
</style> |