Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
3a98b7ceea |
4
index.js
4
index.js
@ -4,7 +4,6 @@ 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'
|
||||
import SplitPane from './src/components/SplitPane/index.vue'
|
||||
|
||||
let ModuleObj = {
|
||||
SearchBar,
|
||||
@ -12,8 +11,7 @@ let ModuleObj = {
|
||||
Pagination,
|
||||
BaseTable,
|
||||
InputArea,
|
||||
MethodBtn,
|
||||
SplitPane
|
||||
MethodBtn
|
||||
}
|
||||
let MyModule = {}
|
||||
MyModule.install = (Vue) => {
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "code-brick-zj",
|
||||
"version": "1.1.0",
|
||||
"version": "0.0.7",
|
||||
"private": false,
|
||||
"description": "组件封装",
|
||||
"main": "index.js"
|
||||
|
@ -54,18 +54,6 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">downward</div>
|
||||
<div class="code-name">&#xe604;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">upward</div>
|
||||
<div class="code-name">&#xe605;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">detail</div>
|
||||
@ -102,12 +90,12 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.eot?t=1689233106339'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1689233106339#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARgAAsAAAAACcAAAAQUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKAqGSIUsATYCJAMYCw4ABCAFhGcHVBtUCMiuMG7hiaIkox1FaBhxvd1fpwAN4YKo1v7tWTr8hBRkBQgO7yqKUJKPUKzDjkixjn7/q0vlANCkEHCJtsMvx2eQn04h5rHEE8593TK2y1SC5nbvNG5gqgZBNEWTqFUQLGVFNnVu1TjyMm3SafEsC3y0myW12KdEh2x+deP/zzHTJeG3AVBm4lrnAxpQN0US7s3ijuSE6Jbh1UGv08cgQEivMg5z6m49Qj77TVxDEZww6gXicNkviSbkxgswNeGCj+CgMw1yFRpAnUNegSv+8+UfU/igsBpjnRV3rRV9+Su8Fk1Agv6CW4eAeyvAAhronJlI1tcrVnIMHZ0cCcsUTrRTnQ0CP50B4KfgEub9Lw80BougQBwGI8bYJU4LPwUbBw0/HXAw8NORUM90wsT9JeIMFACux9QckHyQ9FDYTobcGi+FLSjwMxDe3L5s+w9THFYeEs8H303FWMnZ1JuBWFgNPh3bd5wOvJmKI9aTqXeD8eJ66HnfnV1dJPE8cy4EgqT+s/SbdSWbp9Pn24NbZ1MnGw7CDbvT6+lL1CXVh++hcH56umDT9vOviL/grQ6srHjE57uLHdQn+dtO9x2v94WN6+eXm0HWlZOzta3tUDp1JWjymsiD8r0ViWGkC+n4GeH5aODSM+9COnilpdfdZsRIvMerLmS0uICTplrOnb99LT3NkJNeajPfpDznblq6bXH8efBjlPIUxhQcX+U0qEdt4bjxy6rMdOkbEn0/3mlvrXZL60ysxdwcn/qKLJ/82pnzGS61z5rBeGmrxf33ZXN/IBWUvb8KSvnttbwwq+YTkweZHue0M0+c0ssZGY/Rs+aVF8+3GaW07CkvLC/KcBvP8c2uGpsdm0THlazwlPE22Kdi9ZK4Hdsmtw9eHVQwPjG0p33Q7tGMJ6TUJ2VK1MMw6ftI6qPPtruCvEPmLZqiHcj1Aw3Rup/sdzj+lt/w3f5TrAHgx++nD7A+8xaD4CL8m60Q+KWYO7CgUY3gTFl+OwUBHKteh00BoWmGDIYm301frAJwKAg+BTEoPCpA41OPNNh2sET0g8NnCkI61M6PKKBzREwANBtGIOS6BEU2D0CT6xvSYP+Apdg/cOT6DyErI68W0RzbqhmYOFixuRNLFqoRi839Zh+A2KqYWJH1CTC7hM04My0j664HDVgXY+xtYhbnBBNGVVzH7geKQrHOqA0sPK2Fc70oPZ2UPSTNQlVUjQEmHLDCzDphEgtKQ9zCPP16DwBRK4UJAyKfyBg7jaeaxzKlyQAg6xkaKO9M2tu1EWXhOEL3IxhKhdWpMqCYDgrTy7vZAAsuTUsLm65IOlWIQBlp47PUS9wAhBgHOFGixYgVJx7+dtqutZuY1eXTvXYncJOkOF1Wicd+CnBACA==') format('woff2'),
|
||||
url('iconfont.woff?t=1689233106339') format('woff'),
|
||||
url('iconfont.ttf?t=1689233106339') format('truetype'),
|
||||
url('iconfont.svg?t=1689233106339#iconfont') format('svg');
|
||||
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>
|
||||
@ -133,24 +121,6 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-downward"></span>
|
||||
<div class="name">
|
||||
downward
|
||||
</div>
|
||||
<div class="code-name">.icon-downward
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-upward"></span>
|
||||
<div class="name">
|
||||
upward
|
||||
</div>
|
||||
<div class="code-name">.icon-upward
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-detail"></span>
|
||||
<div class="name">
|
||||
@ -205,22 +175,6 @@
|
||||
<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-downward"></use>
|
||||
</svg>
|
||||
<div class="name">downward</div>
|
||||
<div class="code-name">#icon-downward</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-upward"></use>
|
||||
</svg>
|
||||
<div class="name">upward</div>
|
||||
<div class="code-name">#icon-upward</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-detail"></use>
|
||||
|
@ -1,11 +1,11 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3821755 */
|
||||
src: url('iconfont.eot?t=1689233106339'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1689233106339#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARgAAsAAAAACcAAAAQUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKAqGSIUsATYCJAMYCw4ABCAFhGcHVBtUCMiuMG7hiaIkox1FaBhxvd1fpwAN4YKo1v7tWTr8hBRkBQgO7yqKUJKPUKzDjkixjn7/q0vlANCkEHCJtsMvx2eQn04h5rHEE8593TK2y1SC5nbvNG5gqgZBNEWTqFUQLGVFNnVu1TjyMm3SafEsC3y0myW12KdEh2x+deP/zzHTJeG3AVBm4lrnAxpQN0US7s3ijuSE6Jbh1UGv08cgQEivMg5z6m49Qj77TVxDEZww6gXicNkviSbkxgswNeGCj+CgMw1yFRpAnUNegSv+8+UfU/igsBpjnRV3rRV9+Su8Fk1Agv6CW4eAeyvAAhronJlI1tcrVnIMHZ0cCcsUTrRTnQ0CP50B4KfgEub9Lw80BougQBwGI8bYJU4LPwUbBw0/HXAw8NORUM90wsT9JeIMFACux9QckHyQ9FDYTobcGi+FLSjwMxDe3L5s+w9THFYeEs8H303FWMnZ1JuBWFgNPh3bd5wOvJmKI9aTqXeD8eJ66HnfnV1dJPE8cy4EgqT+s/SbdSWbp9Pn24NbZ1MnGw7CDbvT6+lL1CXVh++hcH56umDT9vOviL/grQ6srHjE57uLHdQn+dtO9x2v94WN6+eXm0HWlZOzta3tUDp1JWjymsiD8r0ViWGkC+n4GeH5aODSM+9COnilpdfdZsRIvMerLmS0uICTplrOnb99LT3NkJNeajPfpDznblq6bXH8efBjlPIUxhQcX+U0qEdt4bjxy6rMdOkbEn0/3mlvrXZL60ysxdwcn/qKLJ/82pnzGS61z5rBeGmrxf33ZXN/IBWUvb8KSvnttbwwq+YTkweZHue0M0+c0ssZGY/Rs+aVF8+3GaW07CkvLC/KcBvP8c2uGpsdm0THlazwlPE22Kdi9ZK4Hdsmtw9eHVQwPjG0p33Q7tGMJ6TUJ2VK1MMw6ftI6qPPtruCvEPmLZqiHcj1Aw3Rup/sdzj+lt/w3f5TrAHgx++nD7A+8xaD4CL8m60Q+KWYO7CgUY3gTFl+OwUBHKteh00BoWmGDIYm301frAJwKAg+BTEoPCpA41OPNNh2sET0g8NnCkI61M6PKKBzREwANBtGIOS6BEU2D0CT6xvSYP+Apdg/cOT6DyErI68W0RzbqhmYOFixuRNLFqoRi839Zh+A2KqYWJH1CTC7hM04My0j664HDVgXY+xtYhbnBBNGVVzH7geKQrHOqA0sPK2Fc70oPZ2UPSTNQlVUjQEmHLDCzDphEgtKQ9zCPP16DwBRK4UJAyKfyBg7jaeaxzKlyQAg6xkaKO9M2tu1EWXhOEL3IxhKhdWpMqCYDgrTy7vZAAsuTUsLm65IOlWIQBlp47PUS9wAhBgHOFGixYgVJx7+dtqutZuY1eXTvXYncJOkOF1Wicd+CnBACA==') format('woff2'),
|
||||
url('iconfont.woff?t=1689233106339') format('woff'),
|
||||
url('iconfont.ttf?t=1689233106339') format('truetype'),
|
||||
url('iconfont.svg?t=1689233106339#iconfont') format('svg');
|
||||
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 {
|
||||
@ -16,14 +16,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-downward:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-upward:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.icon-detail:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -5,20 +5,6 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "封装的组件中的icon",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "36426261",
|
||||
"name": "downward",
|
||||
"font_class": "downward",
|
||||
"unicode": "e604",
|
||||
"unicode_decimal": 58884
|
||||
},
|
||||
{
|
||||
"icon_id": "36426301",
|
||||
"name": "upward",
|
||||
"font_class": "upward",
|
||||
"unicode": "e605",
|
||||
"unicode_decimal": 58885
|
||||
},
|
||||
{
|
||||
"icon_id": "33347867",
|
||||
"name": "detail",
|
||||
|
@ -14,10 +14,6 @@
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="downward" unicode="" d="M556.942222 144.099556l363.064889 401.806222c24.860444 21.617778 24.860444 56.263111 0 77.880889a68.437333 68.437333 0 0 1-44.942222 16.156444c-16.896 0-33.052444-5.859556-44.885333-16.156444L512 260.949333l-318.236444 362.951111a68.437333 68.437333 0 0 1-44.942223 16.099556c-16.896 0-33.109333-5.802667-44.942222-16.156444-24.746667-21.617778-24.746667-56.206222 0-77.824l363.121778-401.749334c5.973333-5.290667 13.141333-9.443556 21.048889-12.231111 23.722667-8.305778 51.029333-3.527111 68.892444 12.060445z" horiz-adv-x="1024" />
|
||||
|
||||
<glyph glyph-name="upward" unicode="" d="M556.942222 623.900444l363.064889-401.806222c24.860444-21.617778 24.860444-56.263111 0-77.880889a68.437333 68.437333 0 0 0-44.942222-16.156444c-16.896 0-33.052444 5.859556-44.885333 16.156444L512 507.050667l-318.236444-362.951111a68.437333 68.437333 0 0 0-44.942223-16.099556c-16.896 0-33.109333 5.802667-44.942222 16.156444-24.746667 21.617778-24.746667 56.206222 0 77.824L467.057778 623.729778c5.973333 5.290667 13.141333 9.443556 21.048889 12.231111 23.722667 8.305778 51.029333 3.527111 68.892444-12.060445z" horiz-adv-x="1024" />
|
||||
|
||||
<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" />
|
||||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -12,55 +12,53 @@
|
||||
style="margin: 0 4px; font-size: 18px; color: #e5e7eb"
|
||||
>|</span
|
||||
>
|
||||
<el-tooltip :disabled="item.showTip?false:true" :content="item.showTip" placement="top">
|
||||
<el-button
|
||||
:disabled="
|
||||
item.showParam ? !showFilter(item.showParam, scope.row) : false
|
||||
<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'
|
||||
"
|
||||
type="text"
|
||||
style="margin: 5px 0; padding: 0"
|
||||
@click="
|
||||
clickButton({
|
||||
data: scope.row,
|
||||
type: item.type
|
||||
})
|
||||
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
|
||||
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>
|
||||
</el-tooltip>
|
||||
></span>
|
||||
<span v-else>{{ item.btnName }}</span>
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -97,6 +95,13 @@ export default {
|
||||
let showStatus = true
|
||||
const showStatusArr = showParam.data.map((item) => {
|
||||
let showStatusItem = true
|
||||
if (item.type === 'have') {
|
||||
if (row[item.name] !== item.value) {
|
||||
showStatusItem = true
|
||||
} else {
|
||||
showStatusItem = false
|
||||
}
|
||||
}
|
||||
if (item.type === 'unequal') {
|
||||
if (row[item.name] !== item.value) {
|
||||
showStatusItem = true
|
||||
@ -125,6 +130,13 @@ export default {
|
||||
showStatusItem = false
|
||||
}
|
||||
}
|
||||
if (item.type === 'have') {
|
||||
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
|
||||
|
@ -1,204 +1,179 @@
|
||||
<template>
|
||||
<div
|
||||
class="searchBarBox"
|
||||
ref="searchBarRef"
|
||||
:style="{ paddingRight: isFold ? '55px' : '0px' }"
|
||||
<el-form
|
||||
:inline="true"
|
||||
ref="searchBarForm"
|
||||
:model="formInline"
|
||||
class="searchBar"
|
||||
>
|
||||
<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"
|
||||
<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-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-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
|
||||
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"
|
||||
:collapse-tags="item.collapseTags ? item.collapseTags : false"
|
||||
:multiple-limit="item.multipleLimit ? item.multipleLimit : 0"
|
||||
:clearable="item.clearable === false ? false : true"
|
||||
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'"
|
||||
:placeholder="item.placeholder ? item.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"
|
||||
:clearable="item.clearable === false ? false : true"
|
||||
:style="
|
||||
item.width
|
||||
? 'width:' + item.width + 'px'
|
||||
: item.dateType === 'datetimerange'
|
||||
? 'width:350px'
|
||||
: item.dateType === 'daterange'
|
||||
? 'width:252px'
|
||||
: item.dateType === 'datetime'
|
||||
? 'width:200px'
|
||||
: 'width:148px'
|
||||
"
|
||||
/>
|
||||
<el-autocomplete
|
||||
v-if="item.type === 'autocomplete'"
|
||||
v-model="formInline[item.param]"
|
||||
:value-key="item.valueKey ? item.valueKey : 'value'"
|
||||
:size="item.size ? item.size : 'small'"
|
||||
: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"
|
||||
:size="item.size ? item.size : 'small'"
|
||||
: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
|
||||
>
|
||||
<span v-if="item.type === 'separate'" class="separateStyle"></span>
|
||||
<!-- 可用于显示其他按钮 -->
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<slot></slot>
|
||||
</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
|
||||
>
|
||||
<span v-if="item.type === 'separate'" class="separateStyle"></span>
|
||||
<!-- 可用于显示其他按钮 -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<el-form-item>
|
||||
<slot></slot>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchBar",
|
||||
name: 'SearchBar',
|
||||
props: {
|
||||
formConfigs: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
return []
|
||||
}
|
||||
},
|
||||
removeBlue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isFold: {
|
||||
// 多行模式(默认否)
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const formInline = {};
|
||||
const formConfig = this.formConfigs;
|
||||
let hasExtraOptions = false;
|
||||
const formInline = {}
|
||||
const formConfig = this.formConfigs
|
||||
let hasExtraOptions = false
|
||||
for (const obj of formConfig) {
|
||||
if (obj.type !== "button") {
|
||||
if (obj.type !== 'button') {
|
||||
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
|
||||
formInline[obj.param] = obj.defaultSelect;
|
||||
formInline[obj.param] = obj.defaultSelect
|
||||
} else {
|
||||
formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
|
||||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
|
||||
}
|
||||
}
|
||||
if (obj.extraOptions) {
|
||||
hasExtraOptions = true;
|
||||
hasExtraOptions = true
|
||||
}
|
||||
}
|
||||
return {
|
||||
formInline,
|
||||
formConfig,
|
||||
hasExtraOptions,
|
||||
};
|
||||
hasExtraOptions
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formConfig: {
|
||||
handler() {
|
||||
for (const obj of this.formConfig) {
|
||||
if (obj.defaultSelect) {
|
||||
this.formInline[obj.param] = obj.defaultSelect;
|
||||
this.formInline[obj.param] = obj.defaultSelect
|
||||
} else if (obj.defaultSelect === null) {
|
||||
// 需要手动从外部清除选项缓存的情况,确保在外部配置项中可直接设置null
|
||||
this.formInline[obj.param] = "";
|
||||
this.formInline[obj.param] = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
immediate: true
|
||||
},
|
||||
formInline: {
|
||||
handler: function () {
|
||||
this.$forceUpdate();
|
||||
this.$forceUpdate()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
});
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
@ -210,94 +185,84 @@ export default {
|
||||
this.$watch(
|
||||
`formInline.${obj.param}`,
|
||||
function (newVal) {
|
||||
let deleteCount = 0;
|
||||
let deleteCount = 0
|
||||
if (obj.index + 1 < this.formConfig.length) {
|
||||
// 如果obj不是最后一个配置
|
||||
const nextConfig = this.formConfig[obj.index + 1];
|
||||
const nextConfig = this.formConfig[obj.index + 1]
|
||||
if (nextConfig.parent && nextConfig.parent === obj.param)
|
||||
deleteCount = 1;
|
||||
deleteCount = 1
|
||||
}
|
||||
const currentConfig = Object.assign(
|
||||
{},
|
||||
obj.extraOptions[newVal]
|
||||
);
|
||||
)
|
||||
this.formConfig.splice(
|
||||
obj.index + 1,
|
||||
deleteCount,
|
||||
currentConfig
|
||||
);
|
||||
)
|
||||
// 修改 formInline
|
||||
this.$set(this.formInline, currentConfig.param, "");
|
||||
this.$set(this.formInline, currentConfig.param, '')
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
headBtnClick(btnName) {
|
||||
this.formInline.btnName = btnName;
|
||||
this.$emit("headBtnClick", this.formInline);
|
||||
this.formInline.btnName = btnName
|
||||
this.$emit('headBtnClick', this.formInline)
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.searchBarForm.resetFields();
|
||||
const formInline = {};
|
||||
const formConfig = this.formConfigs;
|
||||
this.$refs.searchBarForm.resetFields()
|
||||
const formInline = {}
|
||||
const formConfig = this.formConfigs
|
||||
for (const obj of formConfig) {
|
||||
if (obj.type !== "button") {
|
||||
if (obj.type !== 'button') {
|
||||
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
|
||||
formInline[obj.param] = obj.defaultSelect;
|
||||
formInline[obj.param] = obj.defaultSelect
|
||||
} else {
|
||||
formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
|
||||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
|
||||
}
|
||||
}
|
||||
}
|
||||
this.formInline = formInline;
|
||||
},
|
||||
},
|
||||
};
|
||||
this.formInline = formInline
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.searchBarBox {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.searchBarBox::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.searchBar .blue-block {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0b58ff;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.searchBar .el-form-item {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.searchBar .el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
color:#0B58FF;
|
||||
}
|
||||
.searchBar .el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
color:#0B58FF;
|
||||
}
|
||||
.searchBar .el-input__prefix .el-icon-time {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
color:#0B58FF;
|
||||
}
|
||||
.searchBar .separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #e8e8e8;
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,334 +0,0 @@
|
||||
<template>
|
||||
<div ref="outerWrapper" :class="wrapperClasses">
|
||||
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
|
||||
<div
|
||||
:style="{ right: `${anotherOffset}%` }"
|
||||
class="left-pane"
|
||||
:class="paneClasses"
|
||||
>
|
||||
<slot name="left" />
|
||||
</div>
|
||||
<div
|
||||
:class="`${prefix}-trigger-con`"
|
||||
:style="{ left: `${offset}%` }"
|
||||
@mousedown="handleMousedown"
|
||||
>
|
||||
<slot name="trigger">
|
||||
<trigger-pane mode="vertical" />
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
:style="{ left: `${offset}%` }"
|
||||
class="right-pane"
|
||||
:class="paneClasses"
|
||||
>
|
||||
<slot name="right" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else :class="`${prefix}-vertical`">
|
||||
<div
|
||||
:style="{ bottom: `${anotherOffset}%` }"
|
||||
class="top-pane"
|
||||
:class="paneClasses"
|
||||
>
|
||||
<slot name="top" />
|
||||
</div>
|
||||
<div
|
||||
:class="`${prefix}-trigger-con`"
|
||||
:style="{ top: `${offset}%` }"
|
||||
@mousedown="handleMousedown"
|
||||
>
|
||||
<slot name="trigger">
|
||||
<trigger-pane mode="horizontal" />
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
:style="{ top: `${offset}%` }"
|
||||
class="bottom-pane"
|
||||
:class="paneClasses"
|
||||
>
|
||||
<slot name="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { oneOf, on, off } from './utils'
|
||||
import TriggerPane from './triggerPane.vue'
|
||||
export default {
|
||||
name: 'SplitPane',
|
||||
components: {
|
||||
TriggerPane
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: 0.5
|
||||
},
|
||||
mode: {
|
||||
validator(value) {
|
||||
return oneOf(value, ['horizontal', 'vertical'])
|
||||
},
|
||||
default: 'horizontal'
|
||||
},
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: '40px'
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: '40px'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Events
|
||||
* @on-move-start
|
||||
* @on-moving 返回值:事件对象,但是在事件对象中加入了两个参数:atMin(当前是否在最小值处), atMax(当前是否在最大值处)
|
||||
* @on-move-end
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
prefix: 'zj-split',
|
||||
offset: 0,
|
||||
oldOffset: 0,
|
||||
isMoving: false,
|
||||
computedMin: 0,
|
||||
computedMax: 0,
|
||||
currentValue: 0.5
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapperClasses() {
|
||||
return [`${this.prefix}-wrapper`, this.isMoving ? 'no-select' : '']
|
||||
},
|
||||
paneClasses() {
|
||||
return [
|
||||
`${this.prefix}-pane`,
|
||||
{
|
||||
[`${this.prefix}-pane-moving`]: this.isMoving
|
||||
}
|
||||
]
|
||||
},
|
||||
isHorizontal() {
|
||||
return this.mode === 'horizontal'
|
||||
},
|
||||
anotherOffset() {
|
||||
return 100 - this.offset
|
||||
},
|
||||
valueIsPx() {
|
||||
return typeof this.value === 'string'
|
||||
},
|
||||
offsetSize() {
|
||||
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
px2percent(numerator, denominator) {
|
||||
return parseFloat(numerator) / parseFloat(denominator)
|
||||
},
|
||||
getComputedThresholdValue(type) {
|
||||
let size = this.$refs.outerWrapper[this.offsetSize]
|
||||
if (this.valueIsPx)
|
||||
return typeof this[type] === 'string' ? this[type] : size * this[type]
|
||||
else
|
||||
return typeof this[type] === 'string'
|
||||
? this.px2percent(this[type], size)
|
||||
: this[type]
|
||||
},
|
||||
getMin(value1, value2) {
|
||||
if (this.valueIsPx)
|
||||
return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
|
||||
else return Math.min(value1, value2)
|
||||
},
|
||||
getMax(value1, value2) {
|
||||
if (this.valueIsPx)
|
||||
return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
|
||||
else return Math.max(value1, value2)
|
||||
},
|
||||
getAnotherOffset(value) {
|
||||
let res = 0
|
||||
if (this.valueIsPx)
|
||||
res = `${
|
||||
this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)
|
||||
}px`
|
||||
else res = 1 - value
|
||||
return res
|
||||
},
|
||||
handleMove(e) {
|
||||
let pageOffset = this.isHorizontal ? e.pageX : e.pageY
|
||||
let offset = pageOffset - this.initOffset
|
||||
let outerWidth = this.$refs.outerWrapper[this.offsetSize]
|
||||
let value = this.valueIsPx
|
||||
? `${parseFloat(this.oldOffset) + offset}px`
|
||||
: this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
|
||||
let anotherValue = this.getAnotherOffset(value)
|
||||
if (parseFloat(value) <= parseFloat(this.computedMin))
|
||||
value = this.getMax(value, this.computedMin)
|
||||
if (parseFloat(anotherValue) <= parseFloat(this.computedMax))
|
||||
value = this.getAnotherOffset(
|
||||
this.getMax(anotherValue, this.computedMax)
|
||||
)
|
||||
e.atMin = this.value === this.computedMin
|
||||
e.atMax = this.valueIsPx
|
||||
? this.getAnotherOffset(this.value) === this.computedMax
|
||||
: this.getAnotherOffset(this.value).toFixed(5) ===
|
||||
this.computedMax.toFixed(5)
|
||||
this.$emit('input', value)
|
||||
this.$emit('on-moving', e)
|
||||
},
|
||||
handleUp() {
|
||||
this.isMoving = false
|
||||
off(document, 'mousemove', this.handleMove)
|
||||
off(document, 'mouseup', this.handleUp)
|
||||
this.$emit('on-move-end')
|
||||
},
|
||||
handleMousedown(e) {
|
||||
this.initOffset = this.isHorizontal ? e.pageX : e.pageY
|
||||
this.oldOffset = this.value
|
||||
this.isMoving = true
|
||||
on(document, 'mousemove', this.handleMove)
|
||||
on(document, 'mouseup', this.handleUp)
|
||||
this.$emit('on-move-start')
|
||||
},
|
||||
computeOffset() {
|
||||
this.$nextTick(() => {
|
||||
this.computedMin = this.getComputedThresholdValue('min')
|
||||
this.computedMax = this.getComputedThresholdValue('max')
|
||||
this.offset =
|
||||
((this.valueIsPx
|
||||
? this.px2percent(
|
||||
this.value,
|
||||
this.$refs.outerWrapper[this.offsetSize]
|
||||
)
|
||||
: this.value) *
|
||||
10000) /
|
||||
100
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val !== this.currentValue) {
|
||||
this.currentValue = val
|
||||
this.computeOffset()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.computeOffset()
|
||||
})
|
||||
|
||||
on(window, 'resize', this.computeOffset)
|
||||
},
|
||||
beforeDestroy() {
|
||||
off(window, 'resize', this.computeOffset)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.zj-split-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.zj-split-pane {
|
||||
position: absolute;
|
||||
}
|
||||
.zj-split-pane.left-pane,
|
||||
.zj-split-pane.right-pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.zj-split-pane.left-pane {
|
||||
left: 0;
|
||||
}
|
||||
.zj-split-pane.right-pane {
|
||||
right: 0;
|
||||
}
|
||||
.zj-split-pane.top-pane,
|
||||
.zj-split-pane.bottom-pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.zj-split-pane.top-pane {
|
||||
top: 0;
|
||||
}
|
||||
.zj-split-pane.bottom-pane {
|
||||
bottom: 0;
|
||||
}
|
||||
.zj-split-pane-moving {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/* 开始 */
|
||||
/* .zj-split-trigger {
|
||||
border: 1px solid #dcdee2;
|
||||
} */
|
||||
.zj-split-trigger-con {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
}
|
||||
.zj-split-trigger-bar-con {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
.zj-split-trigger-bar-con.vertical {
|
||||
top: 50%;
|
||||
height: 32px;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
.zj-split-trigger-bar-con.horizontal {
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.zj-split-trigger-vertical {
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
background-color: #f2f4f9;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
cursor: col-resize;
|
||||
}
|
||||
.zj-split-trigger-vertical .zj-split-trigger-bar {
|
||||
width: 16px;
|
||||
}
|
||||
.zj-split-trigger-horizontal {
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
background-color: #f2f4f9;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
cursor: row-resize;
|
||||
}
|
||||
.zj-split-trigger-horizontal .zj-split-trigger-bar {
|
||||
width: 16px;
|
||||
transform: rotate(90deg);
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
}
|
||||
.zj-split-horizontal > .zj-split-trigger-con {
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
.zj-split-vertical > .zj-split-trigger-con {
|
||||
left: 50%;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.zj-split .no-select {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="barConClasses">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAAAXNSR0IArs4c6QAAAjNJREFUaEPtWEFLG1EQfs9Eo4kUjJYieMklFKL0IlZX3JAiTcgmOaSJB09e+yd67rmnHorHHowJqMmaihddWS3kGigEqojQENqUEtKs2fBe2dSXowyPhWXh5TYw8+183+w3WQYjh3/Y4ecjcANF9WqBEHPNatiDUSerbFRZ86ra8HVJM8PiucDCUSwWMiDkwA0UyloeIbJngWKEGrlUNMwecHB69axv3DdZ7MdT84qyMoofa8Q9DZQqWoJQ8sFiQzG6ySvR14xZ6fTrLDGMSxb7AgEpHVv+aesIIGA8OeAR8IBDakQDYAWKZW2TIPr+v6z0Np+KZpnE1aoe7AwGJyz2TPri2c2Xv2wdgdgDh1/OQqaJXg1lHcN/3iTlfSaxrutTP9rmNovng+OfJUnq2ToCCBhPDvgl5AGH1LinAesfb2CYSxYrgsjffCqqM4b1en3i23VbZvHzUPA8Eon0bVVA2LB4fJEhhHx6+CD5nlPkVSaxqp4/7VJUH21Cr2cxG19v2ToCCBhPjntcwMMOUuMeBYqVM5lS/O6B1V0uJe8whuWyNmMgWmDxtNe7lUhIbVsVEHugVNHCFKP08HsIod+55MYuk/ioVvP3W723oxF4nnyMx190bR0BBIwnxz0u4GEHqREKgBUQ9wHHN6G4D0A8zZMDdgEPOKTGPQ2I+4Dje0DcByCW4slxjw3FfcBxG4r7AI/FIDXusSGEDU8OWAFxH3B8D4j7AM8bDqkBuwACxpPzDwGD3FDyRWhbAAAAAElFTkSuQmCC"
|
||||
alt=""
|
||||
:class="`${prefix}-bar`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'triggerPane',
|
||||
props: {
|
||||
mode: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix: 'zj-split-trigger',
|
||||
initOffset: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isVertical() {
|
||||
return this.mode === 'vertical'
|
||||
},
|
||||
classes() {
|
||||
return [
|
||||
this.prefix,
|
||||
this.isVertical
|
||||
? `${this.prefix}-vertical`
|
||||
: `${this.prefix}-horizontal`
|
||||
]
|
||||
},
|
||||
barConClasses() {
|
||||
return [
|
||||
`${this.prefix}-bar-con`,
|
||||
this.isVertical ? 'vertical' : 'horizontal'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,45 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
const isServer = Vue.prototype.$isServer
|
||||
// 判断参数是否是其中之一
|
||||
export function oneOf(value, validList) {
|
||||
for (let i = 0; i < validList.length; i++) {
|
||||
if (value === validList[i]) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const on = (function () {
|
||||
if (!isServer && document.addEventListener) {
|
||||
return function (element, event, handler, useCapture = false) {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, useCapture)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return function (element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.attachEvent('on' + event, handler)
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const off = (function () {
|
||||
if (!isServer && document.removeEventListener) {
|
||||
return function (element, event, handler, useCapture = false) {
|
||||
if (element && event) {
|
||||
element.removeEventListener(event, handler, useCapture)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return function (element, event, handler) {
|
||||
if (element && event) {
|
||||
element.detachEvent('on' + event, handler)
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
Loading…
Reference in New Issue
Block a user