Commit 7db8bd4e by wq

8.16

parent 14163a6f
/* 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;
}
<!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=4655522" 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">&#xe61e;</span>
<div class="name">收起</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe659;</span>
<div class="name">通用-表格展开图标</div>
<div class="code-name">&amp;#xe659;</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.woff2?t=1723777503795') format('woff2'),
url('iconfont.woff?t=1723777503795') format('woff'),
url('iconfont.ttf?t=1723777503795') format('truetype');
}
</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"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</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-shouqi"></span>
<div class="name">
收起
</div>
<div class="code-name">.icon-shouqi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tongyong-biaogezhankaitubiao"></span>
<div class="name">
通用-表格展开图标
</div>
<div class="code-name">.icon-tongyong-biaogezhankaitubiao
</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">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</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-shouqi"></use>
</svg>
<div class="name">收起</div>
<div class="code-name">#icon-shouqi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tongyong-biaogezhankaitubiao"></use>
</svg>
<div class="name">通用-表格展开图标</div>
<div class="code-name">#icon-tongyong-biaogezhankaitubiao</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">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</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>
@font-face {
font-family: "iconfont"; /* Project id 4655522 */
src: url('iconfont.woff2?t=1723777503795') format('woff2'),
url('iconfont.woff?t=1723777503795') format('woff'),
url('iconfont.ttf?t=1723777503795') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shouqi:before {
content: "\e61e";
}
.icon-tongyong-biaogezhankaitubiao:before {
content: "\e659";
}
window._iconfont_svg_string_4655522='<svg><symbol id="icon-shouqi" viewBox="0 0 1024 1024"><path d="M70.4 153.6c0-45.9264 37.2736-83.2 83.2-83.2h716.8c45.9264 0 83.2 37.2736 83.2 83.2v716.8c0 45.9264-37.2736 83.2-83.2 83.2H153.6A83.2 83.2 0 0 1 70.4 870.4V153.6z m64 0v716.8c0 10.5984 8.6016 19.2 19.2 19.2h716.8a19.2 19.2 0 0 0 19.2-19.2V153.6A19.2 19.2 0 0 0 870.4 134.4H153.6A19.2 19.2 0 0 0 134.4 153.6z" fill="#5A5A68" ></path><path d="M307.2 544a32 32 0 1 1 0-64h409.6a32 32 0 1 1 0 64H307.2z" fill="#5A5A68" ></path></symbol><symbol id="icon-tongyong-biaogezhankaitubiao" viewBox="0 0 1024 1024"><path d="M173.111351 185.869838v656.467027h656.467027V185.869838H173.111351z m0-55.351352h656.467027a55.351351 55.351351 0 0 1 55.351352 55.351352v656.467027a55.351351 55.351351 0 0 1-55.351352 55.351351H173.111351a55.351351 55.351351 0 0 1-55.351351-55.351351V185.869838a55.351351 55.351351 0 0 1 55.351351-55.351352zM465.228108 488.005189v-128.63654a27.675676 27.675676 0 1 1 55.351351 0v128.63654h140.952217c11.347027 0 20.563027 12.509405 20.563027 27.924757 0 15.415351-9.188324 27.897081-20.563027 27.897081H520.579459v130.214054a27.675676 27.675676 0 1 1-55.351351 0V543.827027h-132.511135c-11.347027 0-20.535351-12.48173-20.535351-27.897081 0-15.415351 9.188324-27.924757 20.535351-27.924757h132.511135z" fill="#333333" ></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 o,i,a,c,d,s=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)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4655522,(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?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(a=o,c=n.document,d=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,l())})}function l(){d||(d=!0,a())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file
{
"id": "4655522",
"name": "sass",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "4942664",
"name": "收起",
"font_class": "shouqi",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "6651985",
"name": "通用-表格展开图标",
"font_class": "tongyong-biaogezhankaitubiao",
"unicode": "e659",
"unicode_decimal": 58969
}
]
}
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
<link rel="icon" href="<%= BASE_URL %>favicon.png"> <link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= BASE_URL %>config.js"></script> <script src="<%= BASE_URL %>config.js"></script>
<!-- <link rel="stylesheet" href="./iconfont/iconfont.css"> -->
<link rel="stylesheet" href="/iconfont/iconfont.css">
<!-- <script src="./iconfont/iconfont.js"></script> -->
</head> </head>
<body> <body>
<noscript> <noscript>
......
:root {
--title-color: #444444;
--background-image: "url('/images/background/bg-1.png')";
--border-color: #fff;
--background-color: rgba(255, 255, 255, 1);
--subtitle: #fff;
--content: #333;
--label-color: #999;
--value-color: #333;
--header-background-color: #202125;
--header-font-color: #fff;
--tag-background-color: rgba(0, 0, 0, 0);
}
...@@ -34,11 +34,11 @@ export default { ...@@ -34,11 +34,11 @@ export default {
}, },
treeConfig: { treeConfig: {
type: Object, type: Object,
default: () => {}, default: () => { },
}, },
expandConfig: { expandConfig: {
type: Object, type: Object,
default: () => {}, default: () => { },
}, },
stripe: { stripe: {
type: Boolean, type: Boolean,
...@@ -74,23 +74,23 @@ export default { ...@@ -74,23 +74,23 @@ export default {
}, },
footerMethod: { footerMethod: {
type: Function, type: Function,
default: () => {}, default: () => { },
}, },
cellClick: { cellClick: {
type: Function, type: Function,
default: () => {}, default: () => { },
}, },
footerSpanMethod: { footerSpanMethod: {
type: Function, type: Function,
default: () => {}, default: () => { },
}, },
rowClassName: { rowClassName: {
type: Function, type: Function,
default: () => {}, default: () => { },
}, },
cellStyle: { cellStyle: {
type: Function, type: Function,
default: () => {}, default: () => { },
}, },
highIds: { highIds: {
// 高亮显示行 // 高亮显示行
...@@ -103,11 +103,11 @@ export default { ...@@ -103,11 +103,11 @@ export default {
}, },
spanMethod: { spanMethod: {
type: Function, type: Function,
default: () => {}, default: () => { },
}, },
checkboxConfig: { checkboxConfig: {
type: Object, type: Object,
default: () => {}, default: () => { },
}, },
customRightMenu: { customRightMenu: {
type: Object, type: Object,
...@@ -281,6 +281,9 @@ export default { ...@@ -281,6 +281,9 @@ export default {
reloadData() { reloadData() {
this.$refs.vxetable.reloadData(this.sourceData) this.$refs.vxetable.reloadData(this.sourceData)
}, },
clearSelectionBox() {
this.$refs.vxetable.clearCheckboxRow()// 清空表格左侧的选择框数据
},
toggleRowExpand(obj) { toggleRowExpand(obj) {
this.$emit('toggleRowExpand', obj) this.$emit('toggleRowExpand', obj)
}, },
...@@ -674,6 +677,7 @@ export default { ...@@ -674,6 +677,7 @@ export default {
.scroller { .scroller {
height: 100%; height: 100%;
} }
.my-table { .my-table {
vertical-align: middle; vertical-align: middle;
} }
...@@ -684,20 +688,22 @@ export default { ...@@ -684,20 +688,22 @@ export default {
.my-table >>> .vxe-footer--column.col--ellipsis { .my-table >>> .vxe-footer--column.col--ellipsis {
height: 30px; height: 30px;
} */ } */
.my-table >>> .vxe-checkbox--label { .my-table>>>.vxe-checkbox--label {
padding-left: 0; padding-left: 0;
} }
.my-table >>> .vxe-header--column.tablecolgroup,
.my-table .my-table>>>.vxe-header--column.tablecolgroup,
>>> .vxe-header--column.col--ellipsis.tablecolgroup { .my-table>>>.vxe-header--column.col--ellipsis.tablecolgroup {
height: 22px !important; height: 22px !important;
} }
.my-table >>> .vxe-cell {
.my-table>>>.vxe-cell {
/* max-height: 30px !important; */ /* max-height: 30px !important; */
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.my-table >>> .green {
.my-table>>>.green {
background: green; background: green;
color: #fff; color: #fff;
} }
......
...@@ -10,6 +10,7 @@ import 'xe-utils' ...@@ -10,6 +10,7 @@ import 'xe-utils'
import 'vxe-table/lib/index.css' import 'vxe-table/lib/index.css'
import './common/style/index.scss' import './common/style/index.scss'
import './assets/css/common.css' import './assets/css/common.css'
import './assets/css/root.css'
import Directives from './utils/directives' import Directives from './utils/directives'
import { filePath, zImgPath } from './utils/commonUtil' import { filePath, zImgPath } from './utils/commonUtil'
import md5 from 'js-md5' import md5 from 'js-md5'
......
/*
* @Description: 描述
* @Author: chd
* @Date: 2021-01-18 13:49:02
* @LastEditors: chd
* @LastEditTime: 2021-04-27 21:40:51
*/
import { post } from '@/common/api/axios.js'
/**
* 上传图片
* @param {*} params
* @param {String} params.filePath - 文件存储文件夹
* @param {object} ...other
* @returns Promise
*/
export function uploadImg(file, params = {}) {
const from = new FormData()
from.append('file', file)
const { url, ...otherParams } = params
for (const key in otherParams) {
from.append(key, otherParams[key])
}
return post(url || 'upload/fileUpload/images', from, {
// headers: { 'content-type': 'multipart/form-data' }
})
}
export function uploadOtherFile(params) {
const { url, name, file, ...other } = params
const from = new FormData()
for (const key in other) {
from.append(key, other[key])
}
from.append(name, file)
return post(url, from, {
headers: { 'content-type': 'multipart/form-data' }
})
}
import Vue from 'vue'
import { uploadOtherFile, uploadImg } from './api'
function getStaticPath() { function getStaticPath() {
if (!/(http|https):\/\/([^/]+)/i.test(window.apiHostSetting.VUE_APP_BASE_URL)) { if (
!/(http|https):\/\/([^/]+)/i.test(window.apiHostSetting.VUE_APP_BASE_URL)
) {
return location.origin + window.apiHostSetting.VUE_APP_BASE_URL return location.origin + window.apiHostSetting.VUE_APP_BASE_URL
} }
return window.apiHostSetting.VUE_APP_BASE_URL return window.apiHostSetting.VUE_APP_BASE_URL
...@@ -26,3 +30,145 @@ export function delChildren(list, callback, name) { ...@@ -26,3 +30,145 @@ export function delChildren(list, callback, name) {
recursive(list, callback, 0) recursive(list, callback, 0)
return list return list
} }
const fileTypes = {
img: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
excel: ['.xls', '.xlsx'],
json: ['json'],
txt: ['txt']
}
function imgSizeCheck(file, params) {
return new Promise((resolve) => {
const img = new Image()
img.src = URL.createObjectURL(file)
img.onload = function () {
const width = img.width
const height = img.height
if (width < params.minWidth || height < params.minHeight) {
Vue.prototype.$message.warning(
`请上传宽大于${params.minWidth}高大于${params.minHeight}的图片`
)
resolve(false)
} else {
resolve(true)
}
}
})
}
export function inputFile(params = {}) {
return new Promise((resolve, reject) => {
const input = document.createElement('input')
input.style.display = 'none'
input.type = 'file'
input.multiple = params.multiple || false
input.click()
input.onchange = async () => {
console.log(input.files)
const files = input.files
const requset = []
for (const file of files) {
// 添加类型后缀校验
if (params.limit) {
let etc = file.name.split('.')[file.name.split('.').length - 1]
etc = etc.toLowerCase()
if (!params.limit.includes(etc)) {
return Vue.prototype.$message.error(
`请上传${params.limit.join(',')}文件`
)
}
}
// 大小校验
if (params.isSize) {
const size = file.size
if (!params.sizeLimit) params.sizeLimit = 10
if (size / (1024 * 1024) >= params.sizeLimit) {
return Vue.prototype.$message.error(
`文件大小不能大于等于${params.sizeLimit}M`
)
}
}
// 文件类型校验
if (!params.noType) {
const type = params.type || 'img'
let fileType = []
if (typeof type === 'string') {
fileType = fileTypes[type]
} else {
fileType = type
}
const typeExp = fileType.map((item) =>
typeof item === 'object' ? item : new RegExp(item)
)
const bool = typeExp.some(
(item) => item.test(file.name) || item.test(file.type)
)
if (!bool) {
Vue.prototype.$message({
type: 'warning',
message: params.message || `请上传${fileType.join('、')}格式文件`
})
return
}
}
// 宽高校验
if (params.minWidth && params.minHeight) {
const res = await imgSizeCheck(file, params)
if (!res) return
}
if (
params.type === 'excel' ||
params.type === 'json' ||
params.type === 'txt'
) {
const other = params.other || {}
if (params.multiple) {
requset.push(
uploadOtherFile({
url: params.url,
name: params.name || 'importExcel',
file: file,
...other
})
)
} else {
uploadOtherFile({
url: params.url,
name: params.name || 'importExcel',
file: file,
...other
})
.then(resolve)
.catch(reject)
}
} else {
const other = params.other || {}
if (params.multiple) {
requset.push(
uploadImg(file, {
filePath: params.filePath,
isSize: params.isSize,
multiple: params.multiple,
url: params.url,
businessType: params.businessType
})
)
} else {
uploadImg(file, {
filePath: params.filePath,
url: params.url,
isSize: params.isSize,
businessType: params.businessType,
...other
})
.then(resolve)
.catch(reject)
}
}
}
if (requset.length > 0) {
Promise.all(requset).then(resolve).catch(reject)
}
}
})
}
<template>
<div class="upload-files" v-loading="uploading">
<input
ref="file"
type="file"
style="display: none"
@change="onFileChanged" />
<div v-if="imageMode" class="images">
<el-image
v-for="item in files"
:key="item.path"
class="upload-files-img"
:src="setimgUrl(item.path, { w: 80 })" />
<i
v-if="!(max > 0) || (files && files.length) < max"
class="upload-files-add-icon el-icon-plus"
@click="$refs.file.click()" />
</div>
<template v-else>
<ul class="files">
<li
v-for="(item, i) in files"
:key="item.path"
class="upload-files-file">
<span
class="filename"
@click="downloadFile(item)"
:title="`点击下载 ${item.path} 文件`">
{{ filename(item.path) }}
</span>
<i class="file-remove el-icon-close" @click="removeFile(i)"></i>
</li>
</ul>
<el-button
v-if="!(max > 0) || (files && files.length) < max"
type="primary"
@click="$refs.file.click()">
{{ text }}
</el-button>
</template>
</div>
</template>
<script>
import { baseURL } from '@/common/api/axios.js'
import Axios from 'axios'
import _ from 'lodash'
export default {
name: 'UploadFile',
props: {
value: {
type: [Array, String, Object],
},
max: {
type: Number,
},
imageMode: {
type: Boolean,
},
url: {
type: String,
default: 'upload/podFileUpload',
},
getFilePath: {
type: String,
default: 'imagePath',
},
text: {
type: String,
default: '选择文件',
},
},
data() {
return {
uploading: false,
files: [],
}
},
watch: {
value: {
immediate: true,
handler() {
if (this._lastValue === this.value) {
this.emitValue()
return
}
const val = []
if (!Array.isArray(this.value)) {
if (this.value) {
val.push(
typeof this.value === 'string'
? { path: this.value }
: { ...this.value }
)
}
} else {
this.value.forEach((e) => {
val.push(typeof e === 'string' ? { path: e } : { ...e })
})
}
this.files = val.filter((e) => !!e.path)
},
},
},
methods: {
onFileChanged() {
const files = this.$refs.file.files
const file = files[0]
this.$refs.file.value = ''
this.uploadFile(file)
},
async uploadFile(file) {
const formData = new FormData()
formData.append('file', file)
try {
const res = await Axios({
method: 'post',
url: baseURL + 'api/' + this.url,
data: formData,
headers: {
'content-type': 'multipart/form-data',
'jwt-token': localStorage.getItem('token'),
},
})
this.files.push({ path: _.get(res.data, this.getFilePath) })
this.emitValue()
} catch (e) {
console.error(e)
this.$message.error('文件上传失败')
} finally {
this.uploading = false
}
},
downloadFile(item) {
window.open(
// TODO 确认文件下载地址
this.setimgUrl(item.path)
)
},
async removeFile(i) {
try {
await this.$confirm('确认删除当前文件?', {
type: 'warning',
title: '提示',
})
} catch {
return
}
this.files.splice(i, 1)
this.emitValue()
},
filename(path) {
if (!path) return ''
const i = path.lastIndexOf('/')
if (i === -1) return path
return path.substring(i + 1)
},
emitValue() {
let v
if (this.max === 1) {
v = this.files[0] && this.files[0].path
} else {
v = this.files.map((e) => e.path)
}
this._lastValue = v
this.$emit('input', v)
},
},
}
</script>
<style scoped>
.upload-files {
cursor: pointer;
}
.upload-files-add-icon {
width: 58px;
height: 58px;
display: flex;
border: 1px solid #ddd;
justify-content: center;
align-items: center;
border: 1px solid #ddd;
}
.upload-files-img {
width: 58px;
height: 58px;
object-fit: contain;
border: 1px solid #ddd;
margin-right: 10px;
}
.images {
display: flex;
}
.upload-files-file {
width: 100%;
display: flex;
align-items: center;
}
.upload-files-file .filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
</style>
...@@ -809,7 +809,7 @@ ...@@ -809,7 +809,7 @@
<script> <script>
import tableView from '@/common/components/base/tableView.vue' import tableView from '@/common/components/base/tableView.vue'
import ChooseTimePeriod from '../../components/base/chooseTimePeriod.vue' import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
import pagination from '../../mixins/pagination' import pagination from '../../mixins/pagination'
import Edit from './edit.vue' import Edit from './edit.vue'
import axios from '../../common/api/axios' import axios from '../../common/api/axios'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment