init
This commit is contained in:
xiaoyu
+124
@@ -0,0 +1,124 @@
|
||||
# [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts) wordcloud extension based on [wordcloud2.js](https://github.com/timdream/wordcloud2.js)
|
||||
|
||||
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
[Google Trends](https://ecomfe.github.io/echarts-wordcloud/example/wordCloud.html)
|
||||
|
||||
[ECharts Option Keywords](https://ecomfe.github.io/echarts-wordcloud/example/optionKeywords.html)
|
||||
|
||||
## Install
|
||||
|
||||
```html
|
||||
<script src="echarts.min.js"></script>
|
||||
<script src="echarts-wordcloud.min.js"></script>
|
||||
```
|
||||
|
||||
Or
|
||||
|
||||
```shell
|
||||
npm install echarts
|
||||
npm install echarts-wordcloud
|
||||
```
|
||||
|
||||
```js
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-wordcloud';
|
||||
```
|
||||
|
||||
NOTE:
|
||||
|
||||
echarts-wordcloud@2 is for echarts@5
|
||||
echarts-wordcloud@1 is for echarts@4
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var chart = echarts.init(document.getElementById('main'));
|
||||
|
||||
chart.setOption({
|
||||
...
|
||||
series: [{
|
||||
type: 'wordCloud',
|
||||
|
||||
// The shape of the "cloud" to draw. Can be any polar equation represented as a
|
||||
// callback function, or a keyword present. Available presents are circle (default),
|
||||
// cardioid (apple or heart shape curve, the most known polar equation), diamond (
|
||||
// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
|
||||
|
||||
shape: 'circle',
|
||||
|
||||
// A silhouette image which the white area will be excluded from drawing texts.
|
||||
// The shape option will continue to apply as the shape of the cloud to grow.
|
||||
|
||||
maskImage: maskImage,
|
||||
|
||||
// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
|
||||
// Default to be put in the center and has 75% x 80% size.
|
||||
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
width: '70%',
|
||||
height: '80%',
|
||||
right: null,
|
||||
bottom: null,
|
||||
|
||||
// Text size range which the value in data will be mapped to.
|
||||
// Default to have minimum 12px and maximum 60px size.
|
||||
|
||||
sizeRange: [12, 60],
|
||||
|
||||
// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
|
||||
|
||||
rotationRange: [-90, 90],
|
||||
rotationStep: 45,
|
||||
|
||||
// size of the grid in pixels for marking the availability of the canvas
|
||||
// the larger the grid size, the bigger the gap between words.
|
||||
|
||||
gridSize: 8,
|
||||
|
||||
// set to true to allow word being draw partly outside of the canvas.
|
||||
// Allow word bigger than the size of the canvas to be drawn
|
||||
drawOutOfBound: false,
|
||||
|
||||
// If perform layout animation.
|
||||
// NOTE disable it will lead to UI blocking when there is lots of words.
|
||||
layoutAnimation: true,
|
||||
|
||||
// Global text style
|
||||
textStyle: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold',
|
||||
// Color can be a callback function or a color string
|
||||
color: function () {
|
||||
// Random color
|
||||
return 'rgb(' + [
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160)
|
||||
].join(',') + ')';
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'self',
|
||||
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
|
||||
// Data is an array. Each array item must have name and value property.
|
||||
data: [{
|
||||
name: 'Farrah Abraham',
|
||||
value: 366,
|
||||
// Style of single text
|
||||
textStyle: {
|
||||
}
|
||||
}]
|
||||
}]
|
||||
});
|
||||
```
|
||||
+1592
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+3
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
import './src/wordCloud';
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "echarts-wordcloud",
|
||||
"version": "2.0.0",
|
||||
"description": "ECharts wordcloud extension based on wordcloud2.js",
|
||||
"main": "index.js",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"scripts": {
|
||||
"dev": "npx webpack --mode development --watch",
|
||||
"build": "npx webpack --mode development",
|
||||
"release": "npx webpack --mode production && npx webpack --mode development"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"echarts": "^5.0.1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ecomfe/echarts-wordcloud.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"echarts": "^5.0.1",
|
||||
"webpack": "^5.11.1",
|
||||
"webpack-cli": "^4.3.1"
|
||||
}
|
||||
}
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
import * as echarts from 'echarts/lib/echarts';
|
||||
|
||||
echarts.extendSeriesModel({
|
||||
|
||||
type: 'series.wordCloud',
|
||||
|
||||
visualStyleAccessPath: 'textStyle',
|
||||
visualStyleMapper: function (model) {
|
||||
return {
|
||||
fill: model.get('color')
|
||||
};
|
||||
},
|
||||
visualDrawType: 'fill',
|
||||
|
||||
optionUpdated: function () {
|
||||
var option = this.option;
|
||||
option.gridSize = Math.max(Math.floor(option.gridSize), 4);
|
||||
},
|
||||
|
||||
getInitialData: function (option, ecModel) {
|
||||
var dimensions = echarts.helper.createDimensions(option.data, {
|
||||
coordDimensions: ['value']
|
||||
});
|
||||
var list = new echarts.List(dimensions, this);
|
||||
list.initData(option.data);
|
||||
return list;
|
||||
},
|
||||
|
||||
// Most of options are from https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md
|
||||
defaultOption: {
|
||||
|
||||
maskImage: null,
|
||||
|
||||
// Shape can be 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
|
||||
shape: 'circle',
|
||||
|
||||
left: 'center',
|
||||
|
||||
top: 'center',
|
||||
|
||||
width: '70%',
|
||||
|
||||
height: '80%',
|
||||
|
||||
sizeRange: [12, 60],
|
||||
|
||||
rotationRange: [-90, 90],
|
||||
|
||||
rotationStep: 45,
|
||||
|
||||
gridSize: 8,
|
||||
|
||||
drawOutOfBound: false,
|
||||
|
||||
textStyle: {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
});
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
import * as echarts from 'echarts/lib/echarts';
|
||||
|
||||
echarts.extendChartView({
|
||||
|
||||
type: 'wordCloud',
|
||||
|
||||
render: function (seriesModel, ecModel, api) {
|
||||
var group = this.group;
|
||||
group.removeAll();
|
||||
|
||||
var data = seriesModel.getData();
|
||||
|
||||
var gridSize = seriesModel.get('gridSize');
|
||||
|
||||
seriesModel.layoutInstance.ondraw = function (text, size, dataIdx, drawn) {
|
||||
var itemModel = data.getItemModel(dataIdx);
|
||||
var textStyleModel = itemModel.getModel('textStyle');
|
||||
|
||||
var textEl = new echarts.graphic.Text({
|
||||
style: echarts.helper.createTextStyle(textStyleModel),
|
||||
scaleX: 1 / drawn.info.mu,
|
||||
scaleY: 1 / drawn.info.mu,
|
||||
x: (drawn.gx + drawn.info.gw / 2) * gridSize,
|
||||
y: (drawn.gy + drawn.info.gh / 2) * gridSize,
|
||||
rotation: drawn.rot
|
||||
});
|
||||
textEl.setStyle({
|
||||
x: drawn.info.fillTextOffsetX,
|
||||
y: drawn.info.fillTextOffsetY + size * 0.5,
|
||||
text: text,
|
||||
verticalAlign: 'middle',
|
||||
fill: data.getItemVisual(dataIdx, 'style').fill,
|
||||
fontSize: size
|
||||
});
|
||||
|
||||
group.add(textEl);
|
||||
|
||||
data.setItemGraphicEl(dataIdx, textEl);
|
||||
|
||||
textEl.ensureState('emphasis').style = echarts.helper.createTextStyle(itemModel.getModel(['emphasis', 'textStyle']), {
|
||||
state: 'emphasis'
|
||||
});
|
||||
textEl.ensureState('blur').style = echarts.helper.createTextStyle(itemModel.getModel(['blur', 'textStyle']), {
|
||||
state: 'blur'
|
||||
});
|
||||
|
||||
echarts.helper.enableHoverEmphasis(
|
||||
textEl,
|
||||
itemModel.get(['emphasis', 'focus']),
|
||||
itemModel.get(['emphasis', 'blurScope'])
|
||||
);
|
||||
|
||||
textEl.stateTransition = {
|
||||
duration: seriesModel.get('animation') ? seriesModel.get(['stateAnimation', 'duration']) : 0,
|
||||
easing: seriesModel.get(['stateAnimation', 'easing'])
|
||||
};
|
||||
// TODO
|
||||
textEl.__highDownDispatcher = true;
|
||||
};
|
||||
|
||||
this._model = seriesModel;
|
||||
},
|
||||
|
||||
remove: function () {
|
||||
this.group.removeAll();
|
||||
|
||||
this._model.layoutInstance.dispose();
|
||||
},
|
||||
|
||||
dispose: function () {
|
||||
this._model.layoutInstance.dispose();
|
||||
}
|
||||
});
|
||||
+1177
File diff suppressed because it is too large
Load Diff
+189
@@ -0,0 +1,189 @@
|
||||
import * as echarts from 'echarts/lib/echarts';
|
||||
|
||||
import './WordCloudSeries';
|
||||
import './WordCloudView';
|
||||
|
||||
import wordCloudLayoutHelper from './layout';
|
||||
|
||||
if (!wordCloudLayoutHelper.isSupported) {
|
||||
throw new Error('Sorry your browser not support wordCloud');
|
||||
}
|
||||
|
||||
// https://github.com/timdream/wordcloud2.js/blob/c236bee60436e048949f9becc4f0f67bd832dc5c/index.js#L233
|
||||
function updateCanvasMask(maskCanvas) {
|
||||
var ctx = maskCanvas.getContext('2d');
|
||||
var imageData = ctx.getImageData(
|
||||
0, 0, maskCanvas.width, maskCanvas.height);
|
||||
var newImageData = ctx.createImageData(imageData);
|
||||
|
||||
var toneSum = 0;
|
||||
var toneCnt = 0;
|
||||
for (var i = 0; i < imageData.data.length; i += 4) {
|
||||
var alpha = imageData.data[i + 3];
|
||||
if (alpha > 128) {
|
||||
var tone = imageData.data[i]
|
||||
+ imageData.data[i + 1]
|
||||
+ imageData.data[i + 2];
|
||||
toneSum += tone;
|
||||
++toneCnt;
|
||||
}
|
||||
}
|
||||
var threshold = toneSum / toneCnt;
|
||||
|
||||
for (var i = 0; i < imageData.data.length; i += 4) {
|
||||
var tone = imageData.data[i]
|
||||
+ imageData.data[i + 1]
|
||||
+ imageData.data[i + 2];
|
||||
var alpha = imageData.data[i + 3];
|
||||
|
||||
if (alpha < 128 || tone > threshold) {
|
||||
// Area not to draw
|
||||
newImageData.data[i] = 0;
|
||||
newImageData.data[i + 1] = 0;
|
||||
newImageData.data[i + 2] = 0;
|
||||
newImageData.data[i + 3] = 0;
|
||||
}
|
||||
else {
|
||||
// Area to draw
|
||||
// The color must be same with backgroundColor
|
||||
newImageData.data[i] = 255;
|
||||
newImageData.data[i + 1] = 255;
|
||||
newImageData.data[i + 2] = 255;
|
||||
newImageData.data[i + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(newImageData, 0, 0);
|
||||
}
|
||||
|
||||
echarts.registerLayout(function (ecModel, api) {
|
||||
ecModel.eachSeriesByType('wordCloud', function (seriesModel) {
|
||||
var gridRect = echarts.helper.getLayoutRect(
|
||||
seriesModel.getBoxLayoutParams(), {
|
||||
width: api.getWidth(),
|
||||
height: api.getHeight()
|
||||
}
|
||||
);
|
||||
var data = seriesModel.getData();
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = gridRect.width;
|
||||
canvas.height = gridRect.height;
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var maskImage = seriesModel.get('maskImage');
|
||||
if (maskImage) {
|
||||
try {
|
||||
ctx.drawImage(maskImage, 0, 0, canvas.width, canvas.height);
|
||||
updateCanvasMask(canvas);
|
||||
}
|
||||
catch (e) {
|
||||
console.error('Invalid mask image');
|
||||
console.error(e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
var sizeRange = seriesModel.get('sizeRange');
|
||||
var rotationRange = seriesModel.get('rotationRange');
|
||||
var valueExtent = data.getDataExtent('value');
|
||||
|
||||
var DEGREE_TO_RAD = Math.PI / 180;
|
||||
var gridSize = seriesModel.get('gridSize');
|
||||
wordCloudLayoutHelper(canvas, {
|
||||
list: data.mapArray('value', function (value, idx) {
|
||||
var itemModel = data.getItemModel(idx);
|
||||
return [
|
||||
data.getName(idx),
|
||||
itemModel.get('textStyle.fontSize', true)
|
||||
|| echarts.number.linearMap(value, valueExtent, sizeRange),
|
||||
idx
|
||||
];
|
||||
}).sort(function (a, b) {
|
||||
// Sort from large to small in case there is no more room for more words
|
||||
return b[1] - a[1];
|
||||
}),
|
||||
fontFamily: seriesModel.get('textStyle.fontFamily')
|
||||
|| seriesModel.get('emphasis.textStyle.fontFamily')
|
||||
|| ecModel.get('textStyle.fontFamily'),
|
||||
fontWeight: seriesModel.get('textStyle.fontWeight')
|
||||
|| seriesModel.get('emphasis.textStyle.fontWeight')
|
||||
|| ecModel.get('textStyle.fontWeight'),
|
||||
|
||||
gridSize: gridSize,
|
||||
|
||||
ellipticity: gridRect.height / gridRect.width,
|
||||
|
||||
minRotation: rotationRange[0] * DEGREE_TO_RAD,
|
||||
maxRotation: rotationRange[1] * DEGREE_TO_RAD,
|
||||
|
||||
clearCanvas: !maskImage,
|
||||
|
||||
rotateRatio: 1,
|
||||
|
||||
rotationStep: seriesModel.get('rotationStep') * DEGREE_TO_RAD,
|
||||
|
||||
drawOutOfBound: seriesModel.get('drawOutOfBound'),
|
||||
|
||||
layoutAnimation: seriesModel.get('layoutAnimation'),
|
||||
|
||||
shuffle: false,
|
||||
|
||||
shape: seriesModel.get('shape')
|
||||
});
|
||||
|
||||
function onWordCloudDrawn(e) {
|
||||
var item = e.detail.item;
|
||||
if (e.detail.drawn && seriesModel.layoutInstance.ondraw) {
|
||||
e.detail.drawn.gx += gridRect.x / gridSize;
|
||||
e.detail.drawn.gy += gridRect.y / gridSize;
|
||||
seriesModel.layoutInstance.ondraw(
|
||||
item[0], item[1], item[2], e.detail.drawn
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
canvas.addEventListener('wordclouddrawn', onWordCloudDrawn);
|
||||
|
||||
if (seriesModel.layoutInstance) {
|
||||
// Dispose previous
|
||||
seriesModel.layoutInstance.dispose();
|
||||
}
|
||||
|
||||
seriesModel.layoutInstance = {
|
||||
ondraw: null,
|
||||
|
||||
dispose: function () {
|
||||
canvas.removeEventListener('wordclouddrawn', onWordCloudDrawn);
|
||||
// Abort
|
||||
canvas.addEventListener('wordclouddrawn', function (e) {
|
||||
// Prevent default to cancle the event and stop the loop
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
echarts.registerPreprocessor(function (option) {
|
||||
var series = (option || {}).series;
|
||||
!echarts.util.isArray(series) && (series = series ? [series] : []);
|
||||
|
||||
var compats = ['shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'];
|
||||
|
||||
echarts.util.each(series, function (seriesItem) {
|
||||
if (seriesItem && seriesItem.type === 'wordCloud') {
|
||||
var textStyle = seriesItem.textStyle || {};
|
||||
|
||||
compatTextStyle(textStyle.normal);
|
||||
compatTextStyle(textStyle.emphasis);
|
||||
}
|
||||
});
|
||||
|
||||
function compatTextStyle(textStyle) {
|
||||
textStyle && echarts.util.each(compats, function (key) {
|
||||
if (textStyle.hasOwnProperty(key)) {
|
||||
textStyle['text' + echarts.format.capitalFirst(key)] = textStyle[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
module.exports = (env, options) => {
|
||||
return {
|
||||
entry: {
|
||||
'echarts-wordcloud': __dirname + '/index.js'
|
||||
},
|
||||
output: {
|
||||
libraryTarget: 'umd',
|
||||
library: ['echarts-wordcloud'],
|
||||
path: __dirname + '/dist',
|
||||
filename: options.mode === 'production' ? '[name].min.js' : '[name].js'
|
||||
},
|
||||
optimization: {
|
||||
concatenateModules: true
|
||||
},
|
||||
devtool: 'source-map',
|
||||
externals: {
|
||||
'echarts/lib/echarts': 'echarts'
|
||||
}
|
||||
};
|
||||
};
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Jonathan Ong me@jongleberry.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
# EE First
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![Build status][travis-image]][travis-url]
|
||||
[![Test coverage][coveralls-image]][coveralls-url]
|
||||
[![License][license-image]][license-url]
|
||||
[![Downloads][downloads-image]][downloads-url]
|
||||
[![Gittip][gittip-image]][gittip-url]
|
||||
|
||||
Get the first event in a set of event emitters and event pairs,
|
||||
then clean up after itself.
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
$ npm install ee-first
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
```js
|
||||
var first = require('ee-first')
|
||||
```
|
||||
|
||||
### first(arr, listener)
|
||||
|
||||
Invoke `listener` on the first event from the list specified in `arr`. `arr` is
|
||||
an array of arrays, with each array in the format `[ee, ...event]`. `listener`
|
||||
will be called only once, the first time any of the given events are emitted. If
|
||||
`error` is one of the listened events, then if that fires first, the `listener`
|
||||
will be given the `err` argument.
|
||||
|
||||
The `listener` is invoked as `listener(err, ee, event, args)`, where `err` is the
|
||||
first argument emitted from an `error` event, if applicable; `ee` is the event
|
||||
emitter that fired; `event` is the string event name that fired; and `args` is an
|
||||
array of the arguments that were emitted on the event.
|
||||
|
||||
```js
|
||||
var ee1 = new EventEmitter()
|
||||
var ee2 = new EventEmitter()
|
||||
|
||||
first([
|
||||
[ee1, 'close', 'end', 'error'],
|
||||
[ee2, 'error']
|
||||
], function (err, ee, event, args) {
|
||||
// listener invoked
|
||||
})
|
||||
```
|
||||
|
||||
#### .cancel()
|
||||
|
||||
The group of listeners can be cancelled before being invoked and have all the event
|
||||
listeners removed from the underlying event emitters.
|
||||
|
||||
```js
|
||||
var thunk = first([
|
||||
[ee1, 'close', 'end', 'error'],
|
||||
[ee2, 'error']
|
||||
], function (err, ee, event, args) {
|
||||
// listener invoked
|
||||
})
|
||||
|
||||
// cancel and clean up
|
||||
thunk.cancel()
|
||||
```
|
||||
|
||||
[npm-image]: https://img.shields.io/npm/v/ee-first.svg?style=flat-square
|
||||
[npm-url]: https://npmjs.org/package/ee-first
|
||||
[github-tag]: http://img.shields.io/github/tag/jonathanong/ee-first.svg?style=flat-square
|
||||
[github-url]: https://github.com/jonathanong/ee-first/tags
|
||||
[travis-image]: https://img.shields.io/travis/jonathanong/ee-first.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/jonathanong/ee-first
|
||||
[coveralls-image]: https://img.shields.io/coveralls/jonathanong/ee-first.svg?style=flat-square
|
||||
[coveralls-url]: https://coveralls.io/r/jonathanong/ee-first?branch=master
|
||||
[license-image]: http://img.shields.io/npm/l/ee-first.svg?style=flat-square
|
||||
[license-url]: LICENSE.md
|
||||
[downloads-image]: http://img.shields.io/npm/dm/ee-first.svg?style=flat-square
|
||||
[downloads-url]: https://npmjs.org/package/ee-first
|
||||
[gittip-image]: https://img.shields.io/gittip/jonathanong.svg?style=flat-square
|
||||
[gittip-url]: https://www.gittip.com/jonathanong/
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
/*!
|
||||
* ee-first
|
||||
* Copyright(c) 2014 Jonathan Ong
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
/**
|
||||
* Module exports.
|
||||
* @public
|
||||
*/
|
||||
|
||||
module.exports = first
|
||||
|
||||
/**
|
||||
* Get the first event in a set of event emitters and event pairs.
|
||||
*
|
||||
* @param {array} stuff
|
||||
* @param {function} done
|
||||
* @public
|
||||
*/
|
||||
|
||||
function first(stuff, done) {
|
||||
if (!Array.isArray(stuff))
|
||||
throw new TypeError('arg must be an array of [ee, events...] arrays')
|
||||
|
||||
var cleanups = []
|
||||
|
||||
for (var i = 0; i < stuff.length; i++) {
|
||||
var arr = stuff[i]
|
||||
|
||||
if (!Array.isArray(arr) || arr.length < 2)
|
||||
throw new TypeError('each array member must be [ee, events...]')
|
||||
|
||||
var ee = arr[0]
|
||||
|
||||
for (var j = 1; j < arr.length; j++) {
|
||||
var event = arr[j]
|
||||
var fn = listener(event, callback)
|
||||
|
||||
// listen to the event
|
||||
ee.on(event, fn)
|
||||
// push this listener to the list of cleanups
|
||||
cleanups.push({
|
||||
ee: ee,
|
||||
event: event,
|
||||
fn: fn,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function callback() {
|
||||
cleanup()
|
||||
done.apply(null, arguments)
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
var x
|
||||
for (var i = 0; i < cleanups.length; i++) {
|
||||
x = cleanups[i]
|
||||
x.ee.removeListener(x.event, x.fn)
|
||||
}
|
||||
}
|
||||
|
||||
function thunk(fn) {
|
||||
done = fn
|
||||
}
|
||||
|
||||
thunk.cancel = cleanup
|
||||
|
||||
return thunk
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the event listener.
|
||||
* @private
|
||||
*/
|
||||
|
||||
function listener(event, done) {
|
||||
return function onevent(arg1) {
|
||||
var args = new Array(arguments.length)
|
||||
var ee = this
|
||||
var err = event === 'error'
|
||||
? arg1
|
||||
: null
|
||||
|
||||
// copy args to prevent arguments escaping scope
|
||||
for (var i = 0; i < args.length; i++) {
|
||||
args[i] = arguments[i]
|
||||
}
|
||||
|
||||
done(err, ee, event, args)
|
||||
}
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "ee-first",
|
||||
"description": "return the first event in a set of ee/event pairs",
|
||||
"version": "1.1.1",
|
||||
"author": {
|
||||
"name": "Jonathan Ong",
|
||||
"email": "me@jongleberry.com",
|
||||
"url": "http://jongleberry.com",
|
||||
"twitter": "https://twitter.com/jongleberry"
|
||||
},
|
||||
"contributors": [
|
||||
"Douglas Christopher Wilson <doug@somethingdoug.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": "jonathanong/ee-first",
|
||||
"devDependencies": {
|
||||
"istanbul": "0.3.9",
|
||||
"mocha": "2.2.5"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"LICENSE"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "mocha --reporter spec --bail --check-leaks test/",
|
||||
"test-cov": "istanbul cover node_modules/mocha/bin/_mocha -- --reporter dot --check-leaks test/",
|
||||
"test-travis": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --reporter spec --check-leaks test/"
|
||||
}
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
# EleAdmin
|
||||
|
||||
https://eleadmin.com
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
npm i --registry=https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
## 运行
|
||||
|
||||
全局引入方式运行：
|
||||
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 打包
|
||||
|
||||
全部打包：
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
打包指定组件：
|
||||
|
||||
```bash
|
||||
npm run build --src /ele-avatar-list
|
||||
```
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
import { LicenseMixin } from "../utils/license-util";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleAvatarList",
|
||||
mixins: [LicenseMixin],
|
||||
props,
|
||||
emits: ["item-click", "more-click"],
|
||||
computed: {
|
||||
commonStyle() {
|
||||
if (typeof this.size === "number") {
|
||||
return { marginLeft: `${-Math.round(this.size / 3)}px` };
|
||||
} else if (typeof this.size === "string") {
|
||||
const margins = {
|
||||
large: "-12px",
|
||||
default: "-10px",
|
||||
small: "-8px"
|
||||
};
|
||||
return { marginLeft: margins[this.size] || "-12px" };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
isOverflow() {
|
||||
return this.max && this.data && this.data.length > this.max;
|
||||
},
|
||||
avatarList() {
|
||||
var _a;
|
||||
if (!this.authenticated) {
|
||||
return [];
|
||||
}
|
||||
if (this.isOverflow) {
|
||||
return this.data.slice(0, this.max);
|
||||
}
|
||||
return (_a = this.data) != null ? _a : [];
|
||||
},
|
||||
moreText() {
|
||||
var _a, _b;
|
||||
return `+${((_b = (_a = this.data) == null ? void 0 : _a.length) != null ? _b : 0) - this.max}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClick(item) {
|
||||
this.$emit("item-click", item);
|
||||
},
|
||||
onMoreClick() {
|
||||
this.$emit("more-click");
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { ref: "root", staticClass: "ele-avatar-list" }, [_vm._l(_vm.avatarList, function(item, index2) {
|
||||
return [_vm.tooltip && item[_vm.name] ? [_c("el-tooltip", { key: _vm.itemKey && item[_vm.itemKey] ? item[_vm.itemKey] : index2, attrs: { "content": item[_vm.name], "placement": _vm.placement, "effect": _vm.effect, "offset": _vm.offset, "transition": _vm.transition } }, [_c("el-avatar", { key: _vm.itemKey && item[_vm.itemKey] ? item[_vm.itemKey] : index2, style: [_vm.commonStyle, _vm.itemStyle, _vm.avatarStyle], attrs: { "size": _vm.size, "shape": _vm.shape, "alt": item[_vm.name], "src": item[_vm.avatar] }, on: { "click": function($event) {
|
||||
return _vm.onItemClick(item);
|
||||
} } })], 1)] : [_c("el-avatar", { key: _vm.itemKey && item[_vm.itemKey] ? item[_vm.itemKey] : index2, style: [_vm.commonStyle, _vm.itemStyle, _vm.avatarStyle], attrs: { "size": _vm.size, "shape": _vm.shape, "alt": item[_vm.name], "src": item[_vm.avatar] }, on: { "click": function($event) {
|
||||
return _vm.onItemClick(item);
|
||||
} } })]];
|
||||
}), _vm.isOverflow ? _c("el-avatar", { staticClass: "ele-avatar-list-more", style: [_vm.commonStyle, _vm.itemStyle, _vm.moreStyle], attrs: { "size": _vm.size, "shape": _vm.shape }, on: { "click": _vm.onMoreClick } }, [_vm._v(" " + _vm._s(_vm.moreText) + " ")]) : _vm._e()], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
const props = {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "name"
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: "avatar"
|
||||
},
|
||||
itemKey: String,
|
||||
shape: {
|
||||
type: String,
|
||||
default: "circle",
|
||||
validator(value) {
|
||||
return ["circle", "square"].includes(value);
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: "medium",
|
||||
validator(value) {
|
||||
if (typeof value === "string") {
|
||||
return ["large", "medium", "small"].includes(value);
|
||||
} else {
|
||||
return value > 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: Object,
|
||||
avatarStyle: Object,
|
||||
moreStyle: Object,
|
||||
tooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: "top"
|
||||
},
|
||||
effect: {
|
||||
type: String,
|
||||
default: "dark"
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
transition: {
|
||||
type: String,
|
||||
default: "el-fade-in-linear"
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
.ele-avatar-list {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
|
||||
.el-avatar {
|
||||
border: 1px solid #fff;
|
||||
box-sizing: content-box;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-avatar-list-more {
|
||||
color: #f56a00;
|
||||
background: #fde3cf;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
import JsBarCode from "jsbarcode";
|
||||
import props from "./props";
|
||||
const index = {
|
||||
name: "EleBarCode",
|
||||
props,
|
||||
emits: [],
|
||||
data() {
|
||||
return {
|
||||
instance: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.render();
|
||||
},
|
||||
methods: {
|
||||
render() {
|
||||
if (!this.value) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this.instance = new JsBarCode(
|
||||
this.$refs.rootRef,
|
||||
this.value,
|
||||
this.options
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
this.render();
|
||||
},
|
||||
options: {
|
||||
handler() {
|
||||
this.render();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
tag() {
|
||||
this.$nextTick(() => {
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
return h(this.tag, {
|
||||
ref: "rootRef",
|
||||
style: { display: this.value ? null : "none" }
|
||||
});
|
||||
}
|
||||
};
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
const props = {
|
||||
value: String,
|
||||
tag: {
|
||||
type: String,
|
||||
default: "svg"
|
||||
},
|
||||
options: {
|
||||
type: Object
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
//
|
||||
+288
@@ -0,0 +1,288 @@
|
||||
import { LicenseMixin } from "../utils/license-util";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleBasicSelect",
|
||||
mixins: [LicenseMixin],
|
||||
inject: {
|
||||
elForm: {
|
||||
default: ""
|
||||
},
|
||||
elFormItem: {
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
props,
|
||||
emits: [
|
||||
"update:visible",
|
||||
"focus",
|
||||
"blur",
|
||||
"select-option",
|
||||
"navigate-options",
|
||||
"clear",
|
||||
"remove-tag",
|
||||
"after-enter",
|
||||
"show"
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
initialInputHeight: 0,
|
||||
popperMinWidth: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectSize() {
|
||||
var _a, _b;
|
||||
const elFormItemSize = (_a = this.elFormItem) == null ? void 0 : _a.elFormItemSize;
|
||||
return this.size || elFormItemSize || ((_b = this.$ELEMENT) == null ? void 0 : _b.size);
|
||||
},
|
||||
selectDisabled() {
|
||||
var _a;
|
||||
return !this.authenticated || this.disabled || ((_a = this.elForm) == null ? void 0 : _a.disabled);
|
||||
},
|
||||
hasValue() {
|
||||
if (this.multiple) {
|
||||
return Array.isArray(this.value) && this.value.length > 0;
|
||||
} else {
|
||||
return this.value != null && this.value !== "";
|
||||
}
|
||||
},
|
||||
iconClass() {
|
||||
return [
|
||||
"el-select__caret",
|
||||
"el-input__icon",
|
||||
"el-icon-arrow-up",
|
||||
{ "is-reverse": this.visible }
|
||||
];
|
||||
},
|
||||
showClose() {
|
||||
return this.clearable && !this.selectDisabled && this.hasValue;
|
||||
},
|
||||
currentPlaceholder() {
|
||||
return this.hasValue ? "" : this.placeholder;
|
||||
},
|
||||
tagSize() {
|
||||
return ["small", "mini"].includes(this.selectSize) ? "mini" : "small";
|
||||
},
|
||||
firstSel() {
|
||||
return this.selected.length ? this.selected[0] : null;
|
||||
},
|
||||
collapseText() {
|
||||
return "+ " + (this.selected.length - 1);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var _a, _b, _c;
|
||||
const input = (_c = (_b = (_a = this.$refs) == null ? void 0 : _a.input) == null ? void 0 : _b.$el) == null ? void 0 : _c.querySelector("input");
|
||||
if (input) {
|
||||
const sizeMap = {
|
||||
mini: 28,
|
||||
small: 32,
|
||||
medium: 36
|
||||
};
|
||||
const height = input.getBoundingClientRect().height;
|
||||
this.initialInputHeight = height || sizeMap[this.selectSize];
|
||||
this.resetInputHeight();
|
||||
this.popperMinWidth = input.getBoundingClientRect().width;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateVisible(visible) {
|
||||
this.$emit("update:visible", visible);
|
||||
},
|
||||
handleFocus(event) {
|
||||
if (this.automaticDropdown && !this.visible) {
|
||||
this.updateVisible(true);
|
||||
}
|
||||
this.$emit("focus", event);
|
||||
},
|
||||
handleBlur(event) {
|
||||
this.$emit("blur", event);
|
||||
},
|
||||
selectOption() {
|
||||
if (!this.visible) {
|
||||
this.updateVisible(true);
|
||||
} else {
|
||||
this.$emit("select-option");
|
||||
}
|
||||
},
|
||||
navigateOptions(type) {
|
||||
if (!this.visible) {
|
||||
this.updateVisible(true);
|
||||
} else {
|
||||
this.$emit("navigate-options", type);
|
||||
}
|
||||
},
|
||||
handleClearClick() {
|
||||
this.$emit("clear");
|
||||
},
|
||||
deleteTag(event, tag) {
|
||||
event.stopPropagation();
|
||||
if (!this.selectDisabled) {
|
||||
this.$emit("remove-tag", tag);
|
||||
}
|
||||
},
|
||||
resetInputHeight() {
|
||||
this.$nextTick(() => {
|
||||
var _a, _b, _c, _d, _e, _f;
|
||||
const childs = (_d = (_c = (_b = (_a = this.$refs) == null ? void 0 : _a.input) == null ? void 0 : _b.$el) == null ? void 0 : _c.childNodes) != null ? _d : [];
|
||||
const input = [].find.call(childs, (el) => el.tagName === "INPUT");
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
if (this.collapseTags) {
|
||||
input.style.height = null;
|
||||
return;
|
||||
}
|
||||
const tags = (_e = this.$refs) == null ? void 0 : _e.tags;
|
||||
const height = Math.round(((_f = tags == null ? void 0 : tags.getBoundingClientRect()) == null ? void 0 : _f.height) || 0);
|
||||
const init = this.initialInputHeight || 40;
|
||||
if (!this.selected.length) {
|
||||
input.style.height = init + "px";
|
||||
} else {
|
||||
const max = Math.max(height + (height > init ? 6 : 0), init);
|
||||
input.style.height = max + "px";
|
||||
}
|
||||
this.updatePopper();
|
||||
});
|
||||
},
|
||||
updatePopper() {
|
||||
var _a, _b;
|
||||
(_b = (_a = this.$refs) == null ? void 0 : _a.popover) == null ? void 0 : _b.updatePopper();
|
||||
},
|
||||
onShow() {
|
||||
this.$emit("show");
|
||||
},
|
||||
onAfterEnter() {
|
||||
this.$emit("after-enter");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
disabled() {
|
||||
this.resetInputHeight();
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("el-popover", { ref: "popover", attrs: { "value": _vm.visible, "placement": "bottom-start", "disabled": _vm.selectDisabled, "transition": "el-zoom-in-top", "popper-class": _vm.popperClass, "popper-options": _vm.popperOptions, "width": _vm.popperWidth || _vm.popperMinWidth }, on: { "show": _vm.onShow, "input": _vm.updateVisible, "after-enter": _vm.onAfterEnter }, scopedSlots: _vm._u([{ key: "reference", fn: function() {
|
||||
return [_c("div", { class: [
|
||||
"el-select ele-basic-select",
|
||||
_vm.selectSize ? "el-select--" + _vm.selectSize : ""
|
||||
] }, [_vm.multiple ? _c("div", { ref: "tags", staticClass: "el-select__tags", staticStyle: { "max-width": "calc(100% - 32px)" } }, [_vm.collapseTags ? _c("span", [_vm.firstSel ? _c("el-tag", { attrs: { "type": "info", "size": _vm.tagSize, "closable": !_vm.selectDisabled, "disable-transitions": true }, on: { "close": function($event) {
|
||||
return _vm.deleteTag($event, _vm.firstSel);
|
||||
} } }, [_c("span", { staticClass: "el-select__tags-text" }, [_vm._v(_vm._s(_vm.firstSel.label))])]) : _vm._e(), _vm.selected.length > 1 ? _c("el-tag", { attrs: { "type": "info", "size": _vm.tagSize, "closable": false, "disable-transitions": true } }, [_c("span", { staticClass: "el-select__tags-text" }, [_vm._v(_vm._s(_vm.collapseText))])]) : _vm._e()], 1) : _c("span", _vm._l(_vm.selected, function(item) {
|
||||
return _c("el-tag", { key: item.value, attrs: { "type": "info", "size": _vm.tagSize, "closable": !_vm.selectDisabled, "disable-transitions": true }, on: { "close": function($event) {
|
||||
return _vm.deleteTag($event, item);
|
||||
} } }, [_c("span", { staticClass: "el-select__tags-text" }, [_vm._v(_vm._s(item.label))])]);
|
||||
}), 1)]) : _vm._e(), _c("el-input", { ref: "input", class: { "is-focus": _vm.visible }, attrs: { "type": "text", "value": _vm.selectedLabel, "id": _vm.id, "name": _vm.name, "autocomplete": _vm.autocomplete, "placeholder": _vm.currentPlaceholder, "size": _vm.selectSize, "disabled": _vm.selectDisabled, "readonly": true, "validate-event": false }, on: { "blur": _vm.handleBlur, "focus": _vm.handleFocus }, nativeOn: { "keydown": [function($event) {
|
||||
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab"))
|
||||
return null;
|
||||
return _vm.updateVisible(false);
|
||||
}, function($event) {
|
||||
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
|
||||
return null;
|
||||
$event.preventDefault();
|
||||
return _vm.selectOption.apply(null, arguments);
|
||||
}, function($event) {
|
||||
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
|
||||
return null;
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
return _vm.updateVisible(false);
|
||||
}, function($event) {
|
||||
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
|
||||
return null;
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
return _vm.navigateOptions("prev");
|
||||
}, function($event) {
|
||||
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
|
||||
return null;
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
return _vm.navigateOptions("next");
|
||||
}, function($event) {
|
||||
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete", "Del"]))
|
||||
return null;
|
||||
$event.stopPropagation();
|
||||
$event.preventDefault();
|
||||
return _vm.handleClearClick.apply(null, arguments);
|
||||
}] }, scopedSlots: _vm._u([_vm.$scopedSlots.prefix ? { key: "prefix", fn: function() {
|
||||
return [_vm._t("prefix")];
|
||||
}, proxy: true } : null, { key: "suffix", fn: function() {
|
||||
return [_vm.showClose ? _c("i", { staticClass: "el-select__caret el-input__icon el-icon-circle-close", on: { "click": function($event) {
|
||||
$event.stopPropagation();
|
||||
return _vm.handleClearClick.apply(null, arguments);
|
||||
} } }) : _vm._e(), _c("i", { class: _vm.iconClass })];
|
||||
}, proxy: true }], null, true) })], 1)];
|
||||
}, proxy: true }]) }, [_vm._t("default")], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
const props = {
|
||||
value: [String, Number, Array],
|
||||
multiple: Boolean,
|
||||
disabled: Boolean,
|
||||
size: String,
|
||||
clearable: Boolean,
|
||||
collapseTags: Boolean,
|
||||
placeholder: String,
|
||||
automaticDropdown: Boolean,
|
||||
popperClass: String,
|
||||
popperOptions: Object,
|
||||
popperWidth: [Number, String],
|
||||
id: String,
|
||||
name: String,
|
||||
autocomplete: {
|
||||
type: String,
|
||||
default: "off"
|
||||
},
|
||||
selectedLabel: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
.ele-basic-select {
|
||||
width: 100%;
|
||||
|
||||
&:not(:hover) > .el-input .el-icon-circle-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover > .el-input .el-icon-circle-close + .el-icon-arrow-up {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
import EleCropper from "../ele-cropper/index";
|
||||
import EleModal from "../ele-modal/index";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleCropperDialog",
|
||||
mixins: [Locale],
|
||||
components: { EleCropper, EleModal },
|
||||
props,
|
||||
emits: ["crop", "open", "closed", "update:show"],
|
||||
data() {
|
||||
return {
|
||||
enable: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.enable = true;
|
||||
this.$emit("open");
|
||||
},
|
||||
onClosed() {
|
||||
if (this.destroyOnClose) {
|
||||
this.enable = false;
|
||||
}
|
||||
this.$emit("closed");
|
||||
},
|
||||
onCrop(result) {
|
||||
this.$emit("crop", result);
|
||||
},
|
||||
updateVisible(value) {
|
||||
this.$emit("update:show", value);
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("EleModal", { attrs: { "visible": _vm.show, "title": _vm.title || _vm.t("ele.cropper.title"), "width": _vm.width, "top": _vm.top, "modal": _vm.modal, "modal-append-to-body": _vm.modalAppendToBody, "append-to-body": _vm.appendToBody, "lock-scroll": _vm.lockScroll, "custom-class": _vm.customClass, "close-on-click-modal": _vm.closeOnClickModal, "close-on-press-escape": _vm.closeOnPressEscape, "show-close": _vm.showClose, "destroy-on-close": _vm.destroyOnClose, "movable": _vm.movable, "move-out": _vm.moveOut, "move-out-positive": _vm.moveOutPositive, "resizable": _vm.resizable, "maxable": _vm.maxable, "multiple": _vm.multiple, "fullscreen": _vm.fullscreen, "inner": _vm.inner, "reset-on-close": _vm.resetOnClose, "centered": _vm.centered, "mask-keep-alive": false }, on: { "open": _vm.onOpen, "closed": _vm.onClosed, "update:visible": _vm.updateVisible }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots).filter((s) => s !== "default"), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }, [_vm.enable ? _c("EleCropper", { attrs: { "src": _vm.src, "image-type": _vm.imageType, "accept": _vm.accept, "tools": _vm.tools, "show-preview": _vm.showPreview, "preview-width": _vm.previewWidth, "ok-text": _vm.okText, "to-blob": _vm.toBlob, "options": _vm.options, "cropped-options": _vm.croppedOptions, "aspect-ratio": _vm.aspectRatio, "view-mode": _vm.viewMode, "drag-mode": _vm.dragMode, "initial-aspect-ratio": _vm.initialAspectRatio, "min-container-width": _vm.minContainerWidth, "min-container-height": _vm.minContainerHeight, "min-canvas-width": _vm.minCanvasWidth, "min-canvas-height": _vm.minCanvasHeight, "min-crop-box-width": _vm.minCropBoxWidth, "min-crop-box-height": _vm.minCropBoxHeight, "cropped-width": _vm.croppedWidth, "cropped-height": _vm.croppedHeight, "cropped-min-width": _vm.croppedMinWidth, "cropped-min-height": _vm.croppedMinHeight, "cropped-max-width": _vm.croppedMaxWidth, "cropped-max-height": _vm.croppedMaxHeight, "cropped-fill-color": _vm.croppedFillColor, "image-smoothing-enabled": _vm.imageSmoothingEnabled, "image-smoothing-quality": _vm.imageSmoothingQuality }, on: { "crop": _vm.onCrop } }) : _vm._e()], 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import { commonProps } from "../ele-modal/props";
|
||||
import props$1 from "../ele-cropper/props";
|
||||
const props = {
|
||||
...commonProps,
|
||||
...props$1,
|
||||
show: Boolean,
|
||||
title: String,
|
||||
width: {
|
||||
type: String,
|
||||
default: "680px"
|
||||
},
|
||||
dialogStyle: Object
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import '../../ele-cropper/style';
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "CropperPreview",
|
||||
props: {
|
||||
previewWidth: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
aspectRatio: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPreviews() {
|
||||
var _a;
|
||||
return (_a = this.$refs.rootRef) == null ? void 0 : _a.querySelectorAll(".ele-cropper-preview");
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { ref: "rootRef", staticClass: "ele-cropper-preview-group", style: { width: _vm.previewWidth + 14 + "px" } }, [_c("div", { staticClass: "ele-cropper-preview", style: {
|
||||
width: _vm.previewWidth + "px",
|
||||
height: _vm.previewWidth / (_vm.aspectRatio || 1) + "px"
|
||||
} }), _vm.aspectRatio === 1 ? _c("div", { staticClass: "ele-cropper-preview ele-cropper-preview-circle", style: {
|
||||
width: _vm.previewWidth + "px",
|
||||
height: _vm.previewWidth / (_vm.aspectRatio || 1) + "px"
|
||||
} }) : [_c("div", { staticClass: "ele-cropper-preview", style: {
|
||||
width: _vm.previewWidth + "px",
|
||||
height: (_vm.previewWidth / 3 * 2 - 10) / (_vm.aspectRatio || 1) + "px"
|
||||
} }), _c("div", { staticClass: "ele-cropper-preview", style: {
|
||||
width: _vm.previewWidth + "px",
|
||||
height: _vm.previewWidth / 3 / (_vm.aspectRatio || 1) + "px",
|
||||
marginLeft: "10px"
|
||||
} })]], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const cropperPreview = __component__.exports;
|
||||
export {
|
||||
cropperPreview as default
|
||||
};
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "CropperTools",
|
||||
mixins: [Locale],
|
||||
props: {
|
||||
tools: String,
|
||||
accept: String,
|
||||
okText: String
|
||||
},
|
||||
emits: [
|
||||
"crop",
|
||||
"move-b",
|
||||
"move-l",
|
||||
"move-r",
|
||||
"move-t",
|
||||
"reset",
|
||||
"rotate-l",
|
||||
"rotate-r",
|
||||
"scale-x",
|
||||
"scale-y",
|
||||
"replace",
|
||||
"zoom-in",
|
||||
"zoom-out"
|
||||
],
|
||||
computed: {
|
||||
groups() {
|
||||
var _a;
|
||||
if (!this.tools) {
|
||||
return [];
|
||||
}
|
||||
return (_a = this.tools.split("|")) == null ? void 0 : _a.map((g) => {
|
||||
var _a2;
|
||||
return (_a2 = g == null ? void 0 : g.split(",")) == null ? void 0 : _a2.map((t) => t == null ? void 0 : t.trim());
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
zoomIn() {
|
||||
this.$emit("zoom-in");
|
||||
},
|
||||
zoomOut() {
|
||||
this.$emit("zoom-out");
|
||||
},
|
||||
scaleX() {
|
||||
this.$emit("scale-x");
|
||||
},
|
||||
scaleY() {
|
||||
this.$emit("scale-y");
|
||||
},
|
||||
rotateL() {
|
||||
this.$emit("rotate-l");
|
||||
},
|
||||
rotateR() {
|
||||
this.$emit("rotate-r");
|
||||
},
|
||||
moveL() {
|
||||
this.$emit("move-l");
|
||||
},
|
||||
moveR() {
|
||||
this.$emit("move-r");
|
||||
},
|
||||
moveT() {
|
||||
this.$emit("move-t");
|
||||
},
|
||||
moveB() {
|
||||
this.$emit("move-b");
|
||||
},
|
||||
reset() {
|
||||
this.$emit("reset");
|
||||
},
|
||||
crop() {
|
||||
this.$emit("crop");
|
||||
},
|
||||
onUpload(file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
var _a;
|
||||
this.$emit("replace", {
|
||||
data: (_a = e.target) == null ? void 0 : _a.result,
|
||||
type: file.type
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { staticClass: "ele-cropper-tool" }, _vm._l(_vm.groups, function(buttons, i) {
|
||||
return _c("el-button-group", { key: i + buttons.join(","), staticClass: "ele-cropper-tool-item" }, [_vm._l(buttons, function(name, j) {
|
||||
return [name === "zoomIn" ? _c("el-button", { key: i + "-" + j + "zoomIn", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-zoom-in", "title": _vm.t("ele.cropper.zoomIn") }, on: { "click": _vm.zoomIn } }) : name === "zoomOut" ? _c("el-button", { key: i + "-" + j + "zoomOut", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-zoom-out", "title": _vm.t("ele.cropper.zoomOut") }, on: { "click": _vm.zoomOut } }) : name === "rotateL" ? _c("el-button", { key: i + "-" + j + "rotateL", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-refresh-left", "title": _vm.t("ele.cropper.rotateLeft") }, on: { "click": _vm.rotateL } }) : name === "rotateR" ? _c("el-button", { key: i + "-" + j + "rotateR", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-refresh-right", "title": _vm.t("ele.cropper.rotateRight") }, on: { "click": _vm.rotateR } }) : name === "moveL" ? _c("el-button", { key: i + "-" + j + "moveL", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-back", "title": _vm.t("ele.cropper.moveLeft") }, on: { "click": _vm.moveL } }) : name === "moveR" ? _c("el-button", { key: i + "-" + j + "moveR", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-right", "title": _vm.t("ele.cropper.moveRight") }, on: { "click": _vm.moveR } }) : name === "moveT" ? _c("el-button", { key: i + "-" + j + "moveT", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-top", "title": _vm.t("ele.cropper.moveUp") }, on: { "click": _vm.moveT } }) : name === "moveB" ? _c("el-button", { key: i + "-" + j + "moveB", attrs: { "type": "primary", "icon": "el-icon-bottom", "title": _vm.t("ele.cropper.moveDown") }, on: { "click": _vm.moveB } }) : name === "scaleX" ? _c("el-button", { key: i + "-" + j + "scaleX", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-sort ele-cropper-icon-scale-x", "title": _vm.t("ele.cropper.flipX") }, on: { "click": _vm.scaleX } }) : name === "scaleY" ? _c("el-button", { key: i + "-" + j + "scaleY", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-sort", "title": _vm.t("ele.cropper.flipY") }, on: { "click": _vm.scaleY } }) : name === "reset" ? _c("el-button", { key: i + "-" + j + "reset", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-refresh", "title": _vm.t("ele.cropper.reset") }, on: { "click": _vm.reset } }) : name === "upload" ? _c("el-upload", { key: i + "-" + j + "upload", attrs: { "action": "", "accept": _vm.accept, "show-file-list": false, "before-upload": _vm.onUpload } }, [_c("el-button", { staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-upload2", "title": _vm.t("ele.cropper.upload") } })], 1) : name === "crop" ? _c("el-button", { key: i + "-" + j + "crop", attrs: { "type": "primary", "icon": "el-icon-check" }, on: { "click": _vm.crop } }, [_vm._v(" " + _vm._s(_vm.okText || _vm.t("ele.cropper.ok")) + " ")]) : _vm._e()];
|
||||
})], 2);
|
||||
}), 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const cropperTools = __component__.exports;
|
||||
export {
|
||||
cropperTools as default
|
||||
};
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
import Cropper from "cropperjs";
|
||||
import { LicenseMixin, UNAUTHORIZED_TIP } from "../utils/license-util";
|
||||
import CropperPreview from "./components/cropper-preview";
|
||||
import CropperTools from "./components/cropper-tools";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleCropper",
|
||||
components: { CropperPreview, CropperTools },
|
||||
mixins: [LicenseMixin],
|
||||
props,
|
||||
inject: {
|
||||
proLayout: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ["crop"],
|
||||
data() {
|
||||
return {
|
||||
ins: null,
|
||||
imgType: this.imageType,
|
||||
scaleXValue: -1,
|
||||
scaleYValue: -1
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styleResponsive() {
|
||||
var _a, _b;
|
||||
const proLayout = (_a = this.proLayout) != null ? _a : {};
|
||||
return (_b = proLayout.styleResponsive) != null ? _b : true;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.src) {
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
render() {
|
||||
var _a;
|
||||
this.destroy();
|
||||
const options = {
|
||||
aspectRatio: this.aspectRatio,
|
||||
viewMode: this.viewMode,
|
||||
dragMode: this.dragMode,
|
||||
initialAspectRatio: this.initialAspectRatio,
|
||||
minContainerWidth: this.minContainerWidth,
|
||||
minContainerHeight: this.minContainerHeight,
|
||||
minCanvasWidth: this.minCanvasWidth,
|
||||
minCanvasHeight: this.minCanvasHeight,
|
||||
minCropBoxWidth: this.minCropBoxWidth,
|
||||
minCropBoxHeight: this.minCropBoxHeight,
|
||||
...this.options
|
||||
};
|
||||
if (this.showPreview) {
|
||||
options.preview = (_a = this.$refs.previewRef) == null ? void 0 : _a.getPreviews();
|
||||
}
|
||||
if (this.$refs.imageRef) {
|
||||
this.ins = new Cropper(this.$refs.imageRef, options);
|
||||
}
|
||||
},
|
||||
zoomIn() {
|
||||
this.ins && this.ins.zoom(0.1);
|
||||
},
|
||||
zoomOut() {
|
||||
this.ins && this.ins.zoom(-0.1);
|
||||
},
|
||||
moveL() {
|
||||
this.ins && this.ins.move(-10, 0);
|
||||
},
|
||||
moveR() {
|
||||
this.ins && this.ins.move(10, 0);
|
||||
},
|
||||
moveT() {
|
||||
this.ins && this.ins.move(0, -10);
|
||||
},
|
||||
moveB() {
|
||||
this.ins && this.ins.move(0, 10);
|
||||
},
|
||||
rotateL() {
|
||||
this.ins && this.ins.rotate(-45);
|
||||
},
|
||||
rotateR() {
|
||||
this.ins && this.ins.rotate(45);
|
||||
},
|
||||
scaleX() {
|
||||
this.ins && this.ins.scaleX(this.scaleXValue);
|
||||
this.scaleXValue = -this.scaleXValue;
|
||||
},
|
||||
scaleY() {
|
||||
this.ins && this.ins.scaleY(this.scaleYValue);
|
||||
this.scaleYValue = -this.scaleYValue;
|
||||
},
|
||||
reset() {
|
||||
this.ins && this.ins.reset();
|
||||
},
|
||||
crop() {
|
||||
var _a;
|
||||
if (!this.authenticated) {
|
||||
console.warn(UNAUTHORIZED_TIP);
|
||||
return;
|
||||
}
|
||||
const result = (_a = this.ins) == null ? void 0 : _a.getCroppedCanvas({
|
||||
width: this.croppedWidth,
|
||||
height: this.croppedHeight,
|
||||
minWidth: this.croppedMinWidth,
|
||||
minHeight: this.croppedMinHeight,
|
||||
maxWidth: this.croppedMaxWidth,
|
||||
maxHeight: this.croppedMaxHeight,
|
||||
fillColor: this.croppedFillColor,
|
||||
imageSmoothingEnabled: this.imageSmoothingEnabled,
|
||||
imageSmoothingQuality: this.imageSmoothingQuality,
|
||||
...this.croppedOptions
|
||||
});
|
||||
if (result) {
|
||||
if (this.toBlob) {
|
||||
result.toBlob((blob) => {
|
||||
this.$emit("crop", blob);
|
||||
}, this.imgType);
|
||||
} else {
|
||||
this.$emit("crop", result.toDataURL(this.imgType));
|
||||
}
|
||||
} else {
|
||||
this.$emit("crop");
|
||||
}
|
||||
},
|
||||
replace({ data, type }) {
|
||||
this.imgType = type;
|
||||
if (this.ins) {
|
||||
this.ins.replace(data);
|
||||
} else {
|
||||
const elem = this.$refs.imageRef;
|
||||
if (elem) {
|
||||
elem.src = data;
|
||||
elem.style.display = "block";
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
this.ins && this.ins.destroy();
|
||||
this.ins = null;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src(value) {
|
||||
if (value) {
|
||||
if (this.ins) {
|
||||
this.ins.replace(value);
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
imageType(value) {
|
||||
if (value) {
|
||||
this.imgType = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
this.destroy();
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { class: ["ele-cropper", { "ele-cropper-responsive": _vm.styleResponsive }] }, [_c("div", { staticClass: "ele-cropper-group" }, [_c("div", { staticClass: "ele-cropper-img-group" }, [_c("img", { ref: "imageRef", style: { maxWidth: "100%", display: _vm.src ? "block" : "none" }, attrs: { "src": _vm.src, "alt": "cropper" } })]), _vm.showPreview ? _c("CropperPreview", { ref: "previewRef", attrs: { "aspect-ratio": _vm.aspectRatio, "preview-width": _vm.previewWidth } }) : _vm._e()], 1), _c("CropperTools", { attrs: { "tools": _vm.tools, "ok-text": _vm.okText }, on: { "crop": _vm.crop, "move-b": _vm.moveB, "move-l": _vm.moveL, "move-r": _vm.moveR, "move-t": _vm.moveT, "reset": _vm.reset, "rotate-l": _vm.rotateL, "rotate-r": _vm.rotateR, "scale-x": _vm.scaleX, "scale-y": _vm.scaleY, "replace": _vm.replace, "zoom-in": _vm.zoomIn, "zoom-out": _vm.zoomOut } })], 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
const DEFAULT_TOOLS = [
|
||||
"zoomIn, zoomOut",
|
||||
"moveL, moveR, moveT, moveB",
|
||||
"rotateL, rotateR",
|
||||
"scaleX, scaleY",
|
||||
"reset, upload",
|
||||
"crop"
|
||||
].join(" | ");
|
||||
const props = {
|
||||
src: String,
|
||||
imageType: {
|
||||
type: String,
|
||||
default: "image/png"
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: "image/*"
|
||||
},
|
||||
tools: {
|
||||
type: String,
|
||||
default: DEFAULT_TOOLS
|
||||
},
|
||||
showPreview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
previewWidth: {
|
||||
type: Number,
|
||||
default: 120
|
||||
},
|
||||
okText: String,
|
||||
toBlob: Boolean,
|
||||
options: Object,
|
||||
croppedOptions: Object,
|
||||
aspectRatio: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
viewMode: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dragMode: {
|
||||
type: String,
|
||||
default: "crop"
|
||||
},
|
||||
initialAspectRatio: Number,
|
||||
minContainerWidth: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
minContainerHeight: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
minCanvasWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minCanvasHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minCropBoxWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minCropBoxHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
croppedWidth: Number,
|
||||
croppedHeight: Number,
|
||||
croppedMinWidth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
croppedMinHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
croppedMaxWidth: Number,
|
||||
croppedMaxHeight: Number,
|
||||
croppedFillColor: {
|
||||
type: String,
|
||||
default: "transparent"
|
||||
},
|
||||
imageSmoothingEnabled: Boolean,
|
||||
imageSmoothingQuality: String
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
@import '~cropperjs/dist/cropper.css';
|
||||
|
||||
.ele-cropper {
|
||||
.ele-cropper-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ele-cropper-img-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ele-cropper-preview-group {
|
||||
font-size: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ele-cropper-preview {
|
||||
display: inline-block;
|
||||
border: 1px solid hsla(0, 0%, 80%, 0.6);
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-cropper-preview-circle {
|
||||
margin-top: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕适应 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-cropper-responsive.ele-cropper .ele-cropper-preview-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ele-cropper-tool {
|
||||
margin-top: 10px;
|
||||
|
||||
.ele-cropper-tool-item {
|
||||
margin-top: 10px;
|
||||
margin-right: 18px;
|
||||
vertical-align: top;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.el-upload .el-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.ele-cropper-icon-scale-x {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕适应 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-cropper-responsive .ele-cropper-tool {
|
||||
.ele-cropper-tool-item {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleDot",
|
||||
props,
|
||||
computed: {
|
||||
dotClass() {
|
||||
return [
|
||||
"ele-dot",
|
||||
{ "ele-dot-success": "success" === this.type },
|
||||
{ "ele-dot-warning": "warning" === this.type },
|
||||
{ "ele-dot-danger": "danger" === this.type },
|
||||
{ "ele-dot-info": "info" === this.type },
|
||||
{ "ele-dot-ripple": this.ripple }
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("span", { class: _vm.dotClass }, [_c("span", { staticClass: "ele-dot-status", style: { width: _vm.size, height: _vm.size, backgroundColor: _vm.color } }, [_c("span", { style: { backgroundColor: _vm.color } })]), _vm.text ? _c("span", { staticClass: "ele-dot-text" }, [_vm._v(_vm._s(_vm.text))]) : _vm._e()]);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
const props = {
|
||||
type: String,
|
||||
color: String,
|
||||
ripple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
text: [String, Boolean],
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: "6px"
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
.ele-dot {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ele-dot-text {
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ele-dot-status {
|
||||
background: $--color-primary;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
& > span {
|
||||
background: $--color-primary;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-dot-ripple .ele-dot-status > span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
animation: eleAnimStatusDot 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ele-dot-success .ele-dot-status,
|
||||
.ele-dot-success .ele-dot-status > span {
|
||||
background: $--color-success;
|
||||
}
|
||||
|
||||
.ele-dot-warning .ele-dot-status,
|
||||
.ele-dot-warning .ele-dot-status > span {
|
||||
background: $--color-warning;
|
||||
}
|
||||
|
||||
.ele-dot-danger .ele-dot-status,
|
||||
.ele-dot-danger .ele-dot-status > span {
|
||||
background: $--color-danger;
|
||||
}
|
||||
|
||||
.ele-dot-info .ele-dot-status,
|
||||
.ele-dot-info .ele-dot-status > span {
|
||||
background: $--color-info;
|
||||
}
|
||||
|
||||
@keyframes eleAnimStatusDot {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(2.4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EmptyIcon"
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("svg", { staticClass: "ele-empty-icon-default", attrs: { "width": "64", "height": "41", "viewBox": "0 0 64 41", "xmlns": "http://www.w3.org/2000/svg" } }, [_c("g", { attrs: { "fill": "none", "fill-rule": "evenodd", "transform": "translate(0 1)" } }, [_c("ellipse", { staticClass: "ele-empty-icon-default-ellipse", attrs: { "cx": "32", "cy": "33", "rx": "32", "ry": "7" } }), _c("g", { staticClass: "ele-empty-icon-default-g", attrs: { "fill-rule": "nonzero" } }, [_c("path", { attrs: { "d": "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" } }), _c("path", { staticClass: "ele-empty-icon-default-path", attrs: { "d": "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" } })])])]);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const emptyIcon = __component__.exports;
|
||||
export {
|
||||
emptyIcon as default
|
||||
};
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
import EmptyIcon from "./components/empty-icon";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleEmpty",
|
||||
components: { EmptyIcon },
|
||||
mixins: [Locale],
|
||||
props
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { class: ["ele-empty", _vm.customClass] }, [_c("div", { staticClass: "ele-empty-icon" }, [_vm._t("icon", function() {
|
||||
return [_c("EmptyIcon")];
|
||||
})], 2), _c("div", { staticClass: "ele-empty-text" }, [_vm._t("text", function() {
|
||||
return [_vm._v(_vm._s(_vm.text || _vm.t("el.empty.description")))];
|
||||
})], 2), _c("div", { staticClass: "ele-empty-actions" }, [_vm._t("default")], 2)]);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
const props = {
|
||||
text: String,
|
||||
customClass: [String, Object]
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
.ele-empty {
|
||||
padding: 35px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
|
||||
.ele-empty-icon {
|
||||
font-size: 58px;
|
||||
color: hsla(0, 0%, 60%, 0.25);
|
||||
}
|
||||
|
||||
.ele-empty-text {
|
||||
padding: 6px 0;
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.ele-empty-icon-default-ellipse {
|
||||
fill: $--border-color-extra-light;
|
||||
}
|
||||
|
||||
.ele-empty-icon-default-g {
|
||||
stroke: $--border-color-base;
|
||||
}
|
||||
|
||||
.ele-empty-icon-default-path {
|
||||
fill: $--border-color-extra-light;
|
||||
}
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleException",
|
||||
props
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { staticClass: "ele-exception" }, [_c("div", { staticClass: "ele-exception-img" }, [_vm._t("icon", function() {
|
||||
return [_c("i", { class: [_vm.icon, "ele-exception-icon"] })];
|
||||
})], 2), _c("div", { staticClass: "ele-exception-content" }, [_c("h1", [_vm._v(_vm._s(_vm.title))]), _c("p", [_vm._v(_vm._s(_vm.description))]), _c("div", [_vm._t("extra")], 2)])]);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
const props = {
|
||||
title: String,
|
||||
description: String,
|
||||
icon: {
|
||||
type: String,
|
||||
default: "el-icon-_printer-solid"
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
.ele-exception {
|
||||
margin: 15px 0;
|
||||
text-align: center;
|
||||
|
||||
.ele-exception-img,
|
||||
.ele-exception-content {
|
||||
margin: 15px 30px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ele-exception-img {
|
||||
color: $--color-text-placeholder;
|
||||
|
||||
img {
|
||||
width: 216px;
|
||||
height: auto;
|
||||
filter: $--content-image-filter;
|
||||
}
|
||||
|
||||
.ele-exception-icon {
|
||||
font-size: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-exception-content {
|
||||
text-align: left;
|
||||
|
||||
& > h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px 0;
|
||||
color: $--color-text-regular;
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 20px;
|
||||
margin: 0 0 25px 0;
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-exception {
|
||||
margin: 40px 0;
|
||||
|
||||
.ele-exception-img {
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-exception-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleFileListTool",
|
||||
emits: ["click"],
|
||||
methods: {
|
||||
click() {
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { staticClass: "ele-file-list-item-tool", on: { "click": function($event) {
|
||||
$event.stopPropagation();
|
||||
return _vm.click.apply(null, arguments);
|
||||
} } }, [_vm._t("default")], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
//
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
const DROPDOWN_EL_CLASS = "ele-file-item-context-el";
|
||||
const fileGridItem = {
|
||||
name: "FileGridItem",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
checkbox: Boolean,
|
||||
selection: Array,
|
||||
icons: Array
|
||||
},
|
||||
emits: ["item-click", "item-check-change", "context-menu"],
|
||||
computed: {
|
||||
checked() {
|
||||
return this.item && Array.isArray(this.selection) && this.selection.includes(this.item);
|
||||
},
|
||||
icon() {
|
||||
var _a, _b, _c, _d;
|
||||
if ((_a = this.item) == null ? void 0 : _a.thumbnail) {
|
||||
return this.item.thumbnail;
|
||||
}
|
||||
if (!this.icons) {
|
||||
return;
|
||||
}
|
||||
if (this.item.isDirectory) {
|
||||
return (_b = this.icons.find((d) => d.type === "dir")) == null ? void 0 : _b.icon;
|
||||
}
|
||||
return ((_c = this.icons.find(
|
||||
(d) => {
|
||||
var _a2;
|
||||
return !!((_a2 = d.types) == null ? void 0 : _a2.find((t) => {
|
||||
var _a3;
|
||||
return !!((_a3 = this.item.name) == null ? void 0 : _a3.endsWith(t));
|
||||
}));
|
||||
}
|
||||
)) == null ? void 0 : _c.icon) || ((_d = this.icons.find((d) => d.type === "file")) == null ? void 0 : _d.icon);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClick() {
|
||||
this.$emit("item-click", this.item);
|
||||
},
|
||||
onItemCheckChange() {
|
||||
this.$emit("item-check-change", this.item);
|
||||
},
|
||||
onContextMenu(e) {
|
||||
var _a;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const target = e.currentTarget;
|
||||
const el = (_a = target.parentNode) == null ? void 0 : _a.querySelector("." + DROPDOWN_EL_CLASS);
|
||||
el && el.click();
|
||||
},
|
||||
onContextMenuClick(command) {
|
||||
this.$emit("context-menu", {
|
||||
key: command,
|
||||
item: this.item
|
||||
});
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const nodes = [
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-item-body",
|
||||
on: {
|
||||
contextmenu: this.onContextMenu
|
||||
}
|
||||
},
|
||||
[
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-item-icon"
|
||||
},
|
||||
[
|
||||
h("img", {
|
||||
attrs: {
|
||||
src: this.icon
|
||||
},
|
||||
class: {
|
||||
"ele-file-list-item-icon-image": !!this.item.thumbnail
|
||||
}
|
||||
})
|
||||
]
|
||||
),
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-item-title",
|
||||
attrs: {
|
||||
title: this.item.name
|
||||
}
|
||||
},
|
||||
this.item.name
|
||||
)
|
||||
]
|
||||
)
|
||||
];
|
||||
if (this.checkbox) {
|
||||
nodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-item-check",
|
||||
on: {
|
||||
click: (e) => {
|
||||
e.stopPropagation();
|
||||
this.onItemCheckChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
[h("i", { class: "ele-file-icon-check checked" })]
|
||||
)
|
||||
);
|
||||
}
|
||||
const ctxSlot = this.$scopedSlots["context-menu"];
|
||||
if (ctxSlot) {
|
||||
nodes.push(
|
||||
h(
|
||||
"el-dropdown",
|
||||
{
|
||||
class: "ele-file-item-context-wrap",
|
||||
props: {
|
||||
trigger: "click",
|
||||
placement: "bottom"
|
||||
},
|
||||
on: {
|
||||
command: this.onContextMenuClick
|
||||
}
|
||||
},
|
||||
[
|
||||
h("div", {
|
||||
class: DROPDOWN_EL_CLASS,
|
||||
on: {
|
||||
click: (e) => e.stopPropagation()
|
||||
}
|
||||
}),
|
||||
h(
|
||||
"el-dropdown-menu",
|
||||
{
|
||||
slot: "dropdown",
|
||||
class: "ele-file-item-context-menu"
|
||||
},
|
||||
ctxSlot({ item: this.item })
|
||||
)
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
class: ["ele-file-list-item", { checked: this.checked }],
|
||||
on: {
|
||||
click: (e) => {
|
||||
e.stopPropagation();
|
||||
this.onItemClick();
|
||||
}
|
||||
}
|
||||
},
|
||||
nodes
|
||||
);
|
||||
}
|
||||
};
|
||||
export {
|
||||
fileGridItem as default
|
||||
};
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
import FileGridItem from "./file-grid-item";
|
||||
const fileGrid = {
|
||||
name: "FileGrid",
|
||||
props: {
|
||||
data: Array,
|
||||
icons: Array,
|
||||
selection: Array,
|
||||
checkbox: Boolean,
|
||||
checked: Boolean,
|
||||
indeterminate: Boolean,
|
||||
total: Number,
|
||||
totalText: String,
|
||||
checkAllText: String
|
||||
},
|
||||
emits: [
|
||||
"check-all-change",
|
||||
"item-click",
|
||||
"item-check-change",
|
||||
"item-context-menu"
|
||||
],
|
||||
computed: {
|
||||
checkboxClass() {
|
||||
return [
|
||||
"ele-file-list-check ele-file-icon-check",
|
||||
{ checked: this.checked },
|
||||
{ indeterminate: this.indeterminate }
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCheckAllChange() {
|
||||
this.$emit("check-all-change");
|
||||
},
|
||||
onItemClick(item) {
|
||||
this.$emit("item-click", item);
|
||||
},
|
||||
onItemCheckChange(item) {
|
||||
this.$emit("item-check-change", item);
|
||||
},
|
||||
onItemContextMenu(option) {
|
||||
this.$emit("item-context-menu", option);
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
var _a, _b;
|
||||
const nodes = [];
|
||||
if (this.checkbox) {
|
||||
nodes.push(
|
||||
h("div", { class: "ele-file-list-header" }, [
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-check-group",
|
||||
on: {
|
||||
click: (e) => {
|
||||
e.stopPropagation();
|
||||
this.onCheckAllChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
[
|
||||
h("i", { class: this.checkboxClass }),
|
||||
h(
|
||||
"div",
|
||||
{},
|
||||
this.total ? (_a = this.totalText) == null ? void 0 : _a.replace(/{total}/g, String(this.total)) : this.checkAllText
|
||||
)
|
||||
]
|
||||
)
|
||||
])
|
||||
);
|
||||
}
|
||||
nodes.push(
|
||||
h(
|
||||
"div",
|
||||
{ class: "ele-file-list-body" },
|
||||
(_b = this.data) == null ? void 0 : _b.map((item, key) => {
|
||||
return h(FileGridItem, {
|
||||
key,
|
||||
props: {
|
||||
item,
|
||||
icons: this.icons,
|
||||
checkbox: this.checkbox,
|
||||
selection: this.selection
|
||||
},
|
||||
on: {
|
||||
"item-click": this.onItemClick,
|
||||
"item-check-change": this.onItemCheckChange,
|
||||
"context-menu": this.onItemContextMenu
|
||||
},
|
||||
scopedSlots: this.$scopedSlots
|
||||
});
|
||||
})
|
||||
)
|
||||
);
|
||||
return h("div", { class: "ele-file-list" }, nodes);
|
||||
}
|
||||
};
|
||||
export {
|
||||
fileGrid as default
|
||||
};
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "FileSort",
|
||||
props: {
|
||||
sort: String,
|
||||
order: String,
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return [
|
||||
"ele-file-list-table-item-sort",
|
||||
{
|
||||
"ele-file-list-sort-asc": this.name === this.sort && "asc" === this.order
|
||||
},
|
||||
{
|
||||
"ele-file-list-sort-desc": this.name === this.sort && "desc" === this.order
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("i", { class: _vm.classes });
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const fileSort = __component__.exports;
|
||||
export {
|
||||
fileSort as default
|
||||
};
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
const DROPDOWN_EL_CLASS = "ele-file-item-context-el";
|
||||
const fileTableItem = {
|
||||
name: "FileTableItem",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
checkbox: Boolean,
|
||||
selection: Array,
|
||||
icons: Array,
|
||||
columns: Array
|
||||
},
|
||||
emits: ["item-click", "item-check-change", "context-menu"],
|
||||
computed: {
|
||||
checked() {
|
||||
return this.item && Array.isArray(this.selection) && this.selection.includes(this.item);
|
||||
},
|
||||
icon() {
|
||||
var _a, _b, _c, _d;
|
||||
if (!this.icons) {
|
||||
return;
|
||||
}
|
||||
if ((_a = this.item) == null ? void 0 : _a.isDirectory) {
|
||||
return (_b = this.icons.find((d) => d.type === "dir")) == null ? void 0 : _b.icon;
|
||||
}
|
||||
return ((_c = this.icons.find(
|
||||
(d) => {
|
||||
var _a2;
|
||||
return !!((_a2 = d.types) == null ? void 0 : _a2.find((t) => {
|
||||
var _a3;
|
||||
return !!((_a3 = this.item.name) == null ? void 0 : _a3.endsWith(t));
|
||||
}));
|
||||
}
|
||||
)) == null ? void 0 : _c.icon) || ((_d = this.icons.find((d) => d.type === "file")) == null ? void 0 : _d.icon);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClick() {
|
||||
this.$emit("item-click", this.item);
|
||||
},
|
||||
onItemCheckChange() {
|
||||
this.$emit("item-check-change", this.item);
|
||||
},
|
||||
onContextMenu(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const target = e.currentTarget;
|
||||
const el = target.parentNode.querySelector("." + DROPDOWN_EL_CLASS);
|
||||
el && el.click();
|
||||
},
|
||||
onContextMenuClick(command) {
|
||||
this.$emit("context-menu", {
|
||||
key: command,
|
||||
item: this.item
|
||||
});
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
var _a;
|
||||
const bodyNodes = [];
|
||||
if (this.checkbox) {
|
||||
bodyNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-check-group"
|
||||
},
|
||||
[
|
||||
h("i", {
|
||||
class: ["ele-file-icon-check", { checked: this.checked }],
|
||||
on: {
|
||||
click: (e) => {
|
||||
e.stopPropagation();
|
||||
this.onItemCheckChange();
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
const nameNodes = [
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-icon"
|
||||
},
|
||||
[
|
||||
h("img", {
|
||||
attrs: {
|
||||
src: this.icon,
|
||||
alt: this.item.name
|
||||
},
|
||||
class: "ele-file-list-table-item-icon-image",
|
||||
on: {
|
||||
click: this.onItemClick
|
||||
}
|
||||
}),
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-title",
|
||||
attrs: {
|
||||
title: this.item.name
|
||||
},
|
||||
on: {
|
||||
click: this.onItemClick
|
||||
}
|
||||
},
|
||||
this.item.name
|
||||
)
|
||||
]
|
||||
)
|
||||
];
|
||||
const toolSlot = this.$scopedSlots["tool"];
|
||||
if (toolSlot) {
|
||||
nameNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-tool-group"
|
||||
},
|
||||
toolSlot({ item: this.item })
|
||||
)
|
||||
);
|
||||
}
|
||||
bodyNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-name"
|
||||
},
|
||||
nameNodes
|
||||
)
|
||||
);
|
||||
(_a = this.columns) == null ? void 0 : _a.forEach((col) => {
|
||||
var _a2;
|
||||
const value = (_a2 = this.item) == null ? void 0 : _a2[col.prop];
|
||||
const tSlot = col.slot ? this.$scopedSlots[col.slot] : void 0;
|
||||
bodyNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
key: col.prop,
|
||||
style: col.style,
|
||||
class: "ele-file-list-table-item-col"
|
||||
},
|
||||
tSlot ? tSlot({ item: this.item, col }) : value == null ? void 0 : String(value)
|
||||
)
|
||||
);
|
||||
});
|
||||
const nodes = [
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-body",
|
||||
on: {
|
||||
contextmenu: this.onContextMenu
|
||||
}
|
||||
},
|
||||
bodyNodes
|
||||
)
|
||||
];
|
||||
const ctxSlot = this.$scopedSlots["context-menu"];
|
||||
if (ctxSlot) {
|
||||
nodes.push(
|
||||
h(
|
||||
"el-dropdown",
|
||||
{
|
||||
class: "ele-file-item-context-wrap",
|
||||
props: {
|
||||
trigger: "click",
|
||||
placement: "bottom-start"
|
||||
},
|
||||
on: {
|
||||
command: this.onContextMenuClick
|
||||
}
|
||||
},
|
||||
[
|
||||
h("div", {
|
||||
class: DROPDOWN_EL_CLASS,
|
||||
on: {
|
||||
click: (e) => e.stopPropagation()
|
||||
}
|
||||
}),
|
||||
h(
|
||||
"el-dropdown-menu",
|
||||
{
|
||||
slot: "dropdown",
|
||||
class: "ele-file-item-context-menu"
|
||||
},
|
||||
ctxSlot({ item: this.item })
|
||||
)
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
class: ["ele-file-list-table-item", { checked: this.checked }]
|
||||
},
|
||||
nodes
|
||||
);
|
||||
}
|
||||
};
|
||||
export {
|
||||
fileTableItem as default
|
||||
};
|
||||
+216
@@ -0,0 +1,216 @@
|
||||
import FileSort from "./file-sort";
|
||||
import FileTableItem from "./file-table-item";
|
||||
const fileTable = {
|
||||
name: "FileTable",
|
||||
props: {
|
||||
data: Array,
|
||||
icons: Array,
|
||||
selection: Array,
|
||||
checkbox: Boolean,
|
||||
checked: Boolean,
|
||||
indeterminate: Boolean,
|
||||
total: Number,
|
||||
totalText: String,
|
||||
checkAllText: String,
|
||||
nameText: String,
|
||||
sizeText: String,
|
||||
timeText: String,
|
||||
sort: {
|
||||
type: [String, Boolean],
|
||||
default: false
|
||||
},
|
||||
order: String,
|
||||
columns: Array
|
||||
},
|
||||
emits: [
|
||||
"check-all-change",
|
||||
"item-click",
|
||||
"item-check-change",
|
||||
"sort-change",
|
||||
"item-context-menu"
|
||||
],
|
||||
computed: {
|
||||
checkboxClass() {
|
||||
return [
|
||||
"ele-file-list-table-item-check ele-file-icon-check",
|
||||
{ checked: this.checked },
|
||||
{ indeterminate: this.indeterminate }
|
||||
];
|
||||
},
|
||||
tableCols() {
|
||||
if (this.columns) {
|
||||
return this.columns;
|
||||
}
|
||||
const cols = [
|
||||
{
|
||||
title: this.sizeText,
|
||||
prop: "length",
|
||||
style: {
|
||||
width: "120px",
|
||||
flexShrink: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.timeText,
|
||||
prop: "updateTime",
|
||||
style: {
|
||||
width: "180px",
|
||||
flexShrink: 0
|
||||
}
|
||||
}
|
||||
];
|
||||
return cols;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCheckAllChange() {
|
||||
this.$emit("check-all-change");
|
||||
},
|
||||
onItemClick(item) {
|
||||
this.$emit("item-click", item);
|
||||
},
|
||||
onItemCheckChange(item) {
|
||||
this.$emit("item-check-change", item);
|
||||
},
|
||||
onSortChange(sort) {
|
||||
this.$emit("sort-change", sort);
|
||||
},
|
||||
onItemContextMenu(option) {
|
||||
this.$emit("item-context-menu", option);
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
var _a;
|
||||
const nodes = [];
|
||||
const headerNodes = [];
|
||||
if (this.checkbox) {
|
||||
headerNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-check-group"
|
||||
},
|
||||
[
|
||||
h("i", {
|
||||
class: this.checkboxClass,
|
||||
on: {
|
||||
click: (e) => {
|
||||
e.stopPropagation();
|
||||
this.onCheckAllChange();
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
const nameNodes = [h("span", {}, this.nameText)];
|
||||
if (typeof this.sort === "string") {
|
||||
nameNodes.push(
|
||||
h(FileSort, {
|
||||
props: {
|
||||
sort: this.sort,
|
||||
order: this.order,
|
||||
name: "name"
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
headerNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-name",
|
||||
on: {
|
||||
click: () => this.onSortChange("name")
|
||||
}
|
||||
},
|
||||
nameNodes
|
||||
)
|
||||
);
|
||||
this.tableCols.forEach((col) => {
|
||||
const tSlot = col.headerSlot ? this.$scopedSlots[col.headerSlot] : void 0;
|
||||
const temp = [h("span", {}, tSlot ? tSlot({ col }) : col.title)];
|
||||
if (typeof this.sort === "string") {
|
||||
temp.push(
|
||||
h(FileSort, {
|
||||
props: {
|
||||
sort: this.sort,
|
||||
order: this.order,
|
||||
name: col.prop
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
headerNodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
key: col.prop,
|
||||
style: col.headStyle || col.style,
|
||||
class: "ele-file-list-table-item-col",
|
||||
on: {
|
||||
click: () => this.onSortChange(col.prop)
|
||||
}
|
||||
},
|
||||
temp
|
||||
)
|
||||
);
|
||||
});
|
||||
nodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-header"
|
||||
},
|
||||
[
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item"
|
||||
},
|
||||
[
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-item-body"
|
||||
},
|
||||
[headerNodes]
|
||||
)
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
);
|
||||
nodes.push(
|
||||
h(
|
||||
"div",
|
||||
{
|
||||
class: "ele-file-list-table-body"
|
||||
},
|
||||
(_a = this.data) == null ? void 0 : _a.map((item, key) => {
|
||||
return h(FileTableItem, {
|
||||
key,
|
||||
props: {
|
||||
item,
|
||||
icons: this.icons,
|
||||
checkbox: this.checkbox,
|
||||
selection: this.selection,
|
||||
columns: this.tableCols
|
||||
},
|
||||
on: {
|
||||
"item-click": this.onItemClick,
|
||||
"item-check-change": this.onItemCheckChange,
|
||||
"context-menu": this.onItemContextMenu
|
||||
},
|
||||
scopedSlots: this.$scopedSlots
|
||||
});
|
||||
})
|
||||
)
|
||||
);
|
||||
return h("div", { class: "ele-file-list-table" }, nodes);
|
||||
}
|
||||
};
|
||||
export {
|
||||
fileTable as default
|
||||
};
|
||||
+222
@@ -0,0 +1,222 @@
|
||||
const icons = [
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_misc.png",
|
||||
type: "file"
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_folder.png",
|
||||
type: "dir"
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_code.png",
|
||||
types: [
|
||||
".java",
|
||||
".js",
|
||||
".css",
|
||||
".vue",
|
||||
".ts",
|
||||
".tsx",
|
||||
".scss",
|
||||
".less",
|
||||
".c",
|
||||
".cpp",
|
||||
".cs",
|
||||
".jsp",
|
||||
".php",
|
||||
".asp",
|
||||
".py",
|
||||
".go",
|
||||
".kt",
|
||||
".lua"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_htm.png",
|
||||
types: [".html", ".htm"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_text.png",
|
||||
types: [".txt"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_pdf.png",
|
||||
types: [".pdf"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_word.png",
|
||||
types: [".doc", ".docx"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_excel.png",
|
||||
types: [".xls", ".xlsx"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_ppt.png",
|
||||
types: [".ppt", ".pptx"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_visio.png",
|
||||
types: [".vsd"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_ps.png",
|
||||
types: [".psd"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_cad.png",
|
||||
types: [".dwg"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_flash.png",
|
||||
types: [".swf"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_music.png",
|
||||
types: [".mp3", ".wav"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_video.png",
|
||||
types: [".mp4", ".rmvb", ".flv", ".avi", ".3gp"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_picture.png",
|
||||
types: [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_fonts.png",
|
||||
types: [".ttf", ".woff"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_bt.png",
|
||||
types: [".torrent"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_android.png",
|
||||
types: [".apk"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_exe.png",
|
||||
types: [".exe"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_ipa.png",
|
||||
types: [".ipa", ".dmg"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_zip.png",
|
||||
types: [".zip", ".rar", ".7z"]
|
||||
}
|
||||
];
|
||||
const smIcons = [
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_misc_sm.png",
|
||||
type: "file"
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_folder_sm.png",
|
||||
type: "dir"
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_code_sm.png",
|
||||
types: [
|
||||
".java",
|
||||
".js",
|
||||
".css",
|
||||
".vue",
|
||||
".ts",
|
||||
".tsx",
|
||||
".scss",
|
||||
".less",
|
||||
".c",
|
||||
".cpp",
|
||||
".cs",
|
||||
".jsp",
|
||||
".php",
|
||||
".asp",
|
||||
".py",
|
||||
".go",
|
||||
".kt",
|
||||
".lua"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_htm_sm.png",
|
||||
types: [".html", ".htm"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_text_sm.png",
|
||||
types: [".txt"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_pdf_sm.png",
|
||||
types: [".pdf"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_word_sm.png",
|
||||
types: [".doc", ".docx"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_excel_sm.png",
|
||||
types: [".xls", ".xlsx"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_ppt_sm.png",
|
||||
types: [".ppt", ".pptx"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_visio_sm.png",
|
||||
types: [".vsd"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_ps_sm.png",
|
||||
types: [".psd"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_cad_sm.png",
|
||||
types: [".dwg"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_flash_sm.png",
|
||||
types: [".swf"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_music_sm.png",
|
||||
types: [".mp3", ".wav"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_video_sm.png",
|
||||
types: [".mp4", ".rmvb", ".flv", ".avi", ".3gp"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_picture_sm.png",
|
||||
types: [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_fonts_sm.png",
|
||||
types: [".ttf", ".woff"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_bt_sm.png",
|
||||
types: [".torrent"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_android_sm.png",
|
||||
types: [".apk"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_exe_sm.png",
|
||||
types: [".exe"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_ipa_sm.png",
|
||||
types: [".ipa", ".dmg"]
|
||||
},
|
||||
{
|
||||
icon: "https://cdn.eleadmin.com/20200609/ic_file_zip_sm.png",
|
||||
types: [".zip", ".rar", ".7z"]
|
||||
}
|
||||
];
|
||||
export {
|
||||
icons,
|
||||
smIcons
|
||||
};
|
||||
+235
@@ -0,0 +1,235 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
import { LicenseMixin, UNAUTHORIZED_TIP } from "../utils/license-util";
|
||||
import FileGrid from "./components/file-grid";
|
||||
import FileTable from "./components/file-table";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const GRID_ITEM_SEL = ".ele-file-list-body>.ele-file-list-item";
|
||||
const TABLE_ITEM_SEL = ".ele-file-list-table-body>.ele-file-list-table-item";
|
||||
const _sfc_main = {
|
||||
name: "EleFileList",
|
||||
mixins: [Locale, LicenseMixin],
|
||||
components: { FileGrid, FileTable },
|
||||
props,
|
||||
emits: ["item-click", "sort-change", "update:checked", "item-context-menu"],
|
||||
data() {
|
||||
return {
|
||||
selectorStyle: {
|
||||
left: "0px",
|
||||
top: "0px",
|
||||
width: "0px",
|
||||
height: "0px",
|
||||
display: "none"
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
checkbox() {
|
||||
return Array.isArray(this.checked);
|
||||
},
|
||||
allChecked() {
|
||||
var _a, _b, _c;
|
||||
return !!((_a = this.data) == null ? void 0 : _a.length) && ((_b = this.checked) == null ? void 0 : _b.length) === ((_c = this.data) == null ? void 0 : _c.length);
|
||||
},
|
||||
indeterminate() {
|
||||
var _a, _b;
|
||||
return !!(((_a = this.checked) == null ? void 0 : _a.length) && this.checked.length !== ((_b = this.data) == null ? void 0 : _b.length));
|
||||
},
|
||||
totalText() {
|
||||
return this.t("ele.fileList.selectTips", {
|
||||
total: this.checked ? this.checked.length : 0
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCheckAllChange() {
|
||||
if (this.allChecked || this.data == null || !this.data.length) {
|
||||
this.$emit("update:checked", []);
|
||||
} else {
|
||||
this.$emit("update:checked", this.data.slice());
|
||||
}
|
||||
},
|
||||
onItemCheckChange(item) {
|
||||
var _a, _b, _c, _d;
|
||||
const index2 = (_b = (_a = this.checked) == null ? void 0 : _a.indexOf(item)) != null ? _b : -1;
|
||||
if (index2 === -1) {
|
||||
this.$emit("update:checked", (_c = this.checked) == null ? void 0 : _c.concat([item]));
|
||||
} else {
|
||||
const cks = (_d = this.checked) == null ? void 0 : _d.slice(0, index2).concat(this.checked.slice(index2 + 1, this.checked.length));
|
||||
this.$emit("update:checked", cks);
|
||||
}
|
||||
},
|
||||
onItemClick(item) {
|
||||
if (!this.authenticated) {
|
||||
console.warn(UNAUTHORIZED_TIP);
|
||||
return;
|
||||
}
|
||||
this.$emit("item-click", item);
|
||||
},
|
||||
onSortChange(name) {
|
||||
if (typeof this.sort === "string") {
|
||||
this.$emit("sort-change", {
|
||||
sort: name,
|
||||
order: this.order && name === this.sort ? { asc: "desc", desc: "" }[this.order] : "asc"
|
||||
});
|
||||
}
|
||||
},
|
||||
onItemContextMenu(option) {
|
||||
this.$emit("item-context-menu", option);
|
||||
},
|
||||
onMousedown(event) {
|
||||
if (!this.checkbox) {
|
||||
return;
|
||||
}
|
||||
const downX = event.clientX;
|
||||
const downY = event.clientY;
|
||||
const target = event.currentTarget;
|
||||
const position = target.getBoundingClientRect();
|
||||
const mousemoveFn = (e) => {
|
||||
const moveX = Math.max(e.clientX, position.left);
|
||||
const moveY = Math.max(e.clientY, position.top);
|
||||
const left = Math.min(moveX, downX) - position.left;
|
||||
const top = Math.min(moveY, downY) - position.top;
|
||||
const width = Math.min(
|
||||
Math.abs(moveX - downX),
|
||||
target.clientWidth - left
|
||||
);
|
||||
const height = Math.min(
|
||||
Math.abs(moveY - downY),
|
||||
target.clientHeight - top
|
||||
);
|
||||
Object.assign(this.selectorStyle, {
|
||||
left: left + "px",
|
||||
top: top + "px",
|
||||
width: width + "px",
|
||||
height: height + "px",
|
||||
display: "block"
|
||||
});
|
||||
const items = target.querySelectorAll(
|
||||
this.grid ? GRID_ITEM_SEL : TABLE_ITEM_SEL
|
||||
);
|
||||
if (width < 6 || height < 6) {
|
||||
Array.from(items).forEach((item) => {
|
||||
item.classList.remove("active");
|
||||
});
|
||||
return;
|
||||
}
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
Array.from(items).forEach((item) => {
|
||||
const itemX = item.offsetLeft + item.clientWidth;
|
||||
const itemY = item.offsetTop + item.clientHeight;
|
||||
if (itemX > left && itemY > top && item.offsetLeft < left + width && item.offsetTop < top + height) {
|
||||
item.classList.add("active");
|
||||
} else {
|
||||
item.classList.remove("active");
|
||||
}
|
||||
});
|
||||
};
|
||||
const mouseupFn = () => {
|
||||
this.selectorStyle.display = "none";
|
||||
const checked = [];
|
||||
const items = target.querySelectorAll(
|
||||
this.grid ? GRID_ITEM_SEL : TABLE_ITEM_SEL
|
||||
);
|
||||
Array.from(items).forEach((item, i) => {
|
||||
if (item.classList.contains("active")) {
|
||||
item.classList.remove("active");
|
||||
if (this.data && this.data[i]) {
|
||||
checked.push(this.data[i]);
|
||||
}
|
||||
}
|
||||
});
|
||||
if (checked.length) {
|
||||
this.$emit("update:checked", checked);
|
||||
}
|
||||
document.removeEventListener("mousemove", mousemoveFn);
|
||||
document.removeEventListener("mouseup", mouseupFn);
|
||||
};
|
||||
document.addEventListener("mousemove", mousemoveFn);
|
||||
document.addEventListener("mouseup", mouseupFn);
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { staticClass: "ele-file-list-group", on: { "mousedown": _vm.onMousedown } }, [_vm.grid ? _c("FileGrid", { attrs: { "data": _vm.data, "icons": _vm.icons, "selection": _vm.checked, "checkbox": _vm.checkbox, "checked": _vm.allChecked, "indeterminate": _vm.indeterminate, "total": _vm.checked ? _vm.checked.length : 0, "total-text": _vm.totalText, "check-all-text": _vm.t("ele.fileList.selectAll") }, on: { "check-all-change": _vm.onCheckAllChange, "item-click": _vm.onItemClick, "item-check-change": _vm.onItemCheckChange, "item-context-menu": _vm.onItemContextMenu }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }) : _c("FileTable", { attrs: { "data": _vm.data, "icons": _vm.icons, "selection": _vm.checked, "checkbox": _vm.checkbox, "checked": _vm.allChecked, "indeterminate": _vm.indeterminate, "total": _vm.checked ? _vm.checked.length : 0, "total-text": _vm.totalText, "check-all-text": _vm.t("ele.fileList.selectAll"), "name-text": _vm.t("ele.fileList.fileName"), "size-text": _vm.t("ele.fileList.fileSize"), "time-text": _vm.t("ele.fileList.fileTimestamp"), "sort": _vm.sort, "order": _vm.order, "columns": _vm.columns }, on: { "check-all-change": _vm.onCheckAllChange, "item-click": _vm.onItemClick, "item-check-change": _vm.onItemCheckChange, "sort-change": _vm.onSortChange, "item-context-menu": _vm.onItemContextMenu }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }), _c("div", { staticClass: "ele-file-list-selector", style: _vm.selectorStyle })], 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { icons, smIcons } from "./icons";
|
||||
const props = {
|
||||
data: Array,
|
||||
checked: Array,
|
||||
grid: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
sort: {
|
||||
type: [String, Boolean],
|
||||
default: false
|
||||
},
|
||||
order: String,
|
||||
icons: {
|
||||
type: Array,
|
||||
default() {
|
||||
return icons;
|
||||
}
|
||||
},
|
||||
smIcons: {
|
||||
type: Array,
|
||||
default() {
|
||||
return smIcons;
|
||||
}
|
||||
},
|
||||
columns: Array
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+399
@@ -0,0 +1,399 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
.ele-file-list-group {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
/* 复选框 */
|
||||
.ele-file-icon-check {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
border: 1px solid $--border-color-base;
|
||||
background: $--color-white;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 5.71428571px;
|
||||
height: 9.14285714px;
|
||||
display: table;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg) scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 21.5%;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background: $--color-primary;
|
||||
border-color: $--color-primary;
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg) scale(1) translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: table;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0;
|
||||
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&.indeterminate:after {
|
||||
background: $--color-primary;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鼠标选择框 */
|
||||
.ele-file-list-selector {
|
||||
display: none;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
background: $--file-list-selector-background;
|
||||
border: 1px solid $--file-list-selector-border-color;
|
||||
z-index: $--file-list-selector-z-index;
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.ele-file-item-context-wrap {
|
||||
position: absolute;
|
||||
top: calc(50% - 20px);
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 网格布局 */
|
||||
.ele-file-list {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
// header
|
||||
.ele-file-list-header {
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid $--border-color-lighter;
|
||||
box-sizing: border-box;
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
|
||||
// 全选框
|
||||
.ele-file-list-check-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.ele-file-list-check {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
.ele-file-list-body {
|
||||
padding: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
/* item */
|
||||
.ele-file-list-item {
|
||||
width: 110px;
|
||||
padding: 6px 4px;
|
||||
margin: 0 0 14px 14px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
// 图标
|
||||
.ele-file-list-item-icon {
|
||||
height: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
& > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
& > .ele-file-list-item-icon-image {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 标题
|
||||
.ele-file-list-item-title {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
box-sizing: border-box;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 复选框
|
||||
.ele-file-list-item-check {
|
||||
border-radius: 50%;
|
||||
background: $--color-white;
|
||||
transition: all 0.3s;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
opacity: 0;
|
||||
|
||||
.ele-file-icon-check {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&.checked {
|
||||
background: $--file-list-item-active-background;
|
||||
|
||||
.ele-file-list-item-check {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.checked {
|
||||
border-color: $--file-list-item-active-border-color;
|
||||
|
||||
.ele-file-list-item-check .ele-file-icon-check {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 表头排序图标 */
|
||||
.ele-file-list-table-item-sort {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
margin-left: 6px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border: 4px solid $--file-list-table-sort-color;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top-color: transparent;
|
||||
margin: -4px 0 4px 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&.ele-file-list-sort-asc:before {
|
||||
border-bottom-color: $--file-list-table-sort-active-color;
|
||||
}
|
||||
|
||||
&.ele-file-list-sort-desc:after {
|
||||
border-top-color: $--file-list-table-sort-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表格布局 */
|
||||
.ele-file-list-table {
|
||||
position: relative;
|
||||
|
||||
/* item */
|
||||
.ele-file-list-table-item {
|
||||
line-height: 44px;
|
||||
border-top: 1px solid $--border-color-lighter;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
|
||||
.ele-file-list-table-item-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-color: transparent;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid $--border-color-lighter;
|
||||
}
|
||||
|
||||
// 复选框
|
||||
.ele-file-list-table-item-check-group {
|
||||
width: 36px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
line-height: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 图标和标题
|
||||
.ele-file-list-table-item-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 110px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ele-file-list-table-item-icon {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-file-list-table-item-icon-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover + .ele-file-list-table-item-title {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-file-list-table-item-title {
|
||||
padding-left: 10px;
|
||||
transition: color 0.3s;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 工具按钮
|
||||
.ele-file-list-table-item-tool-group {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
display: none;
|
||||
|
||||
.ele-file-list-item-tool {
|
||||
font-size: 17px;
|
||||
margin-left: 16px;
|
||||
color: $--color-primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .ele-file-list-table-item-tool-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// 自定义列
|
||||
.ele-file-list-table-item-col {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// header
|
||||
.ele-file-list-table-header .ele-file-list-table-item {
|
||||
line-height: 36px;
|
||||
|
||||
.ele-file-list-table-item-name > div {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ele-file-list-table-item-name,
|
||||
.ele-file-list-table-item-col {
|
||||
transition: color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
.ele-file-list-table-body .ele-file-list-table-item {
|
||||
&:hover,
|
||||
&.active,
|
||||
&.checked {
|
||||
background: $--file-list-item-active-background;
|
||||
border-color: $--file-list-item-active-border-color;
|
||||
|
||||
& + .ele-file-list-table-item {
|
||||
border-top-color: $--file-list-item-active-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.ele-file-item-context-wrap {
|
||||
width: 28px;
|
||||
top: calc(50% - 12px);
|
||||
right: auto;
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
+520
@@ -0,0 +1,520 @@
|
||||
const icons = [
|
||||
{
|
||||
title: "\u7EBF\u6846",
|
||||
icons: [
|
||||
"el-icon-circle-plus-outline",
|
||||
"el-icon-remove-outline",
|
||||
"el-icon-circle-check",
|
||||
"el-icon-circle-close",
|
||||
"el-icon-_question",
|
||||
"el-icon-_info",
|
||||
"el-icon-warning-outline",
|
||||
"el-icon-_warning",
|
||||
"el-icon-_like",
|
||||
"el-icon-_dis",
|
||||
"el-icon-star-off",
|
||||
"el-icon-_heart",
|
||||
"el-icon-delete",
|
||||
"el-icon-user",
|
||||
"el-icon-coordinate",
|
||||
"el-icon-setting",
|
||||
"el-icon-_setting",
|
||||
"el-icon-more-outline",
|
||||
"el-icon-house",
|
||||
"el-icon-bell",
|
||||
"el-icon-chat-dot-square",
|
||||
"el-icon-_language",
|
||||
"el-icon-_network",
|
||||
"el-icon-_bug",
|
||||
"el-icon-monitor",
|
||||
"el-icon-data-line",
|
||||
"el-icon-brush",
|
||||
"el-icon-_integral",
|
||||
"el-icon-_menu",
|
||||
"el-icon-location-outline",
|
||||
"el-icon-collection",
|
||||
"el-icon-document",
|
||||
"el-icon-document-checked",
|
||||
"el-icon-document-delete",
|
||||
"el-icon-folder",
|
||||
"el-icon-folder-opened",
|
||||
"el-icon-picture-outline",
|
||||
"el-icon-camera",
|
||||
"el-icon-video-camera",
|
||||
"el-icon-phone-outline",
|
||||
"el-icon-suitcase",
|
||||
"el-icon-first-aid-kit",
|
||||
"el-icon-_backspace",
|
||||
"el-icon-wind-power",
|
||||
"el-icon-_wallet",
|
||||
"el-icon-_fly",
|
||||
"el-icon-_fire",
|
||||
"el-icon-_flash",
|
||||
"el-icon-help",
|
||||
"el-icon-_lamp",
|
||||
"el-icon-_school",
|
||||
"el-icon-goods",
|
||||
"el-icon-_shop",
|
||||
"el-icon-_table",
|
||||
"el-icon-_battery",
|
||||
"el-icon-receiving",
|
||||
"el-icon-_upload",
|
||||
"el-icon-sort",
|
||||
"el-icon-sort-up",
|
||||
"el-icon-sort-down",
|
||||
"el-icon-arrow-left",
|
||||
"el-icon-arrow-right",
|
||||
"el-icon-arrow-down",
|
||||
"el-icon-arrow-up",
|
||||
"el-icon-top-left",
|
||||
"el-icon-top-right",
|
||||
"el-icon-back",
|
||||
"el-icon-right",
|
||||
"el-icon-bottom",
|
||||
"el-icon-top",
|
||||
"el-icon-bottom-left",
|
||||
"el-icon-bottom-right",
|
||||
"el-icon-d-arrow-left",
|
||||
"el-icon-d-arrow-right",
|
||||
"el-icon-zoom-in",
|
||||
"el-icon-zoom-out",
|
||||
"el-icon-plus",
|
||||
"el-icon-minus",
|
||||
"el-icon-upload2",
|
||||
"el-icon-download",
|
||||
"el-icon-_download",
|
||||
"el-icon-finished",
|
||||
"el-icon-check",
|
||||
"el-icon-close",
|
||||
"el-icon-s-operation",
|
||||
"el-icon-set-up",
|
||||
"el-icon-switch-button",
|
||||
"el-icon-search",
|
||||
"el-icon-view",
|
||||
"el-icon-_eye-close",
|
||||
"el-icon-_more",
|
||||
"el-icon-_nav",
|
||||
"el-icon-s-fold",
|
||||
"el-icon-s-unfold",
|
||||
"el-icon-_fold",
|
||||
"el-icon-_unfold",
|
||||
"el-icon-refresh",
|
||||
"el-icon-refresh-right",
|
||||
"el-icon-refresh-left",
|
||||
"el-icon-loading",
|
||||
"el-icon-_loading",
|
||||
"el-icon-pie-chart",
|
||||
"el-icon-data-board",
|
||||
"el-icon-data-analysis",
|
||||
"el-icon-mobile-phone",
|
||||
"el-icon-mobile",
|
||||
"el-icon-_pad",
|
||||
"el-icon-mouse",
|
||||
"el-icon-_zoom-in",
|
||||
"el-icon-_zoom-out",
|
||||
"el-icon-_screen-full",
|
||||
"el-icon-_screen-restore",
|
||||
"el-icon-full-screen",
|
||||
"el-icon-_compress",
|
||||
"el-icon-copy-document",
|
||||
"el-icon-rank",
|
||||
"el-icon-crop",
|
||||
"el-icon-_user-group",
|
||||
"el-icon-_user-add",
|
||||
"el-icon-postcard",
|
||||
"el-icon-_terminal",
|
||||
"el-icon-_code",
|
||||
"el-icon-_var",
|
||||
"el-icon-_scan",
|
||||
"el-icon-_logout",
|
||||
"el-icon-_back-top",
|
||||
"el-icon-_back",
|
||||
"el-icon-_forward",
|
||||
"el-icon-_pushpin",
|
||||
"el-icon-_palette",
|
||||
"el-icon-_face-cry",
|
||||
"el-icon-_face-smile",
|
||||
"el-icon-lock",
|
||||
"el-icon-unlock",
|
||||
"el-icon-key",
|
||||
"el-icon-male",
|
||||
"el-icon-female",
|
||||
"el-icon-_transgender",
|
||||
"el-icon-time",
|
||||
"el-icon-alarm-clock",
|
||||
"el-icon-timer",
|
||||
"el-icon-odometer",
|
||||
"el-icon-stopwatch",
|
||||
"el-icon-discover",
|
||||
"el-icon-_template",
|
||||
"el-icon-_transfer",
|
||||
"el-icon-_component",
|
||||
"el-icon-_vercode",
|
||||
"el-icon-_prerogative",
|
||||
"el-icon-close-notification",
|
||||
"el-icon-chat-round",
|
||||
"el-icon-chat-line-round",
|
||||
"el-icon-chat-dot-round",
|
||||
"el-icon-chat-square",
|
||||
"el-icon-chat-line-square",
|
||||
"el-icon-message",
|
||||
"el-icon-edit",
|
||||
"el-icon-edit-outline",
|
||||
"el-icon-_feedback",
|
||||
"el-icon-_retrieve",
|
||||
"el-icon-_visa",
|
||||
"el-icon-tickets",
|
||||
"el-icon-notebook-1",
|
||||
"el-icon-notebook-2",
|
||||
"el-icon-reading",
|
||||
"el-icon-files",
|
||||
"el-icon-_save",
|
||||
"el-icon-document-copy",
|
||||
"el-icon-document-remove",
|
||||
"el-icon-document-add",
|
||||
"el-icon-folder-add",
|
||||
"el-icon-folder-remove",
|
||||
"el-icon-folder-delete",
|
||||
"el-icon-folder-checked",
|
||||
"el-icon-collection-tag",
|
||||
"el-icon-price-tag",
|
||||
"el-icon-discount",
|
||||
"el-icon-paperclip",
|
||||
"el-icon-link",
|
||||
"el-icon-connection",
|
||||
"el-icon-printer",
|
||||
"el-icon-takeaway-box",
|
||||
"el-icon-scissors",
|
||||
"el-icon-attract",
|
||||
"el-icon-c-scale-to-original",
|
||||
"el-icon-_straw",
|
||||
"el-icon-_surveying",
|
||||
"el-icon-_font-family",
|
||||
"el-icon-_font-size",
|
||||
"el-icon-date",
|
||||
"el-icon-_date-end",
|
||||
"el-icon-_date-start",
|
||||
"el-icon-_horn",
|
||||
"el-icon-_horn-close",
|
||||
"el-icon-_camera",
|
||||
"el-icon-headset",
|
||||
"el-icon-video-play",
|
||||
"el-icon-video-pause",
|
||||
"el-icon-_music",
|
||||
"el-icon-_video",
|
||||
"el-icon-film",
|
||||
"el-icon-mic",
|
||||
"el-icon-microphone",
|
||||
"el-icon-turn-off-microphone",
|
||||
"el-icon-_aite",
|
||||
"el-icon-_number",
|
||||
"el-icon-_percentage",
|
||||
"el-icon-_help",
|
||||
"el-icon-_usd",
|
||||
"el-icon-_rmb",
|
||||
"el-icon-_salary",
|
||||
"el-icon-_refund",
|
||||
"el-icon-_red-packet",
|
||||
"el-icon-shopping-cart-1",
|
||||
"el-icon-shopping-cart-2",
|
||||
"el-icon-shopping-cart-full",
|
||||
"el-icon-shopping-bag-1",
|
||||
"el-icon-shopping-bag-2",
|
||||
"el-icon-sold-out",
|
||||
"el-icon-sell",
|
||||
"el-icon-wallet",
|
||||
"el-icon-money",
|
||||
"el-icon-bank-card",
|
||||
"el-icon-_evaluate",
|
||||
"el-icon-_trending-up",
|
||||
"el-icon-_trending-down",
|
||||
"el-icon-_appointment",
|
||||
"el-icon-_appointment-ok",
|
||||
"el-icon-position",
|
||||
"el-icon-aim",
|
||||
"el-icon-map-location",
|
||||
"el-icon-location-information",
|
||||
"el-icon-add-location",
|
||||
"el-icon-delete-location",
|
||||
"el-icon-place",
|
||||
"el-icon-_programme",
|
||||
"el-icon-_infinite",
|
||||
"el-icon-service",
|
||||
"el-icon-suitcase-1",
|
||||
"el-icon-_brush",
|
||||
"el-icon-present",
|
||||
"el-icon-_target",
|
||||
"el-icon-_api",
|
||||
"el-icon-_timeline",
|
||||
"el-icon-_condition",
|
||||
"el-icon-_connecting-line",
|
||||
"el-icon-_temperature",
|
||||
"el-icon-picture-outline-round",
|
||||
"el-icon-_cols",
|
||||
"el-icon-_share",
|
||||
"el-icon-_keyboard",
|
||||
"el-icon-_filter",
|
||||
"el-icon-_database",
|
||||
"el-icon-coin",
|
||||
"el-icon-_mate",
|
||||
"el-icon-news",
|
||||
"el-icon-open",
|
||||
"el-icon-turn-off",
|
||||
"el-icon-_footprint",
|
||||
"el-icon-box",
|
||||
"el-icon-_hammer",
|
||||
"el-icon-magic-stick",
|
||||
"el-icon-_compute",
|
||||
"el-icon-_function",
|
||||
"el-icon-bangzhu",
|
||||
"el-icon-office-building",
|
||||
"el-icon-school",
|
||||
"el-icon-_snow"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "\u5B9E\u5FC3",
|
||||
icons: [
|
||||
"el-icon-circle-plus",
|
||||
"el-icon-remove",
|
||||
"el-icon-success",
|
||||
"el-icon-error",
|
||||
"el-icon-question",
|
||||
"el-icon-info",
|
||||
"el-icon-warning",
|
||||
"el-icon-_warning-solid",
|
||||
"el-icon-_like-solid",
|
||||
"el-icon-_dis-solid",
|
||||
"el-icon-star-on",
|
||||
"el-icon-_heart-solid",
|
||||
"el-icon-delete-solid",
|
||||
"el-icon-user-solid",
|
||||
"el-icon-s-check",
|
||||
"el-icon-s-tools",
|
||||
"el-icon-_setting-solid",
|
||||
"el-icon-more",
|
||||
"el-icon-s-home",
|
||||
"el-icon-message-solid",
|
||||
"el-icon-s-comment",
|
||||
"el-icon-_language-solid",
|
||||
"el-icon-_globe",
|
||||
"el-icon-_bug-solid",
|
||||
"el-icon-s-platform",
|
||||
"el-icon-s-marketing",
|
||||
"el-icon-s-open",
|
||||
"el-icon-_integral-solid",
|
||||
"el-icon-menu",
|
||||
"el-icon-location",
|
||||
"el-icon-s-management",
|
||||
"el-icon-s-order",
|
||||
"el-icon-s-claim",
|
||||
"el-icon-s-release",
|
||||
"el-icon-_folder",
|
||||
"el-icon-_folder-open",
|
||||
"el-icon-picture",
|
||||
"el-icon-camera-solid",
|
||||
"el-icon-video-camera-solid",
|
||||
"el-icon-phone",
|
||||
"el-icon-s-cooperation",
|
||||
"el-icon-_medkit-solid",
|
||||
"el-icon-_backspace-solid",
|
||||
"el-icon-s-flag",
|
||||
"el-icon-s-finance",
|
||||
"el-icon-_airplane",
|
||||
"el-icon-_fire-solid",
|
||||
"el-icon-_flash-solid",
|
||||
"el-icon-s-help",
|
||||
"el-icon-s-opportunity",
|
||||
"el-icon-_school-solid",
|
||||
"el-icon-s-goods",
|
||||
"el-icon-s-shop",
|
||||
"el-icon-s-grid",
|
||||
"el-icon-_battery-full",
|
||||
"el-icon-_retrieve-solid",
|
||||
"el-icon-upload",
|
||||
"el-icon-d-caret",
|
||||
"el-icon-caret-top",
|
||||
"el-icon-caret-bottom",
|
||||
"el-icon-caret-left",
|
||||
"el-icon-caret-right",
|
||||
"el-icon-s-promotion",
|
||||
"el-icon-s-ticket",
|
||||
"el-icon-share",
|
||||
"el-icon-s-custom",
|
||||
"el-icon-_lock-solid",
|
||||
"el-icon-_unlock-solid",
|
||||
"el-icon-_vercode-solid",
|
||||
"el-icon-_email-solid",
|
||||
"el-icon-_refund-solid",
|
||||
"el-icon-_money-solid",
|
||||
"el-icon-_brush-solid",
|
||||
"el-icon-_palette-solid",
|
||||
"el-icon-_tag-sloid",
|
||||
"el-icon-_puzzle-solid",
|
||||
"el-icon-_prerogative-solid",
|
||||
"el-icon-_prerogative2-solid",
|
||||
"el-icon-_service-solid",
|
||||
"el-icon-_evaluate-solid",
|
||||
"el-icon-_prerogative3-solid",
|
||||
"el-icon-_present-sloid",
|
||||
"el-icon-_red-packet-solid",
|
||||
"el-icon-_ticket-sloid",
|
||||
"el-icon-_user-group-solid",
|
||||
"el-icon-_camera2-solid",
|
||||
"el-icon-_shopping-cart-sloid",
|
||||
"el-icon-_time-solid",
|
||||
"el-icon-_news-solid",
|
||||
"el-icon-_database-solid",
|
||||
"el-icon-_postcard-solid",
|
||||
"el-icon-_bus-sloid",
|
||||
"el-icon-_car-sloid",
|
||||
"el-icon-_truck-sloid",
|
||||
"el-icon-_analysis-solid",
|
||||
"el-icon-_pie-chart-solid",
|
||||
"el-icon-_compute-solid",
|
||||
"el-icon-_live-solid",
|
||||
"el-icon-_printer-solid",
|
||||
"el-icon-_bank-card-solid",
|
||||
"el-icon-_target-sloid",
|
||||
"el-icon-_horn-sloid",
|
||||
"el-icon-_service",
|
||||
"el-icon-_cube",
|
||||
"el-icon-_sent",
|
||||
"el-icon-_love",
|
||||
"el-icon-_quote1",
|
||||
"el-icon-_quote2",
|
||||
"el-icon-s-data",
|
||||
"el-icon-_game-solid",
|
||||
"el-icon-_fingerprint",
|
||||
"el-icon-_barcode",
|
||||
"el-icon-_qrcode",
|
||||
"el-icon-_tree",
|
||||
"el-icon-_leaf",
|
||||
"el-icon-_flask",
|
||||
"el-icon-_nuclear",
|
||||
"el-icon-_recycle",
|
||||
"el-icon-_rocket",
|
||||
"el-icon-platform-eleme",
|
||||
"el-icon-eleme",
|
||||
"el-icon-_github",
|
||||
"el-icon-_gitee",
|
||||
"el-icon-_qq",
|
||||
"el-icon-_wechat",
|
||||
"el-icon-_wxpay",
|
||||
"el-icon-_alipay",
|
||||
"el-icon-_taobao",
|
||||
"el-icon-_weibo",
|
||||
"el-icon-_qqzone",
|
||||
"el-icon-_wxzone",
|
||||
"el-icon-_twitter",
|
||||
"el-icon-_trophy-solid",
|
||||
"el-icon-_zhihu",
|
||||
"el-icon-_ie",
|
||||
"el-icon-_chrome",
|
||||
"el-icon-_windows",
|
||||
"el-icon-_ios",
|
||||
"el-icon-_android",
|
||||
"el-icon-_bluetooth-solid",
|
||||
"el-icon-_bluetooth",
|
||||
"el-icon-_wifi",
|
||||
"el-icon-_rss",
|
||||
"el-icon-_signal-box",
|
||||
"el-icon-_signal",
|
||||
"el-icon-_usb",
|
||||
"el-icon-_command-ios",
|
||||
"el-icon-_walk",
|
||||
"el-icon-_man",
|
||||
"el-icon-_woman",
|
||||
"el-icon-_recommend"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "\u5176\u4ED6",
|
||||
icons: [
|
||||
"el-icon-_state1",
|
||||
"el-icon-_state2",
|
||||
"el-icon-_state3",
|
||||
"el-icon-_state4",
|
||||
"el-icon-_state5",
|
||||
"el-icon-_state6",
|
||||
"el-icon-_state7",
|
||||
"el-icon-_state8",
|
||||
"el-icon-_state9",
|
||||
"el-icon-_state10",
|
||||
"el-icon-_state11",
|
||||
"el-icon-_state12",
|
||||
"el-icon-thumb",
|
||||
"el-icon-guide",
|
||||
"el-icon-cpu",
|
||||
"el-icon-umbrella",
|
||||
"el-icon-smoking",
|
||||
"el-icon-no-smoking",
|
||||
"el-icon-bicycle",
|
||||
"el-icon-_car",
|
||||
"el-icon-_bus",
|
||||
"el-icon-truck",
|
||||
"el-icon-watch",
|
||||
"el-icon-watch-1",
|
||||
"el-icon-medal",
|
||||
"el-icon-medal-1",
|
||||
"el-icon-trophy",
|
||||
"el-icon-trophy-1",
|
||||
"el-icon-toilet-paper",
|
||||
"el-icon-table-lamp",
|
||||
"el-icon-ship",
|
||||
"el-icon-refrigerator",
|
||||
"el-icon-basketball",
|
||||
"el-icon-football",
|
||||
"el-icon-soccer",
|
||||
"el-icon-baseball",
|
||||
"el-icon-moon",
|
||||
"el-icon-moon-night",
|
||||
"el-icon-sunrise",
|
||||
"el-icon-sunrise-1",
|
||||
"el-icon-sunny",
|
||||
"el-icon-sunset",
|
||||
"el-icon-partly-cloudy",
|
||||
"el-icon-cloudy",
|
||||
"el-icon-cloudy-and-sunny",
|
||||
"el-icon-heavy-rain",
|
||||
"el-icon-light-rain",
|
||||
"el-icon-lightning",
|
||||
"el-icon-dish",
|
||||
"el-icon-dish-1",
|
||||
"el-icon-food",
|
||||
"el-icon-chicken",
|
||||
"el-icon-fork-spoon",
|
||||
"el-icon-knife-fork",
|
||||
"el-icon-burger",
|
||||
"el-icon-tableware",
|
||||
"el-icon-sugar",
|
||||
"el-icon-dessert",
|
||||
"el-icon-ice-cream",
|
||||
"el-icon-hot-water",
|
||||
"el-icon-water-cup",
|
||||
"el-icon-coffee-cup",
|
||||
"el-icon-cold-drink",
|
||||
"el-icon-goblet",
|
||||
"el-icon-goblet-full",
|
||||
"el-icon-goblet-square",
|
||||
"el-icon-goblet-square-full",
|
||||
"el-icon-grape",
|
||||
"el-icon-watermelon",
|
||||
"el-icon-cherry",
|
||||
"el-icon-apple",
|
||||
"el-icon-pear",
|
||||
"el-icon-orange",
|
||||
"el-icon-coffee",
|
||||
"el-icon-ice-tea",
|
||||
"el-icon-ice-drink",
|
||||
"el-icon-milk-tea",
|
||||
"el-icon-potato-strips",
|
||||
"el-icon-lollipop",
|
||||
"el-icon-ice-cream-square",
|
||||
"el-icon-ice-cream-round"
|
||||
]
|
||||
}
|
||||
];
|
||||
export {
|
||||
icons as default
|
||||
};
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
import { LicenseMixin } from "../utils/license-util";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleIconPicker",
|
||||
mixins: [Locale, LicenseMixin],
|
||||
props,
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
keywords: "",
|
||||
listShow: false,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDisabled() {
|
||||
return !this.authenticated || this.disabled;
|
||||
},
|
||||
pickerClass() {
|
||||
return [
|
||||
"ele-icon-picker",
|
||||
{ "ele-icon-picker-open": this.show },
|
||||
{ "ele-icon-picker-style2": this.theme === "style2" },
|
||||
{ "ele-icon-picker-style3": this.theme === "style3" }
|
||||
];
|
||||
},
|
||||
result() {
|
||||
if (!this.keywords) {
|
||||
return this.data;
|
||||
}
|
||||
let result = [];
|
||||
this.data.forEach((item) => {
|
||||
result.push({
|
||||
title: item.title,
|
||||
icons: item.icons.filter((d) => d.indexOf(this.keywords) !== -1)
|
||||
});
|
||||
});
|
||||
return result;
|
||||
},
|
||||
active: {
|
||||
get() {
|
||||
if (!this.result || this.result.length === 0) {
|
||||
return null;
|
||||
}
|
||||
for (let i = 0; i < this.result.length; i++)
|
||||
if (this.result[i].icons.length !== 0) {
|
||||
return this.result[i].title;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
set() {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choose(value) {
|
||||
this.show = false;
|
||||
this.$emit("input", value);
|
||||
this.$emit("change", value);
|
||||
},
|
||||
clear() {
|
||||
this.$emit("input", "");
|
||||
this.$emit("change", "");
|
||||
},
|
||||
setReadonly(e) {
|
||||
if (this.readonly) {
|
||||
e.target.readOnly = true;
|
||||
}
|
||||
},
|
||||
afterEnter() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.listShow = true;
|
||||
}, 50);
|
||||
},
|
||||
afterLeave() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.listShow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("el-popover", { attrs: { "width": _vm.width, "popper-class": "ele-icon-picker-popper", "placement": "bottom-start", "transition": "el-zoom-in-top", "disabled": _vm.isDisabled }, on: { "show": _vm.afterEnter, "hide": _vm.afterLeave }, scopedSlots: _vm._u([{ key: "reference", fn: function() {
|
||||
return [_c("div", { class: _vm.pickerClass }, [_vm._t("default", function() {
|
||||
return [_vm.theme === "style2" ? _c("el-input", { attrs: { "value": _vm.value, "placeholder": _vm.placeholder, "clearable": _vm.clearable, "disabled": _vm.isDisabled, "size": _vm.size }, on: { "focus": _vm.setReadonly, "clear": _vm.clear }, scopedSlots: _vm._u([{ key: "append", fn: function() {
|
||||
return [_c("i", { class: _vm.value })];
|
||||
}, proxy: true }], null, false, 4065409850) }) : _vm.theme === "style3" ? _c("el-input", { attrs: { "prefix-icon": _vm.value, "disabled": _vm.isDisabled, "size": _vm.size, "readonly": "readonly" }, scopedSlots: _vm._u([{ key: "append", fn: function() {
|
||||
return [_c("i", { staticClass: "el-icon-arrow-down" })];
|
||||
}, proxy: true }]) }) : _c("el-input", { attrs: { "value": _vm.value, "prefix-icon": _vm.value, "placeholder": _vm.placeholder, "clearable": _vm.clearable, "disabled": _vm.isDisabled, "size": _vm.size, "suffix-icon": "el-icon-arrow-down" }, on: { "focus": _vm.setReadonly, "clear": _vm.clear } })];
|
||||
}, { "show": _vm.show, "value": _vm.value })], 2)];
|
||||
}, proxy: true }], null, true), model: { value: _vm.show, callback: function($$v) {
|
||||
_vm.show = $$v;
|
||||
}, expression: "show" } }, [_c("el-tabs", { model: { value: _vm.active, callback: function($$v) {
|
||||
_vm.active = $$v;
|
||||
}, expression: "active" } }, _vm._l(_vm.result, function(item, index2) {
|
||||
return _c("el-tab-pane", { key: index2, attrs: { "label": item.title, "name": item.title } }, [_vm.listShow ? _c("el-scrollbar", { staticStyle: { "height": "225px" } }, [_c("el-row", _vm._l(item.icons, function(d, i) {
|
||||
return _c("el-col", { key: i, attrs: { "span": 4 } }, [_c("el-card", { staticClass: "ele-card-border", attrs: { "shadow": "hover", "title": d } }, [_c("div", { staticClass: "ele-icon-picker-item", on: { "click": function($event) {
|
||||
return _vm.choose(d);
|
||||
} } }, [_c("i", { class: d })])])], 1);
|
||||
}), 1)], 1) : _c("div", { staticStyle: { "height": "225px", "line-height": "225px", "text-align": "center" } }, [_vm._v(" " + _vm._s(_vm.t("el.select.loading")) + ".. ")])], 1);
|
||||
}), 1), _vm.search ? _c("el-input", { staticClass: "ele-icon-picker-search", attrs: { "placeholder": _vm.searchPlaceholder, "size": "mini", "suffix-icon": "el-icon-search" }, model: { value: _vm.keywords, callback: function($$v) {
|
||||
_vm.keywords = $$v;
|
||||
}, expression: "keywords" } }) : _vm._e()], 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
import icons from "./icons";
|
||||
const props = {
|
||||
value: String,
|
||||
placeholder: String,
|
||||
width: {
|
||||
type: Number,
|
||||
default: 380
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return icons;
|
||||
}
|
||||
},
|
||||
size: String,
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: Boolean,
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
theme: String,
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: "\u641C\u7D22..."
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
/* 弹出面板 */
|
||||
.ele-icon-picker-popper.el-popover {
|
||||
max-width: 100%;
|
||||
padding: 4px 3px 15px 15px;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper.el-popover .popper__arrow {
|
||||
left: 35px !important;
|
||||
}
|
||||
|
||||
/* 选项卡 */
|
||||
.ele-icon-picker-popper .el-tabs .el-tabs__item {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .el-tabs .el-tabs__header {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .el-tabs .el-tabs__header .el-tabs__nav-wrap:after {
|
||||
right: 12px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
.ele-icon-picker-popper .el-card {
|
||||
margin: 10px 12px 0 0;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-item {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
transition: transform 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-item:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
.ele-icon-picker-popper .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .el-scrollbar__wrap::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.ele-icon-picker-popper .ele-icon-picker-search {
|
||||
width: 110px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
/* 默认样式 */
|
||||
.ele-icon-picker .el-input:not(.is-disabled),
|
||||
.ele-icon-picker .el-input:not(.is-disabled) .el-input__inner,
|
||||
.ele-icon-picker .el-input-group__append {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-icon-picker .is-disabled > .el-input-group__append {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ele-icon-picker .el-input:not(.is-disabled) .el-input__prefix,
|
||||
.ele-icon-picker:not(.ele-icon-picker-style3)
|
||||
.el-input:not(.is-disabled)
|
||||
.el-input-group__append {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.ele-icon-picker .el-input__suffix .el-input__clear {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ele-icon-picker .el-input__suffix .el-input__clear:before {
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ele-icon-picker-open .el-input .el-input__suffix .el-icon-arrow-down,
|
||||
.ele-icon-picker-open.ele-icon-picker-style3
|
||||
.el-input-group__append
|
||||
.el-icon-arrow-down {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.ele-icon-picker .el-input__suffix .el-icon-arrow-down,
|
||||
.ele-icon-picker-style3 .el-input-group__append .el-icon-arrow-down {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
/* 样式二 */
|
||||
.ele-icon-picker-style2 .el-input-group__append {
|
||||
min-width: 39px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style2 .el-input__suffix {
|
||||
transition: transform 0s;
|
||||
}
|
||||
|
||||
/* 样式三 */
|
||||
.ele-icon-picker-style3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style3 .el-input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style3 .el-input__inner {
|
||||
width: 47px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style3 .el-input__prefix {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style3 .el-input-group__append {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style3 .el-input:not(.is-disabled) .el-input-group__append {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ele-icon-picker-style3
|
||||
.el-input:not(.is-disabled)
|
||||
.el-input-group__append:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
+116
@@ -0,0 +1,116 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "ImageItem",
|
||||
mixins: [Locale],
|
||||
props: {
|
||||
item: Object,
|
||||
disabled: Boolean,
|
||||
itemStyle: Object
|
||||
},
|
||||
emits: ["remove", "item-click", "retry"],
|
||||
computed: {
|
||||
statusText() {
|
||||
return {
|
||||
uploading: this.t("ele.upload.uploading"),
|
||||
exception: this.t("ele.upload.exception")
|
||||
}[this.item.status];
|
||||
},
|
||||
progressVisible() {
|
||||
return !!(this.item.status && ["uploading", "exception"].includes(this.item.status));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRemove() {
|
||||
this.$emit("remove");
|
||||
},
|
||||
onItemClick() {
|
||||
this.$emit("item-click");
|
||||
},
|
||||
onRetry() {
|
||||
this.$emit("retry");
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { class: ["ele-image-upload-item", { draggable: !_vm.disabled }], style: _vm.itemStyle, on: { "click": _vm.onItemClick } }, [_vm.item.url ? _c("el-image", { attrs: { "fit": "cover", "width": "100%", "height": "100%", "src": _vm.item.url, "title": _vm.item.name } }) : [_vm._t("image", function() {
|
||||
return [_c("div", { staticClass: "ele-image-upload-thumbnail", attrs: { "title": _vm.item.name } }, [_c("i", { staticClass: "el-icon-document" })])];
|
||||
}, { "item": _vm.item })], !_vm.disabled ? _c("div", { staticClass: "ele-image-upload-close", on: { "click": function($event) {
|
||||
$event.stopPropagation();
|
||||
return _vm.onRemove.apply(null, arguments);
|
||||
} } }, [_c("i", { staticClass: "el-icon-close" })]) : _vm._e(), _vm.progressVisible ? _c("div", { staticClass: "ele-image-upload-progress" }, [_vm._t("progress", function() {
|
||||
return [_c("div", { staticClass: "ele-image-upload-text" }, [_vm._v(_vm._s(_vm.statusText))]), _c("el-progress", { attrs: { "show-text": false, "percentage": _vm.item.progress, "status": { exception: "exception" }[_vm.item.status] } }), _vm.item.status === "exception" ? _c("div", { staticClass: "ele-image-upload-retry" }, [_c("i", { staticClass: "el-icon-refresh", attrs: { "title": _vm.t("ele.upload.retry") }, on: { "click": function($event) {
|
||||
$event.stopPropagation();
|
||||
return _vm.onRetry.apply(null, arguments);
|
||||
} } })]) : _vm._e()];
|
||||
}, { "item": _vm.item })], 2) : _c("div", { staticClass: "ele-image-upload-mask" })], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const imageItem = __component__.exports;
|
||||
export {
|
||||
imageItem as default
|
||||
};
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
import VueDraggable from "vuedraggable";
|
||||
import { LicenseMixin, UNAUTHORIZED_TIP } from "../utils/license-util";
|
||||
import ImageItem from "./components/image-item";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleImageUpload",
|
||||
components: { VueDraggable, ImageItem },
|
||||
mixins: [LicenseMixin],
|
||||
inject: {
|
||||
elForm: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
props,
|
||||
emits: ["input", "remove", "item-click", "upload"],
|
||||
data() {
|
||||
return {
|
||||
currentUrl: void 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDisabled() {
|
||||
var _a;
|
||||
return this.disabled || ((_a = this.elForm) == null ? void 0 : _a.disabled);
|
||||
},
|
||||
uploadVisible() {
|
||||
return !this.isDisabled && !(typeof this.limit === "number" && this.limit > 0 && this.value.length >= this.limit);
|
||||
},
|
||||
previewSrcList() {
|
||||
return this.preview ? this.value.filter((d) => !!d.url).map((d) => d.url) : null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateValue(value) {
|
||||
this.$emit("input", value);
|
||||
},
|
||||
onUpload(file) {
|
||||
if (!this.authenticated) {
|
||||
console.warn(UNAUTHORIZED_TIP);
|
||||
return false;
|
||||
}
|
||||
if (!this.uploadVisible) {
|
||||
return false;
|
||||
}
|
||||
if (typeof this.uploadHandler === "function") {
|
||||
this.uploadHandler(file);
|
||||
return false;
|
||||
}
|
||||
const item = {
|
||||
file,
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
progress: 0,
|
||||
status: void 0
|
||||
};
|
||||
if (file.type.startsWith("image")) {
|
||||
item.url = window.URL.createObjectURL(file);
|
||||
}
|
||||
if (typeof this.beforeUpload === "function") {
|
||||
Promise.resolve(this.beforeUpload(file)).then((result) => {
|
||||
if (result !== false) {
|
||||
this.uploadItem(item);
|
||||
}
|
||||
}).catch((e) => {
|
||||
if (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.uploadItem(item);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
uploadItem(item) {
|
||||
this.updateValue(this.value.concat([item]));
|
||||
if (this.autoUpload) {
|
||||
this.$emit("upload", item);
|
||||
}
|
||||
},
|
||||
onRemove(item) {
|
||||
if (typeof this.removeHandler === "function") {
|
||||
this.removeHandler(item);
|
||||
return;
|
||||
}
|
||||
if (typeof this.beforeRemove === "function") {
|
||||
Promise.resolve(this.beforeRemove(item)).then((result) => {
|
||||
if (result !== false) {
|
||||
this.removeItem(item);
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
} else {
|
||||
this.removeItem(item);
|
||||
}
|
||||
},
|
||||
removeItem(item) {
|
||||
this.updateValue(this.value.filter((d) => d !== item));
|
||||
this.$emit("remove", item);
|
||||
},
|
||||
onItemClick(item) {
|
||||
if (this.preview && item.url) {
|
||||
this.currentUrl = item.url;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.previewRef) {
|
||||
this.$refs.previewRef.showViewer = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$emit("item-click", item);
|
||||
},
|
||||
onRetry(item) {
|
||||
this.$emit("upload", item);
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
this.currentUrl = void 0;
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("VueDraggable", { class: [
|
||||
"ele-image-upload-list",
|
||||
{ "ele-image-upload-disabled": _vm.isDisabled }
|
||||
], attrs: { "value": _vm.value, "animation": 300, "draggable": ".draggable", "set-data": () => void 0 }, on: { "input": _vm.updateValue }, scopedSlots: _vm._u([{ key: "footer", fn: function() {
|
||||
return [_vm.uploadVisible ? _c("div", { staticClass: "ele-image-upload-item ele-image-upload-button", style: [_vm.itemStyle, _vm.buttonStyle] }, [_c("el-upload", { attrs: { "action": "", "drag": _vm.drag, "accept": _vm.accept, "multiple": _vm.multiple, "show-file-list": false, "before-upload": _vm.onUpload } }, [_vm._t("icon", function() {
|
||||
return [_c("i", { staticClass: "el-icon-plus ele-image-upload-icon" })];
|
||||
})], 2)], 1) : _vm._e(), _vm.currentUrl ? _c("el-image", { ref: "previewRef", staticStyle: { "display": "none" }, attrs: { "src": _vm.currentUrl, "preview-src-list": _vm.previewSrcList } }) : _vm._e()];
|
||||
}, proxy: true }], null, true) }, _vm._l(_vm.value, function(item) {
|
||||
return _c("ImageItem", { key: item.uid, attrs: { "item": item, "disabled": _vm.isDisabled, "item-style": _vm.itemStyle }, on: { "item-click": function($event) {
|
||||
return _vm.onItemClick(item);
|
||||
}, "remove": function($event) {
|
||||
return _vm.onRemove(item);
|
||||
}, "retry": function($event) {
|
||||
return _vm.onRetry(item);
|
||||
} }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) });
|
||||
}), 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
const props = {
|
||||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
disabled: Boolean,
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
itemStyle: Object,
|
||||
buttonStyle: Object,
|
||||
beforeUpload: Function,
|
||||
beforeRemove: Function,
|
||||
uploadHandler: Function,
|
||||
removeHandler: Function,
|
||||
autoUpload: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
limit: Number,
|
||||
multiple: Boolean,
|
||||
drag: Boolean,
|
||||
accept: {
|
||||
type: String,
|
||||
default: "image/png,image/jpeg"
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
.ele-image-upload-list {
|
||||
font-size: 0;
|
||||
|
||||
.ele-image-upload-item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
margin: 0 12px 12px 0;
|
||||
background: $--background-color-base;
|
||||
border: 1px dashed $--border-color-base;
|
||||
border-radius: $--border-radius-base;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
cursor: move;
|
||||
|
||||
.ele-image-upload-close {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
border-bottom-left-radius: 18px;
|
||||
border-top-right-radius: $--border-radius-base;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 1;
|
||||
padding: 2px 0 0 4px;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
background: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
& > .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > img {
|
||||
border-radius: $--border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-image-upload-thumbnail {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: $--color-text-secondary;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.ele-image-upload-mask,
|
||||
.ele-image-upload-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: $--border-radius-base;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(.sortable-chosen) .ele-image-upload-mask {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-image-upload-progress {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
padding: 0 6px;
|
||||
|
||||
& > .el-progress .el-progress-bar__outer {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ele-image-upload-retry {
|
||||
font-size: 18px;
|
||||
margin-top: 6px;
|
||||
|
||||
& > i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-image-upload-text {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-image-upload-button {
|
||||
text-align: center;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
& > .el-upload {
|
||||
height: 100%;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
& > .el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: $--border-radius-base;
|
||||
|
||||
&.is-dragover {
|
||||
outline: 1px dashed $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-image-upload-icon {
|
||||
font-size: 22px;
|
||||
color: $--color-text-secondary;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-image-upload-disabled .ele-image-upload-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
+486
@@ -0,0 +1,486 @@
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { LicenseMixin, UNAUTHORIZED_TIP } from "../../utils/license-util";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const ICON_CLASS = "ele-map-picker-main-icon";
|
||||
const _sfc_main = {
|
||||
name: "MapView",
|
||||
mixins: [LicenseMixin],
|
||||
props,
|
||||
emits: ["done", "map-done"],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
poiLoading: false,
|
||||
confirmLoading: false,
|
||||
data: [],
|
||||
suggestionData: [],
|
||||
centerIconClass: ["ele-map-picker-main-icon"],
|
||||
keywords: "",
|
||||
lastSuggestion: "",
|
||||
selectedSuggestion: null,
|
||||
isItemClickMove: false,
|
||||
mapIns: null,
|
||||
placeSearchIns: null,
|
||||
autoCompleteIns: null,
|
||||
centerMarker: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
searchPopClass() {
|
||||
const classes = ["ele-map-picker-search-pop"];
|
||||
if (this.searchType !== 0) {
|
||||
classes.push("ele-map-picker-hide");
|
||||
}
|
||||
return classes.join(" ");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderMap() {
|
||||
if (!this.mapKey || this.mapIns) {
|
||||
return;
|
||||
}
|
||||
AMapLoader.load({
|
||||
key: this.mapKey,
|
||||
version: this.mapVersion,
|
||||
plugins: ["AMap.PlaceSearch", "AMap.AutoComplete"]
|
||||
}).then((AMap) => {
|
||||
this.destroyAll();
|
||||
this.autoCompleteIns = new AMap.AutoComplete({
|
||||
city: this.suggestionCity
|
||||
});
|
||||
this.placeSearchIns = new AMap.PlaceSearch({
|
||||
type: this.poiType,
|
||||
pageSize: this.poiSize,
|
||||
pageIndex: 1
|
||||
});
|
||||
const mapStyle = (() => {
|
||||
if (this.mapStyle) {
|
||||
return this.mapStyle;
|
||||
}
|
||||
if (this.darkMode) {
|
||||
return "amap://styles/dark";
|
||||
}
|
||||
})();
|
||||
this.mapIns = new AMap.Map(this.$refs.mapRef, {
|
||||
zoom: this.zoom,
|
||||
center: this.center,
|
||||
resizeEnable: true,
|
||||
mapStyle
|
||||
});
|
||||
this.mapIns.on("complete", () => {
|
||||
this.loading = false;
|
||||
const { lng, lat } = this.mapIns.getCenter();
|
||||
this.searchPoi(lng, lat);
|
||||
});
|
||||
this.mapIns.on("moveend", () => {
|
||||
if (this.isItemClickMove) {
|
||||
this.isItemClickMove = false;
|
||||
} else if (this.searchType === 0) {
|
||||
this.bounceIcon();
|
||||
const { lng, lat } = this.mapIns.getCenter();
|
||||
this.searchPoi(lng, lat);
|
||||
}
|
||||
});
|
||||
this.centerMarker = new AMap.Marker({
|
||||
icon: new AMap.Icon({
|
||||
image: this.markerSrc,
|
||||
size: new AMap.Size(26, 36.5),
|
||||
imageSize: new AMap.Size(26, 36.5)
|
||||
}),
|
||||
offset: new AMap.Pixel(-13, -36.5)
|
||||
});
|
||||
this.$emit("map-done", this.mapIns);
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
onSearch(value, callback) {
|
||||
if (!value || this.lastSuggestion === value) {
|
||||
callback(this.suggestionData);
|
||||
return;
|
||||
}
|
||||
this.lastSuggestion = value;
|
||||
if (this.searchType !== 0) {
|
||||
this.poiLoading = true;
|
||||
}
|
||||
this.searchKeywords(value).then((result) => {
|
||||
if (this.searchType !== 0) {
|
||||
this.data = result;
|
||||
this.poiLoading = false;
|
||||
this.removeCenterMarker();
|
||||
callback([]);
|
||||
} else {
|
||||
this.suggestionData = result;
|
||||
callback(this.suggestionData);
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.poiLoading = false;
|
||||
});
|
||||
},
|
||||
onSelect(item) {
|
||||
if (!this.data.length || this.data[0].name !== item.name) {
|
||||
this.data = [
|
||||
{ ...item, selected: true },
|
||||
...this.data.map((d) => {
|
||||
return { ...d, selected: false };
|
||||
})
|
||||
];
|
||||
}
|
||||
this.setMapCenter(
|
||||
item.location.lng,
|
||||
item.location.lat,
|
||||
this.chooseZoom
|
||||
);
|
||||
this.selectedSuggestion = item;
|
||||
},
|
||||
onChoose(item) {
|
||||
this.isItemClickMove = true;
|
||||
this.data = this.data.map((d) => {
|
||||
return {
|
||||
...d,
|
||||
selected: d === item
|
||||
};
|
||||
});
|
||||
const { lng, lat } = item.location;
|
||||
this.setMapCenter(lng, lat, this.chooseZoom);
|
||||
if (this.searchType === 0) {
|
||||
this.bounceIcon();
|
||||
} else {
|
||||
this.showCenterMarker(lng, lat);
|
||||
}
|
||||
},
|
||||
onSuggestionBlur() {
|
||||
if (this.searchType === 0) {
|
||||
this.suggestionKeyWords = "";
|
||||
}
|
||||
},
|
||||
onDone() {
|
||||
if (!this.authenticated) {
|
||||
console.warn(UNAUTHORIZED_TIP);
|
||||
return;
|
||||
}
|
||||
const selected = this.getSelected();
|
||||
if (!selected) {
|
||||
if (this.forceChoose) {
|
||||
this.$message.error(this.tipMessage);
|
||||
return;
|
||||
}
|
||||
this.confirmLoading = true;
|
||||
this.getMapCenter(this.needCity).then((result) => {
|
||||
this.confirmLoading = false;
|
||||
this.$emit("done", result);
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.confirmLoading = false;
|
||||
this.$emit("done", {});
|
||||
});
|
||||
return;
|
||||
}
|
||||
const location = {
|
||||
...selected.location,
|
||||
name: selected.name,
|
||||
address: selected.address || ""
|
||||
};
|
||||
if (this.needCity) {
|
||||
this.confirmLoading = true;
|
||||
this.setMapCenter(location.lng, location.lat);
|
||||
this.getMapCenter(true).then(({ city }) => {
|
||||
this.confirmLoading = false;
|
||||
location.city = city;
|
||||
this.$emit("done", location);
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.confirmLoading = false;
|
||||
this.$emit("done", location);
|
||||
});
|
||||
} else {
|
||||
this.$emit("done", location);
|
||||
}
|
||||
},
|
||||
searchKeywords(value) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.autoCompleteIns) {
|
||||
reject(new Error("AutoComplete instance is null"));
|
||||
return;
|
||||
}
|
||||
this.autoCompleteIns.search(value, (_status, result) => {
|
||||
if (!(result == null ? void 0 : result.tips)) {
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
const data = result.tips.filter((d) => !!d.location).map((d, i) => {
|
||||
const label = `${d.name}(${d.district})`;
|
||||
return {
|
||||
...d,
|
||||
text: label,
|
||||
value: label,
|
||||
key: d.id || label + "-" + i,
|
||||
address: Array.isArray(d.address) ? d.address[0] : d.address
|
||||
};
|
||||
});
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
},
|
||||
searchPoi(lng, lat) {
|
||||
this.poiLoading = true;
|
||||
this.searchNearBy(lng, lat).then((result) => {
|
||||
if (this.selectedSuggestion) {
|
||||
if (result.length === 0 || result[0].name !== this.selectedSuggestion.name) {
|
||||
this.data = [
|
||||
{ ...this.selectedSuggestion, selected: true },
|
||||
...result
|
||||
];
|
||||
} else {
|
||||
this.data = result.map((d, i) => {
|
||||
return { ...d, selected: i === 0 };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.data = result;
|
||||
}
|
||||
this.poiLoading = false;
|
||||
}).catch((e) => {
|
||||
console.error(e);
|
||||
this.poiLoading = false;
|
||||
this.data = [];
|
||||
});
|
||||
},
|
||||
searchNearBy(lng, lat) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.placeSearchIns) {
|
||||
reject(new Error("PlaceSearch instance is null"));
|
||||
return;
|
||||
}
|
||||
this.placeSearchIns.searchNearBy(
|
||||
this.poiKeywords,
|
||||
[lng, lat],
|
||||
this.poiRadius,
|
||||
(status, result) => {
|
||||
var _a;
|
||||
if (status === "complete" && ((_a = result == null ? void 0 : result.poiList) == null ? void 0 : _a.pois)) {
|
||||
const data = result.poiList.pois.filter((d) => !!d.location).map((d, i) => {
|
||||
return { ...d, key: d.id || d.name + "-" + i };
|
||||
});
|
||||
resolve(data);
|
||||
} else if (status === "no_data") {
|
||||
resolve([]);
|
||||
} else {
|
||||
reject(new Error(status));
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
getSelected() {
|
||||
return this.data.find((d) => d.selected);
|
||||
},
|
||||
bounceIcon() {
|
||||
this.centerIconClass = [ICON_CLASS];
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.centerIconClass = [ICON_CLASS, "ele-map-picker-anim-bounce"];
|
||||
}, 0);
|
||||
});
|
||||
},
|
||||
removeCenterMarker() {
|
||||
if (this.centerMarker && this.mapIns) {
|
||||
this.mapIns.remove(this.centerMarker);
|
||||
}
|
||||
},
|
||||
showCenterMarker(lng, lat) {
|
||||
if (!this.centerMarker) {
|
||||
console.error("centerMarker is null");
|
||||
return;
|
||||
}
|
||||
if (!this.mapIns) {
|
||||
console.error("map instance is null");
|
||||
return;
|
||||
}
|
||||
if (lng != null && lat != null) {
|
||||
this.centerMarker.setPosition([lng, lat]);
|
||||
this.mapIns.add(this.centerMarker);
|
||||
} else {
|
||||
this.removeCenterMarker();
|
||||
}
|
||||
},
|
||||
setMapCenter(lng, lat, zoom) {
|
||||
if (this.mapIns && lng != null && lat != null) {
|
||||
if (zoom == null) {
|
||||
this.mapIns.setCenter([lng, lat]);
|
||||
} else {
|
||||
this.mapIns.setZoomAndCenter(zoom, [lng, lat]);
|
||||
}
|
||||
}
|
||||
},
|
||||
getMapCenter(needCity) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.mapIns) {
|
||||
reject(new Error("map instance is null"));
|
||||
return;
|
||||
}
|
||||
const result = this.mapIns.getCenter();
|
||||
if (needCity) {
|
||||
this.mapIns.getCity((city) => {
|
||||
result.city = city;
|
||||
resolve(result);
|
||||
});
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
},
|
||||
changeMapStyle(value) {
|
||||
if (this.mapIns) {
|
||||
if (typeof value === "boolean") {
|
||||
if (value) {
|
||||
this.mapIns.setMapStyle("amap://styles/dark");
|
||||
} else {
|
||||
this.mapIns.setMapStyle("amap://styles/normal");
|
||||
}
|
||||
} else if (value) {
|
||||
this.mapIns.setMapStyle(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyMap() {
|
||||
this.mapIns && this.mapIns.destroy();
|
||||
this.centerMarker = null;
|
||||
this.placeSearchIns = null;
|
||||
this.autoCompleteIns = null;
|
||||
this.mapIns = null;
|
||||
},
|
||||
destroyAll() {
|
||||
this.destroyMap();
|
||||
this.data = [];
|
||||
this.suggestionData = [];
|
||||
this.keywords = "";
|
||||
this.lastSuggestion = "";
|
||||
this.selectedSuggestion = null;
|
||||
this.isItemClickMove = false;
|
||||
},
|
||||
getMapIns() {
|
||||
return this.mapIns;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
darkMode(darkMode) {
|
||||
if (!this.mapStyle) {
|
||||
this.changeMapStyle(darkMode);
|
||||
}
|
||||
},
|
||||
mapStyle(mapStyle) {
|
||||
if (mapStyle) {
|
||||
this.changeMapStyle(mapStyle);
|
||||
}
|
||||
},
|
||||
searchType(searchType) {
|
||||
this.keywords = "";
|
||||
this.suggestionData = [];
|
||||
this.selectedSuggestion = null;
|
||||
this.lastSuggestion = "";
|
||||
this.removeCenterMarker();
|
||||
if (searchType === 1) {
|
||||
const selected = this.getSelected();
|
||||
if (selected) {
|
||||
const { lng, lat } = selected.location;
|
||||
this.showCenterMarker(lng, lat);
|
||||
}
|
||||
}
|
||||
},
|
||||
mapKey() {
|
||||
this.destroyAll();
|
||||
this.renderMap();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderMap();
|
||||
},
|
||||
unmounted() {
|
||||
this.destroyAll();
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { directives: [{ name: "loading", rawName: "v-loading", value: _vm.loading, expression: "loading" }] }, [_c("div", { staticClass: "ele-map-picker-header" }, [_c("div", { staticClass: "ele-map-picker-header-search" }, [_c("el-autocomplete", { attrs: { "size": "small", "fetch-suggestions": _vm.onSearch, "placeholder": _vm.searchPlaceholder || _vm.t("ele.map.placeholder"), "popper-class": _vm.searchPopClass }, on: { "select": _vm.onSelect, "blur": _vm.onSuggestionBlur }, scopedSlots: _vm._u([{ key: "suffix", fn: function() {
|
||||
return [_c("i", { staticClass: "el-icon-search el-input__icon" })];
|
||||
}, proxy: true }, { key: "default", fn: function({ item }) {
|
||||
return [_c("div", { staticClass: "ele-map-picker-suggestion-item", attrs: { "title": item.text } }, [_vm._v(" " + _vm._s(item.text) + " ")])];
|
||||
} }]), model: { value: _vm.keywords, callback: function($$v) {
|
||||
_vm.keywords = $$v;
|
||||
}, expression: "keywords" } })], 1), _c("el-button", { staticClass: "ele-btn-icon", attrs: { "size": "small", "type": "primary", "icon": "el-icon-check", "loading": _vm.confirmLoading }, on: { "click": _vm.onDone } }, [_vm._v(" " + _vm._s(_vm.okText) + " ")])], 1), _c("div", { staticClass: "ele-map-picker-body" }, [_c("div", { staticClass: "ele-map-picker-main" }, [_c("div", { ref: "mapRef", style: { height: _vm.height } }), _vm.searchType === 0 ? [_c("i", { staticClass: "ele-map-picker-main-plus el-icon-plus" }), _c("img", { class: _vm.centerIconClass, attrs: { "src": _vm.markerSrc, "alt": "" } })] : _vm._e()], 2), _c("div", { directives: [{ name: "loading", rawName: "v-loading", value: _vm.poiLoading, expression: "poiLoading" }], staticClass: "ele-map-picker-poi-list", style: { height: _vm.height } }, _vm._l(_vm.data, function(item) {
|
||||
return _c("div", { key: item.key, class: ["ele-map-picker-poi-item", { active: item.selected }], on: { "click": function($event) {
|
||||
return _vm.onChoose(item);
|
||||
} } }, [_c("i", { staticClass: "ele-map-picker-poi-item-icon el-icon-location-outline" }), _c("div", { staticClass: "ele-map-picker-poi-item-title" }, [_vm._v(_vm._s(item.name))]), item.address ? _c("div", { staticClass: "ele-map-picker-poi-item-address" }, [_vm._v(" " + _vm._s(item.address) + " ")]) : _vm._e(), _c("i", { staticClass: "el-icon-circle-check ele-map-picker-poi-item-check" })]);
|
||||
}), 0)])]);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const mapView = __component__.exports;
|
||||
export {
|
||||
mapView as default
|
||||
};
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
const props = {
|
||||
height: {
|
||||
type: String,
|
||||
default: "450px"
|
||||
},
|
||||
center: Array,
|
||||
zoom: {
|
||||
type: Number,
|
||||
default: 11
|
||||
},
|
||||
chooseZoom: {
|
||||
type: Number,
|
||||
default: 17
|
||||
},
|
||||
poiSize: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
poiType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
poiKeywords: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
poiRadius: {
|
||||
type: Number,
|
||||
default: 1e3
|
||||
},
|
||||
needCity: Boolean,
|
||||
forceChoose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
suggestionCity: {
|
||||
type: String,
|
||||
default: "\u5168\u56FD"
|
||||
},
|
||||
searchType: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
validator: (value) => {
|
||||
return [0, 1].includes(value);
|
||||
}
|
||||
},
|
||||
searchPlaceholder: String,
|
||||
markerSrc: {
|
||||
type: String,
|
||||
default: "https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png"
|
||||
},
|
||||
mapKey: String,
|
||||
mapVersion: {
|
||||
type: String,
|
||||
default: "2.0"
|
||||
},
|
||||
mapStyle: String,
|
||||
darkMode: Boolean,
|
||||
okText: String,
|
||||
tipMessage: String
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
import EleModal from "../ele-modal/index";
|
||||
import MapView from "./components/map-view";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleMapPicker",
|
||||
components: { EleModal, MapView },
|
||||
mixins: [Locale],
|
||||
props,
|
||||
inject: {
|
||||
proLayout: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ["done", "open", "closed", "update:show", "map-done"],
|
||||
data() {
|
||||
return {
|
||||
enable: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dialogClass() {
|
||||
const classes = ["ele-map-picker-dialog"];
|
||||
if (this.customClass) {
|
||||
classes.push(this.customClass);
|
||||
}
|
||||
if (this.styleResponsive) {
|
||||
classes.push("ele-map-picker-responsive");
|
||||
}
|
||||
return classes.join(" ");
|
||||
},
|
||||
aMapKey() {
|
||||
const globalConfig = this.$ELEADMIN;
|
||||
return this.mapKey || (globalConfig == null ? void 0 : globalConfig.mapKey);
|
||||
},
|
||||
styleResponsive() {
|
||||
var _a, _b;
|
||||
const proLayout = (_a = this.proLayout) != null ? _a : {};
|
||||
return (_b = proLayout.styleResponsive) != null ? _b : true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.enable = true;
|
||||
this.$emit("open");
|
||||
},
|
||||
onClosed() {
|
||||
if (this.destroyOnClose) {
|
||||
this.enable = false;
|
||||
}
|
||||
this.$emit("closed");
|
||||
},
|
||||
onDone(result) {
|
||||
this.$emit("done", result);
|
||||
},
|
||||
onMapDone(ins) {
|
||||
this.$emit("map-done", ins);
|
||||
},
|
||||
updateVisible(value) {
|
||||
this.$emit("update:show", value);
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("EleModal", { attrs: { "visible": _vm.show, "title": _vm.title || _vm.t("ele.map.title"), "width": _vm.width, "top": _vm.top, "modal": _vm.modal, "modal-append-to-body": _vm.modalAppendToBody, "append-to-body": _vm.appendToBody, "lock-scroll": _vm.lockScroll, "custom-class": _vm.dialogClass, "close-on-click-modal": _vm.closeOnClickModal, "close-on-press-escape": _vm.closeOnPressEscape, "show-close": _vm.showClose, "destroy-on-close": _vm.destroyOnClose, "movable": _vm.movable, "move-out": _vm.moveOut, "move-out-positive": _vm.moveOutPositive, "resizable": _vm.resizable, "maxable": _vm.maxable, "multiple": _vm.multiple, "fullscreen": _vm.fullscreen, "inner": _vm.inner, "reset-on-close": _vm.resetOnClose, "centered": _vm.centered, "mask-keep-alive": false }, on: { "open": _vm.onOpen, "closed": _vm.onClosed, "update:visible": _vm.updateVisible }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots).filter((s) => s !== "default"), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }, [_vm.enable ? _c("MapView", { ref: "mapRef", attrs: { "height": _vm.height, "center": _vm.center, "zoom": _vm.zoom, "chooseZoom": _vm.chooseZoom, "poiSize": _vm.poiSize, "poiType": _vm.poiType, "poiKeywords": _vm.poiKeywords, "poiRadius": _vm.poiRadius, "needCity": _vm.needCity, "forceChoose": _vm.forceChoose, "suggestionCity": _vm.suggestionCity, "searchType": _vm.searchType, "searchPlaceholder": _vm.searchPlaceholder || _vm.t("ele.map.placeholder"), "markerSrc": _vm.markerSrc, "mapKey": _vm.aMapKey, "mapVersion": _vm.mapVersion, "mapStyle": _vm.mapStyle, "darkMode": _vm.darkMode, "okText": _vm.okText || _vm.t("ele.map.ok"), "tipMessage": _vm.t("ele.map.message") }, on: { "done": _vm.onDone, "map-done": _vm.onMapDone } }) : _vm._e()], 1);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import { commonProps } from "../ele-modal/props";
|
||||
import props$1 from "./components/props";
|
||||
const props = {
|
||||
...commonProps,
|
||||
...props$1,
|
||||
show: Boolean,
|
||||
title: String,
|
||||
width: {
|
||||
type: String,
|
||||
default: "780px"
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+181
@@ -0,0 +1,181 @@
|
||||
.ele-map-picker-dialog .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ele-map-picker-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 顶部工具栏 */
|
||||
.ele-map-picker-header {
|
||||
display: flex;
|
||||
padding: 8px 18px;
|
||||
|
||||
.ele-map-picker-header-search {
|
||||
flex: 1;
|
||||
|
||||
.el-autocomplete {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主体区域 */
|
||||
.ele-map-picker-body {
|
||||
display: flex;
|
||||
border-top: 1px solid hsla(0, 0%, 60%, 0.15);
|
||||
|
||||
/* 地图容器 */
|
||||
.ele-map-picker-main {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-bottom-left-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.ele-map-picker-main-plus {
|
||||
color: #3b74ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.ele-map-picker-main-icon {
|
||||
width: 26px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
margin-left: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* poi 列表 */
|
||||
.ele-map-picker-poi-list {
|
||||
width: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* poi 列表 item */
|
||||
.ele-map-picker-poi-item {
|
||||
padding: 8px 30px 8px 44px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, 0.15);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
|
||||
.ele-map-picker-poi-item-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 14px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 20px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.ele-map-picker-poi-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ele-map-picker-poi-item-address {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ele-map-picker-poi-item-check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 7px;
|
||||
transform: translateY(-50%);
|
||||
color: #3b74ff;
|
||||
font-size: 16px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active .ele-map-picker-poi-item-check {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索建议列表 */
|
||||
.ele-map-picker-search-pop {
|
||||
max-width: 100%;
|
||||
width: 240px !important;
|
||||
|
||||
.el-autocomplete-suggestion__wrap {
|
||||
max-height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-map-picker-suggestion-item {
|
||||
padding: 8px 0;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 地图图标跳动动画 */
|
||||
.ele-map-picker-anim-bounce {
|
||||
animation: elePickerAnimBounce 500ms;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes elePickerAnimBounce {
|
||||
0%,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0%,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕适应 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-map-picker-responsive {
|
||||
&.ele-map-picker-dialog {
|
||||
margin: 0 !important;
|
||||
width: 100vw !important;
|
||||
max-width: unset !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ele-map-picker-body {
|
||||
display: block;
|
||||
|
||||
.ele-map-picker-main > div {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.ele-map-picker-poi-list {
|
||||
width: auto;
|
||||
height: calc(100vh - 353px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+354
@@ -0,0 +1,354 @@
|
||||
import { LicenseMixin } from "../utils/license-util";
|
||||
import { screenWidth } from "../utils/core";
|
||||
import { resizableClass, multipleClass, fullscreenClass, closedClass, hideClass, innerClass, innerMaskClass, collapseClass, navCollapseClass, bodyFullscreenClass, showTabsClass, sideMixClass, sideMixSingleClass, layoutTopClass, contentFullscreenClass, mobileClass, centeredClass, bindMovableEvent, bindResizableEvent, bindAutoSetTopEvent, getModalContainer, resetModalStyle, setInitPosition, setModalTop, responsiveClass, movableClass, moveOutClass, moveOutPositiveClass } from "./util";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleModal",
|
||||
mixins: [LicenseMixin],
|
||||
props,
|
||||
inject: {
|
||||
proLayout: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
var _a;
|
||||
return {
|
||||
mobile: screenWidth() < 768,
|
||||
isFullscreen: (_a = this.fullscreen) != null ? _a : false,
|
||||
isActivated: true,
|
||||
parentEl: null,
|
||||
modalVisible: this.visible,
|
||||
renderBody: this.destroyOnClose && !this.visible ? false : true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
layoutData() {
|
||||
var _a;
|
||||
return (_a = this.proLayout) != null ? _a : {};
|
||||
},
|
||||
isMobile() {
|
||||
var _a;
|
||||
return (_a = this.layoutData.isMobile) != null ? _a : this.mobile;
|
||||
},
|
||||
collapse() {
|
||||
return this.layoutData.collapse;
|
||||
},
|
||||
sideNavCollapse() {
|
||||
return this.layoutData.sideNavCollapse;
|
||||
},
|
||||
isTopMenu() {
|
||||
return this.layoutData.isTopMenu;
|
||||
},
|
||||
isMixSideMenu() {
|
||||
return this.layoutData.isMixSideMenu;
|
||||
},
|
||||
bodyFullscreen() {
|
||||
return this.layoutData.bodyFullscreen;
|
||||
},
|
||||
contentFullscreen() {
|
||||
return this.layoutData.contentFullscreen;
|
||||
},
|
||||
showTabs() {
|
||||
return this.layoutData.showTabs;
|
||||
},
|
||||
haveSideMenuData() {
|
||||
return this.layoutData.haveSideMenuData;
|
||||
},
|
||||
styleResponsive() {
|
||||
var _a;
|
||||
return (_a = this.layoutData.styleResponsive) != null ? _a : true;
|
||||
},
|
||||
modalClass() {
|
||||
const classes = [];
|
||||
if (this.styleResponsive) {
|
||||
classes.push(responsiveClass);
|
||||
}
|
||||
if (!this.isMobile) {
|
||||
if (this.movable) {
|
||||
classes.push(movableClass);
|
||||
}
|
||||
if (this.moveOut) {
|
||||
classes.push(moveOutClass);
|
||||
}
|
||||
if (this.moveOutPositive) {
|
||||
classes.push(moveOutPositiveClass);
|
||||
}
|
||||
if (this.resizable) {
|
||||
classes.push(resizableClass);
|
||||
if (typeof this.resizable === "string") {
|
||||
classes.push(resizableClass + "-" + this.resizable);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.multiple) {
|
||||
classes.push(multipleClass);
|
||||
}
|
||||
if (this.isFullscreen) {
|
||||
classes.push(fullscreenClass);
|
||||
}
|
||||
if (!this.visible) {
|
||||
classes.push(closedClass);
|
||||
}
|
||||
if (!this.isActivated && this.visible) {
|
||||
classes.push(hideClass);
|
||||
}
|
||||
if (this.inner) {
|
||||
classes.push(innerClass);
|
||||
if (this.modal) {
|
||||
classes.push(innerMaskClass);
|
||||
}
|
||||
if (this.collapse && !this.isTopMenu) {
|
||||
classes.push(collapseClass);
|
||||
}
|
||||
if (this.sideNavCollapse && this.isMixSideMenu && !this.isTopMenu) {
|
||||
classes.push(navCollapseClass);
|
||||
}
|
||||
if (this.bodyFullscreen) {
|
||||
classes.push(bodyFullscreenClass);
|
||||
}
|
||||
if (this.showTabs) {
|
||||
classes.push(showTabsClass);
|
||||
}
|
||||
if (this.isMixSideMenu && !this.isTopMenu) {
|
||||
classes.push(sideMixClass);
|
||||
if (!this.haveSideMenuData) {
|
||||
classes.push(sideMixSingleClass);
|
||||
}
|
||||
}
|
||||
if (this.isTopMenu) {
|
||||
classes.push(layoutTopClass);
|
||||
}
|
||||
if (this.bodyFullscreen && this.contentFullscreen) {
|
||||
classes.push(contentFullscreenClass);
|
||||
}
|
||||
if (this.isMobile) {
|
||||
classes.push(mobileClass);
|
||||
}
|
||||
}
|
||||
if (this.centered) {
|
||||
classes.push(centeredClass);
|
||||
}
|
||||
return classes.join(" ");
|
||||
},
|
||||
dialogStyle() {
|
||||
const width = typeof this.width === "number" ? `${this.width / 2}px` : `calc(${this.width} / 2)`;
|
||||
return {
|
||||
"--modal-centered-left": `calc(50% - ${width})`
|
||||
};
|
||||
},
|
||||
maxIconClass() {
|
||||
return [
|
||||
"el-dialog__close",
|
||||
"el-icon",
|
||||
this.isFullscreen ? "el-icon-_compress" : "el-icon-full-screen"
|
||||
].join(" ");
|
||||
},
|
||||
modalMask() {
|
||||
if (this.multiple || this.inner) {
|
||||
return false;
|
||||
}
|
||||
return this.modal;
|
||||
},
|
||||
dialogAppendToBody() {
|
||||
return this.multiple ? false : this.appendToBody;
|
||||
},
|
||||
maskClosable() {
|
||||
return this.multiple ? false : this.closeOnClickModal;
|
||||
},
|
||||
modalTop() {
|
||||
return this.centered ? "0px" : this.top;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const wrapEl = this.getWrapEl();
|
||||
if (this.authenticated) {
|
||||
bindMovableEvent(wrapEl);
|
||||
bindResizableEvent(wrapEl);
|
||||
bindAutoSetTopEvent(wrapEl);
|
||||
}
|
||||
this.parentEl = wrapEl.parentNode;
|
||||
this.updateModalContainer();
|
||||
},
|
||||
methods: {
|
||||
getWrapEl() {
|
||||
return this.$refs.modal.$el;
|
||||
},
|
||||
updateVisible(visible) {
|
||||
this.$emit("update:visible", visible);
|
||||
},
|
||||
onOpen() {
|
||||
if (this.destroyOnClose && !this.renderBody) {
|
||||
this.renderBody = true;
|
||||
}
|
||||
this.$emit("open");
|
||||
},
|
||||
onOpened() {
|
||||
this.$emit("opened");
|
||||
},
|
||||
onClose() {
|
||||
if (this.visible === this.modalVisible) {
|
||||
this.$emit("close");
|
||||
}
|
||||
},
|
||||
onClosed() {
|
||||
if (this.destroyOnClose && this.renderBody) {
|
||||
this.renderBody = false;
|
||||
}
|
||||
if (this.visible === this.modalVisible) {
|
||||
this.$emit("closed");
|
||||
}
|
||||
},
|
||||
toggleFullscreen(fullscreen) {
|
||||
if (typeof fullscreen === "undefined") {
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
} else {
|
||||
this.isFullscreen = fullscreen;
|
||||
}
|
||||
this.$emit("update:fullscreen", this.isFullscreen);
|
||||
},
|
||||
updateModalContainer() {
|
||||
const wrapEl = this.getWrapEl();
|
||||
if (this.multiple) {
|
||||
getModalContainer().appendChild(wrapEl);
|
||||
}
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.isActivated = true;
|
||||
this.modalVisible = this.visible;
|
||||
},
|
||||
deactivated() {
|
||||
this.isActivated = false;
|
||||
if (this.modalMask) {
|
||||
if (!this.maskKeepAlive) {
|
||||
this.updateVisible(false);
|
||||
} else if (!this.destroyOnClose) {
|
||||
this.modalVisible = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fullscreen(fullscreen) {
|
||||
if (this.isFullscreen !== fullscreen) {
|
||||
this.isFullscreen = fullscreen;
|
||||
}
|
||||
},
|
||||
visible(visible) {
|
||||
this.modalVisible = visible;
|
||||
if (visible) {
|
||||
this.$nextTick(() => {
|
||||
const wrapEl = this.getWrapEl();
|
||||
if (this.resetOnClose) {
|
||||
resetModalStyle(wrapEl, this.width, this.modalTop);
|
||||
}
|
||||
if (this.position) {
|
||||
setInitPosition(
|
||||
wrapEl,
|
||||
this.position,
|
||||
this.resizable,
|
||||
this.moveOut,
|
||||
this.resetOnClose
|
||||
);
|
||||
}
|
||||
setModalTop(wrapEl);
|
||||
});
|
||||
if (this.resetOnClose || this.destroyOnClose) {
|
||||
this.isFullscreen = this.fullscreen;
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyOnClose(destroyOnClose) {
|
||||
if (destroyOnClose) {
|
||||
if (!this.visible && this.renderBody) {
|
||||
this.renderBody = false;
|
||||
}
|
||||
} else if (!this.renderBody) {
|
||||
this.renderBody = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("el-dialog", { ref: "modal", class: _vm.modalClass, style: _vm.dialogStyle, attrs: { "visible": _vm.modalVisible, "title": _vm.title, "width": _vm.width, "top": _vm.modalTop, "modal": _vm.modalMask, "modal-append-to-body": _vm.modalAppendToBody, "append-to-body": _vm.dialogAppendToBody, "lock-scroll": _vm.lockScroll, "custom-class": _vm.customClass, "close-on-click-modal": _vm.maskClosable, "close-on-press-escape": _vm.closeOnPressEscape, "show-close": _vm.showClose, "before-close": _vm.beforeClose, "center": _vm.center, "destroy-on-close": false }, on: { "update:visible": _vm.updateVisible, "open": _vm.onOpen, "opened": _vm.onOpened, "close": _vm.onClose, "closed": _vm.onClosed }, scopedSlots: _vm._u([_vm.renderBody ? { key: "title", fn: function() {
|
||||
return [_vm._t("title", function() {
|
||||
return [_c("span", { staticClass: "el-dialog__title" }, [_vm._v(_vm._s(_vm.title))])];
|
||||
}), _vm.maxable ? _c("button", { staticClass: "el-dialog__headerbtn ele-modal-icon-fullscreen", attrs: { "type": "button" }, on: { "click": function($event) {
|
||||
return _vm.toggleFullscreen();
|
||||
} } }, [_vm._t("maxIcon", function() {
|
||||
return [_c("i", { class: _vm.maxIconClass })];
|
||||
}, { "fullscreen": _vm.isFullscreen })], 2) : _vm._e()];
|
||||
}, proxy: true } : null, _vm.renderBody && _vm.$scopedSlots.footer ? { key: "footer", fn: function() {
|
||||
return [_vm._t("footer")];
|
||||
}, proxy: true } : null], null, true) }, [_vm.renderBody && _vm.$scopedSlots.default ? [_vm._t("default")] : _vm._e()], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
const proProps = {
|
||||
movable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
moveOut: Boolean,
|
||||
moveOutPositive: Boolean,
|
||||
resizable: [Boolean, String],
|
||||
maxable: Boolean,
|
||||
multiple: Boolean,
|
||||
fullscreen: Boolean,
|
||||
inner: Boolean,
|
||||
resetOnClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
centered: Boolean,
|
||||
maskKeepAlive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
position: [String, Object]
|
||||
};
|
||||
const elCommonProps = {
|
||||
top: {
|
||||
type: String,
|
||||
default: "15vh"
|
||||
},
|
||||
modal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
modalAppendToBody: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
appendToBody: Boolean,
|
||||
lockScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
customClass: String,
|
||||
closeOnClickModal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnPressEscape: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
destroyOnClose: Boolean
|
||||
};
|
||||
const elProps = {
|
||||
...elCommonProps,
|
||||
visible: Boolean,
|
||||
title: String,
|
||||
width: {
|
||||
type: String,
|
||||
default: "50%"
|
||||
},
|
||||
beforeClose: Function,
|
||||
center: Boolean
|
||||
};
|
||||
const commonProps = {
|
||||
...elCommonProps,
|
||||
...proProps
|
||||
};
|
||||
const props = {
|
||||
...elProps,
|
||||
...proProps
|
||||
};
|
||||
export {
|
||||
commonProps,
|
||||
props as default,
|
||||
elCommonProps,
|
||||
elProps,
|
||||
proProps
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+249
@@ -0,0 +1,249 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* 支持拖拽 */
|
||||
.ele-modal-movable > .el-dialog > .el-dialog__header {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 支持拉伸 */
|
||||
.ele-modal-resizable > .el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: se-resize;
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
transparent 45%,
|
||||
$--color-text-placeholder 0,
|
||||
$--color-text-placeholder 55%,
|
||||
transparent 0,
|
||||
transparent 75%,
|
||||
$--color-text-placeholder 0,
|
||||
$--color-text-placeholder 85%,
|
||||
transparent 0
|
||||
);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-modal-resizable-horizontal > .el-dialog:after {
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.ele-modal-resizable-vertical > .el-dialog:after {
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.ele-modal-resizable,
|
||||
.ele-modal-wrap-fullscreen {
|
||||
& > .el-dialog {
|
||||
& > .el-dialog__header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > .el-dialog__body {
|
||||
flex: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 全屏 */
|
||||
.ele-modal-wrap-fullscreen > .el-dialog {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: inherit !important;
|
||||
min-width: inherit !important;
|
||||
max-height: inherit !important;
|
||||
min-height: inherit !important;
|
||||
border-radius: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
margin: 0 !important;
|
||||
border: 1px solid $--border-color-lighter;
|
||||
|
||||
& > .el-dialog__header {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 支持打开多个 */
|
||||
.ele-modal-container {
|
||||
position: relative;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.ele-modal-multiple {
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 小屏幕适配 */
|
||||
.ele-modal-responsive > .el-dialog {
|
||||
max-width: calc(100vw - 30px);
|
||||
}
|
||||
|
||||
/* 限制在内部区域, 适配各种布局状态 */
|
||||
.ele-modal-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ele-modal-inner {
|
||||
top: $--header-height;
|
||||
left: $--sidebar-width;
|
||||
transition: $--sidebar-transition;
|
||||
}
|
||||
|
||||
.ele-modal-inner-mask {
|
||||
background: $--layout-mask-bg;
|
||||
}
|
||||
|
||||
.ele-state-show-tabs.ele-modal-inner {
|
||||
top: calc(#{$--header-height} + #{$--tabs-height});
|
||||
}
|
||||
|
||||
.ele-state-collapse.ele-modal-inner {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
|
||||
.ele-state-side-mix.ele-modal-inner {
|
||||
left: calc(
|
||||
#{$--sidebar-nav-width} + #{$--sidebar-width} - #{$--sidebar-collapse-width}
|
||||
);
|
||||
|
||||
&.ele-state-collapse {
|
||||
left: $--sidebar-nav-width;
|
||||
}
|
||||
|
||||
&.ele-state-side-mix-single {
|
||||
left: $--sidebar-nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-state-nav-collapse.ele-modal-inner {
|
||||
left: $--sidebar-width;
|
||||
|
||||
&.ele-state-side-mix-single {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
|
||||
&.ele-state-collapse {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-state-layout-top.ele-modal-inner {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ele-state-body-fullscreen.ele-modal-inner {
|
||||
top: $--tabs-height;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.ele-state-content-fullscreen.ele-modal-inner {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.ele-state-mobile.ele-modal-inner {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
/* 动画修改 */
|
||||
.ele-modal-inner.dialog-fade-enter-active {
|
||||
animation: none;
|
||||
|
||||
& > .el-dialog {
|
||||
animation: dialog-fade-in 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-modal-inner.dialog-fade-leave-active {
|
||||
animation: none;
|
||||
|
||||
& > .el-dialog {
|
||||
animation: dialog-fade-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 垂直居中 */
|
||||
.ele-modal-centered:not(.ele-modal-wrap-fullscreen) {
|
||||
& > .el-dialog {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
left: var(--modal-centered-left);
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
/* 兼容旧版本指令方式使用 */
|
||||
[ele-movable].el-dialog__wrapper > .el-dialog > .el-dialog__header {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
[ele-resizable].el-dialog__wrapper > .el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > .el-dialog__header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > .el-dialog__body {
|
||||
flex: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-dialog-wrap-fullscreen > .el-dialog {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
max-width: inherit;
|
||||
border-radius: 0;
|
||||
|
||||
& > .el-dialog__header {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
+332
@@ -0,0 +1,332 @@
|
||||
const containerClass = "ele-modal-container";
|
||||
const closedClass = "ele-modal-closed";
|
||||
const movableClass = "ele-modal-movable";
|
||||
const moveOutClass = "ele-modal-move-out";
|
||||
const moveOutPositiveClass = "ele-modal-move-out-positive";
|
||||
const resizableClass = "ele-modal-resizable";
|
||||
const resizableHorizontalClass = "ele-modal-resizable-horizontal";
|
||||
const resizableVerticalClass = "ele-modal-resizable-vertical";
|
||||
const multipleClass = "ele-modal-multiple";
|
||||
const fullscreenClass = "ele-modal-wrap-fullscreen";
|
||||
const innerClass = "ele-modal-inner";
|
||||
const innerMaskClass = "ele-modal-inner-mask";
|
||||
const hideClass = "ele-modal-hide";
|
||||
const centeredClass = "ele-modal-centered";
|
||||
const responsiveClass = "ele-modal-responsive";
|
||||
const collapseClass = "ele-state-collapse";
|
||||
const navCollapseClass = "ele-state-nav-collapse";
|
||||
const bodyFullscreenClass = "ele-state-body-fullscreen";
|
||||
const showTabsClass = "ele-state-show-tabs";
|
||||
const sideMixClass = "ele-state-side-mix";
|
||||
const sideMixSingleClass = "ele-state-side-mix-single";
|
||||
const layoutTopClass = "ele-state-layout-top";
|
||||
const contentFullscreenClass = "ele-state-content-fullscreen";
|
||||
const mobileClass = "ele-state-mobile";
|
||||
const wrapClass = "el-dialog__wrapper";
|
||||
const modalClass = "el-dialog";
|
||||
const headerClass = "el-dialog__header";
|
||||
const titleClass = "el-dialog__title";
|
||||
const modalDefaultZIndex = 1e3;
|
||||
const defaultMinWidth = 260;
|
||||
const defaultMinHeight = 160;
|
||||
function initModalStyle(modalEl, resizable) {
|
||||
modalEl.style.top = modalEl.offsetTop + "px";
|
||||
modalEl.style.left = modalEl.offsetLeft + "px";
|
||||
modalEl.style.bottom = "auto";
|
||||
modalEl.style.right = "auto";
|
||||
modalEl.style.margin = "0";
|
||||
modalEl.style.position = "relative";
|
||||
modalEl.style.display = resizable ? "inline-flex" : "inline-block";
|
||||
modalEl.style.verticalAlign = "top";
|
||||
}
|
||||
function getCurrentStyle(el) {
|
||||
return el["currentStyle"] || window.getComputedStyle(el, null) || {};
|
||||
}
|
||||
function getStyleString(obj) {
|
||||
const keys = Object.keys(obj);
|
||||
if (!keys.length) {
|
||||
return "";
|
||||
}
|
||||
return keys.map((key) => key + ":" + obj[key]).join(";") + ";";
|
||||
}
|
||||
function getModalContainer() {
|
||||
const elem = document.querySelector("." + containerClass);
|
||||
if (elem) {
|
||||
return elem;
|
||||
}
|
||||
const el = document.createElement("div");
|
||||
el.classList.add(containerClass);
|
||||
document.body.appendChild(el);
|
||||
return el;
|
||||
}
|
||||
function getVisibleModalWrap() {
|
||||
return getModalContainer().querySelectorAll(
|
||||
`.${wrapClass}:not(.${closedClass})`
|
||||
);
|
||||
}
|
||||
function getModalMaxIndex(el) {
|
||||
const wrapEl = getVisibleModalWrap();
|
||||
let maxIndex = 0;
|
||||
if (wrapEl) {
|
||||
for (let i = 0; i < wrapEl.length; i++) {
|
||||
const index = Number(
|
||||
getCurrentStyle(wrapEl[i]).zIndex || modalDefaultZIndex
|
||||
);
|
||||
if (index >= maxIndex) {
|
||||
if (el) {
|
||||
if (wrapEl[i] !== el) {
|
||||
maxIndex = index + 1;
|
||||
}
|
||||
} else {
|
||||
maxIndex = index + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return maxIndex || modalDefaultZIndex;
|
||||
}
|
||||
function bindMovableEvent(wrapEl) {
|
||||
wrapEl.addEventListener("mousedown", (event) => {
|
||||
const wrapClass2 = wrapEl == null ? void 0 : wrapEl.classList;
|
||||
if (wrapClass2 == null ? void 0 : wrapClass2.contains(fullscreenClass)) {
|
||||
return;
|
||||
}
|
||||
const moveOut = wrapClass2 == null ? void 0 : wrapClass2.contains(moveOutClass);
|
||||
const moveOutPositive = wrapClass2 == null ? void 0 : wrapClass2.contains(moveOutPositiveClass);
|
||||
const multiple = wrapClass2 == null ? void 0 : wrapClass2.contains(multipleClass);
|
||||
if (!(wrapClass2 == null ? void 0 : wrapClass2.contains(movableClass)) && !moveOut) {
|
||||
return;
|
||||
}
|
||||
const headerEl = wrapEl.querySelector("." + headerClass);
|
||||
const titleEl = headerEl.querySelector("." + titleClass);
|
||||
if (event.target !== headerEl && event.target !== titleEl) {
|
||||
return;
|
||||
}
|
||||
wrapEl.style.userSelect = "none";
|
||||
const dialogEl = wrapEl.querySelector("." + modalClass);
|
||||
initModalStyle(dialogEl, wrapClass2 == null ? void 0 : wrapClass2.contains(resizableClass));
|
||||
const downX = event.clientX;
|
||||
const downY = event.clientY;
|
||||
const downOL = dialogEl.offsetLeft;
|
||||
const downOT = dialogEl.offsetTop;
|
||||
const mousemoveFn = function(e) {
|
||||
let l = e.clientX - downX + downOL;
|
||||
let t = e.clientY - downY + downOT;
|
||||
if (!moveOut) {
|
||||
const limitL = wrapEl.clientWidth - dialogEl.clientWidth - 1;
|
||||
if (l < 0) {
|
||||
l = 0;
|
||||
} else if (l > limitL) {
|
||||
l = limitL;
|
||||
}
|
||||
const limitT = wrapEl.clientHeight - dialogEl.clientHeight - 2;
|
||||
if (t > limitT) {
|
||||
t = limitT;
|
||||
}
|
||||
if (t < 0) {
|
||||
t = 0;
|
||||
}
|
||||
} else if (moveOutPositive) {
|
||||
const limitL = wrapEl.clientWidth - 50;
|
||||
if (l < 0) {
|
||||
l = 0;
|
||||
} else if (multiple && l > limitL) {
|
||||
l = limitL;
|
||||
}
|
||||
const limitT = wrapEl.clientHeight - 50;
|
||||
if (multiple && t > limitT) {
|
||||
t = limitT;
|
||||
}
|
||||
if (t < 0) {
|
||||
t = 0;
|
||||
}
|
||||
}
|
||||
dialogEl.style.left = l + "px";
|
||||
dialogEl.style.top = t + "px";
|
||||
};
|
||||
const mouseupFn = function() {
|
||||
wrapEl.style.userSelect = "";
|
||||
document.removeEventListener("mousemove", mousemoveFn);
|
||||
document.removeEventListener("mouseup", mouseupFn);
|
||||
};
|
||||
document.addEventListener("mousemove", mousemoveFn);
|
||||
document.addEventListener("mouseup", mouseupFn);
|
||||
});
|
||||
}
|
||||
function bindResizableEvent(wrapEl) {
|
||||
wrapEl.addEventListener("mousedown", function(event) {
|
||||
const wrapClass2 = wrapEl == null ? void 0 : wrapEl.classList;
|
||||
if (!(wrapClass2 == null ? void 0 : wrapClass2.contains(resizableClass))) {
|
||||
return;
|
||||
}
|
||||
if (wrapClass2 == null ? void 0 : wrapClass2.contains(fullscreenClass)) {
|
||||
return;
|
||||
}
|
||||
const dialogEl = wrapEl.querySelector("." + modalClass);
|
||||
const moveOut = wrapClass2 == null ? void 0 : wrapClass2.contains(moveOutClass);
|
||||
const canSetWidth = !(wrapClass2 == null ? void 0 : wrapClass2.contains(resizableVerticalClass));
|
||||
const canSetHeight = !(wrapClass2 == null ? void 0 : wrapClass2.contains(resizableHorizontalClass));
|
||||
const limitX = dialogEl.clientWidth + dialogEl.offsetLeft - wrapEl.scrollLeft + wrapEl.offsetLeft;
|
||||
const limitY = dialogEl.clientHeight + dialogEl.offsetTop - wrapEl.scrollTop + wrapEl.offsetTop;
|
||||
if (event.clientX > limitX || limitX - event.clientX > 10 || event.clientY > limitY || limitY - event.clientY > 10) {
|
||||
return;
|
||||
}
|
||||
wrapEl.style.userSelect = "none";
|
||||
initModalStyle(dialogEl, true);
|
||||
const downX = event.clientX;
|
||||
const downY = event.clientY;
|
||||
const downW = dialogEl.clientWidth;
|
||||
const downH = dialogEl.clientHeight;
|
||||
const mousemoveFn = function(e) {
|
||||
if (canSetWidth) {
|
||||
const w = e.clientX - downX + downW;
|
||||
const maxW = wrapEl.clientWidth - dialogEl.offsetLeft - 1;
|
||||
const nw = (w < defaultMinWidth ? defaultMinWidth : !moveOut && w > maxW ? maxW : w) + "px";
|
||||
dialogEl.style.width = nw;
|
||||
dialogEl.style.maxWidth = nw;
|
||||
dialogEl.style.minWidth = nw;
|
||||
}
|
||||
if (canSetHeight) {
|
||||
const h = e.clientY - downY + downH;
|
||||
const maxH = wrapEl.clientHeight - dialogEl.offsetTop - 1;
|
||||
const nh = (h < defaultMinHeight ? defaultMinHeight : !moveOut && h > maxH ? maxH : h) + "px";
|
||||
dialogEl.style.height = nh;
|
||||
dialogEl.style.maxHeight = nh;
|
||||
dialogEl.style.minHeight = nh;
|
||||
}
|
||||
};
|
||||
const mouseupFn = function() {
|
||||
wrapEl.style.userSelect = "";
|
||||
document.removeEventListener("mousemove", mousemoveFn);
|
||||
document.removeEventListener("mouseup", mouseupFn);
|
||||
};
|
||||
document.addEventListener("mousemove", mousemoveFn);
|
||||
document.addEventListener("mouseup", mouseupFn);
|
||||
});
|
||||
}
|
||||
function bindAutoSetTopEvent(wrapEl) {
|
||||
wrapEl.addEventListener("mousedown", () => {
|
||||
setModalTop(wrapEl);
|
||||
});
|
||||
}
|
||||
function setModalTop(wrapEl) {
|
||||
var _a;
|
||||
if (!((_a = wrapEl == null ? void 0 : wrapEl.classList) == null ? void 0 : _a.contains(multipleClass))) {
|
||||
return;
|
||||
}
|
||||
const zIndex = Number(getCurrentStyle(wrapEl).zIndex || modalDefaultZIndex);
|
||||
const maxIndex = getModalMaxIndex(wrapEl);
|
||||
if (maxIndex > zIndex) {
|
||||
wrapEl.style.zIndex = String(maxIndex);
|
||||
}
|
||||
}
|
||||
function resetModalStyle(wrapEl, width, top) {
|
||||
const modalEl = wrapEl == null ? void 0 : wrapEl.querySelector("." + modalClass);
|
||||
if (!modalEl) {
|
||||
return;
|
||||
}
|
||||
modalEl.style.top = "";
|
||||
modalEl.style.left = "";
|
||||
modalEl.style.bottom = "";
|
||||
modalEl.style.right = "";
|
||||
modalEl.style.margin = "";
|
||||
modalEl.style.marginTop = typeof top === "number" ? top + "px" : top;
|
||||
modalEl.style.position = "";
|
||||
modalEl.style.display = "";
|
||||
modalEl.style.verticalAlign = "";
|
||||
modalEl.style.height = "";
|
||||
modalEl.style.maxHeight = "";
|
||||
modalEl.style.minHeight = "";
|
||||
modalEl.style.width = typeof width === "number" ? width + "px" : width;
|
||||
modalEl.style.maxWidth = "";
|
||||
modalEl.style.minWidth = "";
|
||||
}
|
||||
function setModalPosition(wrapEl, position, resizable, moveOut) {
|
||||
const modalEl = wrapEl.querySelector("." + modalClass);
|
||||
if (!modalEl) {
|
||||
return;
|
||||
}
|
||||
initModalStyle(modalEl, resizable);
|
||||
const maxTop = wrapEl.clientHeight - modalEl.clientHeight - (moveOut ? 0 : 2);
|
||||
const maxLeft = wrapEl.clientWidth - modalEl.clientWidth - (moveOut ? 0 : 1);
|
||||
if (position === "top") {
|
||||
modalEl.style.top = "0px";
|
||||
modalEl.style.left = `${maxLeft / 2}px`;
|
||||
} else if (position === "bottom") {
|
||||
modalEl.style.top = `${maxTop}px`;
|
||||
modalEl.style.left = `${maxLeft / 2}px`;
|
||||
} else if (position === "left") {
|
||||
modalEl.style.top = `${maxTop / 2}px`;
|
||||
modalEl.style.left = "0px";
|
||||
} else if (position === "right") {
|
||||
modalEl.style.top = `${maxTop / 2}px`;
|
||||
modalEl.style.left = `${maxLeft}px`;
|
||||
} else if (position === "leftTop") {
|
||||
modalEl.style.top = "0px";
|
||||
modalEl.style.left = "0px";
|
||||
} else if (position === "leftBottom") {
|
||||
modalEl.style.top = `${maxTop}px`;
|
||||
modalEl.style.left = "0px";
|
||||
} else if (position === "rightTop") {
|
||||
modalEl.style.top = "0px";
|
||||
modalEl.style.left = `${maxLeft}px`;
|
||||
} else if (position === "rightBottom") {
|
||||
modalEl.style.top = `${maxTop}px`;
|
||||
modalEl.style.left = `${maxLeft}px`;
|
||||
} else if (position === "center") {
|
||||
modalEl.style.top = `${maxTop / 2}px`;
|
||||
modalEl.style.left = `${maxLeft / 2}px`;
|
||||
} else if (typeof position === "object") {
|
||||
if (position.top != null) {
|
||||
modalEl.style.top = typeof position.top === "number" ? `${position.top}px` : position.top;
|
||||
} else if (position.left != null) {
|
||||
modalEl.style.top = `${maxTop / 2}px`;
|
||||
}
|
||||
if (position.left != null) {
|
||||
modalEl.style.left = typeof position.left === "number" ? `${position.left}px` : position.left;
|
||||
} else if (position.top != null) {
|
||||
modalEl.style.left = `${maxLeft / 2}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
function setInitPosition(wrapEl, position, resizable, moveOut, force) {
|
||||
if (wrapEl && position && (force || !wrapEl.getAttribute("init-position"))) {
|
||||
wrapEl.setAttribute("init-position", "1");
|
||||
setModalPosition(wrapEl, position, resizable, moveOut);
|
||||
}
|
||||
}
|
||||
export {
|
||||
bindAutoSetTopEvent,
|
||||
bindMovableEvent,
|
||||
bindResizableEvent,
|
||||
bodyFullscreenClass,
|
||||
centeredClass,
|
||||
closedClass,
|
||||
collapseClass,
|
||||
containerClass,
|
||||
contentFullscreenClass,
|
||||
fullscreenClass,
|
||||
getModalContainer,
|
||||
getStyleString,
|
||||
hideClass,
|
||||
innerClass,
|
||||
innerMaskClass,
|
||||
layoutTopClass,
|
||||
mobileClass,
|
||||
movableClass,
|
||||
moveOutClass,
|
||||
moveOutPositiveClass,
|
||||
multipleClass,
|
||||
navCollapseClass,
|
||||
resetModalStyle,
|
||||
resizableClass,
|
||||
resizableHorizontalClass,
|
||||
resizableVerticalClass,
|
||||
responsiveClass,
|
||||
setInitPosition,
|
||||
setModalPosition,
|
||||
setModalTop,
|
||||
showTabsClass,
|
||||
sideMixClass,
|
||||
sideMixSingleClass
|
||||
};
|
||||
+170
@@ -0,0 +1,170 @@
|
||||
import ProMenus from "./pro-menus";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "ProHeader",
|
||||
components: { ProMenus },
|
||||
props: {
|
||||
projectName: String,
|
||||
levels: Array,
|
||||
menus: Array,
|
||||
active: String,
|
||||
headStyle: String,
|
||||
collapse: Boolean,
|
||||
showLeftTool: Boolean,
|
||||
showCollapse: Boolean,
|
||||
showRefresh: Boolean,
|
||||
showBreadcrumb: Boolean,
|
||||
breadcrumbSeparator: String
|
||||
},
|
||||
emits: ["logo-click", "reload-page", "toggle-collapse", "open", "close"],
|
||||
data() {
|
||||
return {
|
||||
canScroll: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isPrimary() {
|
||||
return this.headStyle === "primary";
|
||||
},
|
||||
themeClass() {
|
||||
return this.headStyle !== "light" ? "ele-menu-dark" : "";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse() {
|
||||
this.$emit("toggle-collapse");
|
||||
},
|
||||
reloadPage() {
|
||||
this.$emit("reload-page");
|
||||
},
|
||||
onLogoClick() {
|
||||
this.$emit("logo-click");
|
||||
},
|
||||
onOpen(index, indexPath) {
|
||||
this.$emit("open", index, indexPath);
|
||||
},
|
||||
onClose(index, indexPath) {
|
||||
this.$emit("close", index, indexPath);
|
||||
},
|
||||
onHeaderNavScroll(e, isFirefox) {
|
||||
var _a, _b;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const elem = (_b = (_a = e.currentTarget) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
|
||||
if (this.canScroll && elem) {
|
||||
this.canScroll = false;
|
||||
const wheelDelta = e.wheelDelta || e.detail;
|
||||
const delta = isFirefox ? -wheelDelta : wheelDelta;
|
||||
if (delta > 0) {
|
||||
elem.scrollLeft -= 45;
|
||||
} else if (delta < 0) {
|
||||
elem.scrollLeft += 45;
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.canScroll = true;
|
||||
}, 5);
|
||||
}
|
||||
},
|
||||
onFirefoxScroll(e) {
|
||||
this.onHeaderNavScroll(e, true);
|
||||
},
|
||||
updateScrollbar() {
|
||||
var _a;
|
||||
(_a = this.$refs.scrollbar) == null ? void 0 : _a.update();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var _a, _b;
|
||||
(_b = (_a = this.$refs.menu) == null ? void 0 : _a.$el) == null ? void 0 : _b.addEventListener(
|
||||
"DOMMouseScroll",
|
||||
this.onFirefoxScroll
|
||||
);
|
||||
},
|
||||
beforeDestroy() {
|
||||
var _a, _b;
|
||||
(_b = (_a = this.$refs.menu) == null ? void 0 : _a.$el) == null ? void 0 : _b.removeEventListener(
|
||||
"DOMMouseScroll",
|
||||
this.onFirefoxScroll
|
||||
);
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { class: ["ele-admin-header", { "ele-admin-header-primary": _vm.isPrimary }] }, [_c("div", { staticClass: "ele-admin-logo", on: { "click": _vm.onLogoClick } }, [_vm._t("logo"), _vm.projectName ? _c("span", [_vm._v(_vm._s(_vm.projectName))]) : _vm._e()], 2), _vm.showLeftTool ? _c("div", { staticClass: "ele-admin-header-tool" }, [_vm.showCollapse ? _c("div", { staticClass: "ele-admin-header-tool-item", on: { "click": _vm.toggleCollapse } }, [_c("i", { class: _vm.collapse ? "el-icon-_unfold" : "el-icon-_fold" })]) : _vm._e(), _vm.showRefresh ? _c("div", { staticClass: "ele-admin-header-tool-item", on: { "click": _vm.reloadPage } }, [_c("i", { staticClass: "el-icon-refresh-right" })]) : _vm._e(), _vm._t("left")], 2) : _vm._e(), _vm.showBreadcrumb ? _c("div", { staticClass: "ele-admin-breadcrumb" }, [_c("el-breadcrumb", { attrs: { "separator": _vm.breadcrumbSeparator } }, _vm._l(_vm.levels, function(d) {
|
||||
return _c("el-breadcrumb-item", { key: d.fullPath, attrs: { "to": d.home ? d.fullPath : void 0 } }, [_vm._v(" " + _vm._s(d.title) + " ")]);
|
||||
}), 1)], 1) : _vm._e(), _vm._t("center"), _c("div", { staticClass: "ele-admin-header-nav" }, [_c("el-scrollbar", { ref: "scrollbar" }, [_c("ProMenus", { ref: "menu", attrs: { "data": _vm.menus, "active": _vm.active, "mode": "horizontal", "title-slot": "top-title", "theme-class": _vm.themeClass }, on: { "open": _vm.onOpen, "close": _vm.onClose }, nativeOn: { "mousewheel": function($event) {
|
||||
return _vm.onHeaderNavScroll.apply(null, arguments);
|
||||
} }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props) {
|
||||
return [_vm._t(name, null, null, props || {})];
|
||||
} };
|
||||
})], null, true) })], 1)], 1), _vm._t("right")], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const proHeader = __component__.exports;
|
||||
export {
|
||||
proHeader as default
|
||||
};
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
import { isExternalLink } from "../../utils/core";
|
||||
const proMenus = {
|
||||
name: "ProMenus",
|
||||
props: {
|
||||
data: Array,
|
||||
active: String,
|
||||
collapse: Boolean,
|
||||
uniqueOpen: Boolean,
|
||||
defaultOpeneds: Array,
|
||||
themeClass: String,
|
||||
popClass: String,
|
||||
firstPopClass: String,
|
||||
withTooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
tooltipDisabled: Boolean,
|
||||
popperAppendToBody: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
titleSlot: {
|
||||
type: String,
|
||||
default: "title"
|
||||
},
|
||||
iconSlot: {
|
||||
type: String,
|
||||
default: "icon"
|
||||
},
|
||||
mode: String
|
||||
},
|
||||
emits: ["open", "close"],
|
||||
render(h) {
|
||||
var _a;
|
||||
const renderItems = (data, popupClassName, withTooltip) => {
|
||||
const nodes = [];
|
||||
data == null ? void 0 : data.forEach((item) => {
|
||||
var _a2, _b;
|
||||
if ((_a2 = item.meta) == null ? void 0 : _a2.hide) {
|
||||
return;
|
||||
}
|
||||
const titleNodes = (() => {
|
||||
var _a3, _b2, _c;
|
||||
const temp = [];
|
||||
if ((_a3 = item.meta) == null ? void 0 : _a3.icon) {
|
||||
const iconSlot = this.$scopedSlots[this.iconSlot];
|
||||
if (typeof iconSlot === "function") {
|
||||
temp.push(iconSlot({ icon: item.meta.icon, item }));
|
||||
} else {
|
||||
temp.push(h("i", { class: item.meta.icon }));
|
||||
}
|
||||
}
|
||||
const titleSlot = this.$scopedSlots[this.titleSlot];
|
||||
if (typeof titleSlot === "function") {
|
||||
temp.push(titleSlot({ title: (_b2 = item.meta) == null ? void 0 : _b2.title, item }));
|
||||
} else {
|
||||
temp.push(h("span", {}, (_c = item.meta) == null ? void 0 : _c.title));
|
||||
}
|
||||
return temp;
|
||||
})();
|
||||
if (!((_b = item.children) == null ? void 0 : _b.some((d) => {
|
||||
var _a3;
|
||||
return !((_a3 = d.meta) == null ? void 0 : _a3.hide);
|
||||
}))) {
|
||||
const content = (() => {
|
||||
var _a3;
|
||||
const temp = (() => {
|
||||
if (isExternalLink(item.path)) {
|
||||
return h(
|
||||
"a",
|
||||
{
|
||||
attrs: { href: item.path, target: "_blank" },
|
||||
on: { click: (e) => e.stopPropagation() }
|
||||
},
|
||||
titleNodes
|
||||
);
|
||||
}
|
||||
return h("router-link", { props: { to: item.path } }, titleNodes);
|
||||
})();
|
||||
if (withTooltip) {
|
||||
return h(
|
||||
"el-tooltip",
|
||||
{
|
||||
props: {
|
||||
placement: "right",
|
||||
content: (_a3 = item.meta) == null ? void 0 : _a3.title,
|
||||
disabled: this.tooltipDisabled || !this.collapse
|
||||
}
|
||||
},
|
||||
[temp]
|
||||
);
|
||||
}
|
||||
return temp;
|
||||
})();
|
||||
nodes.push(
|
||||
h(
|
||||
"el-menu-item",
|
||||
{
|
||||
key: item.path,
|
||||
props: { index: item.path }
|
||||
},
|
||||
[content]
|
||||
)
|
||||
);
|
||||
return;
|
||||
}
|
||||
nodes.push(
|
||||
h(
|
||||
"el-submenu",
|
||||
{
|
||||
key: item.path,
|
||||
props: {
|
||||
index: item.path,
|
||||
popperClass: popupClassName,
|
||||
popperAppendToBody: this.popperAppendToBody
|
||||
}
|
||||
},
|
||||
[
|
||||
h("template", { slot: "title" }, titleNodes),
|
||||
...renderItems(item.children, this.popClass, false)
|
||||
]
|
||||
)
|
||||
);
|
||||
});
|
||||
return nodes;
|
||||
};
|
||||
return h(
|
||||
"el-menu",
|
||||
{
|
||||
class: this.themeClass,
|
||||
props: {
|
||||
mode: this.mode,
|
||||
collapse: this.collapse,
|
||||
defaultActive: this.active,
|
||||
uniqueOpened: this.uniqueOpen,
|
||||
defaultOpeneds: this.defaultOpeneds,
|
||||
collapseTransition: false
|
||||
},
|
||||
on: {
|
||||
open: (index, indexPath) => {
|
||||
this.$emit("open", index, indexPath);
|
||||
},
|
||||
close: (index, indexPath) => {
|
||||
this.$emit("close", index, indexPath);
|
||||
}
|
||||
}
|
||||
},
|
||||
renderItems(
|
||||
this.data,
|
||||
(_a = this.firstPopClass) != null ? _a : this.popClass,
|
||||
this.withTooltip
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
export {
|
||||
proMenus as default
|
||||
};
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
import ProMenus from "./pro-menus";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "ProSidebarNav",
|
||||
components: { ProMenus },
|
||||
props: {
|
||||
data: Array,
|
||||
active: String,
|
||||
collapse: Boolean,
|
||||
themeClass: String,
|
||||
showNavCollapse: Boolean
|
||||
},
|
||||
emits: ["toggle-collapse", "open", "close"],
|
||||
computed: {
|
||||
firstPopClass() {
|
||||
const popClass = "ele-admin-sidebar-nav-menu-pop";
|
||||
return this.themeClass ? this.themeClass + " " + popClass : popClass;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse() {
|
||||
this.$emit("toggle-collapse");
|
||||
},
|
||||
onOpen(index, indexPath) {
|
||||
this.$emit("open", index, indexPath);
|
||||
},
|
||||
onClose(index, indexPath) {
|
||||
this.$emit("close", index, indexPath);
|
||||
},
|
||||
updateScrollbar() {
|
||||
var _a;
|
||||
(_a = this.$refs.scrollbar) == null ? void 0 : _a.update();
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { staticClass: "ele-admin-sidebar-nav" }, [_vm._t("nav-top"), _c("div", { staticClass: "ele-admin-sidebar-nav-menu" }, [_c("el-scrollbar", { ref: "scrollbar" }, [_c("ProMenus", { attrs: { "data": _vm.data, "active": _vm.active, "collapse": true, "unique-open": true, "pop-class": _vm.themeClass, "theme-class": _vm.themeClass, "first-pop-class": _vm.firstPopClass, "tooltip-disabled": !_vm.collapse, "title-slot": "nav-title" }, on: { "open": _vm.onOpen, "close": _vm.onClose }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props) {
|
||||
return [_vm._t(name, null, null, props || {})];
|
||||
} };
|
||||
})], null, true) })], 1)], 1), _vm.showNavCollapse ? _c("div", { staticClass: "ele-admin-sidebar-nav-tool-item", on: { "click": _vm.toggleCollapse } }, [_c("i", { class: _vm.collapse ? "el-icon-_unfold" : "el-icon-_fold" })]) : _vm._e(), _vm._t("nav-bottom")], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const proSidebarNav = __component__.exports;
|
||||
export {
|
||||
proSidebarNav as default
|
||||
};
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
import ProMenus from "./pro-menus";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "ProSidebar",
|
||||
components: { ProMenus },
|
||||
props: {
|
||||
data: Array,
|
||||
active: String,
|
||||
collapse: Boolean,
|
||||
uniqueOpen: Boolean,
|
||||
defaultOpeneds: Array,
|
||||
themeClass: String
|
||||
},
|
||||
emits: ["open", "close"],
|
||||
methods: {
|
||||
onOpen(index, indexPath) {
|
||||
this.$emit("open", index, indexPath);
|
||||
},
|
||||
onClose(index, indexPath) {
|
||||
this.$emit("close", index, indexPath);
|
||||
},
|
||||
updateScrollbar() {
|
||||
var _a;
|
||||
(_a = this.$refs.scrollbar) == null ? void 0 : _a.update();
|
||||
}
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _c("div", { staticClass: "ele-admin-sidebar" }, [_vm._t("top"), _c("div", { staticClass: "ele-admin-sidebar-menus" }, [_c("el-scrollbar", { ref: "scrollbar" }, [_c("ProMenus", { attrs: { "data": _vm.data, "active": _vm.active, "collapse": _vm.collapse, "unique-open": _vm.uniqueOpen, "default-openeds": _vm.defaultOpeneds, "theme-class": _vm.themeClass, "pop-class": _vm.themeClass }, on: { "open": _vm.onOpen, "close": _vm.onClose }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props) {
|
||||
return [_vm._t(name, null, null, props || {})];
|
||||
} };
|
||||
})], null, true) })], 1)], 1), _vm._t("bottom")], 2);
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const proSidebar = __component__.exports;
|
||||
export {
|
||||
proSidebar as default
|
||||
};
|
||||
+199
@@ -0,0 +1,199 @@
|
||||
import ProTabDropdown from "./pro-tab-dropdown";
|
||||
import ProTabContext from "./pro-tab-context";
|
||||
const proTabBar = {
|
||||
name: "ProTabBar",
|
||||
props: {
|
||||
tabs: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
active: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
homePath: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
homeTitle: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
showRefresh: Boolean,
|
||||
clickReload: Boolean,
|
||||
bodyFullscreen: Boolean,
|
||||
tabContextMenu: Boolean
|
||||
},
|
||||
emits: [
|
||||
"tab-change",
|
||||
"tab-remove",
|
||||
"tab-remove-all",
|
||||
"tab-remove-left",
|
||||
"tab-remove-right",
|
||||
"tab-remove-other",
|
||||
"fullscreen-body",
|
||||
"dropdown-menu",
|
||||
"context-menu",
|
||||
"reload-page"
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
canScroll: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
reloadPage() {
|
||||
this.$emit("reload-page");
|
||||
},
|
||||
onTabClick({ name }) {
|
||||
if (this.active === name) {
|
||||
if (this.clickReload) {
|
||||
this.reloadPage();
|
||||
}
|
||||
return;
|
||||
}
|
||||
const tab = (() => {
|
||||
if (this.tabs) {
|
||||
for (let i = 0; i < this.tabs.length; i++) {
|
||||
if (this.tabs[i].key === name) {
|
||||
return this.tabs[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
this.$emit("tab-change", tab ? tab : { key: name });
|
||||
},
|
||||
onTabRemove(name) {
|
||||
this.$emit("tab-remove", { key: name, active: this.active });
|
||||
},
|
||||
onDropMenuClick(command) {
|
||||
const option = { key: this.active, active: this.active };
|
||||
switch (command) {
|
||||
case "left":
|
||||
this.$emit("tab-remove-left", option);
|
||||
return;
|
||||
case "right":
|
||||
this.$emit("tab-remove-right", option);
|
||||
return;
|
||||
case "other":
|
||||
this.$emit("tab-remove-other", option);
|
||||
return;
|
||||
case "all":
|
||||
this.$emit("tab-remove-all", this.active);
|
||||
return;
|
||||
case "reload":
|
||||
this.reloadPage();
|
||||
return;
|
||||
case "fullscreen":
|
||||
this.$emit("fullscreen-body", !this.bodyFullscreen);
|
||||
return;
|
||||
}
|
||||
this.$emit("dropdown-menu", { key: command, active: this.active });
|
||||
},
|
||||
onContextMenuClick(option) {
|
||||
this.$emit("context-menu", option);
|
||||
},
|
||||
onTriggerContext(e) {
|
||||
var _a, _b;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
(_b = (_a = e.currentTarget.parentNode) == null ? void 0 : _a.querySelector(".ele-admin-tab-context-el")) == null ? void 0 : _b.click();
|
||||
},
|
||||
onMousewheel(e, isFirefox) {
|
||||
var _a, _b;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const el = e.currentTarget;
|
||||
if (this.canScroll) {
|
||||
this.canScroll = false;
|
||||
const wheelDelta = e.wheelDelta || e.detail;
|
||||
const delta = isFirefox ? -wheelDelta : wheelDelta;
|
||||
if (delta > 0) {
|
||||
(_a = el.querySelector(".el-tabs__nav-prev")) == null ? void 0 : _a.click();
|
||||
} else if (delta < 0) {
|
||||
(_b = el.querySelector(".el-tabs__nav-next")) == null ? void 0 : _b.click();
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.canScroll = true;
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
onFirefoxMousewheel(e) {
|
||||
this.onMousewheel(e, true);
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const hTP = (key, title, closable, item) => {
|
||||
const tSlot = this.$scopedSlots["tab-title"];
|
||||
const children = [tSlot ? tSlot({ title, item }) : title];
|
||||
if (this.tabContextMenu) {
|
||||
children.push(
|
||||
h("div", {
|
||||
class: "ele-admin-tab-context-trigger",
|
||||
on: { contextmenu: this.onTriggerContext }
|
||||
})
|
||||
);
|
||||
children.push(
|
||||
h(ProTabContext, {
|
||||
props: {
|
||||
item,
|
||||
tabKey: key,
|
||||
active: this.active
|
||||
},
|
||||
on: { "menu-click": this.onContextMenuClick },
|
||||
scopedSlots: this.$scopedSlots
|
||||
})
|
||||
);
|
||||
}
|
||||
return h("el-tab-pane", { key, props: { name: key, closable } }, [
|
||||
h("template", { slot: "label" }, children)
|
||||
]);
|
||||
};
|
||||
return h("div", { class: "ele-admin-tabs" }, [
|
||||
h(
|
||||
"el-tabs",
|
||||
{
|
||||
ref: "tabs",
|
||||
props: { value: this.active },
|
||||
on: {
|
||||
"tab-click": this.onTabClick,
|
||||
"tab-remove": this.onTabRemove
|
||||
},
|
||||
nativeOn: {
|
||||
mousewheel: this.onMousewheel
|
||||
}
|
||||
},
|
||||
[
|
||||
hTP(this.homePath, this.homeTitle, false),
|
||||
...this.tabs.map((t) => hTP(t.key, t.title, t.closable, t))
|
||||
]
|
||||
),
|
||||
h(ProTabDropdown, {
|
||||
props: {
|
||||
active: this.active,
|
||||
showRefresh: this.showRefresh,
|
||||
bodyFullscreen: this.bodyFullscreen
|
||||
},
|
||||
on: { "menu-click": this.onDropMenuClick },
|
||||
scopedSlots: this.$scopedSlots
|
||||
})
|
||||
]);
|
||||
},
|
||||
mounted() {
|
||||
var _a, _b;
|
||||
(_b = (_a = this.$refs.tabs) == null ? void 0 : _a.$el) == null ? void 0 : _b.addEventListener(
|
||||
"DOMMouseScroll",
|
||||
this.onFirefoxMousewheel
|
||||
);
|
||||
},
|
||||
beforeDestroy() {
|
||||
var _a, _b;
|
||||
(_b = (_a = this.$refs.tabs) == null ? void 0 : _a.$el) == null ? void 0 : _b.removeEventListener(
|
||||
"DOMMouseScroll",
|
||||
this.onFirefoxMousewheel
|
||||
);
|
||||
}
|
||||
};
|
||||
export {
|
||||
proTabBar as default
|
||||
};
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
const proTabContext = {
|
||||
name: "ProTabContext",
|
||||
mixins: [Locale],
|
||||
props: {
|
||||
active: String,
|
||||
tabKey: String,
|
||||
item: Object
|
||||
},
|
||||
emits: ["menu-click"],
|
||||
methods: {
|
||||
onClick(command) {
|
||||
this.$emit("menu-click", {
|
||||
key: command,
|
||||
tabKey: this.tabKey,
|
||||
item: this.item,
|
||||
active: this.active
|
||||
});
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const hMI = (command, label, icon) => {
|
||||
return h("el-dropdown-item", { props: { command, icon } }, [label]);
|
||||
};
|
||||
const itemNodes = (() => {
|
||||
const ctxSlot = this.$scopedSlots["context-menu"];
|
||||
if (typeof ctxSlot === "function") {
|
||||
return ctxSlot({
|
||||
tabKey: this.tabKey,
|
||||
item: this.item,
|
||||
active: this.active
|
||||
});
|
||||
}
|
||||
return [
|
||||
hMI("reload", this.t("ele.tabs.reload"), "el-icon-refresh-right"),
|
||||
hMI("close", this.t("ele.tabs.close"), "el-icon-close"),
|
||||
hMI("left", this.t("ele.tabs.closeLeft"), "el-icon-back"),
|
||||
hMI("right", this.t("ele.tabs.closeRight"), "el-icon-right"),
|
||||
hMI("other", this.t("ele.tabs.closeOther"), "el-icon-remove-outline")
|
||||
];
|
||||
})();
|
||||
return h(
|
||||
"el-dropdown",
|
||||
{
|
||||
class: "ele-admin-tab-context-menu",
|
||||
props: { trigger: "click", placement: "bottom-start" },
|
||||
on: { command: this.onClick },
|
||||
nativeOn: { click: (e) => e.stopPropagation() }
|
||||
},
|
||||
[
|
||||
h("div", { class: "ele-admin-tab-context-el" }),
|
||||
h(
|
||||
"el-dropdown-menu",
|
||||
{ slot: "dropdown", class: "ele-dropdown-menu-pro" },
|
||||
itemNodes
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
};
|
||||
export {
|
||||
proTabContext as default
|
||||
};
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
import Locale from "element-ui/lib/mixins/locale";
|
||||
const proTabDropdown = {
|
||||
name: "ProTabDropdown",
|
||||
mixins: [Locale],
|
||||
props: {
|
||||
active: String,
|
||||
showRefresh: Boolean,
|
||||
bodyFullscreen: Boolean
|
||||
},
|
||||
emits: ["menu-click"],
|
||||
methods: {
|
||||
onClick(command) {
|
||||
this.$emit("menu-click", command);
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const hMI = (command, label, icon) => {
|
||||
return h("el-dropdown-item", { props: { command, icon } }, [label]);
|
||||
};
|
||||
const itemNodes = (() => {
|
||||
const dropSlot = this.$scopedSlots.dropdown;
|
||||
if (typeof dropSlot === "function") {
|
||||
return dropSlot({ active: this.active, refresh: this.showRefresh });
|
||||
}
|
||||
const items = [
|
||||
hMI(
|
||||
"fullscreen",
|
||||
this.bodyFullscreen ? this.t("ele.tabs.fullscreenExit") : this.t("ele.tabs.fullscreen"),
|
||||
this.bodyFullscreen ? "el-icon-_compress" : "el-icon-full-screen"
|
||||
),
|
||||
hMI("left", this.t("ele.tabs.closeLeft"), "el-icon-back"),
|
||||
hMI("right", this.t("ele.tabs.closeRight"), "el-icon-right"),
|
||||
hMI("other", this.t("ele.tabs.closeOther"), "el-icon-remove-outline"),
|
||||
hMI("all", this.t("ele.tabs.closeAll"), "el-icon-circle-close")
|
||||
];
|
||||
if (this.showRefresh) {
|
||||
items.push(
|
||||
hMI("reload", this.t("ele.tabs.reload"), "el-icon-refresh-right")
|
||||
);
|
||||
}
|
||||
return items;
|
||||
})();
|
||||
return h(
|
||||
"el-dropdown",
|
||||
{
|
||||
class: "ele-admin-tabs-drop",
|
||||
on: { command: this.onClick }
|
||||
},
|
||||
[
|
||||
h("i", { class: "el-icon-arrow-down" }),
|
||||
h(
|
||||
"el-dropdown-menu",
|
||||
{ slot: "dropdown", class: "ele-dropdown-menu-pro" },
|
||||
itemNodes
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
};
|
||||
export {
|
||||
proTabDropdown as default
|
||||
};
|
||||
+685
@@ -0,0 +1,685 @@
|
||||
import { LicenseMixin } from "../utils/license-util";
|
||||
import { screenWidth, formatTreeData } from "../utils/core";
|
||||
import ProHeader from "./components/pro-header";
|
||||
import ProSidebar from "./components/pro-sidebar";
|
||||
import ProSidebarNav from "./components/pro-sidebar-nav";
|
||||
import ProTabBar from "./components/pro-tab-bar";
|
||||
import { CONTENT_SELECTOR, isHomeRoute, getRouteMatched, getMatchedLevels, getMatchedComponents, findTabByPath, menuTitleI18n, getRouteMenu, useWindowListener } from "./util";
|
||||
import props from "./props";
|
||||
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
||||
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
||||
if (render2) {
|
||||
options.render = render2;
|
||||
options.staticRenderFns = staticRenderFns;
|
||||
options._compiled = true;
|
||||
}
|
||||
if (functionalTemplate) {
|
||||
options.functional = true;
|
||||
}
|
||||
if (scopeId) {
|
||||
options._scopeId = "data-v-" + scopeId;
|
||||
}
|
||||
var hook;
|
||||
if (moduleIdentifier) {
|
||||
hook = function(context) {
|
||||
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
||||
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
||||
context = __VUE_SSR_CONTEXT__;
|
||||
}
|
||||
if (injectStyles) {
|
||||
injectStyles.call(this, context);
|
||||
}
|
||||
if (context && context._registeredComponents) {
|
||||
context._registeredComponents.add(moduleIdentifier);
|
||||
}
|
||||
};
|
||||
options._ssrRegister = hook;
|
||||
} else if (injectStyles) {
|
||||
hook = shadowMode ? function() {
|
||||
injectStyles.call(
|
||||
this,
|
||||
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
||||
);
|
||||
} : injectStyles;
|
||||
}
|
||||
if (hook) {
|
||||
if (options.functional) {
|
||||
options._injectStyles = hook;
|
||||
var originalRender = options.render;
|
||||
options.render = function renderWithStyleInjection(h, context) {
|
||||
hook.call(context);
|
||||
return originalRender(h, context);
|
||||
};
|
||||
} else {
|
||||
var existing = options.beforeCreate;
|
||||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||||
}
|
||||
}
|
||||
return {
|
||||
exports: scriptExports,
|
||||
options
|
||||
};
|
||||
}
|
||||
const _sfc_main = {
|
||||
name: "EleProLayout",
|
||||
mixins: [LicenseMixin],
|
||||
components: {
|
||||
ProHeader,
|
||||
ProSidebar,
|
||||
ProSidebarNav,
|
||||
ProTabBar
|
||||
},
|
||||
props,
|
||||
emits: [
|
||||
"update:collapse",
|
||||
"update:side-nav-collapse",
|
||||
"update:body-fullscreen",
|
||||
"tab-add",
|
||||
"tab-remove",
|
||||
"tab-remove-all",
|
||||
"tab-remove-left",
|
||||
"tab-remove-right",
|
||||
"tab-remove-other",
|
||||
"tab-dropdown-menu",
|
||||
"tab-context-menu",
|
||||
"logo-click",
|
||||
"reload-page",
|
||||
"screen-size-change",
|
||||
"set-home-components",
|
||||
"head-menu-open",
|
||||
"head-menu-close",
|
||||
"side-menu-open",
|
||||
"side-menu-close",
|
||||
"side-nav-open",
|
||||
"side-nav-close",
|
||||
"update-document-title"
|
||||
],
|
||||
provide() {
|
||||
return {
|
||||
proLayout: this.layoutData
|
||||
};
|
||||
},
|
||||
data() {
|
||||
var _a;
|
||||
const isMobile = this.styleResponsive ? screenWidth() < 768 : false;
|
||||
return {
|
||||
isMobile,
|
||||
CONTENT_SELECTOR,
|
||||
removeWindowListener: null,
|
||||
menuData: [],
|
||||
tabData: [],
|
||||
levelData: [],
|
||||
sideNavData: [],
|
||||
sideNavActive: null,
|
||||
sideMenuData: [],
|
||||
sideMenuActive: null,
|
||||
headMenuData: [],
|
||||
headMenuActive: null,
|
||||
tabActive: this.homePath,
|
||||
hideSidebar: false,
|
||||
hideFooter: false,
|
||||
homeRouteTitle: (_a = this.homeTitle) != null ? _a : "",
|
||||
backTopEnable: this.showBackTop,
|
||||
layoutData: {
|
||||
isMobile,
|
||||
collapse: this.collapse,
|
||||
sideNavCollapse: this.sideNavCollapse,
|
||||
isTopMenu: this.layoutStyle === "top",
|
||||
isMixSideMenu: this.sideMenuStyle === "mix",
|
||||
bodyFullscreen: this.bodyFullscreen,
|
||||
contentFullscreen: this.contentFullscreen,
|
||||
showTabs: this.showTabs,
|
||||
styleResponsive: this.styleResponsive,
|
||||
haveSideMenuData: false
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isTopMenu() {
|
||||
return this.layoutStyle === "top";
|
||||
},
|
||||
isMixMenu() {
|
||||
return this.layoutStyle === "mix";
|
||||
},
|
||||
isMixSideMenu() {
|
||||
return this.sideMenuStyle === "mix";
|
||||
},
|
||||
showSideNav() {
|
||||
return !(!this.isMixSideMenu || this.isMobile || this.isTopMenu || this.sideNavData.length === 0 && this.menuData.length !== 0 || this.hideSidebar);
|
||||
},
|
||||
showSideMenu() {
|
||||
const haveSideMenu = this.sideMenuData.filter((d) => {
|
||||
var _a;
|
||||
return !((_a = d.meta) == null ? void 0 : _a.hide);
|
||||
}).length === 0;
|
||||
return this.isMobile || !(this.isTopMenu || haveSideMenu && this.menuData.length !== 0 || this.hideSidebar);
|
||||
},
|
||||
showSidebar() {
|
||||
return this.showSideNav || this.showSideMenu;
|
||||
},
|
||||
layoutClass() {
|
||||
return [
|
||||
"ele-admin-layout",
|
||||
{ "ele-admin-collapse": this.collapse },
|
||||
{ "ele-admin-fixed-header": this.fixedHeader && !this.fixedBody },
|
||||
{
|
||||
"ele-admin-fixed-sidebar": this.fixedSidebar && !this.fixedBody && this.showSidebar
|
||||
},
|
||||
{ "ele-admin-fixed-body": this.fixedBody },
|
||||
{ "ele-admin-head-dark": this.headStyle !== "light" },
|
||||
{ "ele-admin-side-dark": this.sideStyle === "dark" },
|
||||
{ "ele-admin-side-mix": this.isMixSideMenu && this.showSideNav },
|
||||
{ "ele-admin-side-colorful": this.colorfulIcon },
|
||||
{
|
||||
"ele-admin-logo-auto": (this.logoAutoSize || this.isTopMenu || !this.showSidebar) && !this.isMobile
|
||||
},
|
||||
{ "ele-admin-show-tabs": this.showTabs },
|
||||
{ "ele-admin-tab-dot": this.tabStyle === "dot" },
|
||||
{ "ele-admin-tab-card": this.tabStyle === "card" },
|
||||
{ "ele-admin-body-limit": !this.bodyFull },
|
||||
{ "ele-admin-body-fullscreen": this.bodyFullscreen },
|
||||
{
|
||||
"ele-admin-content-fullscreen": this.bodyFullscreen && this.contentFullscreen
|
||||
},
|
||||
{
|
||||
"ele-admin-nav-collapse": this.sideNavCollapse && this.showSideNav
|
||||
},
|
||||
{ "ele-admin-responsive": this.styleResponsive }
|
||||
];
|
||||
},
|
||||
sideMenuCollapse() {
|
||||
return this.isMobile || this.isMixSideMenu ? false : this.collapse;
|
||||
},
|
||||
sideNavThemeClass() {
|
||||
return this.sideStyle === "dark" ? "ele-menu-dark" : "";
|
||||
},
|
||||
sideMenuThemeClass() {
|
||||
return this.isMixSideMenu && !this.isMobile ? "" : this.sideNavThemeClass;
|
||||
},
|
||||
showHeadLeftTool() {
|
||||
return this.isMobile || !this.isTopMenu;
|
||||
},
|
||||
showTabRefresh() {
|
||||
return this.bodyFullscreen || this.isTopMenu && !this.isMobile;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateCollapse(value) {
|
||||
const collapse = typeof value === "boolean" ? value : !this.collapse;
|
||||
this.$emit("update:collapse", collapse);
|
||||
this.$emit("update-collapse", collapse);
|
||||
},
|
||||
updateSideNavCollapse(value) {
|
||||
const collapse = typeof value === "boolean" ? value : !this.sideNavCollapse;
|
||||
this.$emit("update:side-nav-collapse", collapse);
|
||||
},
|
||||
updateBodyFullscreen(value) {
|
||||
const fullscreen = typeof value === "boolean" ? value : !this.bodyFullscreen;
|
||||
this.$emit("update:body-fullscreen", fullscreen);
|
||||
},
|
||||
onTabChange({ fullPath, key }) {
|
||||
const path = fullPath || key;
|
||||
if (path) {
|
||||
this.$router.push(path);
|
||||
}
|
||||
},
|
||||
tabAdd(data) {
|
||||
this.$emit("tab-add", data);
|
||||
},
|
||||
onTabRemove(option) {
|
||||
this.$emit("tab-remove", option);
|
||||
},
|
||||
onTabRemoveLeft(option) {
|
||||
this.$emit("tab-remove-left", option);
|
||||
},
|
||||
onTabRemoveRight(option) {
|
||||
this.$emit("tab-remove-right", option);
|
||||
},
|
||||
onTabRemoveOther(option) {
|
||||
this.$emit("tab-remove-other", option);
|
||||
},
|
||||
onTabRemoveAll(active) {
|
||||
this.$emit("tab-remove-all", active);
|
||||
},
|
||||
onTabDropdownMenu(option) {
|
||||
this.$emit("tab-dropdown-menu", option);
|
||||
},
|
||||
onTabContextMenu(option) {
|
||||
this.$emit("tab-context-menu", option);
|
||||
},
|
||||
reloadPage() {
|
||||
this.$emit("reload-page");
|
||||
},
|
||||
onLogoClick() {
|
||||
this.$emit(
|
||||
"logo-click",
|
||||
isHomeRoute(this.$route, this.homePath, this.layoutPath)
|
||||
);
|
||||
},
|
||||
onSideMenuOpen(index2, indexPath) {
|
||||
this.$emit("side-menu-open", index2, indexPath);
|
||||
},
|
||||
onSideMenuClose(index2, indexPath) {
|
||||
this.$emit("side-menu-close", index2, indexPath);
|
||||
},
|
||||
onSideNavOpen(index2, indexPath) {
|
||||
this.$emit("side-nav-open", index2, indexPath);
|
||||
},
|
||||
onSideNavClose(index2, indexPath) {
|
||||
this.$emit("side-nav-close", index2, indexPath);
|
||||
},
|
||||
onHeadMenuOpen(index2, indexPath) {
|
||||
this.$emit("head-menu-open", index2, indexPath);
|
||||
},
|
||||
onHeadMenuClose(index2, indexPath) {
|
||||
this.$emit("head-menu-close", index2, indexPath);
|
||||
},
|
||||
getContentElem() {
|
||||
return this.$refs.contentRef;
|
||||
},
|
||||
onRouteChange(current) {
|
||||
var _a, _b, _c;
|
||||
const { path, fullPath, meta } = current;
|
||||
const contentEl = this.getContentElem();
|
||||
if (this.autoScrollTop && contentEl) {
|
||||
contentEl.scrollTop = 0;
|
||||
}
|
||||
if ((_a = this.hideSidebars) == null ? void 0 : _a.includes(path)) {
|
||||
this.hideSidebar = true;
|
||||
} else {
|
||||
this.hideSidebar = !!meta.hideSidebar;
|
||||
}
|
||||
if ((_b = this.hideFooters) == null ? void 0 : _b.includes(path)) {
|
||||
this.hideFooter = true;
|
||||
} else {
|
||||
this.hideFooter = !!meta.hideFooter;
|
||||
}
|
||||
if (path.includes(this.redirectPath)) {
|
||||
return;
|
||||
}
|
||||
this.setDocumentTitle(path, fullPath);
|
||||
const { active, matched, title, activeOther } = getRouteMatched(
|
||||
path,
|
||||
fullPath,
|
||||
meta,
|
||||
this.menuData
|
||||
);
|
||||
const isHome = isHomeRoute(current, this.homePath, this.layoutPath);
|
||||
this.levelData = getMatchedLevels(
|
||||
isHome,
|
||||
this.homePath,
|
||||
this.homeRouteTitle,
|
||||
matched,
|
||||
activeOther,
|
||||
this.routeI18n,
|
||||
path,
|
||||
fullPath,
|
||||
meta,
|
||||
this.menuData,
|
||||
this.tabData
|
||||
);
|
||||
const components = getMatchedComponents(current.matched);
|
||||
if (isHome) {
|
||||
this.tabActive = this.homePath;
|
||||
this.$emit("set-home-components", components);
|
||||
} else {
|
||||
const isUnique = meta.tabUnique === false || ((_c = this.repeatableTabs) == null ? void 0 : _c.includes(path));
|
||||
const key = isUnique ? fullPath : path;
|
||||
if (meta.title) {
|
||||
this.tabAdd({
|
||||
key,
|
||||
path,
|
||||
fullPath,
|
||||
components,
|
||||
closable: meta.closable !== false,
|
||||
title,
|
||||
meta
|
||||
});
|
||||
}
|
||||
this.tabActive = key;
|
||||
}
|
||||
this.updateMenuActive(active, matched);
|
||||
if (this.isMixMenu || this.isMixSideMenu) {
|
||||
this.splitMenuData();
|
||||
}
|
||||
if (this.styleResponsive && this.isMobile) {
|
||||
this.updateCollapse(true);
|
||||
}
|
||||
},
|
||||
updateMenuActive(active, matched) {
|
||||
const { active1, active2 } = (() => {
|
||||
if (!(matched == null ? void 0 : matched.length)) {
|
||||
return { active1: void 0, active2: void 0 };
|
||||
}
|
||||
const match1 = matched[0];
|
||||
const match2 = matched.length > 1 ? matched[1] : match1;
|
||||
return { active1: match1.path, active2: match2.path };
|
||||
})();
|
||||
if (this.isTopMenu) {
|
||||
this.headMenuActive = active;
|
||||
this.sideNavActive = null;
|
||||
} else if (this.isMixMenu) {
|
||||
this.headMenuActive = active1;
|
||||
this.sideNavActive = active2;
|
||||
} else {
|
||||
this.headMenuActive = null;
|
||||
this.sideNavActive = active1;
|
||||
}
|
||||
this.sideMenuActive = active;
|
||||
},
|
||||
splitMenuData() {
|
||||
var _a;
|
||||
if (!((_a = this.menuData) == null ? void 0 : _a.length)) {
|
||||
this.headMenuData = [];
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = [];
|
||||
} else if (this.isMobile) {
|
||||
this.headMenuData = [];
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = this.menuData;
|
||||
} else if (this.isTopMenu) {
|
||||
this.headMenuData = this.menuData;
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = [];
|
||||
} else if (this.isMixMenu) {
|
||||
this.headMenuData = this.menuData.map((d) => {
|
||||
return { path: d.path, component: d.component, meta: d.meta };
|
||||
});
|
||||
const sideMenus = (() => {
|
||||
const temp = this.headMenuActive ? this.menuData.filter((d) => {
|
||||
return this.headMenuActive === d.path;
|
||||
}) : [];
|
||||
return (temp.length ? temp[0].children : this.menuData[0].children) || [];
|
||||
})();
|
||||
if (!sideMenus.length) {
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = [];
|
||||
} else if (this.isMixSideMenu) {
|
||||
this.sideNavData = sideMenus.map((d) => {
|
||||
return {
|
||||
path: d.path,
|
||||
component: d.component,
|
||||
meta: d.meta,
|
||||
children: this.collapse ? d.children : null,
|
||||
tempChildren: d.children
|
||||
};
|
||||
});
|
||||
const temps = this.sideNavActive ? sideMenus.filter((d) => {
|
||||
return this.sideNavActive === d.path;
|
||||
}) : [];
|
||||
this.sideMenuData = (temps.length ? temps[0].children : sideMenus[0].children) || [];
|
||||
} else {
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = sideMenus;
|
||||
}
|
||||
} else {
|
||||
this.headMenuData = [];
|
||||
if (this.isMixSideMenu) {
|
||||
this.sideNavData = this.menuData.map((d) => {
|
||||
return {
|
||||
path: d.path,
|
||||
component: d.component,
|
||||
meta: d.meta,
|
||||
children: this.collapse ? d.children : null,
|
||||
tempChildren: d.children
|
||||
};
|
||||
});
|
||||
const temps = this.sideNavActive ? this.menuData.filter((d) => {
|
||||
return this.sideNavActive === d.path;
|
||||
}) : [];
|
||||
this.sideMenuData = (temps.length ? temps[0].children : this.menuData[0].children) || [];
|
||||
} else {
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = this.menuData;
|
||||
}
|
||||
}
|
||||
},
|
||||
updateMenuData() {
|
||||
var _a, _b;
|
||||
let tempTitle;
|
||||
this.menuData = formatTreeData(this.menus, (item) => {
|
||||
var _a2, _b2;
|
||||
const title = (_a2 = item.meta) == null ? void 0 : _a2.title;
|
||||
if (!tempTitle && !((_b2 = item.children) == null ? void 0 : _b2.length)) {
|
||||
tempTitle = title;
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
meta: {
|
||||
...item.meta,
|
||||
title: this.routeI18n(item.path, item) || title
|
||||
}
|
||||
};
|
||||
});
|
||||
this.splitMenuData();
|
||||
this.homeRouteTitle = (_b = (_a = this.homeTitle) != null ? _a : tempTitle) != null ? _b : "";
|
||||
},
|
||||
updateTabData() {
|
||||
this.tabData = this.tabs.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
title: this.routeI18n(item.path) || item.title
|
||||
};
|
||||
});
|
||||
},
|
||||
updateLevelData() {
|
||||
this.levelData = this.levelData.map((d) => {
|
||||
const title = (() => {
|
||||
if (d.home) {
|
||||
return this.homeRouteTitle;
|
||||
}
|
||||
const t = findTabByPath(d.fullPath, this.tabData);
|
||||
return this.routeI18n(d.path) || (t == null ? void 0 : t.title) || d.title;
|
||||
})();
|
||||
return { ...d, title };
|
||||
});
|
||||
},
|
||||
routeI18n(path, menu) {
|
||||
return menuTitleI18n({
|
||||
path,
|
||||
locale: this.locale,
|
||||
i18n: this.i18n,
|
||||
menu,
|
||||
menus: this.menuData
|
||||
});
|
||||
},
|
||||
screenIsMobile() {
|
||||
return this.styleResponsive ? screenWidth() < 768 : false;
|
||||
},
|
||||
setDocumentTitle(path, fullPath) {
|
||||
var _a;
|
||||
const m = getRouteMenu(path, fullPath, this.menuData);
|
||||
const t = findTabByPath(fullPath, this.tabData);
|
||||
this.$emit(
|
||||
"update-document-title",
|
||||
this.routeI18n((m == null ? void 0 : m.path) || path, m) || (t == null ? void 0 : t.title) || ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title)
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
menus: {
|
||||
handler() {
|
||||
this.updateMenuData();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
tabs: {
|
||||
handler() {
|
||||
this.updateTabData();
|
||||
this.updateLevelData();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
homeTitle(value) {
|
||||
if (value) {
|
||||
this.homeRouteTitle = value;
|
||||
} else {
|
||||
this.updateMenuData();
|
||||
}
|
||||
this.updateTabData();
|
||||
this.updateLevelData();
|
||||
},
|
||||
layoutStyle(layoutStyle) {
|
||||
this.layoutData.isTopMenu = layoutStyle === "top";
|
||||
const { path, fullPath, meta } = this.$route;
|
||||
const { active, matched } = getRouteMatched(
|
||||
path,
|
||||
fullPath,
|
||||
meta,
|
||||
this.menuData
|
||||
);
|
||||
this.updateMenuActive(active, matched);
|
||||
this.splitMenuData();
|
||||
},
|
||||
sideMenuStyle(sideMenuStyle) {
|
||||
this.layoutData.isMixSideMenu = sideMenuStyle === "mix";
|
||||
this.splitMenuData();
|
||||
},
|
||||
isMobile(isMobile) {
|
||||
this.layoutData.isMobile = isMobile;
|
||||
this.splitMenuData();
|
||||
},
|
||||
collapse(collapse) {
|
||||
this.layoutData.collapse = collapse;
|
||||
if (this.isMixSideMenu) {
|
||||
if (collapse) {
|
||||
this.sideNavData = this.sideNavData.map((d) => {
|
||||
return { ...d, children: d.tempChildren };
|
||||
});
|
||||
} else {
|
||||
this.sideNavData = this.sideNavData.map((d) => {
|
||||
return { ...d, children: null };
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
sideNavCollapse(sideNavCollapse) {
|
||||
this.layoutData.sideNavCollapse = sideNavCollapse;
|
||||
},
|
||||
locale: {
|
||||
handler() {
|
||||
this.updateMenuData();
|
||||
this.updateTabData();
|
||||
this.updateLevelData();
|
||||
const { path, fullPath } = this.$route;
|
||||
this.setDocumentTitle(path, fullPath);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
fixedBody() {
|
||||
if (this.showBackTop) {
|
||||
this.backTopEnable = false;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
var _a, _b;
|
||||
(_a = this.$refs.sidebar) == null ? void 0 : _a.updateScrollbar();
|
||||
(_b = this.$refs.sidebarNav) == null ? void 0 : _b.updateScrollbar();
|
||||
this.backTopEnable = this.showBackTop;
|
||||
});
|
||||
},
|
||||
fixedSidebar() {
|
||||
this.$nextTick(() => {
|
||||
var _a, _b;
|
||||
(_a = this.$refs.sidebar) == null ? void 0 : _a.updateScrollbar();
|
||||
(_b = this.$refs.sidebarNav) == null ? void 0 : _b.updateScrollbar();
|
||||
});
|
||||
},
|
||||
fixedHeader() {
|
||||
this.$nextTick(() => {
|
||||
var _a, _b;
|
||||
(_a = this.$refs.sidebar) == null ? void 0 : _a.updateScrollbar();
|
||||
(_b = this.$refs.sidebarNav) == null ? void 0 : _b.updateScrollbar();
|
||||
});
|
||||
},
|
||||
showBackTop() {
|
||||
this.backTopEnable = this.showBackTop;
|
||||
},
|
||||
bodyFullscreen(bodyFullscreen) {
|
||||
this.layoutData.bodyFullscreen = bodyFullscreen;
|
||||
},
|
||||
contentFullscreen(contentFullscreen) {
|
||||
this.layoutData.contentFullscreen = contentFullscreen;
|
||||
},
|
||||
showTabs(showTabs) {
|
||||
this.layoutData.showTabs = showTabs;
|
||||
},
|
||||
styleResponsive(styleResponsive) {
|
||||
this.layoutData.styleResponsive = styleResponsive;
|
||||
this.isMobile = this.screenIsMobile();
|
||||
},
|
||||
sideMenuData(sideMenuData) {
|
||||
this.layoutData.haveSideMenuData = sideMenuData.length > 0;
|
||||
},
|
||||
$route: {
|
||||
handler(route) {
|
||||
this.onRouteChange(route);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.removeWindowListener = useWindowListener({
|
||||
onResize: () => {
|
||||
var _a, _b, _c;
|
||||
const isMobileTemp = this.screenIsMobile();
|
||||
if (isMobileTemp) {
|
||||
if (!this.isMobile && !this.collapse) {
|
||||
this.updateCollapse(true);
|
||||
}
|
||||
} else if (this.isMobile && this.collapse) {
|
||||
this.updateCollapse(false);
|
||||
}
|
||||
this.isMobile = isMobileTemp;
|
||||
(_a = this.$refs.header) == null ? void 0 : _a.updateScrollbar();
|
||||
(_b = this.$refs.sidebar) == null ? void 0 : _b.updateScrollbar();
|
||||
(_c = this.$refs.sidebarNav) == null ? void 0 : _c.updateScrollbar();
|
||||
this.$emit("screen-size-change");
|
||||
this.$emit("update-screen");
|
||||
},
|
||||
onEscKeydown: (e) => {
|
||||
if (this.fullscreenExitOnEsc && this.bodyFullscreen) {
|
||||
e.stopPropagation();
|
||||
this.updateBodyFullscreen(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.removeWindowListener && this.removeWindowListener();
|
||||
}
|
||||
};
|
||||
var _sfc_render = function render() {
|
||||
var _vm = this, _c = _vm._self._c;
|
||||
return _vm.authenticated ? _c("div", { class: _vm.layoutClass }, [_c("ProHeader", { ref: "header", attrs: { "levels": _vm.levelData, "collapse": _vm.collapse, "menus": _vm.headMenuData, "head-style": _vm.headStyle, "active": _vm.headMenuActive, "project-name": _vm.projectName, "show-refresh": _vm.showRefresh, "show-left-tool": _vm.showHeadLeftTool, "breadcrumb-separator": _vm.breadcrumbSeparator, "show-collapse": _vm.showCollapse && _vm.showSideMenu, "show-breadcrumb": _vm.showBreadcrumb && _vm.layoutStyle === "side" }, on: { "toggle-collapse": _vm.updateCollapse, "reload-page": _vm.reloadPage, "logo-click": _vm.onLogoClick, "clsoe": _vm.onHeadMenuClose, "open": _vm.onHeadMenuOpen }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }), _c("div", { staticClass: "ele-admin-main" }, [_vm.showSideNav ? _c("ProSidebarNav", { ref: "sidebarNav", attrs: { "data": _vm.sideNavData, "collapse": _vm.sideNavCollapse, "theme-class": _vm.sideNavThemeClass, "show-nav-collapse": _vm.showNavCollapse, "active": _vm.collapse ? _vm.sideMenuActive : _vm.sideNavActive }, on: { "toggle-collapse": _vm.updateSideNavCollapse, "clsoe": _vm.onSideNavClose, "open": _vm.onSideNavOpen }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }) : _vm._e(), _vm.showSideMenu ? _c("ProSidebar", { ref: "sidebar", attrs: { "data": _vm.sideMenuData, "active": _vm.sideMenuActive, "collapse": _vm.sideMenuCollapse, "unique-open": _vm.sideUniqueOpen, "theme-class": _vm.sideMenuThemeClass, "default-openeds": _vm.sideDefaultOpeneds }, on: { "clsoe": _vm.onSideMenuClose, "open": _vm.onSideMenuOpen }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }) : _vm._e(), _c("div", { staticClass: "ele-admin-body" }, [_vm.showTabs ? _c("ProTabBar", { attrs: { "tabs": _vm.tabData, "active": _vm.tabActive, "home-path": _vm.homePath, "home-title": _vm.homeRouteTitle, "click-reload": _vm.clickReload, "show-refresh": _vm.showTabRefresh, "body-fullscreen": _vm.bodyFullscreen, "tab-context-menu": _vm.tabContextMenu }, on: { "tab-change": _vm.onTabChange, "tab-remove": _vm.onTabRemove, "tab-remove-all": _vm.onTabRemoveAll, "tab-remove-left": _vm.onTabRemoveLeft, "tab-remove-right": _vm.onTabRemoveRight, "tab-remove-other": _vm.onTabRemoveOther, "fullscreen-body": _vm.updateBodyFullscreen, "dropdown-menu": _vm.onTabDropdownMenu, "context-menu": _vm.onTabContextMenu, "reload-page": _vm.reloadPage }, scopedSlots: _vm._u([_vm._l(Object.keys(_vm.$scopedSlots), function(name) {
|
||||
return { key: name, fn: function(props2) {
|
||||
return [_vm._t(name, null, null, props2 || {})];
|
||||
} };
|
||||
})], null, true) }) : _vm._e(), _c("div", { ref: "contentRef", staticClass: "ele-admin-content" }, [_c("div", { staticClass: "ele-admin-content-view" }, [_vm._t("default")], 2), _vm.showFooter && !_vm.hideFooter ? [_vm._t("footer")] : _vm._e()], 2)], 1)], 1), _c("div", { staticClass: "ele-admin-shade", on: { "click": _vm.updateCollapse } }), _vm.backTopEnable ? _c("el-backtop", { attrs: { "right": _vm.backTopRight, "bottom": _vm.backTopBottom, "visibility-height": _vm.backTopVisibilityHeight, "target": _vm.fixedBody ? _vm.CONTENT_SELECTOR : void 0 } }) : _vm._e()], 1) : _vm._e();
|
||||
};
|
||||
var _sfc_staticRenderFns = [];
|
||||
var __component__ = /* @__PURE__ */ normalizeComponent(
|
||||
_sfc_main,
|
||||
_sfc_render,
|
||||
_sfc_staticRenderFns,
|
||||
false,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null
|
||||
);
|
||||
const index = __component__.exports;
|
||||
export {
|
||||
index as default
|
||||
};
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
const props = {
|
||||
menus: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
tabs: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
collapse: Boolean,
|
||||
sideNavCollapse: Boolean,
|
||||
bodyFullscreen: Boolean,
|
||||
showCollapse: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showBreadcrumb: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showNavCollapse: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showTabs: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFooter: Boolean,
|
||||
showBackTop: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
headStyle: {
|
||||
type: String,
|
||||
default: "light",
|
||||
validator(value) {
|
||||
return ["light", "dark", "primary"].includes(value);
|
||||
}
|
||||
},
|
||||
sideStyle: {
|
||||
type: String,
|
||||
default: "dark",
|
||||
validator(value) {
|
||||
return ["light", "dark"].includes(value);
|
||||
}
|
||||
},
|
||||
layoutStyle: {
|
||||
type: String,
|
||||
default: "side",
|
||||
validator(value) {
|
||||
return ["side", "top", "mix"].includes(value);
|
||||
}
|
||||
},
|
||||
sideMenuStyle: {
|
||||
type: String,
|
||||
default: "default",
|
||||
validator(value) {
|
||||
return ["default", "mix"].includes(value);
|
||||
}
|
||||
},
|
||||
tabStyle: {
|
||||
type: String,
|
||||
default: "default",
|
||||
validator(value) {
|
||||
return ["default", "dot", "card"].includes(value);
|
||||
}
|
||||
},
|
||||
fixedHeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fixedSidebar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fixedBody: Boolean,
|
||||
bodyFull: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
logoAutoSize: Boolean,
|
||||
colorfulIcon: Boolean,
|
||||
sideUniqueOpen: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
breadcrumbSeparator: {
|
||||
type: String,
|
||||
default: "/"
|
||||
},
|
||||
backTopVisibilityHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
contentFullscreen: Boolean,
|
||||
fullscreenExitOnEsc: Boolean,
|
||||
clickReload: Boolean,
|
||||
projectName: String,
|
||||
homeTitle: String,
|
||||
homePath: {
|
||||
type: String,
|
||||
default: "/"
|
||||
},
|
||||
layoutPath: {
|
||||
type: String,
|
||||
default: "/"
|
||||
},
|
||||
redirectPath: {
|
||||
type: String,
|
||||
default: "/redirect/"
|
||||
},
|
||||
hideFooters: Array,
|
||||
hideSidebars: Array,
|
||||
repeatableTabs: Array,
|
||||
locale: String,
|
||||
i18n: Function,
|
||||
sideDefaultOpeneds: Array,
|
||||
autoScrollTop: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
tabContextMenu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backTopRight: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
backTopBottom: {
|
||||
type: Number,
|
||||
default: 60
|
||||
},
|
||||
styleResponsive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
};
|
||||
export {
|
||||
props as default
|
||||
};
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* 折叠侧栏 */
|
||||
.ele-admin-collapse {
|
||||
.ele-admin-logo > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.ele-admin-side-mix) {
|
||||
.ele-admin-logo,
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-sidebar .el-menu--collapse {
|
||||
width: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-sidebar .el-menu--collapse > li > .el-tooltip,
|
||||
.ele-admin-sidebar .el-menu--collapse > li > .el-submenu__title {
|
||||
padding: 0 !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
&.ele-admin-side-mix .ele-admin-sidebar-nav {
|
||||
box-shadow: $--sidebar-light-shadow;
|
||||
|
||||
& + .ele-admin-sidebar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-sidebar + .ele-admin-body {
|
||||
width: calc(100% - #{$--sidebar-collapse-width});
|
||||
}
|
||||
|
||||
&.ele-admin-side-mix:not(.ele-admin-nav-collapse) {
|
||||
.ele-admin-sidebar + .ele-admin-body {
|
||||
width: calc(100% - #{$--sidebar-nav-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 折叠一级侧栏 */
|
||||
.ele-admin-nav-collapse.ele-admin-side-mix {
|
||||
.ele-admin-logo {
|
||||
width: $--sidebar-collapse-width;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar-nav {
|
||||
width: $--sidebar-collapse-width;
|
||||
|
||||
.ele-admin-sidebar-nav-menu {
|
||||
& > .el-scrollbar > .el-scrollbar__wrap > .el-scrollbar__view {
|
||||
padding: $--sidebar-collapse-nav-padding;
|
||||
|
||||
& > .el-menu.el-menu--collapse {
|
||||
& > .el-submenu,
|
||||
& > .el-menu-item {
|
||||
margin: $--sidebar-collapse-nav-item-margin;
|
||||
}
|
||||
|
||||
& > .el-menu-item > a,
|
||||
& > .el-submenu > .el-submenu__title {
|
||||
padding: $--sidebar-collapse-nav-item-padding !important;
|
||||
|
||||
i {
|
||||
font-size: $--sidebar-collapse-icon-font-size;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
transform: scale(0);
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-body {
|
||||
width: calc(100% - #{$--sidebar-collapse-width});
|
||||
}
|
||||
|
||||
&:not(.ele-admin-collapse) .ele-admin-sidebar + .ele-admin-body {
|
||||
width: calc(100% - #{$--sidebar-width});
|
||||
}
|
||||
}
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* 侧栏彩色图标 */
|
||||
.ele-admin-side-colorful {
|
||||
.ele-admin-sidebar .ele-admin-sidebar-menus > .el-scrollbar {
|
||||
& > .el-scrollbar__wrap > .el-scrollbar__view > .el-menu > li {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
color: $--sidebar-colorful-font-color;
|
||||
background: $--sidebar-colorful-color-1;
|
||||
width: $--sidebar-colorful-icon-width;
|
||||
height: $--sidebar-colorful-icon-width;
|
||||
line-height: $--sidebar-colorful-line-height;
|
||||
font-size: $--sidebar-colorful-icon-size;
|
||||
vertical-align: baseline;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
vertical-align: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-2;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-3;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-4;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-5;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-6;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-7;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
& > .el-submenu__title > i:first-child,
|
||||
& > a > i:first-child,
|
||||
& > a > .el-tooltip > i:first-child {
|
||||
background: $--sidebar-colorful-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-sidebar .el-submenu > .el-menu > li {
|
||||
& > a > i:first-child:not(.el-submenu__icon-arrow),
|
||||
& > .el-submenu__title > i:first-child:not(.el-submenu__icon-arrow) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > a > span:before,
|
||||
& > .el-submenu__title > span:before {
|
||||
content: '';
|
||||
width: $--sidebar-colorful-dot-size;
|
||||
height: $--sidebar-colorful-dot-size;
|
||||
margin: $--sidebar-colorful-dot-margin;
|
||||
position: static;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: 0.05em;
|
||||
background: $--border-color-base;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&:hover {
|
||||
& > a > span:before,
|
||||
& > .el-submenu__title > span:before {
|
||||
background: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-side-dark:not(.ele-admin-side-mix) .ele-admin-sidebar {
|
||||
.el-submenu > .el-menu > li {
|
||||
&.is-active,
|
||||
&:hover {
|
||||
& > a > span:before,
|
||||
& > .el-submenu__title > span:before {
|
||||
background: $--menu-dark-item-selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+149
@@ -0,0 +1,149 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* header */
|
||||
.ele-admin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $--header-height;
|
||||
background: $--header-light-background;
|
||||
box-shadow: $--header-light-shadow;
|
||||
z-index: calc(#{$--layout-z-index} + 2);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
// logo
|
||||
.ele-admin-logo {
|
||||
width: $--sidebar-width;
|
||||
height: $--header-height;
|
||||
background: $--header-light-background;
|
||||
box-shadow: $--logo-light-shadow;
|
||||
transition: $--sidebar-transition;
|
||||
font-weight: $--logo-font-weight;
|
||||
font-family: $--logo-font-family;
|
||||
font-size: $--logo-font-size;
|
||||
color: $--logo-light-color;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
& > img {
|
||||
width: $--logo-size;
|
||||
height: $--logo-size;
|
||||
|
||||
& + span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 面包屑
|
||||
.ele-admin-breadcrumb {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
& > .el-breadcrumb {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-breadcrumb__item {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
height: $--header-height;
|
||||
line-height: $--header-height;
|
||||
}
|
||||
}
|
||||
|
||||
// nav
|
||||
.ele-admin-header-nav {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
& > .el-scrollbar > .el-scrollbar__wrap > .el-scrollbar__view > .el-menu {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
|
||||
& > .el-menu-item,
|
||||
& > .el-submenu > .el-submenu__title {
|
||||
padding: 0 12px;
|
||||
height: $--header-height;
|
||||
line-height: $--header-height;
|
||||
}
|
||||
|
||||
& > .el-menu-item,
|
||||
& > .el-submenu {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.ele-admin-header-tool {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 0 12px;
|
||||
font-size: 18px;
|
||||
|
||||
.ele-admin-header-tool-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: $--header-height;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $--header-tool-hover-bg;
|
||||
}
|
||||
|
||||
& > .el-dropdown {
|
||||
line-height: 1;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
|
||||
& > .el-icon-_language {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
.ele-admin-header-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
line-height: $--header-avatar-size;
|
||||
position: relative;
|
||||
|
||||
.el-avatar {
|
||||
width: $--header-avatar-size;
|
||||
height: $--header-avatar-size;
|
||||
line-height: $--header-avatar-size;
|
||||
|
||||
& + span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
import './index.scss';
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
@import './layout.scss';
|
||||
@import './header.scss';
|
||||
@import './sidebar.scss';
|
||||
@import './tabs.scss';
|
||||
@import './collapse.scss';
|
||||
@import './layout-style.scss';
|
||||
@import './layout-theme.scss';
|
||||
@import './tab-style.scss';
|
||||
@import './colorful-icon.scss';
|
||||
@import './layout-mobile.scss';
|
||||
@import './scrollbar.scss';
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* 小屏幕样式 */
|
||||
@media only screen and (max-width: 768px) {
|
||||
.ele-admin-responsive {
|
||||
.ele-admin-logo,
|
||||
.ele-admin-sidebar {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
width: $--sidebar-width !important;
|
||||
z-index: calc(#{$--sidebar-fixed-z-index} + 1) !important;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar {
|
||||
top: $--header-height !important;
|
||||
}
|
||||
|
||||
.ele-admin-logo > span {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.ele-admin-body,
|
||||
.ele-admin-header {
|
||||
padding-left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ele-admin-tabs {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.ele-admin-breadcrumb,
|
||||
.ele-admin-sidebar-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.ele-admin-collapse) {
|
||||
.ele-admin-shade {
|
||||
left: $--sidebar-width;
|
||||
background: $--layout-mask-bg;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ele-admin-header {
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-collapse {
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-logo {
|
||||
left: calc(0px - #{$--sidebar-width}) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-show-tabs:not(.ele-admin-tab-card):not(.ele-admin-head-dark) {
|
||||
.ele-admin-header {
|
||||
box-shadow: 0 -1px 0 $--border-color-extra-light inset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.ele-admin-responsive .ele-admin-header .ele-admin-header-tool {
|
||||
padding: 0 6px;
|
||||
|
||||
.ele-admin-header-tool-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+314
@@ -0,0 +1,314 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* 固定顶栏 */
|
||||
.ele-admin-fixed-header:not(.ele-admin-fixed-body) {
|
||||
padding-top: $--header-height;
|
||||
|
||||
.ele-admin-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.ele-admin-show-tabs .ele-admin-body {
|
||||
padding-top: $--tabs-height;
|
||||
}
|
||||
|
||||
.ele-admin-tabs {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: $--header-height;
|
||||
transition: left $--sidebar-transition-anim;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
|
||||
left: $--sidebar-width;
|
||||
}
|
||||
|
||||
&.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
|
||||
&:not(.ele-admin-fixed-sidebar) {
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-sidebar-nav {
|
||||
z-index: calc(#{$--layout-z-index} + 1);
|
||||
}
|
||||
|
||||
&:not(.ele-admin-logo-auto):not(.ele-admin-side-dark) {
|
||||
.ele-admin-logo {
|
||||
box-shadow: 0 -1px 0 $--border-color-extra-light inset;
|
||||
}
|
||||
|
||||
&.ele-admin-head-dark .ele-admin-logo,
|
||||
&.ele-admin-tab-card .ele-admin-logo,
|
||||
&:not(.ele-admin-show-tabs) .ele-admin-logo {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-side-mix {
|
||||
.ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
|
||||
left: calc(
|
||||
#{$--sidebar-width} - #{$--sidebar-collapse-width} + #{$--sidebar-nav-width}
|
||||
);
|
||||
}
|
||||
|
||||
.ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
|
||||
left: $--sidebar-nav-width;
|
||||
}
|
||||
|
||||
&.ele-admin-nav-collapse {
|
||||
.ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
|
||||
left: $--sidebar-width;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-collapse {
|
||||
.ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
|
||||
left: $--sidebar-nav-width;
|
||||
}
|
||||
|
||||
&.ele-admin-nav-collapse .ele-admin-sidebar + .ele-admin-body {
|
||||
.ele-admin-tabs {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 固定侧栏 */
|
||||
.ele-admin-fixed-sidebar:not(.ele-admin-fixed-body) {
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-sidebar-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: $--header-height;
|
||||
}
|
||||
|
||||
&:not(.ele-admin-fixed-header):not(.ele-admin-logo-auto) .ele-admin-logo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.ele-admin-logo-auto:not(.ele-admin-fixed-header) {
|
||||
.ele-admin-sidebar-nav,
|
||||
&:not(.ele-admin-side-mix) .ele-admin-sidebar {
|
||||
top: 0;
|
||||
z-index: calc(#{$--layout-z-index} + 3);
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ele-admin-header,
|
||||
.ele-admin-sidebar + .ele-admin-body,
|
||||
.ele-admin-sidebar-nav + .ele-admin-body {
|
||||
padding-left: $--sidebar-width;
|
||||
transition: padding-left $--sidebar-transition-anim,
|
||||
box-shadow $--sidebar-transition-anim;
|
||||
}
|
||||
|
||||
&.ele-admin-collapse {
|
||||
.ele-admin-sidebar + .ele-admin-body,
|
||||
&:not(.ele-admin-fixed-header):not(.ele-admin-side-mix) .ele-admin-header {
|
||||
padding-left: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-side-mix {
|
||||
&.ele-admin-collapse .ele-admin-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar {
|
||||
left: $--sidebar-nav-width;
|
||||
}
|
||||
|
||||
.ele-admin-header,
|
||||
.ele-admin-sidebar + .ele-admin-body,
|
||||
.ele-admin-sidebar-nav + .ele-admin-body {
|
||||
padding-left: $--sidebar-nav-width;
|
||||
}
|
||||
|
||||
&:not(.ele-admin-fixed-header) .ele-admin-sidebar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
&.ele-admin-nav-collapse {
|
||||
.ele-admin-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ele-admin-header,
|
||||
.ele-admin-sidebar + .ele-admin-body,
|
||||
.ele-admin-sidebar-nav + .ele-admin-body {
|
||||
padding-left: $--sidebar-collapse-width;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-fixed-header {
|
||||
.ele-admin-header {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.ele-admin-side-mix {
|
||||
.ele-admin-sidebar + .ele-admin-body {
|
||||
padding-left: calc(
|
||||
#{$--sidebar-width} - #{$--sidebar-collapse-width} + #{$--sidebar-nav-width}
|
||||
);
|
||||
}
|
||||
|
||||
&.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
|
||||
padding-left: $--sidebar-nav-width;
|
||||
}
|
||||
|
||||
&.ele-admin-nav-collapse {
|
||||
.ele-admin-header {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar {
|
||||
left: $--sidebar-collapse-width;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar + .ele-admin-body {
|
||||
padding-left: $--sidebar-width;
|
||||
}
|
||||
|
||||
&.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
|
||||
padding-left: $--sidebar-collapse-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 固定主体 */
|
||||
.ele-admin-fixed-body {
|
||||
.ele-admin-content {
|
||||
height: calc(100vh - #{$--header-height});
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-sidebar-nav {
|
||||
height: calc(100vh - #{$--header-height});
|
||||
}
|
||||
|
||||
&.ele-admin-show-tabs {
|
||||
.ele-admin-content {
|
||||
height: calc(100vh - #{$--header-height} - #{$--tabs-height});
|
||||
}
|
||||
|
||||
&.ele-admin-tab-card .ele-admin-content {
|
||||
height: calc(
|
||||
100vh - #{$--header-height} - #{$--tabs-height} - #{$--tabs-card-padding}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 全屏内容区域 */
|
||||
.ele-admin-body-fullscreen {
|
||||
padding-top: 0 !important;
|
||||
|
||||
.ele-admin-header,
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-sidebar-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-admin-body {
|
||||
min-height: 100vh;
|
||||
padding-left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ele-admin-tabs {
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
&.ele-admin-fixed-body {
|
||||
.ele-admin-content {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
&.ele-admin-show-tabs:not(.ele-admin-content-fullscreen) {
|
||||
.ele-admin-content {
|
||||
height: calc(100vh - #{$--tabs-height}) !important;
|
||||
}
|
||||
|
||||
&.ele-admin-tab-card .ele-admin-content {
|
||||
height: calc(
|
||||
100vh - #{$--tabs-height} - #{$--tabs-card-padding}
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ele-admin-content-fullscreen {
|
||||
.ele-admin-body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.ele-admin-tabs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主体内容定宽 */
|
||||
.ele-admin-body-limit .ele-body {
|
||||
max-width: $--body-limit-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* logo 宽度自适应 */
|
||||
.ele-admin-logo-auto.ele-admin-layout {
|
||||
.ele-admin-logo {
|
||||
width: auto;
|
||||
padding: 0 12px 0 24px;
|
||||
color: $--logo-light-color;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
|
||||
& > span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
& + .ele-admin-header-nav {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-sidebar,
|
||||
.ele-admin-sidebar-nav {
|
||||
z-index: calc(#{$--layout-z-index} + 1);
|
||||
}
|
||||
|
||||
&.ele-admin-head-dark .ele-admin-logo {
|
||||
color: $--logo-dark-color;
|
||||
}
|
||||
}
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
@import '../../style/themes/default.scss';
|
||||
|
||||
/* 暗色顶栏 */
|
||||
.ele-admin-head-dark .ele-admin-header {
|
||||
color: $--menu-dark-item-selected-color;
|
||||
background: $--header-background;
|
||||
box-shadow: $--header-dark-shadow;
|
||||
|
||||
.ele-admin-header-tool .ele-admin-header-tool-item:hover {
|
||||
background: $--header-dark-tool-hover-bg;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a,
|
||||
.el-breadcrumb__inner.is-link,
|
||||
.el-breadcrumb__separator {
|
||||
color: $--menu-dark-item-color;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner a:hover,
|
||||
.el-breadcrumb__inner.is-link:hover {
|
||||
color: $--menu-dark-item-selected-color;
|
||||
}
|
||||
|
||||
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
|
||||
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
|
||||
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
|
||||
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
|
||||
color: $--menu-dark-item-selected-color;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
color: $--menu-dark-item-selected-color;
|
||||
}
|
||||
|
||||
// 主色顶栏
|
||||
&.ele-admin-header-primary {
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色侧栏 */
|
||||
.ele-admin-side-dark {
|
||||
.ele-admin-logo {
|
||||
color: $--logo-dark-color;
|
||||
box-shadow: $--logo-dark-shadow;
|
||||
background: $--sidebar-background-dark;
|
||||
}
|
||||
|
||||
.ele-admin-sidebar {
|
||||
box-shadow: $--sidebar-dark-shadow;
|
||||
background: $--sidebar-background-dark;
|
||||
}
|
||||
|
||||
&.ele-admin-side-mix {
|
||||
&:not(.ele-admin-collapse) {
|
||||
.ele-admin-logo,
|
||||
.ele-admin-sidebar-nav {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-sidebar-nav {
|
||||
background: $--sidebar-background-dark;
|
||||
|
||||
.ele-admin-sidebar-nav-menu > .el-scrollbar > .el-scrollbar__wrap {
|
||||
& > .el-scrollbar__view > .el-menu.el-menu--collapse {
|
||||
& > .el-menu-item:not(.is-active):hover,
|
||||
& > .el-submenu:not(.is-active) > .el-submenu__title:hover {
|
||||
background: $--header-dark-tool-hover-bg;
|
||||
}
|
||||
|
||||
& > .el-submenu.is-active > .el-submenu__title {
|
||||
background: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-sidebar-nav-tool-item {
|
||||
color: $--menu-dark-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $--menu-dark-item-selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user