组件
This commit is contained in:
commit
c37a6de593
24
README.md
Normal file
24
README.md
Normal file
@ -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/).
|
||||
23
index.js
Normal file
23
index.js
Normal file
@ -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
|
||||
7
package.json
Normal file
7
package.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "code-brick-zj",
|
||||
"version": "0.0.3",
|
||||
"private": false,
|
||||
"description": "组件封装",
|
||||
"main": "index.js"
|
||||
}
|
||||
539
src/assets/iconfont/demo.css
Normal file
539
src/assets/iconfont/demo.css
Normal file
@ -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;
|
||||
}
|
||||
260
src/assets/iconfont/demo_index.html
Normal file
260
src/assets/iconfont/demo_index.html
Normal file
@ -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>
|
||||
30
src/assets/iconfont/iconfont.css
Normal file
30
src/assets/iconfont/iconfont.css
Normal file
@ -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";
|
||||
}
|
||||
|
||||
BIN
src/assets/iconfont/iconfont.eot
Normal file
BIN
src/assets/iconfont/iconfont.eot
Normal file
Plik binarny nie jest wyświetlany.
1
src/assets/iconfont/iconfont.js
Normal file
1
src/assets/iconfont/iconfont.js
Normal file
@ -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);
|
||||
30
src/assets/iconfont/iconfont.json
Normal file
30
src/assets/iconfont/iconfont.json
Normal file
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
25
src/assets/iconfont/iconfont.svg
Normal file
25
src/assets/iconfont/iconfont.svg
Normal file
@ -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>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 3.6 KiB |
BIN
src/assets/iconfont/iconfont.ttf
Normal file
BIN
src/assets/iconfont/iconfont.ttf
Normal file
Plik binarny nie jest wyświetlany.
BIN
src/assets/iconfont/iconfont.woff
Normal file
BIN
src/assets/iconfont/iconfont.woff
Normal file
Plik binarny nie jest wyświetlany.
BIN
src/assets/iconfont/iconfont.woff2
Normal file
BIN
src/assets/iconfont/iconfont.woff2
Normal file
Plik binarny nie jest wyświetlany.
99
src/components/BaseDialog/index.vue
Normal file
99
src/components/BaseDialog/index.vue
Normal file
@ -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>
|
||||
77
src/components/BaseDialog/js/drag.js
Normal file
77
src/components/BaseDialog/js/drag.js
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
241
src/components/BaseTable/index.vue
Normal file
241
src/components/BaseTable/index.vue
Normal file
@ -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>
|
||||
37
src/components/BaseTable/subcomponents/InputArea.vue
Normal file
37
src/components/BaseTable/subcomponents/InputArea.vue
Normal file
@ -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>
|
||||
162
src/components/BaseTable/subcomponents/MethodBtn.vue
Normal file
162
src/components/BaseTable/subcomponents/MethodBtn.vue
Normal file
@ -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>
|
||||
104
src/components/Pagination/index.vue
Normal file
104
src/components/Pagination/index.vue
Normal file
@ -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>
|
||||
258
src/components/SearchBar/SearchBar.vue
Normal file
258
src/components/SearchBar/SearchBar.vue
Normal file
@ -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>
|
||||
Ładowanie…
Reference in New Issue
Block a user