提取ele-pro修改源码
This commit is contained in:
weicw
@@ -5,9 +5,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zh_CN from 'ele-admin-pro/packages/lang/zh_CN';
|
||||
import zh_TW from 'ele-admin-pro/packages/lang/zh_TW';
|
||||
import en from 'ele-admin-pro/packages/lang/en_US';
|
||||
import zh_CN from '@/components/ele-admin-pro/packages/lang/zh_CN';
|
||||
import zh_TW from '@/components/ele-admin-pro/packages/lang/zh_TW';
|
||||
import en from '@/components/ele-admin-pro/packages/lang/en_US';
|
||||
|
||||
const languages = {zh_CN, zh_TW, en};
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ const updateRoadNoise = function (data) {
|
||||
}
|
||||
|
||||
// -------------------------统计---------------------
|
||||
const pageRoadNoiseStatisticUrl = '/sound/road/collect/page';
|
||||
const pageRoadNoiseStatisticUrl = '/sound/road/noise/statistic';
|
||||
export {
|
||||
pageBillUrl,
|
||||
saveRoadNoiseBill,
|
||||
|
||||
32
src/components/ele-admin-pro/README.md
Normal file
32
src/components/ele-admin-pro/README.md
Normal file
@@ -0,0 +1,32 @@
|
||||
## 简介
|
||||
|
||||
EleAdminPro是一套基于 Vue3、AntDesignVue 扩展的后台管理模板组件库,
|
||||
官网地址: [https://eleadmin.com](https://eleadmin.com/) .
|
||||
|
||||
## 组件
|
||||
|
||||
名称 | 描述 | 版本说明
|
||||
--- | --- | ---
|
||||
EleAvatarList | 头像列表组件 |
|
||||
EleChart | echarts图表组件 |
|
||||
EleCropper | 图片裁剪组件 |
|
||||
EleCropperModal | 图片裁剪弹窗组件 |
|
||||
EleEditTag | 标签输入框组件 |
|
||||
EleFileList | 文件列表组件 |
|
||||
EleIconPicker | 图标选择器 |
|
||||
EleMapPicker | 地图选择弹窗 |
|
||||
EleProBreadcrumb | 布局面包屑组件 | v1.1.0新增
|
||||
ELeProHeader | 布局顶栏组件 | v1.1.0新增
|
||||
EleProLayout | 布局组件 | v1.1.0新增
|
||||
EleProSetting | 主题设置抽屉组件 | v1.1.0新增
|
||||
EleProSidebar | 布局侧边栏组件 | v1.1.0新增
|
||||
EleProSidebarItem | 布局菜单item组件 | v1.1.0新增
|
||||
EleProTable | 高级表格组件 | v1.1.0新增
|
||||
EleProTableColumn | 高级表格column组件 | v1.1.0新增
|
||||
EleProTableTools | 高级表格工具按钮组件 | v1.1.0新增
|
||||
EleProTabs | 布局多页签组件 | v1.1.0新增
|
||||
EleResult | 操作结果组件 |
|
||||
ElTableDraggable | 拖拽排序表格组件 |
|
||||
EleTagsInput | 标签输入组件 |
|
||||
EleToolbar | 表格工具栏组件 | v1.1.0新增
|
||||
EleWordCloud | 词云组件 |
|
||||
64
src/components/ele-admin-pro/package.json
Normal file
64
src/components/ele-admin-pro/package.json
Normal file
@@ -0,0 +1,64 @@
|
||||
{
|
||||
"name": "ele-admin-pro",
|
||||
"version": "1.5.0",
|
||||
"description": "ele-admin-pro library",
|
||||
"main": "packages/index.js",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"build:lib": "vue-cli-service build --target lib --name ele-admin-pro --dest lib packages/index.js",
|
||||
"lint": "vue-cli-service lint",
|
||||
"theme:dynamic": "vue-cli-service build --target lib --name dynamic --dest dist packages/style/dynamic.less"
|
||||
},
|
||||
"keywords": [
|
||||
"ele-admin-pro"
|
||||
],
|
||||
"author": "eclouds@foxmail.com",
|
||||
"license": "SEE LICENSE IN <https://eleadmin.com/copyright>",
|
||||
"homepage": "https://eleadmin.com",
|
||||
"peerDependencies": {
|
||||
"ant-design-vue": ">=2.0.0",
|
||||
"nprogress": ">=0.2.0",
|
||||
"vue": ">=3.0.0",
|
||||
"vuedraggable": ">=4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@amap/amap-jsapi-loader": "~1.0.1",
|
||||
"@tinymce/tinymce-vue": "~4.0.4",
|
||||
"@vue/cli-plugin-babel": "~4.5.13",
|
||||
"@vue/cli-plugin-eslint": "~4.5.13",
|
||||
"@vue/cli-plugin-router": "~4.5.13",
|
||||
"@vue/cli-plugin-vuex": "~4.5.13",
|
||||
"@vue/cli-service": "~4.5.13",
|
||||
"@vue/compiler-sfc": "~3.1.5",
|
||||
"ant-design-vue": "~2.2.2",
|
||||
"axios": "~0.21.1",
|
||||
"babel-eslint": "~10.1.0",
|
||||
"core-js": "~3.15.2",
|
||||
"countup.js": "~2.0.7",
|
||||
"cropperjs": "~1.5.12",
|
||||
"echarts": "~5.1.2",
|
||||
"echarts-wordcloud": "~2.0.0",
|
||||
"eslint": "~6.8.0",
|
||||
"eslint-plugin-vue": "~7.13.0",
|
||||
"less": "~4.1.1",
|
||||
"less-loader": "~7.3.0",
|
||||
"nprogress": "~0.2.0",
|
||||
"tinymce": "~5.8.2",
|
||||
"postcss": "~8.3.5",
|
||||
"vue": "~3.1.5",
|
||||
"vue-axios": "~3.2.4",
|
||||
"vue-i18n": "~9.1.7",
|
||||
"vue-router": "~4.0.10",
|
||||
"vuedraggable": "~4.0.3",
|
||||
"vuex": "~4.0.2",
|
||||
"xgplayer-vue": "~1.1.5",
|
||||
"xlsx": "~0.17.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 头像列表组件 license by http://eleadmin.com */
|
||||
import EleAvatarList from './src/main';
|
||||
|
||||
EleAvatarList.install = function (app) {
|
||||
app.component(EleAvatarList.name, EleAvatarList);
|
||||
};
|
||||
|
||||
export default EleAvatarList;
|
||||
@@ -0,0 +1,145 @@
|
||||
<!-- 头像列表组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div class="ele-avatar-list">
|
||||
<template v-for="(item,index) in list">
|
||||
<template v-if="tooltip">
|
||||
<a-tooltip
|
||||
:key="index"
|
||||
:title="item[name]"
|
||||
:placement="placement"
|
||||
:arrow-point-at-center="true"
|
||||
:overlay-class-name="overlayClassName"
|
||||
:overlay-style="overlayStyle">
|
||||
<a-avatar
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:src="item[avatar]"
|
||||
:alt="item[name]"
|
||||
:style="[commonStyle, itemStyle, avatarStyle]"/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-avatar
|
||||
:key="index"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:src="item[avatar]"
|
||||
:alt="item[name]"
|
||||
:style="[commonStyle, itemStyle, avatarStyle]"/>
|
||||
</template>
|
||||
</template>
|
||||
<a-avatar
|
||||
v-if="showMore"
|
||||
class="ele-avatar-list-more"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:style="[commonStyle, itemStyle, moreStyle]">
|
||||
+{{ data.length - max }}
|
||||
</a-avatar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EleAvatarList',
|
||||
props: {
|
||||
// 头像数据
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 最大显示个数
|
||||
max: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// name字段名
|
||||
name: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
// avatar字段名
|
||||
avatar: {
|
||||
type: String,
|
||||
default: 'avatar'
|
||||
},
|
||||
// avatar形状
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
},
|
||||
// avatar大小
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 'default'
|
||||
},
|
||||
// 自定义item样式
|
||||
itemStyle: [String, Object],
|
||||
// 自定义avatar样式
|
||||
avatarStyle: [String, Object],
|
||||
// 自定义more样式
|
||||
moreStyle: [String, Object],
|
||||
// 是否需要tooltip
|
||||
tooltip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// tooltip位置
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'top'
|
||||
},
|
||||
// tooltip自定义class
|
||||
overlayClassName: String,
|
||||
// tooltip自定义样式
|
||||
overlayStyle: String
|
||||
},
|
||||
computed: {
|
||||
// 公共样式
|
||||
commonStyle() {
|
||||
if (typeof this.size === 'number') {
|
||||
return {
|
||||
marginLeft: `${-this.size / 3}px`
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
marginLeft: {large: '-12px', default: '-10px', small: '-8px'}[this.size]
|
||||
};
|
||||
}
|
||||
},
|
||||
// 头像列表
|
||||
list() {
|
||||
if (!this.max || this.data.length <= this.max) {
|
||||
return this.data;
|
||||
}
|
||||
return this.data.slice(0, this.max);
|
||||
},
|
||||
// 是否显示更多
|
||||
showMore() {
|
||||
return this.max && this.data.length > this.max;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-avatar-list {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ele-avatar-list .ant-avatar {
|
||||
cursor: pointer;
|
||||
border: 1px solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.ele-avatar-list .ant-avatar:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.ele-avatar-list .ele-avatar-list-more {
|
||||
color: #f56a00;
|
||||
background: #fde3cf;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
8
src/components/ele-admin-pro/packages/ele-chart/index.js
Normal file
8
src/components/ele-admin-pro/packages/ele-chart/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/** echarts 图表组件封装 license by http://eleadmin.com */
|
||||
import EleChart from './src/main';
|
||||
|
||||
EleChart.install = function (app) {
|
||||
app.component(EleChart.name, EleChart);
|
||||
};
|
||||
|
||||
export default EleChart;
|
||||
268
src/components/ele-admin-pro/packages/ele-chart/src/main.vue
Normal file
268
src/components/ele-admin-pro/packages/ele-chart/src/main.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<!-- echarts 图表组件封装 https://github.com/ecomfe/vue-echarts -->
|
||||
<template>
|
||||
<div class="ele-charts"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import EleCharTheme from './theme.js';
|
||||
// 改变后需要重新初始化的属性
|
||||
const INIT_TRIGGERS = ['theme', 'initOptions'];
|
||||
// 改变后需要重新监听options改变的属性
|
||||
const REWATCH_TRIGGERS = ['manualUpdate', 'watchShallow'];
|
||||
|
||||
export default {
|
||||
name: 'EleChart',
|
||||
props: {
|
||||
// 主题
|
||||
theme: {
|
||||
type: [String, Object],
|
||||
default() {
|
||||
return EleCharTheme;
|
||||
}
|
||||
},
|
||||
// 图表初始配置
|
||||
initOptions: Object,
|
||||
// 图表配置
|
||||
options: Object,
|
||||
// 实例分组
|
||||
group: String,
|
||||
// 是否关闭深度监听options改变
|
||||
watchShallow: Boolean,
|
||||
// 是否关闭响应式更新
|
||||
manualUpdate: Boolean
|
||||
},
|
||||
computed: {
|
||||
// 屏幕宽度
|
||||
screenWidth() {
|
||||
try {
|
||||
return this.$store.state.theme.screenWidth;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 侧边栏折叠状态
|
||||
collapse() {
|
||||
try {
|
||||
return this.$store.state.theme.collapse;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
group(group) {
|
||||
this.chart.group = group;
|
||||
},
|
||||
screenWidth() {
|
||||
this.resize();
|
||||
},
|
||||
collapse() {
|
||||
setTimeout(() => {
|
||||
this.resize();
|
||||
}, 360);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initOptionsWatcher();
|
||||
INIT_TRIGGERS.forEach(prop => {
|
||||
this.$watch(
|
||||
prop,
|
||||
() => {
|
||||
this.refresh();
|
||||
},
|
||||
{deep: true}
|
||||
);
|
||||
});
|
||||
REWATCH_TRIGGERS.forEach(prop => {
|
||||
this.$watch(prop, () => {
|
||||
this.initOptionsWatcher();
|
||||
this.refresh();
|
||||
});
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
if (this.options) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
if (this.chart) {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 初始化echarts */
|
||||
init(options) {
|
||||
if (this.chart) {
|
||||
return;
|
||||
}
|
||||
const chart = echarts.init(this.$el, this.theme, this.initOptions);
|
||||
if (this.group) {
|
||||
chart.group = this.group;
|
||||
}
|
||||
chart.setOption(options || this.manualOptions || this.options || {}, true);
|
||||
// echarts事件监听
|
||||
Object.keys(this.$attrs).forEach(event => {
|
||||
const handler = this.$attrs[event]
|
||||
if (handler instanceof Function) {
|
||||
if (event.indexOf('zr:') === 0) {
|
||||
chart.getZr().on(event.slice(3), handler);
|
||||
} else {
|
||||
chart.on(event, handler);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 增加实例属性
|
||||
Object.defineProperties(this, {
|
||||
width: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return this.delegateGet('getWidth');
|
||||
}
|
||||
},
|
||||
height: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return this.delegateGet('getHeight');
|
||||
}
|
||||
},
|
||||
isDisposed: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return !!this.delegateGet('isDisposed');
|
||||
}
|
||||
},
|
||||
computedOptions: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return this.delegateGet('getOption');
|
||||
}
|
||||
}
|
||||
});
|
||||
this.chart = chart;
|
||||
},
|
||||
/* 初始化options属性变化监听 */
|
||||
initOptionsWatcher() {
|
||||
if (this.__unwatchOptions) {
|
||||
this.__unwatchOptions();
|
||||
this.__unwatchOptions = null;
|
||||
}
|
||||
if (!this.manualUpdate) {
|
||||
this.__unwatchOptions = this.$watch(
|
||||
'options',
|
||||
(val, oldVal) => {
|
||||
if (!this.chart && val) {
|
||||
this.init();
|
||||
} else {
|
||||
this.chart.setOption(val, val !== oldVal);
|
||||
}
|
||||
},
|
||||
{deep: !this.watchShallow}
|
||||
);
|
||||
}
|
||||
},
|
||||
/* 显式修改options */
|
||||
mergeOptions(options, notMerge, lazyUpdate) {
|
||||
if (this.manualUpdate) {
|
||||
this.manualOptions = options;
|
||||
}
|
||||
if (!this.chart) {
|
||||
this.init(options);
|
||||
} else {
|
||||
this.delegateMethod('setOption', options, notMerge, lazyUpdate);
|
||||
}
|
||||
},
|
||||
/* 刷新echarts */
|
||||
refresh() {
|
||||
if (this.chart) {
|
||||
this.destroy();
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
/* 销毁echarts */
|
||||
destroy() {
|
||||
this.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
/* echarts实例方法 */
|
||||
resize(options) {
|
||||
this.delegateMethod('resize', options);
|
||||
},
|
||||
appendData(params) {
|
||||
this.delegateMethod('appendData', params);
|
||||
},
|
||||
clear() {
|
||||
this.delegateMethod('clear');
|
||||
},
|
||||
showLoading(type, options) {
|
||||
this.delegateMethod('showLoading', type, options);
|
||||
},
|
||||
hideLoading() {
|
||||
this.delegateMethod('hideLoading');
|
||||
},
|
||||
dispatchAction(payload) {
|
||||
this.delegateMethod('dispatchAction', payload);
|
||||
},
|
||||
convertToPixel(finder, value) {
|
||||
return this.delegateMethod('convertToPixel', finder, value);
|
||||
},
|
||||
convertFromPixel(finder, value) {
|
||||
return this.delegateMethod('convertFromPixel', finder, value);
|
||||
},
|
||||
containPixel(finder, value) {
|
||||
return this.delegateMethod('containPixel', finder, value);
|
||||
},
|
||||
getDataURL(options) {
|
||||
return this.delegateMethod('getDataURL', options);
|
||||
},
|
||||
getConnectedDataURL(options) {
|
||||
return this.delegateMethod('getConnectedDataURL', options);
|
||||
},
|
||||
dispose() {
|
||||
this.delegateMethod('dispose');
|
||||
},
|
||||
/* 调用echarts实例方法 */
|
||||
delegateMethod(name, ...args) {
|
||||
if (!this.chart) {
|
||||
this.init();
|
||||
}
|
||||
return this.chart[name](...args);
|
||||
},
|
||||
/* 获取echarts属性 */
|
||||
delegateGet(methodName) {
|
||||
if (!this.chart) {
|
||||
this.init();
|
||||
}
|
||||
return this.chart[methodName]();
|
||||
}
|
||||
},
|
||||
/* echarts静态方法 */
|
||||
connect(group) {
|
||||
if (typeof group !== 'string') {
|
||||
group = group.map(chart => chart.chart);
|
||||
}
|
||||
echarts.connect(group);
|
||||
},
|
||||
disconnect(group) {
|
||||
echarts.disconnect(group);
|
||||
},
|
||||
getMap(mapName) {
|
||||
return echarts.getMap(mapName);
|
||||
},
|
||||
registerMap(mapName, geoJSON, specialAreas) {
|
||||
echarts.registerMap(mapName, geoJSON, specialAreas);
|
||||
},
|
||||
registerTheme(name, theme) {
|
||||
echarts.registerTheme(name, theme);
|
||||
},
|
||||
graphic: echarts.graphic
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-charts > div:first-child {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
395
src/components/ele-admin-pro/packages/ele-chart/src/theme.js
Normal file
395
src/components/ele-admin-pro/packages/ele-chart/src/theme.js
Normal file
@@ -0,0 +1,395 @@
|
||||
/** echarts 图表主题 license by http://eleadmin.com */
|
||||
export default {
|
||||
"color": [
|
||||
"#3aa1ff",
|
||||
"#4ecb73",
|
||||
"#fbd437",
|
||||
"#36cbcb",
|
||||
"#f2637b",
|
||||
"#975fe5",
|
||||
"#fc8452",
|
||||
"#ea7ccc",
|
||||
"#5254cf"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#333333"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#888888"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"borderWidth": 1
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": "2"
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"borderWidth": 1
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": "2"
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"bar": {
|
||||
"barCategoryGap": "50%",
|
||||
"itemStyle": {
|
||||
"barBorderWidth": "0",
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "2",
|
||||
"borderColor": "#fff"
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"color": "#dd3f5d",
|
||||
"color0": "#51bd4b",
|
||||
"borderColor": "#dd3f5d",
|
||||
"borderColor0": "#51bd4b",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false,
|
||||
"color": [
|
||||
"#3aa1ff",
|
||||
"#4ecb73",
|
||||
"#fbd437",
|
||||
"#36cbcb",
|
||||
"#f2637b",
|
||||
"#975fe5",
|
||||
"#fc8452",
|
||||
"#ea7ccc",
|
||||
"#5254cf"
|
||||
],
|
||||
"label": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"areaColor": "#fafafa",
|
||||
"borderColor": "#d9d9d9",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"label": {
|
||||
"color": "#000",
|
||||
"textBorderColor": "#fff",
|
||||
"textBorderWidth": 1
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"areaColor": "#fafafa",
|
||||
"borderColor": "#d9d9d9",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"label": {
|
||||
"color": "#000",
|
||||
"textBorderColor": "#fff",
|
||||
"textBorderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"itemStyle": {
|
||||
"areaColor": "rgba(255,215,0,0.8)",
|
||||
"borderColor": "#d9d9d9",
|
||||
"borderWidth": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"right": 20,
|
||||
"left": 60,
|
||||
"bottom": 40
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
},
|
||||
"alignWithLabel": true
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"type": "dashed",
|
||||
"color": [
|
||||
"#E0E6F1"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"type": "dashed",
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"borderColor": "#888888"
|
||||
},
|
||||
"emphasis": {
|
||||
"iconStyle": {
|
||||
"borderColor": "#888888"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#888888"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#DAE1F5",
|
||||
"width": 2
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#A4B1D7",
|
||||
"borderWidth": "1"
|
||||
},
|
||||
"controlStyle": {
|
||||
"color": "#A4B1D7",
|
||||
"borderColor": "#A4B1D7",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#316bf3",
|
||||
"borderColor": "fff"
|
||||
},
|
||||
"label": {
|
||||
"color": "#A4B1D7"
|
||||
},
|
||||
"emphasis": {
|
||||
"itemStyle": {
|
||||
"color": "#FFF"
|
||||
},
|
||||
"controlStyle": {
|
||||
"color": "#A4B1D7",
|
||||
"borderColor": "#A4B1D7",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"label": {
|
||||
"color": "#A4B1D7"
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"itemHeight": 80,
|
||||
"itemWidth": 15,
|
||||
"color": [
|
||||
"#bf444c",
|
||||
"#d88273",
|
||||
"#f6efa6"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"handleSize": "100%"
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"color": "#eeeeee"
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 颜色选择器 license by http://eleadmin.com */
|
||||
import EleColorPicker from './src/main';
|
||||
|
||||
EleColorPicker.install = function (app) {
|
||||
app.component(EleColorPicker.name, EleColorPicker);
|
||||
};
|
||||
|
||||
export default EleColorPicker;
|
||||
@@ -0,0 +1,305 @@
|
||||
const hsv2hsl = function (hue, sat, val) {
|
||||
return [
|
||||
hue,
|
||||
(sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
|
||||
hue / 2
|
||||
];
|
||||
};
|
||||
|
||||
// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
|
||||
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
|
||||
const isOnePointZero = function (n) {
|
||||
return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
|
||||
};
|
||||
|
||||
const isPercentage = function (n) {
|
||||
return typeof n === 'string' && n.indexOf('%') !== -1;
|
||||
};
|
||||
|
||||
// Take input from [0, n] and return it as [0, 1]
|
||||
const bound01 = function (value, max) {
|
||||
if (isOnePointZero(value)) value = '100%';
|
||||
|
||||
const processPercent = isPercentage(value);
|
||||
value = Math.min(max, Math.max(0, parseFloat(value)));
|
||||
|
||||
// Automatically convert percentage into number
|
||||
if (processPercent) {
|
||||
value = parseInt(value * max, 10) / 100;
|
||||
}
|
||||
|
||||
// Handle floating point rounding errors
|
||||
if ((Math.abs(value - max) < 0.000001)) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
// Convert into [0, 1] range if it isn't already
|
||||
return (value % max) / parseFloat(max);
|
||||
};
|
||||
|
||||
const INT_HEX_MAP = {10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F'};
|
||||
|
||||
const toHex = function ({r, g, b}) {
|
||||
const hexOne = function (value) {
|
||||
value = Math.min(Math.round(value), 255);
|
||||
const high = Math.floor(value / 16);
|
||||
const low = value % 16;
|
||||
return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
|
||||
};
|
||||
|
||||
if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
|
||||
|
||||
return '#' + hexOne(r) + hexOne(g) + hexOne(b);
|
||||
};
|
||||
|
||||
const HEX_INT_MAP = {A: 10, B: 11, C: 12, D: 13, E: 14, F: 15};
|
||||
|
||||
const parseHexChannel = function (hex) {
|
||||
if (hex.length === 2) {
|
||||
return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
|
||||
}
|
||||
|
||||
return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
|
||||
};
|
||||
|
||||
const hsl2hsv = function (hue, sat, light) {
|
||||
sat = sat / 100;
|
||||
light = light / 100;
|
||||
let smin = sat;
|
||||
const lmin = Math.max(light, 0.01);
|
||||
let sv;
|
||||
let v;
|
||||
|
||||
light *= 2;
|
||||
sat *= (light <= 1) ? light : 2 - light;
|
||||
smin *= lmin <= 1 ? lmin : 2 - lmin;
|
||||
v = (light + sat) / 2;
|
||||
sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
|
||||
|
||||
return {
|
||||
h: hue,
|
||||
s: sv * 100,
|
||||
v: v * 100
|
||||
};
|
||||
};
|
||||
|
||||
// `rgbToHsv`
|
||||
// Converts an RGB color value to HSV
|
||||
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
|
||||
// *Returns:* { h, s, v } in [0,1]
|
||||
const rgb2hsv = function (r, g, b) {
|
||||
r = bound01(r, 255);
|
||||
g = bound01(g, 255);
|
||||
b = bound01(b, 255);
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
let h, s;
|
||||
let v = max;
|
||||
|
||||
const d = max - min;
|
||||
s = max === 0 ? 0 : d / max;
|
||||
|
||||
if (max === min) {
|
||||
h = 0; // achromatic
|
||||
} else {
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0);
|
||||
break;
|
||||
case g:
|
||||
h = (b - r) / d + 2;
|
||||
break;
|
||||
case b:
|
||||
h = (r - g) / d + 4;
|
||||
break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return {h: h * 360, s: s * 100, v: v * 100};
|
||||
};
|
||||
|
||||
// `hsvToRgb`
|
||||
// Converts an HSV color value to RGB.
|
||||
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
|
||||
// *Returns:* { r, g, b } in the set [0, 255]
|
||||
const hsv2rgb = function (h, s, v) {
|
||||
h = bound01(h, 360) * 6;
|
||||
s = bound01(s, 100);
|
||||
v = bound01(v, 100);
|
||||
|
||||
const i = Math.floor(h);
|
||||
const f = h - i;
|
||||
const p = v * (1 - s);
|
||||
const q = v * (1 - f * s);
|
||||
const t = v * (1 - (1 - f) * s);
|
||||
const mod = i % 6;
|
||||
const r = [v, q, p, p, t, v][mod];
|
||||
const g = [t, v, v, q, p, p][mod];
|
||||
const b = [p, p, t, v, v, q][mod];
|
||||
|
||||
return {
|
||||
r: Math.round(r * 255),
|
||||
g: Math.round(g * 255),
|
||||
b: Math.round(b * 255)
|
||||
};
|
||||
};
|
||||
|
||||
export default class Color {
|
||||
constructor(options) {
|
||||
this._hue = 0;
|
||||
this._saturation = 100;
|
||||
this._value = 100;
|
||||
this._alpha = 100;
|
||||
|
||||
this.enableAlpha = false;
|
||||
this.format = 'hex';
|
||||
this.value = '';
|
||||
|
||||
options = options || {};
|
||||
|
||||
for (let option in options) {
|
||||
if (Object.prototype.hasOwnProperty.call(options, option)) {
|
||||
this[option] = options[option];
|
||||
}
|
||||
}
|
||||
|
||||
this.doOnChange();
|
||||
}
|
||||
|
||||
set(prop, value) {
|
||||
if (arguments.length === 1 && typeof prop === 'object') {
|
||||
for (let p in prop) {
|
||||
if (Object.prototype.hasOwnProperty.call(prop, p)) {
|
||||
this[p] = prop[p];
|
||||
}
|
||||
}
|
||||
this.doOnChange();
|
||||
} else {
|
||||
this[prop] = value;
|
||||
this.doOnChange();
|
||||
}
|
||||
}
|
||||
|
||||
toRgb() {
|
||||
return hsv2rgb(this._hue, this._saturation, this._value);
|
||||
}
|
||||
|
||||
fromString(value) {
|
||||
if (!value) {
|
||||
this._hue = 0;
|
||||
this._saturation = 100;
|
||||
this._value = 100;
|
||||
this._alpha = 100;
|
||||
this.doOnChange();
|
||||
return;
|
||||
}
|
||||
|
||||
const fromHSV = (h, s, v) => {
|
||||
this._hue = Math.max(0, Math.min(360, h));
|
||||
this._saturation = Math.max(0, Math.min(100, s));
|
||||
this._value = Math.max(0, Math.min(100, v));
|
||||
this.doOnChange();
|
||||
};
|
||||
|
||||
if (value.indexOf('hsl') !== -1) {
|
||||
const parts = value.replace(/hsla|hsl|\(|\)/gm, '')
|
||||
.split(/\s|,/g)
|
||||
.filter((val) => val !== '')
|
||||
.map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
|
||||
if (parts.length === 4) {
|
||||
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
|
||||
} else if (parts.length === 3) {
|
||||
this._alpha = 100;
|
||||
}
|
||||
if (parts.length >= 3) {
|
||||
const {h, s, v} = hsl2hsv(parts[0], parts[1], parts[2]);
|
||||
fromHSV(h, s, v);
|
||||
}
|
||||
} else if (value.indexOf('hsv') !== -1) {
|
||||
const parts = value.replace(/hsva|hsv|\(|\)/gm, '')
|
||||
.split(/\s|,/g)
|
||||
.filter((val) => val !== '')
|
||||
.map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
|
||||
if (parts.length === 4) {
|
||||
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
|
||||
} else if (parts.length === 3) {
|
||||
this._alpha = 100;
|
||||
}
|
||||
if (parts.length >= 3) {
|
||||
fromHSV(parts[0], parts[1], parts[2]);
|
||||
}
|
||||
} else if (value.indexOf('rgb') !== -1) {
|
||||
const parts = value.replace(/rgba|rgb|\(|\)/gm, '')
|
||||
.split(/\s|,/g)
|
||||
.filter((val) => val !== '')
|
||||
.map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
|
||||
if (parts.length === 4) {
|
||||
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
|
||||
} else if (parts.length === 3) {
|
||||
this._alpha = 100;
|
||||
}
|
||||
if (parts.length >= 3) {
|
||||
const {h, s, v} = rgb2hsv(parts[0], parts[1], parts[2]);
|
||||
fromHSV(h, s, v);
|
||||
}
|
||||
} else if (value.indexOf('#') !== -1) {
|
||||
const hex = value.replace('#', '').trim();
|
||||
if (!/^(?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8}$/.test(hex)) {
|
||||
return;
|
||||
}
|
||||
let r, g, b;
|
||||
if (hex.length === 3) {
|
||||
r = parseHexChannel(hex[0] + hex[0]);
|
||||
g = parseHexChannel(hex[1] + hex[1]);
|
||||
b = parseHexChannel(hex[2] + hex[2]);
|
||||
} else if (hex.length === 6 || hex.length === 8) {
|
||||
r = parseHexChannel(hex.substring(0, 2));
|
||||
g = parseHexChannel(hex.substring(2, 4));
|
||||
b = parseHexChannel(hex.substring(4, 6));
|
||||
}
|
||||
if (hex.length === 8) {
|
||||
this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
|
||||
} else if (hex.length === 3 || hex.length === 6) {
|
||||
this._alpha = 100;
|
||||
}
|
||||
const {h, s, v} = rgb2hsv(r, g, b);
|
||||
fromHSV(h, s, v);
|
||||
}
|
||||
}
|
||||
|
||||
compare(color) {
|
||||
return Math.abs(color._hue - this._hue) < 2 &&
|
||||
Math.abs(color._saturation - this._saturation) < 1 &&
|
||||
Math.abs(color._value - this._value) < 1 &&
|
||||
Math.abs(color._alpha - this._alpha) < 1;
|
||||
}
|
||||
|
||||
doOnChange() {
|
||||
const {_hue, _saturation, _value, _alpha, format} = this;
|
||||
if (this.enableAlpha) {
|
||||
if (format === 'hsl') {
|
||||
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
|
||||
this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${_alpha / 100})`;
|
||||
} else if (format === 'hsv') {
|
||||
this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${_alpha / 100})`;
|
||||
} else {
|
||||
const {r, g, b} = hsv2rgb(_hue, _saturation, _value);
|
||||
this.value = `rgba(${r}, ${g}, ${b}, ${_alpha / 100})`;
|
||||
}
|
||||
} else {
|
||||
if (format === 'hsl') {
|
||||
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
|
||||
this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;
|
||||
} else if (format === 'hsv') {
|
||||
this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;
|
||||
} else if (format === 'rgb') {
|
||||
const {r, g, b} = hsv2rgb(_hue, _saturation, _value);
|
||||
this.value = `rgb(${r}, ${g}, ${b})`;
|
||||
} else {
|
||||
this.value = toHex(hsv2rgb(_hue, _saturation, _value));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="ele-color-alpha-slider">
|
||||
<div
|
||||
ref="bar"
|
||||
class="ele-color-alpha-slider-bar"
|
||||
:style="{background: background}"
|
||||
@click="handleClick">
|
||||
</div>
|
||||
<div
|
||||
ref="thumb"
|
||||
class="ele-color-alpha-slider-thumb"
|
||||
:style="{left: thumbLeft + 'px'}">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from '../draggable';
|
||||
|
||||
export default {
|
||||
name: 'EleAlphaSlider',
|
||||
emits: ['update:alpha'],
|
||||
props: {
|
||||
// 颜色的rgb值
|
||||
rgb: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// 透明度
|
||||
alpha: {
|
||||
type: Number,
|
||||
default: 100
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 滑块位置
|
||||
thumbLeft: 0,
|
||||
// 滑轨背景
|
||||
background: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 获取滑块的默认位置和滑轨的默认背景
|
||||
this.thumbLeft = this.getThumbLeft();
|
||||
this.background = this.getBackground();
|
||||
// 滑块、滑轨绑定鼠标移动事件
|
||||
const {bar, thumb} = this.$refs;
|
||||
const dragConfig = {
|
||||
drag: (event) => {
|
||||
this.handleDrag(event);
|
||||
},
|
||||
end: (event) => {
|
||||
this.handleDrag(event);
|
||||
}
|
||||
};
|
||||
draggable(bar, dragConfig);
|
||||
draggable(thumb, dragConfig);
|
||||
},
|
||||
methods: {
|
||||
/* 滑轨点击事件 */
|
||||
handleClick(event) {
|
||||
if (event.target !== this.$refs.thumb) {
|
||||
this.handleDrag(event);
|
||||
}
|
||||
},
|
||||
/* 透明度选中改变事件 */
|
||||
handleDrag(event) {
|
||||
const {bar, thumb} = this.$refs,
|
||||
rect = bar.getBoundingClientRect();
|
||||
let left = event.clientX - rect.left;
|
||||
left = Math.max(thumb.offsetWidth / 2, left);
|
||||
left = Math.min(left, rect.width - thumb.offsetWidth / 2);
|
||||
const alpha = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100);
|
||||
this.$emit('update:alpha', alpha);
|
||||
},
|
||||
/* 计算滑块位置 */
|
||||
getThumbLeft() {
|
||||
const {bar, thumb} = this.$refs;
|
||||
return Math.round(this.alpha * (bar.offsetWidth - thumb.offsetWidth / 2) / 100);
|
||||
},
|
||||
/* 获取滑轨背景 */
|
||||
getBackground() {
|
||||
const {r, g, b} = this.rgb;
|
||||
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rgb() {
|
||||
this.background = this.getBackground();
|
||||
},
|
||||
alpha() {
|
||||
this.thumbLeft = this.getThumbLeft();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-color-picker .ele-color-alpha-slider {
|
||||
height: 12px;
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-alpha-slider .ele-color-alpha-slider-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-alpha-slider .ele-color-alpha-slider-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="ele-color-hue-slider">
|
||||
<div
|
||||
ref="bar"
|
||||
class="ele-color-hue-slider-bar"
|
||||
@click="handleClick">
|
||||
</div>
|
||||
<div
|
||||
ref="thumb"
|
||||
class="ele-color-hue-slider-thumb"
|
||||
:style="{left: thumbLeft + 'px'}">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from '../draggable';
|
||||
|
||||
export default {
|
||||
name: 'EleHueSlider',
|
||||
emits: ['update:hue'],
|
||||
props: {
|
||||
// 选中的色相
|
||||
hue: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 滑块位置
|
||||
thumbLeft: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 获取滑块的默认位置
|
||||
this.thumbLeft = this.getThumbLeft();
|
||||
// 滑块、滑轨绑定鼠标移动事件
|
||||
const {bar, thumb} = this.$refs;
|
||||
const dragConfig = {
|
||||
drag: (event) => {
|
||||
this.handleDrag(event);
|
||||
},
|
||||
end: (event) => {
|
||||
this.handleDrag(event);
|
||||
}
|
||||
};
|
||||
draggable(bar, dragConfig);
|
||||
draggable(thumb, dragConfig);
|
||||
},
|
||||
methods: {
|
||||
/* 滑轨点击事件 */
|
||||
handleClick(event) {
|
||||
if (event.target !== this.$refs.thumb) {
|
||||
this.handleDrag(event);
|
||||
}
|
||||
},
|
||||
/* 颜色选中改变事件 */
|
||||
handleDrag(event) {
|
||||
const el = this.$el,
|
||||
thumb = this.$refs.thumb,
|
||||
rect = el.getBoundingClientRect();
|
||||
let left = event.clientX - rect.left;
|
||||
left = Math.min(left, rect.width - thumb.offsetWidth / 2);
|
||||
left = Math.max(thumb.offsetWidth / 2, left);
|
||||
const hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
|
||||
this.$emit('update:hue', hue);
|
||||
},
|
||||
/* 计算滑块位置 */
|
||||
getThumbLeft() {
|
||||
const el = this.$el,
|
||||
thumb = this.$refs.thumb;
|
||||
return Math.round(this.hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hue() {
|
||||
this.thumbLeft = this.getThumbLeft();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-color-picker .ele-color-hue-slider {
|
||||
height: 12px;
|
||||
padding: 0 2px;
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-color: #f00;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-hue-slider .ele-color-hue-slider-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-hue-slider .ele-color-hue-slider-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="ele-color-predefine">
|
||||
<div
|
||||
v-for="(item, index) in colors"
|
||||
:key="index"
|
||||
class="ele-color-predefine-item"
|
||||
@click="handleSelect(item)">
|
||||
<div :style="{'background-color': item}"></div>
|
||||
<check-outlined v-if="color ? (color.toLowerCase() === item.toLowerCase()) : false"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CheckOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'ElePredefine',
|
||||
components: {CheckOutlined},
|
||||
emits: ['update:color'],
|
||||
props: {
|
||||
// 颜色列表
|
||||
colors: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 选中的颜色
|
||||
color: String
|
||||
},
|
||||
methods: {
|
||||
/* 颜色选中 */
|
||||
handleSelect(color) {
|
||||
this.$emit('update:color', color);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-color-picker .ele-color-predefine {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-predefine .ele-color-predefine-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
margin: 8px 0 0 8px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-predefine .ele-color-predefine-item > div {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-predefine .ele-color-predefine-item:nth-child(10n + 1) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-predefine .ele-color-predefine-item > .anticon {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px auto auto -6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="ele-color-svpanel" :style="{backgroundColor: background}">
|
||||
<div class="ele-color-svpanel-white"></div>
|
||||
<div class="ele-color-svpanel-black"></div>
|
||||
<div
|
||||
class="ele-color-svpanel-cursor"
|
||||
:style="{top: cursorTop + 'px', left: cursorLeft + 'px'}">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from '../draggable';
|
||||
|
||||
export default {
|
||||
name: 'EleSvPanel',
|
||||
emits: ['change'],
|
||||
props: {
|
||||
// 色相
|
||||
hue: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
// 饱和度
|
||||
saturation: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
// 明度
|
||||
value: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 滑块位置top
|
||||
cursorTop: 0,
|
||||
// 滑块位置left
|
||||
cursorLeft: 0,
|
||||
// 色板背景色
|
||||
background: 'hsl(0, 100%, 50%)'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 获取滑块的默认位置和色板的默认背景
|
||||
this.background = this.getBackground();
|
||||
this.cursorLeft = this.getCursorLeft();
|
||||
this.cursorTop = this.getCursorTop();
|
||||
// 色板绑定鼠标移动事件
|
||||
draggable(this.$el, {
|
||||
drag: (event) => {
|
||||
this.handleDrag(event);
|
||||
},
|
||||
end: (event) => {
|
||||
this.handleDrag(event);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/* 选中改变事件 */
|
||||
handleDrag(event) {
|
||||
const el = this.$el,
|
||||
rect = el.getBoundingClientRect();
|
||||
let left = event.clientX - rect.left;
|
||||
left = Math.max(0, left);
|
||||
left = Math.min(left, rect.width);
|
||||
let top = event.clientY - rect.top;
|
||||
top = Math.max(0, top);
|
||||
top = Math.min(top, rect.height);
|
||||
this.cursorLeft = left;
|
||||
this.cursorTop = top;
|
||||
this.$emit('change', {
|
||||
saturation: left / rect.width * 100,
|
||||
value: 100 - top / rect.height * 100
|
||||
});
|
||||
},
|
||||
/* 计算滑块位置top */
|
||||
getCursorTop() {
|
||||
let {clientHeight: height} = this.$el;
|
||||
return (100 - this.value) * height / 100;
|
||||
},
|
||||
/* 计算滑块位置left */
|
||||
getCursorLeft() {
|
||||
let {clientWidth: width} = this.$el;
|
||||
return this.saturation * width / 100;
|
||||
},
|
||||
/* 获取色板背景 */
|
||||
getBackground() {
|
||||
return 'hsl(' + this.hue + ', 100%, 50%)';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hue() {
|
||||
this.background = this.getBackground();
|
||||
},
|
||||
saturation() {
|
||||
this.cursorLeft = this.getCursorLeft();
|
||||
},
|
||||
value() {
|
||||
this.cursorTop = this.getCursorTop();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-color-picker .ele-color-svpanel {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-svpanel .ele-color-svpanel-white,
|
||||
.ele-color-picker .ele-color-svpanel .ele-color-svpanel-black {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-svpanel .ele-color-svpanel-white {
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-svpanel .ele-color-svpanel-black {
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-svpanel .ele-color-svpanel-cursor {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
transform: translate(-2px, -2px);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
let isDragging = false;
|
||||
|
||||
export default function (element, options) {
|
||||
const moveFn = function (event) {
|
||||
if (options.drag) {
|
||||
options.drag(event);
|
||||
}
|
||||
};
|
||||
const upFn = function (event) {
|
||||
document.removeEventListener('mousemove', moveFn);
|
||||
document.removeEventListener('mouseup', upFn);
|
||||
document.onselectstart = null;
|
||||
document.ondragstart = null;
|
||||
|
||||
isDragging = false;
|
||||
|
||||
if (options.end) {
|
||||
options.end(event);
|
||||
}
|
||||
};
|
||||
element.addEventListener('mousedown', function (event) {
|
||||
if (isDragging) return;
|
||||
document.onselectstart = function () {
|
||||
return false;
|
||||
};
|
||||
document.ondragstart = function () {
|
||||
return false;
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', moveFn);
|
||||
document.addEventListener('mouseup', upFn);
|
||||
isDragging = true;
|
||||
|
||||
if (options.start) {
|
||||
options.start(event);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<a-dropdown
|
||||
:trigger="['click']"
|
||||
:disabled="disabled"
|
||||
v-model:visible="showPicker"
|
||||
@visibleChange="handleVisibleChange">
|
||||
<div :class="triggerClass">
|
||||
<div :class="['ele-border-split ele-color-picker-trigger-inner', {'is-empty': !displayValue}]">
|
||||
<div :style="{'background-color': displayValue}"></div>
|
||||
</div>
|
||||
<div class="ele-text-secondary ele-color-picker-trigger-arrow">
|
||||
<down-outlined v-if="displayValue"/>
|
||||
<close-outlined v-else/>
|
||||
</div>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<div :class="['ant-dropdown-menu ele-color-picker', popperClass]">
|
||||
<div @click.stop="">
|
||||
<ele-sv-panel
|
||||
:hue="colorHue"
|
||||
:saturation="colorSaturation"
|
||||
:value="colorValue"
|
||||
@change="handleSVChange"/>
|
||||
<ele-hue-slider
|
||||
:hue="colorHue"
|
||||
@update:hue="handleHChange"/>
|
||||
<ele-alpha-slider
|
||||
v-if="showAlpha"
|
||||
:rgb="colorRgb"
|
||||
:alpha="colorAlpha"
|
||||
@update:alpha="handleAChange"/>
|
||||
<ele-predefine
|
||||
v-if="predefine"
|
||||
:color="displayValue"
|
||||
:colors="predefineColors"
|
||||
@update:color="handleColorChange"/>
|
||||
<div class="ele-color-picker-footer">
|
||||
<div class="ele-color-picker-value">
|
||||
<a-input
|
||||
size="small"
|
||||
v-model:value="inputValue"
|
||||
@pressEnter="handleInput"
|
||||
@blur="handleInput"/>
|
||||
</div>
|
||||
<div class="ele-color-picker-button-group">
|
||||
<locale-receiver component-name="ColorPicker">
|
||||
<template #default="locale">
|
||||
<a-button
|
||||
size="small"
|
||||
@click="clearValue">
|
||||
{{ locale['btn:clear'] }}
|
||||
</a-button>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
<locale-receiver component-name="Popconfirm">
|
||||
<template #default="locale">
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="confirmValue">
|
||||
{{ locale['okText'] }}
|
||||
</a-button>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Color from './color';
|
||||
import EleSvPanel from './components/ele-sv-panel';
|
||||
import EleHueSlider from './components/ele-hue-slider';
|
||||
import EleAlphaSlider from './components/ele-alpha-slider';
|
||||
import ElePredefine from './components/ele-predefine';
|
||||
import {DownOutlined, CloseOutlined} from '@ant-design/icons-vue';
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
|
||||
export default {
|
||||
name: 'EleColorPicker',
|
||||
components: {
|
||||
EleSvPanel,
|
||||
EleHueSlider,
|
||||
EleAlphaSlider,
|
||||
ElePredefine,
|
||||
DownOutlined,
|
||||
CloseOutlined,
|
||||
LocaleReceiver
|
||||
},
|
||||
emits: [
|
||||
'change',
|
||||
'active-change',
|
||||
'update:value'
|
||||
],
|
||||
props: {
|
||||
// 绑定的颜色, v-model
|
||||
value: String,
|
||||
// 绑定的颜色格式, hsl / hsv / hex / rgb
|
||||
colorFormat: String,
|
||||
// 是否支持透明度选择
|
||||
showAlpha: Boolean,
|
||||
// 预定义颜色
|
||||
predefine: Array,
|
||||
// 尺寸
|
||||
size: String,
|
||||
// 是否禁用
|
||||
disabled: Boolean,
|
||||
// 自定义下拉框类名
|
||||
popperClass: String,
|
||||
// 自定义类名
|
||||
customClass: String
|
||||
},
|
||||
data() {
|
||||
const color = new Color({
|
||||
enableAlpha: this.showAlpha,
|
||||
format: this.colorFormat
|
||||
});
|
||||
let displayValue = null;
|
||||
if (this.value) {
|
||||
color.fromString(this.value);
|
||||
displayValue = color.value;
|
||||
}
|
||||
return {
|
||||
// 颜色封装
|
||||
color: color,
|
||||
// 色相
|
||||
colorHue: color._hue,
|
||||
// 饱和度
|
||||
colorSaturation: color._saturation,
|
||||
// 明度
|
||||
colorValue: color._value,
|
||||
// 透明度
|
||||
colorAlpha: color._alpha,
|
||||
// rgb
|
||||
colorRgb: color.toRgb(),
|
||||
// 输入的颜色值
|
||||
inputValue: displayValue,
|
||||
// 当前显示的颜色值
|
||||
displayValue: displayValue,
|
||||
// 是否显示popper
|
||||
showPicker: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
triggerClass() {
|
||||
return [
|
||||
'ele-bg-white ele-border-split ele-color-picker-trigger',
|
||||
{'ele-color-picker-large': this.size === 'large'},
|
||||
{'ele-color-picker-small': this.size === 'small'},
|
||||
{'is-disabled': this.disabled},
|
||||
this.customClass
|
||||
];
|
||||
},
|
||||
predefineColors() {
|
||||
return this.predefine && this.predefine.map((value) => {
|
||||
const c = new Color({
|
||||
enableAlpha: this.showAlpha,
|
||||
format: this.colorFormat
|
||||
});
|
||||
c.fromString(value);
|
||||
return c.value;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 确定 */
|
||||
confirmValue() {
|
||||
this.$emit('update:value', this.color.value);
|
||||
this.$emit('change', this.color.value);
|
||||
this.$emit('active-change', this.color.value);
|
||||
this.showPicker = false;
|
||||
},
|
||||
/* 清空 */
|
||||
clearValue() {
|
||||
this.$emit('update:value', null);
|
||||
this.$emit('change', null);
|
||||
this.$emit('active-change', null);
|
||||
this.inputValue = null;
|
||||
this.displayValue = null;
|
||||
this.showPicker = false;
|
||||
},
|
||||
/* 色相改变处理 */
|
||||
handleHChange(value) {
|
||||
this.color.set('_hue', value);
|
||||
this.colorHue = this.color._hue;
|
||||
this.colorRgb = this.color.toRgb();
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
},
|
||||
/* 饱和度和明度改变处理 */
|
||||
handleSVChange(obj) {
|
||||
this.color.set({
|
||||
_saturation: obj.saturation,
|
||||
_value: obj.value
|
||||
});
|
||||
this.colorSaturation = this.color._saturation;
|
||||
this.colorValue = this.color._value;
|
||||
this.colorRgb = this.color.toRgb();
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
},
|
||||
/* 透明度改变处理 */
|
||||
handleAChange(value) {
|
||||
this.color.set('_alpha', value);
|
||||
this.colorAlpha = this.color._alpha;
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
},
|
||||
/* 颜色改变处理 */
|
||||
handleColorChange(value) {
|
||||
if (value) {
|
||||
if (value !== this.color.value) {
|
||||
this.color.fromString(value);
|
||||
this.colorHue = this.color._hue;
|
||||
this.colorSaturation = this.color._saturation;
|
||||
this.colorValue = this.color._value;
|
||||
this.colorAlpha = this.color._alpha;
|
||||
this.colorRgb = this.color.toRgb();
|
||||
}
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
}
|
||||
},
|
||||
/* 颜色输入改变处理 */
|
||||
handleInput() {
|
||||
if (this.inputValue) {
|
||||
this.handleColorChange(this.inputValue);
|
||||
} else {
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
}
|
||||
},
|
||||
/* picker展开/关闭处理 */
|
||||
handleVisibleChange(visible) {
|
||||
if (!visible) {
|
||||
if (this.value) {
|
||||
this.handleColorChange(this.value);
|
||||
} else {
|
||||
this.inputValue = null;
|
||||
this.displayValue = null;
|
||||
this.$emit('active-change', null);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value) {
|
||||
this.handleColorChange(value);
|
||||
} else {
|
||||
this.inputValue = null;
|
||||
this.displayValue = null;
|
||||
this.$emit('active-change', null);
|
||||
}
|
||||
},
|
||||
colorFormat(value) {
|
||||
this.color.set('format', value);
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
},
|
||||
showAlpha(value) {
|
||||
this.color.set('enableAlpha', value);
|
||||
this.inputValue = this.color.value;
|
||||
this.displayValue = this.color.value;
|
||||
this.$emit('active-change', this.color.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* trigger */
|
||||
.ele-color-picker-trigger {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid hsla(0, 0%, 60%, .15);
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger .ele-color-picker-trigger-inner {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px hsla(0, 0%, 60%, .15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger .ele-color-picker-trigger-inner:not(.is-empty) {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger .ele-color-picker-trigger-inner > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger .ele-color-picker-trigger-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px auto auto -6px;
|
||||
font-size: 12px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger .ele-color-picker-trigger-arrow > .anticon:not(.anticon-close) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 禁用状态 */
|
||||
.ele-color-picker-trigger.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger.is-disabled .ele-color-picker-trigger-inner {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
/* 尺寸控制 */
|
||||
.ele-color-picker-trigger.ele-color-picker-large {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ele-color-picker-trigger.ele-color-picker-small {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/* picker */
|
||||
.ele-color-picker.ant-dropdown-menu {
|
||||
width: 280px;
|
||||
padding: 12px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
.ele-color-picker .ele-color-picker-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-picker-footer .ele-color-picker-value {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-picker-footer .ele-color-picker-value > .ant-input {
|
||||
height: 24px;
|
||||
line-height: 1;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-color-picker .ele-color-picker-footer .ant-btn + .ant-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 数字动画组件 license by http://eleadmin.com */
|
||||
import EleCountUp from './src/main';
|
||||
|
||||
EleCountUp.install = function (app) {
|
||||
app.component(EleCountUp.name, EleCountUp);
|
||||
};
|
||||
|
||||
export default EleCountUp;
|
||||
155
src/components/ele-admin-pro/packages/ele-count-up/src/main.vue
Normal file
155
src/components/ele-admin-pro/packages/ele-count-up/src/main.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<!-- 数字动画组件 https://github.com/xlsdg/vue-countup-v2 -->
|
||||
<template>
|
||||
<span></span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CountUp} from 'countup.js';
|
||||
|
||||
const typeOf = type => object => Object.prototype.toString.call(object) === `[object ${type}]`;
|
||||
// const isString = typeOf('String');
|
||||
// const isObject = typeOf('Object');
|
||||
const isFunction = typeOf('Function');
|
||||
export default {
|
||||
__countup__: CountUp,
|
||||
name: 'EleCountUp',
|
||||
emits: ['ready'],
|
||||
props: {
|
||||
delay: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
endVal: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
instance: null,
|
||||
};
|
||||
},
|
||||
// computed: {},
|
||||
watch: {
|
||||
endVal: {
|
||||
handler(value) {
|
||||
const that = this;
|
||||
if (that.instance && isFunction(that.instance.update)) {
|
||||
that.instance.update(value);
|
||||
}
|
||||
},
|
||||
deep: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
const that = this;
|
||||
if (that.instance) {
|
||||
return;
|
||||
}
|
||||
const dom = that.$el;
|
||||
const instance = new CountUp(
|
||||
dom,
|
||||
that.endVal,
|
||||
that.options
|
||||
);
|
||||
if (instance.error) {
|
||||
// error
|
||||
return;
|
||||
}
|
||||
that.instance = instance;
|
||||
if (that.delay < 0) {
|
||||
that.$emit('ready', instance, CountUp);
|
||||
return;
|
||||
}
|
||||
setTimeout(() => instance.start(() => that.$emit('ready', instance, CountUp)), that.delay);
|
||||
},
|
||||
destroy() {
|
||||
const that = this;
|
||||
that.instance = null;
|
||||
},
|
||||
printValue(value) {
|
||||
const that = this;
|
||||
if (that.instance && isFunction(that.instance.printValue)) {
|
||||
return that.instance.printValue(value);
|
||||
}
|
||||
},
|
||||
start(callback) {
|
||||
const that = this;
|
||||
if (that.instance && isFunction(that.instance.start)) {
|
||||
return that.instance.start(callback);
|
||||
}
|
||||
},
|
||||
pauseResume() {
|
||||
const that = this;
|
||||
if (that.instance && isFunction(that.instance.pauseResume)) {
|
||||
return that.instance.pauseResume();
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
const that = this;
|
||||
if (that.instance && isFunction(that.instance.reset)) {
|
||||
return that.instance.reset();
|
||||
}
|
||||
},
|
||||
update(newEndVal) {
|
||||
const that = this;
|
||||
if (that.instance && isFunction(that.instance.update)) {
|
||||
return that.instance.update(newEndVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
// beforeCreate() {
|
||||
// const that = this;
|
||||
// console.log('beforeCreate');
|
||||
// },
|
||||
// created() {
|
||||
// const that = this;
|
||||
// console.log('created');
|
||||
// },
|
||||
// beforeMount() {
|
||||
// const that = this;
|
||||
// console.log('beforeMount');
|
||||
// },
|
||||
mounted() {
|
||||
const that = this;
|
||||
// console.log('mounted');
|
||||
that.create();
|
||||
},
|
||||
// beforeUpdate() {
|
||||
// const that = this;
|
||||
// console.log('beforeUpdate');
|
||||
// },
|
||||
// updated() {
|
||||
// const that = this;
|
||||
// console.log('updated');
|
||||
// },
|
||||
// activated() {
|
||||
// const that = this;
|
||||
// console.log('activated');
|
||||
// },
|
||||
// deactivated() {
|
||||
// const that = this;
|
||||
// console.log('deactivated');
|
||||
// },
|
||||
beforeUnmount() {
|
||||
const that = this;
|
||||
// console.log('beforeDestroy');
|
||||
that.destroy();
|
||||
},
|
||||
// destroyed() {
|
||||
// const that = this;
|
||||
// console.log('destroyed');
|
||||
// },
|
||||
// errorCaptured(err, vm, info) {
|
||||
// const that = this;
|
||||
// console.log('errorCaptured');
|
||||
// return true;
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 图片裁剪弹窗组件 license by http://eleadmin.com */
|
||||
import EleCropperModal from './src/main';
|
||||
|
||||
EleCropperModal.install = function (app) {
|
||||
app.component(EleCropperModal.name, EleCropperModal);
|
||||
};
|
||||
|
||||
export default EleCropperModal;
|
||||
@@ -0,0 +1,191 @@
|
||||
<!-- 图片裁剪弹窗组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
:title="title || locale.cropper.title"
|
||||
:width="width"
|
||||
:centered="centered"
|
||||
:closable="closable"
|
||||
:destroy-on-close="destroyOnClose"
|
||||
:force-render="forceRender"
|
||||
:keyboard="keyboard"
|
||||
:mask="mask"
|
||||
:mask-closable="maskClosable"
|
||||
:mask-style="maskStyle"
|
||||
:wrap-class-name="wrapClassName"
|
||||
:z-index="zIndex"
|
||||
:dialog-style="dialogStyle"
|
||||
:dialog-class="dialogClass"
|
||||
:footer="null"
|
||||
@update:visible="updateVisible"
|
||||
@cancel="onClosed">
|
||||
<template #title>
|
||||
<slot name="title"/>
|
||||
</template>
|
||||
<ele-cropper
|
||||
v-if="show"
|
||||
:src="src"
|
||||
:aspect-ratio="aspectRatio"
|
||||
:view-mode="viewMode"
|
||||
:accept="accept"
|
||||
:drag-mode="dragMode"
|
||||
:initial-aspect-ratio="initialAspectRatio"
|
||||
:min-container-width="minContainerWidth"
|
||||
:min-container-height="minContainerHeight"
|
||||
:min-canvas-width="minCanvasWidth"
|
||||
:min-canvas-height="minCanvasHeight"
|
||||
:min-crop-box-width="minCropBoxWidth"
|
||||
:min-crop-box-height="minCropBoxHeight"
|
||||
:cropped-width="croppedWidth"
|
||||
:cropped-height="croppedHeight"
|
||||
:cropped-min-width="croppedMinWidth"
|
||||
:cropped-min-height="croppedMinHeight"
|
||||
:cropped-max-width="croppedMaxWidth"
|
||||
:cropped-max-height="croppedMaxHeight"
|
||||
:cropped-fill-color="croppedFillColor"
|
||||
:to-blob="toBlob"
|
||||
:image-smoothing-enabled="imageSmoothingEnabled"
|
||||
:image-smoothing-quality="imageSmoothingQuality"
|
||||
:tools="tools"
|
||||
:show-preview="showPreview"
|
||||
:ok-text="okText"
|
||||
@done="onDone"/>
|
||||
</a-modal>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import EleCropper from '../../ele-cropper';
|
||||
|
||||
export default {
|
||||
name: 'EleCropperModal',
|
||||
components: {LocaleReceiver, EleCropper},
|
||||
props: {
|
||||
visible: Boolean,
|
||||
// cropper参数
|
||||
src: String,
|
||||
// 裁剪比例
|
||||
aspectRatio: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 裁剪组件模式
|
||||
viewMode: Number,
|
||||
dragMode: String,
|
||||
initialAspectRatio: Number,
|
||||
minContainerWidth: Number,
|
||||
minContainerHeight: Number,
|
||||
minCanvasWidth: Number,
|
||||
minCanvasHeight: Number,
|
||||
minCropBoxWidth: Number,
|
||||
minCropBoxHeight: Number,
|
||||
croppedWidth: Number,
|
||||
croppedHeight: Number,
|
||||
croppedMinWidth: Number,
|
||||
croppedMinHeight: Number,
|
||||
croppedMaxWidth: Number,
|
||||
croppedMaxHeight: Number,
|
||||
croppedFillColor: Number,
|
||||
imageSmoothingEnabled: Boolean,
|
||||
imageSmoothingQuality: String,
|
||||
// 是否返回blob数据
|
||||
toBlob: Boolean,
|
||||
// 允许上传的图片类型
|
||||
accept: {
|
||||
type: String,
|
||||
default: 'image/*'
|
||||
},
|
||||
// 操作按钮布局
|
||||
tools: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
// 是否显示预览组件
|
||||
showPreview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 完成按钮文字
|
||||
okText: String,
|
||||
// 弹窗参数
|
||||
centered: Boolean,
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
destroyOnClose: Boolean,
|
||||
forceRender: Boolean,
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskStyle: Object,
|
||||
title: String,
|
||||
width: {
|
||||
type: String,
|
||||
default: '680px'
|
||||
},
|
||||
wrapClassName: String,
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
dialogStyle: Object,
|
||||
dialogClass: String
|
||||
},
|
||||
emits: ['done', 'open', 'closed', 'update:visible'],
|
||||
data() {
|
||||
return {
|
||||
show: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.visible) {
|
||||
this.onOpen();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 裁剪完成 */
|
||||
onDone(result) {
|
||||
this.$emit('done', result);
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 弹窗打开回调 */
|
||||
onOpen() {
|
||||
this.show = true;
|
||||
this.$emit('open');
|
||||
},
|
||||
/* 弹窗关闭回调 */
|
||||
onClosed() {
|
||||
if (this.destroyOnClose) {
|
||||
this.show = false;
|
||||
}
|
||||
this.$emit('closed');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.onOpen();
|
||||
} else {
|
||||
this.onClosed();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 图片裁剪组件 license by http://eleadmin.com */
|
||||
import EleCropper from './src/main';
|
||||
|
||||
EleCropper.install = function (app) {
|
||||
app.component(EleCropper.name, EleCropper);
|
||||
};
|
||||
|
||||
export default EleCropper;
|
||||
567
src/components/ele-admin-pro/packages/ele-cropper/src/main.vue
Normal file
567
src/components/ele-admin-pro/packages/ele-cropper/src/main.vue
Normal file
@@ -0,0 +1,567 @@
|
||||
<!-- 图片裁剪组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<div class="ele-cropper">
|
||||
<div class="ele-cropper-group">
|
||||
<div class="ele-cropper-img-group">
|
||||
<img
|
||||
ref="eleCropperImg"
|
||||
:src="imgSrc"
|
||||
style="max-width: 100%;"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showPreview"
|
||||
ref="eleCropperPreviews"
|
||||
:style="pStyle"
|
||||
class="ele-cropper-preview-group">
|
||||
<div
|
||||
:style="pItemStyle1"
|
||||
class="ele-cropper-preview">
|
||||
</div>
|
||||
<div
|
||||
v-if="this.aspectRatio===1"
|
||||
:style="pItemStyle2"
|
||||
class="ele-cropper-preview">
|
||||
</div>
|
||||
<div
|
||||
v-if="this.aspectRatio!==1"
|
||||
:style="pItemStyle3"
|
||||
class="ele-cropper-preview">
|
||||
</div>
|
||||
<div
|
||||
v-if="this.aspectRatio!==1"
|
||||
:style="pItemStyle4"
|
||||
class="ele-cropper-preview">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tools" class="ele-cropper-tool">
|
||||
<a-button-group
|
||||
v-for="(item, index) in toolGroup"
|
||||
:key="index"
|
||||
class="ele-cropper-tool-item">
|
||||
<template v-for="(btn, i) in item">
|
||||
<template v-if="btn==='zoomIn'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.zoomIn"
|
||||
data-method="zoom"
|
||||
data-option="0.1"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<zoom-in-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='zoomOut'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.zoomOut"
|
||||
data-method="zoom"
|
||||
data-option="-0.1"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<zoom-out-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='moveL'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.rotateLeft"
|
||||
data-method="move"
|
||||
data-option="-10"
|
||||
data-option2="0"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<arrow-left-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='moveR'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.rotateRight"
|
||||
data-method="move"
|
||||
data-option="10"
|
||||
data-option2="0"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<arrow-right-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='moveT'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.moveLeft"
|
||||
data-method="move"
|
||||
data-option="0"
|
||||
data-option2="-10"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<arrow-up-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='moveB'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.moveRight"
|
||||
data-method="move"
|
||||
data-option="0"
|
||||
data-option2="10"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<arrow-down-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='rotateL'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.moveUp"
|
||||
data-method="rotate"
|
||||
data-option="-45"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<rotate-left-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='rotateR'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.moveDown"
|
||||
data-method="rotate"
|
||||
data-option="45"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<rotate-right-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='scaleX'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.flipX"
|
||||
data-method="scaleX"
|
||||
data-option="-1"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<swap-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='scaleY'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.flipY"
|
||||
data-method="scaleY"
|
||||
data-option="-1"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<swap-outlined style="transform: rotate(90deg);"/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='reset'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
:title="locale.cropper.reset"
|
||||
data-method="reset"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn">
|
||||
<template #icon>
|
||||
<sync-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template v-else-if="btn==='upload'">
|
||||
<a-upload
|
||||
:key="i"
|
||||
:before-upload="onUpload"
|
||||
:accept="accept"
|
||||
:show-upload-list="false">
|
||||
<a-button
|
||||
:title="locale.cropper.upload"
|
||||
type="primary"
|
||||
class="ele-cropper-tool-btn"
|
||||
style="border-top-right-radius:2px;border-bottom-right-radius:2px;">
|
||||
<template #icon>
|
||||
<upload-outlined/>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</template>
|
||||
<template v-else-if="btn==='crop'">
|
||||
<a-button
|
||||
:key="i"
|
||||
@click="onAction"
|
||||
type="primary"
|
||||
data-method="getCroppedCanvas"
|
||||
data-option="{"maxWidth":4096,"maxHeight":4096}">
|
||||
<template #icon>
|
||||
<check-outlined/>
|
||||
</template>
|
||||
<span>{{ okText || locale.cropper.ok }}</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import Cropper from 'cropperjs';
|
||||
import {
|
||||
ZoomInOutlined,
|
||||
ZoomOutOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined,
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
RotateLeftOutlined,
|
||||
RotateRightOutlined,
|
||||
SwapOutlined,
|
||||
SyncOutlined,
|
||||
UploadOutlined,
|
||||
CheckOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'EleCropper',
|
||||
components: {
|
||||
LocaleReceiver,
|
||||
ZoomInOutlined,
|
||||
ZoomOutOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined,
|
||||
ArrowUpOutlined,
|
||||
ArrowDownOutlined,
|
||||
RotateLeftOutlined,
|
||||
RotateRightOutlined,
|
||||
SwapOutlined,
|
||||
SyncOutlined,
|
||||
UploadOutlined,
|
||||
CheckOutlined
|
||||
},
|
||||
props: {
|
||||
// 图片地址
|
||||
src: String,
|
||||
// 裁剪比例
|
||||
aspectRatio: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 裁剪组件模式
|
||||
viewMode: Number,
|
||||
dragMode: String,
|
||||
initialAspectRatio: Number,
|
||||
minContainerWidth: Number,
|
||||
minContainerHeight: Number,
|
||||
minCanvasWidth: Number,
|
||||
minCanvasHeight: Number,
|
||||
minCropBoxWidth: Number,
|
||||
minCropBoxHeight: Number,
|
||||
croppedWidth: Number,
|
||||
croppedHeight: Number,
|
||||
croppedMinWidth: Number,
|
||||
croppedMinHeight: Number,
|
||||
croppedMaxWidth: Number,
|
||||
croppedMaxHeight: Number,
|
||||
croppedFillColor: Number,
|
||||
imageSmoothingEnabled: Boolean,
|
||||
imageSmoothingQuality: String,
|
||||
// 是否返回blob数据
|
||||
toBlob: Boolean,
|
||||
// 允许上传的图片类型
|
||||
accept: {
|
||||
type: String,
|
||||
default: 'image/*'
|
||||
},
|
||||
// 操作按钮布局
|
||||
tools: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
// 是否显示预览组件
|
||||
showPreview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 完成按钮文字
|
||||
okText: String
|
||||
},
|
||||
emits: ['done'],
|
||||
data() {
|
||||
return {
|
||||
// cropper实例
|
||||
ins: null,
|
||||
// 图片base64数据
|
||||
imgSrc: '',
|
||||
// 当前图片类型
|
||||
imgType: 'image/jpeg',
|
||||
// 预览组件宽度
|
||||
previewWidth: 120
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 预览组件样式
|
||||
pStyle() {
|
||||
return `width: ${this.previewWidth + 20}px;text-align: right;font-size: 0;`;
|
||||
},
|
||||
pItemStyle1() {
|
||||
const h = this.previewWidth / (this.aspectRatio || 1);
|
||||
return `width: ${this.previewWidth}px;height: ${h}px;`;
|
||||
},
|
||||
pItemStyle2() {
|
||||
return this.pItemStyle1 + 'border-radius: 50%;margin-top: 10px;';
|
||||
},
|
||||
pItemStyle3() {
|
||||
const w = this.previewWidth / 3 * 2 - 10, h = w / (this.aspectRatio || 1);
|
||||
return `width: ${this.previewWidth}px;height: ${h}px;margin-top: 10px;`;
|
||||
},
|
||||
pItemStyle4() {
|
||||
const w = this.previewWidth / 3, h = w / (this.aspectRatio || 1);
|
||||
return `width: ${this.previewWidth}px;height: ${h}px;margin: 10px 0 0 10px;`;
|
||||
},
|
||||
// 解析按钮布局
|
||||
toolGroup() {
|
||||
if (typeof this.tools === 'string') {
|
||||
let tool = [];
|
||||
this.tools.split('|').forEach(g => {
|
||||
tool.push(g.split(',').map(b => b.trim()));
|
||||
});
|
||||
return tool;
|
||||
} else if (this.tools) {
|
||||
return [
|
||||
['zoomIn', 'zoomOut'],
|
||||
['moveL', 'moveR', 'moveT', 'moveB'],
|
||||
['rotateL', 'rotateR'],
|
||||
['scaleX', 'scaleY'],
|
||||
['reset', 'upload'],
|
||||
['crop']
|
||||
];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// ie兼容
|
||||
if (this.src && this.src.indexOf('data:image') !== 0 && (!!window.ActiveXObject || 'ActiveXObject' in window)) {
|
||||
let req = new window.XMLHttpRequest();
|
||||
req.open('GET', this.src, true);
|
||||
req.responseType = 'arraybuffer';
|
||||
req.onload = () => {
|
||||
if ([200, 201].indexOf(req.status) === -1) {
|
||||
console.error('cropper', req);
|
||||
return;
|
||||
}
|
||||
let bytes = new Uint8Array(req.response), binary = '';
|
||||
for (let i = 0; i < bytes.byteLength; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
this.imgSrc = 'data:image/jpeg;base64,' + window.btoa(binary);
|
||||
this.$nextTick(() => {
|
||||
this.render();
|
||||
});
|
||||
};
|
||||
req.send();
|
||||
} else if (this.src) {
|
||||
this.imgSrc = this.src;
|
||||
this.$nextTick(() => {
|
||||
this.render();
|
||||
});
|
||||
} else {
|
||||
this.render();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 渲染 */
|
||||
render() {
|
||||
if (this.ins) {
|
||||
this.ins.destroy();
|
||||
}
|
||||
let 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
|
||||
};
|
||||
if (this.showPreview) {
|
||||
options.preview = this.$refs.eleCropperPreviews.children;
|
||||
}
|
||||
this.ins = new Cropper(this.$refs.eleCropperImg, options);
|
||||
},
|
||||
/* 操作按钮点击事件 */
|
||||
onAction(e) {
|
||||
let method = this.getDataset(e.currentTarget, 'method'),
|
||||
option = this.getDataset(e.currentTarget, 'option'),
|
||||
secondOption = this.getDataset(e.currentTarget, 'option2');
|
||||
if (!this.ins || !method) {
|
||||
return;
|
||||
}
|
||||
let cropped = this.ins.cropped, result;
|
||||
switch (method) {
|
||||
case 'rotate':
|
||||
if (cropped && this.viewMode > 0) {
|
||||
this.in.clear();
|
||||
}
|
||||
break;
|
||||
case 'getCroppedCanvas':
|
||||
option = JSON.parse(option || '{}') || {};
|
||||
if (this.imgType === 'image/jpeg') {
|
||||
option.fillColor = '#fff';
|
||||
}
|
||||
option.width = this.croppedWidth;
|
||||
option.height = this.croppedHeight;
|
||||
option.minWidth = this.croppedMinWidth;
|
||||
option.minHeight = this.croppedMinHeight;
|
||||
option.maxWidth = this.croppedMaxWidth;
|
||||
option.maxHeight = this.croppedMaxHeight;
|
||||
option.fillColor = this.croppedFillColor;
|
||||
option.imageSmoothingEnabled = this.imageSmoothingEnabled;
|
||||
option.imageSmoothingQuality = this.imageSmoothingQuality;
|
||||
break;
|
||||
}
|
||||
result = this.ins[method](option, secondOption);
|
||||
switch (method) {
|
||||
case 'rotate':
|
||||
if (cropped && this.viewMode > 0) {
|
||||
this.ins.crop();
|
||||
}
|
||||
break;
|
||||
case 'scaleX':
|
||||
case 'scaleY':
|
||||
this.setDataset(e.currentTarget, 'option', -option);
|
||||
break;
|
||||
case 'getCroppedCanvas':
|
||||
if (result) {
|
||||
if (this.toBlob) {
|
||||
result.toBlob((blob) => {
|
||||
this.$emit('done', blob);
|
||||
}, this.imgType);
|
||||
} else {
|
||||
this.$emit('done', result.toDataURL(this.imgType));
|
||||
}
|
||||
} else {
|
||||
this.$message.error('裁剪失败');
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
/* 图片上传处理 */
|
||||
onUpload(file) {
|
||||
this.imgType = file.type;
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.ins.replace(e.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
return false;
|
||||
},
|
||||
/* 获取dataset属性 */
|
||||
getDataset(elem, key) {
|
||||
if (elem.dataset) {
|
||||
return elem.dataset[key];
|
||||
} else {
|
||||
return elem.getAttribute('data-' + key);
|
||||
}
|
||||
},
|
||||
/* 设置dataset属性 */
|
||||
setDataset(elem, key, value) {
|
||||
if (elem.dataset) {
|
||||
elem.dataset[key] = value;
|
||||
} else {
|
||||
elem.setAttribute('data-' + key, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '~cropperjs/dist/cropper.css';
|
||||
|
||||
.ele-cropper .ele-cropper-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-img-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-preview {
|
||||
display: inline-block;
|
||||
border: 1px solid hsla(0, 0%, 80%, .6);
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.ele-cropper .ele-cropper-tool {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-tool-item {
|
||||
margin: 10px 18px 0 0;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-tool-item:last-child {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-tool-btn {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-tool-item > .ant-btn + span {
|
||||
vertical-align: -1px;
|
||||
}
|
||||
|
||||
/* 小屏幕适应 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-cropper .ele-cropper-preview-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-cropper .ele-cropper-tool-item {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 标签输入框组件 license by http://eleadmin.com */
|
||||
import EleEditTag from './src/main';
|
||||
|
||||
EleEditTag.install = function (app) {
|
||||
app.component(EleEditTag.name, EleEditTag);
|
||||
};
|
||||
|
||||
export default EleEditTag;
|
||||
184
src/components/ele-admin-pro/packages/ele-edit-tag/src/main.vue
Normal file
184
src/components/ele-admin-pro/packages/ele-edit-tag/src/main.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<!-- 标签输入框组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div class="ele-edit-tag">
|
||||
<ele-tag
|
||||
v-for="(item,index) in data"
|
||||
:key="index"
|
||||
:closable="true"
|
||||
:color="color"
|
||||
:size="size"
|
||||
@close="onClose(index)">
|
||||
{{ item }}
|
||||
</ele-tag>
|
||||
<a-input
|
||||
v-if="edit"
|
||||
ref="input"
|
||||
v-model:value="value"
|
||||
:class="inputClass"
|
||||
@blur="onEdit"
|
||||
@keyup.enter="onEdit"/>
|
||||
<ele-tag
|
||||
v-else
|
||||
:size="size"
|
||||
class="ele-tag-add"
|
||||
@click="showEdit">
|
||||
<plus-outlined/>
|
||||
<span>{{ placeholder }}</span>
|
||||
</ele-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {PlusOutlined} from '@ant-design/icons-vue';
|
||||
import EleTag from '../../ele-tag';
|
||||
|
||||
export default {
|
||||
name: 'EleEditTag',
|
||||
components: {
|
||||
PlusOutlined,
|
||||
EleTag
|
||||
},
|
||||
emits: ['close', 'update:data'],
|
||||
props: {
|
||||
// tag数据
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 颜色
|
||||
color: String,
|
||||
// 尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: 'mini',
|
||||
validator: function (value) {
|
||||
return ['large', 'middle', 'small', 'mini'].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
// 提示文本
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'New Tag'
|
||||
},
|
||||
// 添加tag是否唯一
|
||||
unique: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 自定义添加校验
|
||||
validator: [Function, Array],
|
||||
// 自定义移除校验
|
||||
beforeRemove: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示输入框
|
||||
edit: false,
|
||||
// 输入框的值
|
||||
value: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/* 输入框class */
|
||||
inputClass() {
|
||||
return [
|
||||
'ele-tag-input',
|
||||
{'ele-tag-input-lg': this.size === 'large'},
|
||||
{'ele-tag-input-md': this.size === 'middle'},
|
||||
{'ele-tag-input-mini': this.size === 'mini'}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 显示编辑框 */
|
||||
showEdit() {
|
||||
this.edit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
/* 新增tag */
|
||||
onEdit() {
|
||||
if (this.value) {
|
||||
// 唯一验证
|
||||
if (this.unique && this.data.indexOf(this.value) !== -1) {
|
||||
return this.$message.error(this.value + ' 已经存在');
|
||||
}
|
||||
// 自定义验证
|
||||
if (this.validator) {
|
||||
if (typeof this.validator === 'function') {
|
||||
if (this.validator(this.value) === false) {
|
||||
return;
|
||||
}
|
||||
} else if (!new RegExp(this.validator[0]).test(this.value)) {
|
||||
return this.$message.error(this.validator[1]);
|
||||
}
|
||||
}
|
||||
this.$emit('update:data', this.data.concat([this.value]));
|
||||
}
|
||||
this.edit = false;
|
||||
this.value = '';
|
||||
},
|
||||
/* close事件 */
|
||||
onClose(index) {
|
||||
this.$emit('close', this.data[index]);
|
||||
if (this.beforeRemove && this.beforeRemove(index) === false) {
|
||||
return;
|
||||
}
|
||||
let data = this.data.slice(0, index).concat(this.data.slice(index + 1, this.data.length));
|
||||
this.$emit('update:data', data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-edit-tag .ele-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 添加按钮 */
|
||||
.ele-edit-tag .ele-tag-add {
|
||||
background: none;
|
||||
border-style: dashed;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.ele-edit-tag .ele-tag-input {
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-edit-tag .ele-tag-input.ele-tag-input-md {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ele-edit-tag .ele-tag-input.ele-tag-input-lg {
|
||||
width: 110px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ele-edit-tag .ele-tag-input.ele-tag-input-mini {
|
||||
width: 80px;
|
||||
height: 22px;
|
||||
font-size: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.ele-edit-tag .ele-tag + .ele-tag-input {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 空布局 license by http://eleadmin.com */
|
||||
import EleEmptyLayout from './src/main';
|
||||
|
||||
EleEmptyLayout.install = function (app) {
|
||||
app.component(EleEmptyLayout.name, EleEmptyLayout);
|
||||
};
|
||||
|
||||
export default EleEmptyLayout;
|
||||
@@ -0,0 +1,26 @@
|
||||
<!-- 空布局 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<router-view #default="{Component}">
|
||||
<keep-alive :include="include" :exclude="exclude">
|
||||
<component :is="Component"/>
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {useStore} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'EleEmptyLayout',
|
||||
setup() {
|
||||
const {state} = useStore();
|
||||
const include = computed(() => state.theme.keepAliveInclude);
|
||||
const exclude = computed(() => state.theme.keepAliveExclude);
|
||||
return {
|
||||
include,
|
||||
exclude
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 文件列表组件 license by http://eleadmin.com */
|
||||
import EleFileList from './src/main';
|
||||
|
||||
EleFileList.install = function (app) {
|
||||
app.component(EleFileList.name, EleFileList);
|
||||
};
|
||||
|
||||
export default EleFileList;
|
||||
330
src/components/ele-admin-pro/packages/ele-file-list/src/icon.js
Normal file
330
src/components/ele-admin-pro/packages/ele-file-list/src/icon.js
Normal file
@@ -0,0 +1,330 @@
|
||||
/** 文件列表组件默认图标 license by http://eleadmin.com */
|
||||
export 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'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export 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'
|
||||
]
|
||||
}
|
||||
];
|
||||
639
src/components/ele-admin-pro/packages/ele-file-list/src/main.vue
Normal file
639
src/components/ele-admin-pro/packages/ele-file-list/src/main.vue
Normal file
@@ -0,0 +1,639 @@
|
||||
<!-- 文件列表组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<div class="ele-file-list-group">
|
||||
<!-- 网格模式 -->
|
||||
<div v-if="grid" class="ele-file-list">
|
||||
<!-- 头部全选框 -->
|
||||
<div v-if="showCheckbox" class="ele-file-list-header">
|
||||
<div class="ele-file-list-check-group" @click.stop="allChecked=!allChecked">
|
||||
<i :class="['ele-file-list-check ele-file-icon-check ele-bg-primary', {'checked': allChecked}]"></i>
|
||||
<span v-if="checked && checked.length">
|
||||
{{ locale.fileList.selectTips.replace(/{total}/g, checked.length) }}
|
||||
</span>
|
||||
<span v-else>{{ locale.fileList.selectAll }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- item -->
|
||||
<div
|
||||
v-for="(item,index) in data"
|
||||
:key="index"
|
||||
:class="['ele-file-list-item', {'checked': checked && checked.indexOf(item)!==-1}]"
|
||||
@click="onItemClick(item)">
|
||||
<!-- 背景和边框 -->
|
||||
<div class="ele-file-list-item-bg ele-bg-primary"></div>
|
||||
<div class="ele-file-list-item-border ele-border-primary"></div>
|
||||
<!-- item body -->
|
||||
<div class="ele-file-list-item-body">
|
||||
<!-- 图标 -->
|
||||
<div class="ele-file-list-item-icon">
|
||||
<img :src="getIcon(item)" :class="{'ele-file-list-item-icon-image': item.thumbnail}" alt=""/>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div class="ele-file-list-item-title ele-text-primary" :title="item.name">{{ item.name }}</div>
|
||||
</div>
|
||||
<!-- 复选框 -->
|
||||
<div v-if="showCheckbox" @click.stop="onCheckedChange(item)" class="ele-file-list-item-check ele-bg-white">
|
||||
<i class="ele-file-icon-check ele-bg-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格模式 -->
|
||||
<div v-else class="ele-file-list-table">
|
||||
<!-- 表头 -->
|
||||
<div :class="['ele-file-list-table-item ele-file-list-table-item-header', {'checked': allChecked}]">
|
||||
<div class="ele-file-list-table-item-body">
|
||||
<div v-if="showCheckbox" class="ele-file-list-table-item-check-group">
|
||||
<i class="ele-file-list-table-item-check ele-file-icon-check ele-bg-primary"
|
||||
@click.stop="allChecked=!allChecked"></i>
|
||||
</div>
|
||||
<div class="ele-file-list-table-item-name" @click="onSortChange('name')">
|
||||
<span v-if="!checked || !checked.length">
|
||||
<span>{{ locale.fileList.fileName }}</span>
|
||||
<i :class="getSortClass('name')">
|
||||
<i class="ele-border-primary"></i>
|
||||
<i class="ele-border-primary"></i>
|
||||
</i>
|
||||
</span>
|
||||
<span v-else @click.stop="allChecked=!allChecked">
|
||||
{{ locale.fileList.selectTips.replace(/{total}/g, checked.length) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ele-file-list-table-item-size" @click="onSortChange('length')">
|
||||
<span>{{ locale.fileList.fileSize }}</span>
|
||||
<i :class="getSortClass('length')">
|
||||
<i class="ele-border-primary"></i>
|
||||
<i class="ele-border-primary"></i>
|
||||
</i>
|
||||
</div>
|
||||
<div class="ele-file-list-table-item-time" @click="onSortChange('updateTime')">
|
||||
<span>{{ locale.fileList.fileTimestamp }}</span>
|
||||
<i :class="getSortClass('updateTime')">
|
||||
<i class="ele-border-primary"></i>
|
||||
<i class="ele-border-primary"></i>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 列表item -->
|
||||
<div
|
||||
v-for="(item, i) in data"
|
||||
:key="i"
|
||||
:class="['ele-file-list-table-item', {'checked': checked && checked.indexOf(item)>=0}]">
|
||||
<!-- 背景和边框 -->
|
||||
<div class="ele-file-list-table-item-bg ele-bg-primary"></div>
|
||||
<div class="ele-file-list-table-item-border ele-border-primary"></div>
|
||||
<!-- item body cells -->
|
||||
<div class="ele-file-list-table-item-body">
|
||||
<!-- 复选框 -->
|
||||
<div v-if="showCheckbox" class="ele-file-list-table-item-check-group">
|
||||
<i class="ele-file-list-table-item-check ele-file-icon-check ele-bg-primary"
|
||||
@click.stop="onCheckedChange(item)"></i>
|
||||
</div>
|
||||
<!-- 图标和标题 -->
|
||||
<div class="ele-file-list-table-item-name">
|
||||
<div class="ele-file-list-table-item-icon">
|
||||
<img :src="getIcon(item)" class="ele-file-list-table-item-icon-image" alt=""
|
||||
@click="onItemClick(item)"/>
|
||||
<div
|
||||
class="ele-file-list-table-item-title ele-text-primary"
|
||||
:title="item.name"
|
||||
@click="onItemClick(item)">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-file-list-table-item-tool-group">
|
||||
<slot name="tool" v-bind:item="item"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 大小 -->
|
||||
<div class="ele-file-list-table-item-size">{{ item.length }}</div>
|
||||
<!-- 修改时间 -->
|
||||
<div class="ele-file-list-table-item-time">{{ item.updateTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import {icons, smIcons} from './icon.js';
|
||||
|
||||
export default {
|
||||
name: 'EleFileList',
|
||||
components: {LocaleReceiver},
|
||||
emits: ['sort-change', 'item-click', 'update:checked'],
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/* 是否显示复选框 */
|
||||
showCheckbox() {
|
||||
return this.checked && Array.isArray(this.checked);
|
||||
},
|
||||
/* 是否全选 */
|
||||
allChecked: {
|
||||
get() {
|
||||
return this.checked && this.checked.length && (this.checked.length === this.data.length);
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:checked', value ? [].concat(this.data) : []);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 文件对应的图标 */
|
||||
getIcon(item) {
|
||||
// 网格模式文件有缩略图返回文件缩略图
|
||||
if (this.grid && item.thumbnail) {
|
||||
return item.thumbnail;
|
||||
}
|
||||
const icons = this.grid ? this.icons : this.smIcons;
|
||||
// 文件夹
|
||||
if (item.isDirectory) {
|
||||
const temp = icons.filter(d => d.type === 'dir');
|
||||
if (temp.length) {
|
||||
return temp[0].icon;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 匹配后缀对应的图标
|
||||
let ic;
|
||||
icons.forEach(d => {
|
||||
if (d.types) {
|
||||
d.types.forEach(s => {
|
||||
if (item.name.endsWith(s)) {
|
||||
ic = d.icon;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
if (!ic) {
|
||||
const temp = icons.filter(d => d.type === 'file');
|
||||
if (temp.length) {
|
||||
ic = temp[0].icon;
|
||||
}
|
||||
}
|
||||
return ic;
|
||||
},
|
||||
/* 表头排序的class */
|
||||
getSortClass(sort) {
|
||||
return [
|
||||
{'ele-file-list-table-item-sort': this.sort !== false},
|
||||
{'ele-file-list-sort-asc': this.sort === sort && this.order === 'asc'},
|
||||
{'ele-file-list-sort-desc': this.sort === sort && this.order === 'desc'}
|
||||
];
|
||||
},
|
||||
/* 复选框改变 */
|
||||
onCheckedChange(item) {
|
||||
const index = this.checked.indexOf(item);
|
||||
if (index === -1) {
|
||||
// 选中
|
||||
this.$emit('update:checked', this.checked.concat([item]));
|
||||
} else {
|
||||
// 取消选中
|
||||
let temp = this.checked.slice(0, index).concat(this.checked.slice(index + 1, this.checked.length));
|
||||
this.$emit('update:checked', temp);
|
||||
}
|
||||
},
|
||||
/* item点击事件 */
|
||||
onItemClick(item) {
|
||||
this.$emit('item-click', item);
|
||||
},
|
||||
/* 排序点击事件 */
|
||||
onSortChange(name) {
|
||||
if (this.sort === false) {
|
||||
return;
|
||||
}
|
||||
let order = 'asc';
|
||||
if (this.sort && this.order && name === this.sort) {
|
||||
order = {'asc': 'desc', 'desc': null}[this.order];
|
||||
}
|
||||
this.$emit('sort-change', {sort: name, order: order});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 复选框对勾 */
|
||||
.ele-file-list-group .ele-file-icon-check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ele-file-list-group .ele-file-icon-check:before {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 6px;
|
||||
border-left: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/** 网格风格样式 */
|
||||
.ele-file-list {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.ele-file-list .ele-file-list-header {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .15);
|
||||
box-sizing: border-box;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
/* 全选框 */
|
||||
.ele-file-list .ele-file-list-header .ele-file-list-check-group {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
margin-right: 13px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check:before {
|
||||
left: 3px;
|
||||
top: 4px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check:not(.checked) {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid hsla(0, 0%, 60%, .3);
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-header .ele-file-list-check-group .ele-file-list-check:not(.checked):before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* item */
|
||||
.ele-file-list .ele-file-list-item {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 3px 10px 3px;
|
||||
margin: 0 0 8px 8px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-icon > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 14px 0;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-icon > .ele-file-list-item-icon-image {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-title {
|
||||
width: 110px;
|
||||
margin-top: 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-title:not(:hover) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 复选框 */
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-check {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-check .ele-file-icon-check {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
opacity: .35;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item.checked .ele-file-list-item-check,
|
||||
.ele-file-list .ele-file-list-item:hover .ele-file-list-item-check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item.checked .ele-file-list-item-check .ele-file-icon-check {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 背景和边框 */
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-bg,
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item:hover .ele-file-list-item-bg,
|
||||
.ele-file-list .ele-file-list-item.checked .ele-file-list-item-bg {
|
||||
opacity: .06;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-file-list .ele-file-list-item.checked .ele-file-list-item-border {
|
||||
opacity: .3;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* body */
|
||||
.ele-file-list .ele-file-list-item .ele-file-list-item-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/** 表格样式 */
|
||||
.ele-file-list-table {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* item */
|
||||
.ele-file-list-table .ele-file-list-table-item {
|
||||
line-height: 44px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* body */
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:last-child .ele-file-list-table-item-body {
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .15);
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:first-child .ele-file-list-table-item-body {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* item body cells */
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-check-group {
|
||||
width: 45px;
|
||||
padding-left: 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-name {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-size {
|
||||
width: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-time {
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 表格复选框 */
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-check {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-check:before {
|
||||
left: 3px;
|
||||
top: 4px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:not(.checked) .ele-file-list-table-item-check {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid hsla(0, 0%, 60%, .3);
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:not(.checked) .ele-file-list-table-item-check:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 图标和标题 */
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-icon {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-icon-image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: cover;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-title {
|
||||
display: inline;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
word-break: break-all;
|
||||
vertical-align: top;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-title:not(:hover) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 工具按钮 */
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-tool-group {
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-tool-group .ele-file-list-item-tool {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:hover .ele-file-list-table-item-tool-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 背景和边框 */
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-bg,
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:hover .ele-file-list-table-item-bg,
|
||||
.ele-file-list-table .ele-file-list-table-item.checked .ele-file-list-table-item-bg {
|
||||
opacity: .06;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:hover .ele-file-list-table-item-border,
|
||||
.ele-file-list-table .ele-file-list-table-item:not(.ele-file-list-table-item-header):hover + .ele-file-list-table-item .ele-file-list-table-item-border,
|
||||
.ele-file-list-table .ele-file-list-table-item.checked .ele-file-list-table-item-border,
|
||||
.ele-file-list-table .ele-file-list-table-item.checked + .ele-file-list-table-item .ele-file-list-table-item-border {
|
||||
opacity: .3;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item:not(.ele-file-list-table-item-header):last-child:hover .ele-file-list-table-item-border,
|
||||
.ele-file-list-table .ele-file-list-table-item:not(.ele-file-list-table-item-header):last-child.checked .ele-file-list-table-item-border {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item-header {
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 表头排序 */
|
||||
.ele-file-list-table .ele-file-list-table-item-sort {
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
margin-left: 6px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: -1px;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item-sort > i {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item-sort > i:first-child {
|
||||
border-top-color: transparent !important;
|
||||
margin: -4px 0 4px 0;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item-sort > i:last-child {
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item-sort:not(.ele-file-list-sort-asc) > i:first-child {
|
||||
border-bottom-color: hsla(0, 0%, 60%, .6) !important;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item-sort:not(.ele-file-list-sort-desc) > i:last-child {
|
||||
border-top-color: hsla(0, 0%, 60%, .6) !important;
|
||||
}
|
||||
|
||||
/* 小屏幕样式 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-size {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-file-list-table .ele-file-list-table-item .ele-file-list-table-item-tool-group {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 数字动画组件 license by http://eleadmin.com */
|
||||
import EleIconPicker from './src/main';
|
||||
|
||||
EleIconPicker.install = function (app) {
|
||||
app.component(EleIconPicker.name, EleIconPicker);
|
||||
};
|
||||
|
||||
export default EleIconPicker;
|
||||
@@ -0,0 +1,896 @@
|
||||
/** 图标数据 license by http://eleadmin.com */
|
||||
export default [
|
||||
{
|
||||
title: '线框风格',
|
||||
children: [
|
||||
{
|
||||
title: '方向性图标',
|
||||
icons: [
|
||||
'StepBackwardOutlined',
|
||||
'StepForwardOutlined',
|
||||
'FastBackwardOutlined',
|
||||
'FastForwardOutlined',
|
||||
'ShrinkOutlined',
|
||||
'ArrowsAltOutlined',
|
||||
'DownOutlined',
|
||||
'UpOutlined',
|
||||
'LeftOutlined',
|
||||
'RightOutlined',
|
||||
'CaretUpOutlined',
|
||||
'CaretDownOutlined',
|
||||
'CaretLeftOutlined',
|
||||
'CaretRightOutlined',
|
||||
'UpCircleOutlined',
|
||||
'DownCircleOutlined',
|
||||
'LeftCircleOutlined',
|
||||
'RightCircleOutlined',
|
||||
'DoubleRightOutlined',
|
||||
'DoubleLeftOutlined',
|
||||
'VerticalLeftOutlined',
|
||||
'VerticalRightOutlined',
|
||||
'VerticalAlignTopOutlined',
|
||||
'VerticalAlignMiddleOutlined',
|
||||
'VerticalAlignBottomOutlined',
|
||||
'ForwardOutlined',
|
||||
'BackwardOutlined',
|
||||
'RollbackOutlined',
|
||||
'EnterOutlined',
|
||||
'RetweetOutlined',
|
||||
'SwapOutlined',
|
||||
'SwapLeftOutlined',
|
||||
'SwapRightOutlined',
|
||||
'ArrowUpOutlined',
|
||||
'ArrowDownOutlined',
|
||||
'ArrowLeftOutlined',
|
||||
'ArrowRightOutlined',
|
||||
'PlayCircleOutlined',
|
||||
'UpSquareOutlined',
|
||||
'DownSquareOutlined',
|
||||
'LeftSquareOutlined',
|
||||
'RightSquareOutlined',
|
||||
'LoginOutlined',
|
||||
'LogoutOutlined',
|
||||
'MenuFoldOutlined',
|
||||
'MenuUnfoldOutlined',
|
||||
'BorderBottomOutlined',
|
||||
'BorderHorizontalOutlined',
|
||||
'BorderInnerOutlined',
|
||||
'BorderOuterOutlined',
|
||||
'BorderLeftOutlined',
|
||||
'BorderRightOutlined',
|
||||
'BorderTopOutlined',
|
||||
'BorderVerticleOutlined',
|
||||
'PicCenterOutlined',
|
||||
'PicLeftOutlined',
|
||||
'PicRightOutlined',
|
||||
'RadiusBottomleftOutlined',
|
||||
'RadiusBottomrightOutlined',
|
||||
'RadiusUpleftOutlined',
|
||||
'RadiusUprightOutlined',
|
||||
'FullscreenOutlined',
|
||||
'FullscreenExitOutlined'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '提示建议性',
|
||||
icons: [
|
||||
'QuestionOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'PlusOutlined',
|
||||
'PlusCircleOutlined',
|
||||
'PauseOutlined',
|
||||
'PauseCircleOutlined',
|
||||
'MinusOutlined',
|
||||
'MinusCircleOutlined',
|
||||
'PlusSquareOutlined',
|
||||
'MinusSquareOutlined',
|
||||
'InfoOutlined',
|
||||
'InfoCircleOutlined',
|
||||
'ExclamationOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'CloseOutlined',
|
||||
'CloseCircleOutlined',
|
||||
'CloseSquareOutlined',
|
||||
'CheckOutlined',
|
||||
'CheckCircleOutlined',
|
||||
'CheckSquareOutlined',
|
||||
'ClockCircleOutlined',
|
||||
'WarningOutlined',
|
||||
'IssuesCloseOutlined',
|
||||
'StopOutlined'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '编辑类图标',
|
||||
icons: [
|
||||
'EditOutlined',
|
||||
'FormOutlined',
|
||||
'CopyOutlined',
|
||||
'ScissorOutlined',
|
||||
'DeleteOutlined',
|
||||
'SnippetsOutlined',
|
||||
'DiffOutlined',
|
||||
'HighlightOutlined',
|
||||
'AlignCenterOutlined',
|
||||
'AlignLeftOutlined',
|
||||
'AlignRightOutlined',
|
||||
'BgColorsOutlined',
|
||||
'BoldOutlined',
|
||||
'ItalicOutlined',
|
||||
'UnderlineOutlined',
|
||||
'StrikethroughOutlined',
|
||||
'RedoOutlined',
|
||||
'UndoOutlined',
|
||||
'ZoomInOutlined',
|
||||
'ZoomOutOutlined',
|
||||
'FontColorsOutlined',
|
||||
'FontSizeOutlined',
|
||||
'LineHeightOutlined',
|
||||
'DashOutlined',
|
||||
'SmallDashOutlined',
|
||||
'SortAscendingOutlined',
|
||||
'SortDescendingOutlined',
|
||||
'DragOutlined',
|
||||
'OrderedListOutlined',
|
||||
'UnorderedListOutlined',
|
||||
'RadiusSettingOutlined',
|
||||
'ColumnWidthOutlined',
|
||||
'ColumnHeightOutlined'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '数据类图标',
|
||||
icons: [
|
||||
'AreaChartOutlined',
|
||||
'PieChartOutlined',
|
||||
'BarChartOutlined',
|
||||
'DotChartOutlined',
|
||||
'LineChartOutlined',
|
||||
'RadarChartOutlined',
|
||||
'HeatMapOutlined',
|
||||
'FallOutlined',
|
||||
'RiseOutlined',
|
||||
'StockOutlined',
|
||||
'BoxPlotOutlined',
|
||||
'FundOutlined',
|
||||
'SlidersOutlined'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '品牌和标识',
|
||||
icons: [
|
||||
'AndroidOutlined',
|
||||
'AppleOutlined',
|
||||
'WindowsOutlined',
|
||||
'IeOutlined',
|
||||
'ChromeOutlined',
|
||||
'GithubOutlined',
|
||||
'AliwangwangOutlined',
|
||||
'DingdingOutlined',
|
||||
'WeiboSquareOutlined',
|
||||
'WeiboCircleOutlined',
|
||||
'TaobaoCircleOutlined',
|
||||
'Html5Outlined',
|
||||
'WeiboOutlined',
|
||||
'TwitterOutlined',
|
||||
'WechatOutlined',
|
||||
'YoutubeOutlined',
|
||||
'AlipayCircleOutlined',
|
||||
'TaobaoOutlined',
|
||||
'SkypeOutlined',
|
||||
'QqOutlined',
|
||||
'MediumWorkmarkOutlined',
|
||||
'GitlabOutlined',
|
||||
'MediumOutlined',
|
||||
'LinkedinOutlined',
|
||||
'GooglePlusOutlined',
|
||||
'DropboxOutlined',
|
||||
'FacebookOutlined',
|
||||
'CodepenOutlined',
|
||||
'CodeSandboxOutlined',
|
||||
'AmazonOutlined',
|
||||
'GoogleOutlined',
|
||||
'CodepenCircleOutlined',
|
||||
'AlipayOutlined',
|
||||
'AntDesignOutlined',
|
||||
'AntCloudOutlined',
|
||||
'AliyunOutlined',
|
||||
'ZhihuOutlined',
|
||||
'SlackOutlined',
|
||||
'SlackSquareOutlined',
|
||||
'BehanceOutlined',
|
||||
'BehanceSquareOutlined',
|
||||
'DribbbleOutlined',
|
||||
'DribbbleSquareOutlined',
|
||||
'InstagramOutlined',
|
||||
'YuqueOutlined',
|
||||
'AlibabaOutlined',
|
||||
'YahooOutlined',
|
||||
'RedditOutlined',
|
||||
'SketchOutlined'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '网站通用图标',
|
||||
icons: [
|
||||
'AccountBookOutlined',
|
||||
'AimOutlined',
|
||||
'AlertOutlined',
|
||||
'ApartmentOutlined',
|
||||
'ApiOutlined',
|
||||
'AppstoreAddOutlined',
|
||||
'AppstoreOutlined',
|
||||
'AudioOutlined',
|
||||
'AudioMutedOutlined',
|
||||
'AuditOutlined',
|
||||
'BankOutlined',
|
||||
'BarcodeOutlined',
|
||||
'BarsOutlined',
|
||||
'BellOutlined',
|
||||
'BlockOutlined',
|
||||
'BookOutlined',
|
||||
'BorderOutlined',
|
||||
'BorderlessTableOutlined',
|
||||
'BranchesOutlined',
|
||||
'BugOutlined',
|
||||
'BuildOutlined',
|
||||
'BulbOutlined',
|
||||
'CalculatorOutlined',
|
||||
'CalendarOutlined',
|
||||
'CameraOutlined',
|
||||
'CarOutlined',
|
||||
'CarryOutOutlined',
|
||||
'CiCircleOutlined',
|
||||
'CiOutlined',
|
||||
'ClearOutlined',
|
||||
'CloudDownloadOutlined',
|
||||
'CloudOutlined',
|
||||
'CloudServerOutlined',
|
||||
'CloudSyncOutlined',
|
||||
'CloudUploadOutlined',
|
||||
'ClusterOutlined',
|
||||
'CodeOutlined',
|
||||
'CoffeeOutlined',
|
||||
'CommentOutlined',
|
||||
'CompassOutlined',
|
||||
'CompressOutlined',
|
||||
'ConsoleSqlOutlined',
|
||||
'ContactsOutlined',
|
||||
'ContainerOutlined',
|
||||
'ControlOutlined',
|
||||
'CopyrightCircleOutlined',
|
||||
'CopyrightOutlined',
|
||||
'CreditCardOutlined',
|
||||
'CrownOutlined',
|
||||
'CustomerServiceOutlined',
|
||||
'DashboardOutlined',
|
||||
'DatabaseOutlined',
|
||||
'DeleteColumnOutlined',
|
||||
'DeleteRowOutlined',
|
||||
'DeliveredProcedureOutlined',
|
||||
'DeploymentUnitOutlined',
|
||||
'DesktopOutlined',
|
||||
'DingtalkOutlined',
|
||||
'DisconnectOutlined',
|
||||
'DislikeOutlined',
|
||||
'DollarCircleOutlined',
|
||||
'DollarOutlined',
|
||||
'DownloadOutlined',
|
||||
'EllipsisOutlined',
|
||||
'EnvironmentOutlined',
|
||||
'EuroCircleOutlined',
|
||||
'EuroOutlined',
|
||||
'ExceptionOutlined',
|
||||
'ExpandAltOutlined',
|
||||
'ExpandOutlined',
|
||||
'ExperimentOutlined',
|
||||
'ExportOutlined',
|
||||
'EyeOutlined',
|
||||
'EyeInvisibleOutlined',
|
||||
'FieldBinaryOutlined',
|
||||
'FieldNumberOutlined',
|
||||
'FieldStringOutlined',
|
||||
'FieldTimeOutlined',
|
||||
'FileAddOutlined',
|
||||
'FileDoneOutlined',
|
||||
'FileExcelOutlined',
|
||||
'FileExclamationOutlined',
|
||||
'FileOutlined',
|
||||
'FileGifOutlined',
|
||||
'FileImageOutlined',
|
||||
'FileJpgOutlined',
|
||||
'FileMarkdownOutlined',
|
||||
'FilePdfOutlined',
|
||||
'FilePptOutlined',
|
||||
'FileProtectOutlined',
|
||||
'FileSearchOutlined',
|
||||
'FileSyncOutlined',
|
||||
'FileTextOutlined',
|
||||
'FileUnknownOutlined',
|
||||
'FileWordOutlined',
|
||||
'FileZipOutlined',
|
||||
'FilterOutlined',
|
||||
'FireOutlined',
|
||||
'FlagOutlined',
|
||||
'FolderAddOutlined',
|
||||
'FolderOutlined',
|
||||
'FolderOpenOutlined',
|
||||
'FolderViewOutlined',
|
||||
'ForkOutlined',
|
||||
'FormatPainterOutlined',
|
||||
'FrownOutlined',
|
||||
'FunctionOutlined',
|
||||
'FundProjectionScreenOutlined',
|
||||
'FundViewOutlined',
|
||||
'FunnelPlotOutlined',
|
||||
'GatewayOutlined',
|
||||
'GifOutlined',
|
||||
'GiftOutlined',
|
||||
'GlobalOutlined',
|
||||
'GoldOutlined',
|
||||
'GroupOutlined',
|
||||
'HddOutlined',
|
||||
'HeartOutlined',
|
||||
'HistoryOutlined',
|
||||
'HomeOutlined',
|
||||
'HourglassOutlined',
|
||||
'IdcardOutlined',
|
||||
'ImportOutlined',
|
||||
'InboxOutlined',
|
||||
'InsertRowAboveOutlined',
|
||||
'InsertRowBelowOutlined',
|
||||
'InsertRowLeftOutlined',
|
||||
'InsertRowRightOutlined',
|
||||
'InsuranceOutlined',
|
||||
'InteractionOutlined',
|
||||
'KeyOutlined',
|
||||
'LaptopOutlined',
|
||||
'LayoutOutlined',
|
||||
'LikeOutlined',
|
||||
'LineOutlined',
|
||||
'LinkOutlined',
|
||||
'Loading3QuartersOutlined',
|
||||
'LoadingOutlined',
|
||||
'LockOutlined',
|
||||
'MacCommandOutlined',
|
||||
'MailOutlined',
|
||||
'ManOutlined',
|
||||
'MedicineBoxOutlined',
|
||||
'MehOutlined',
|
||||
'MenuOutlined',
|
||||
'MergeCellsOutlined',
|
||||
'MessageOutlined',
|
||||
'MobileOutlined',
|
||||
'MoneyCollectOutlined',
|
||||
'MonitorOutlined',
|
||||
'MoreOutlined',
|
||||
'NodeCollapseOutlined',
|
||||
'NodeExpandOutlined',
|
||||
'NodeIndexOutlined',
|
||||
'NotificationOutlined',
|
||||
'NumberOutlined',
|
||||
'OneToOneOutlined',
|
||||
'PaperClipOutlined',
|
||||
'PartitionOutlined',
|
||||
'PayCircleOutlined',
|
||||
'PercentageOutlined',
|
||||
'PhoneOutlined',
|
||||
'PictureOutlined',
|
||||
'PlaySquareOutlined',
|
||||
'PoundCircleOutlined',
|
||||
'PoundOutlined',
|
||||
'PoweroffOutlined',
|
||||
'PrinterOutlined',
|
||||
'ProfileOutlined',
|
||||
'ProjectOutlined',
|
||||
'PropertySafetyOutlined',
|
||||
'PullRequestOutlined',
|
||||
'PushpinOutlined',
|
||||
'QrcodeOutlined',
|
||||
'ReadOutlined',
|
||||
'ReconciliationOutlined',
|
||||
'RedEnvelopeOutlined',
|
||||
'ReloadOutlined',
|
||||
'RestOutlined',
|
||||
'RobotOutlined',
|
||||
'RocketOutlined',
|
||||
'RotateLeftOutlined',
|
||||
'RotateRightOutlined',
|
||||
'SafetyCertificateOutlined',
|
||||
'SafetyOutlined',
|
||||
'SaveOutlined',
|
||||
'ScanOutlined',
|
||||
'ScheduleOutlined',
|
||||
'SearchOutlined',
|
||||
'SecurityScanOutlined',
|
||||
'SelectOutlined',
|
||||
'SendOutlined',
|
||||
'SettingOutlined',
|
||||
'ShakeOutlined',
|
||||
'ShareAltOutlined',
|
||||
'ShopOutlined',
|
||||
'ShoppingCartOutlined',
|
||||
'ShoppingOutlined',
|
||||
'SisternodeOutlined',
|
||||
'SkinOutlined',
|
||||
'SmileOutlined',
|
||||
'SolutionOutlined',
|
||||
'SoundOutlined',
|
||||
'SplitCellsOutlined',
|
||||
'StarOutlined',
|
||||
'SubnodeOutlined',
|
||||
'SwitcherOutlined',
|
||||
'SyncOutlined',
|
||||
'TableOutlined',
|
||||
'TabletOutlined',
|
||||
'TagOutlined',
|
||||
'TagsOutlined',
|
||||
'TeamOutlined',
|
||||
'ThunderboltOutlined',
|
||||
'ToTopOutlined',
|
||||
'ToolOutlined',
|
||||
'TrademarkCircleOutlined',
|
||||
'TrademarkOutlined',
|
||||
'TransactionOutlined',
|
||||
'TranslationOutlined',
|
||||
'TrophyOutlined',
|
||||
'UngroupOutlined',
|
||||
'UnlockOutlined',
|
||||
'UploadOutlined',
|
||||
'UsbOutlined',
|
||||
'UserAddOutlined',
|
||||
'UserDeleteOutlined',
|
||||
'UserOutlined',
|
||||
'UserSwitchOutlined',
|
||||
'UsergroupAddOutlined',
|
||||
'UsergroupDeleteOutlined',
|
||||
'VerifiedOutlined',
|
||||
'VideoCameraAddOutlined',
|
||||
'VideoCameraOutlined',
|
||||
'WalletOutlined',
|
||||
'WhatsAppOutlined',
|
||||
'WifiOutlined',
|
||||
'WomanOutlined'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '实底风格',
|
||||
children: [
|
||||
{
|
||||
title: '方向性图标',
|
||||
icons: [
|
||||
'StepBackwardFilled',
|
||||
'StepForwardFilled',
|
||||
'FastBackwardFilled',
|
||||
'FastForwardFilled',
|
||||
'CaretUpFilled',
|
||||
'CaretDownFilled',
|
||||
'CaretLeftFilled',
|
||||
'CaretRightFilled',
|
||||
'UpCircleFilled',
|
||||
'DownCircleFilled',
|
||||
'LeftCircleFilled',
|
||||
'RightCircleFilled',
|
||||
'ForwardFilled',
|
||||
'BackwardFilled',
|
||||
'PlayCircleFilled',
|
||||
'UpSquareFilled',
|
||||
'DownSquareFilled',
|
||||
'LeftSquareFilled',
|
||||
'RightSquareFilled'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '提示建议性',
|
||||
icons: [
|
||||
'QuestionCircleFilled',
|
||||
'PlusCircleFilled',
|
||||
'PauseCircleFilled',
|
||||
'MinusCircleFilled',
|
||||
'PlusSquareFilled',
|
||||
'MinusSquareFilled',
|
||||
'InfoCircleFilled',
|
||||
'ExclamationCircleFilled',
|
||||
'CloseCircleFilled',
|
||||
'CloseSquareFilled',
|
||||
'CheckCircleFilled',
|
||||
'CheckSquareFilled',
|
||||
'ClockCircleFilled',
|
||||
'WarningFilled',
|
||||
'StopFilled'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '编辑类图标',
|
||||
icons: [
|
||||
'EditFilled',
|
||||
'CopyFilled',
|
||||
'DeleteFilled',
|
||||
'SnippetsFilled',
|
||||
'DiffFilled',
|
||||
'HighlightFilled'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '数据类图标',
|
||||
icons: [
|
||||
'PieChartFilled',
|
||||
'BoxPlotFilled',
|
||||
'FundFilled',
|
||||
'SlidersFilled'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '品牌和标识',
|
||||
icons: [
|
||||
'AndroidFilled',
|
||||
'AppleFilled',
|
||||
'WindowsFilled',
|
||||
'ChromeFilled',
|
||||
'GithubFilled',
|
||||
'AliwangwangFilled',
|
||||
'WeiboSquareFilled',
|
||||
'WeiboCircleFilled',
|
||||
'TaobaoCircleFilled',
|
||||
'Html5Filled',
|
||||
'WechatFilled',
|
||||
'YoutubeFilled',
|
||||
'AlipayCircleFilled',
|
||||
'SkypeFilled',
|
||||
'GitlabFilled',
|
||||
'LinkedinFilled',
|
||||
'FacebookFilled',
|
||||
'CodeSandboxCircleFilled',
|
||||
'CodepenCircleFilled',
|
||||
'SlackSquareFilled',
|
||||
'BehanceSquareFilled',
|
||||
'DribbbleSquareFilled',
|
||||
'InstagramFilled',
|
||||
'YuqueFilled',
|
||||
'YahooFilled'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '网站通用图标',
|
||||
icons: [
|
||||
'AccountBookFilled',
|
||||
'AlertFilled',
|
||||
'AlipaySquareFilled',
|
||||
'AmazonCircleFilled',
|
||||
'AmazonSquareFilled',
|
||||
'ApiFilled',
|
||||
'AppstoreFilled',
|
||||
'AudioFilled',
|
||||
'BankFilled',
|
||||
'BehanceCircleFilled',
|
||||
'BellFilled',
|
||||
'BookFilled',
|
||||
'BugFilled',
|
||||
'BuildFilled',
|
||||
'BulbFilled',
|
||||
'CalculatorFilled',
|
||||
'CalendarFilled',
|
||||
'CameraFilled',
|
||||
'CarFilled',
|
||||
'CarryOutFilled',
|
||||
'CiCircleFilled',
|
||||
'CloudFilled',
|
||||
'CodeFilled',
|
||||
'CodeSandboxSquareFilled',
|
||||
'CodepenSquareFilled',
|
||||
'CompassFilled',
|
||||
'ContactsFilled',
|
||||
'ContainerFilled',
|
||||
'ControlFilled',
|
||||
'CopyrightCircleFilled',
|
||||
'CreditCardFilled',
|
||||
'CrownFilled',
|
||||
'CustomerServiceFilled',
|
||||
'DashboardFilled',
|
||||
'DatabaseFilled',
|
||||
'DingtalkCircleFilled',
|
||||
'DingtalkSquareFilled',
|
||||
'DislikeFilled',
|
||||
'DollarCircleFilled',
|
||||
'DribbbleCircleFilled',
|
||||
'DropboxCircleFilled',
|
||||
'DropboxSquareFilled',
|
||||
'EnvironmentFilled',
|
||||
'EuroCircleFilled',
|
||||
'ExperimentFilled',
|
||||
'EyeFilled',
|
||||
'EyeInvisibleFilled',
|
||||
'FileAddFilled',
|
||||
'FileExcelFilled',
|
||||
'FileExclamationFilled',
|
||||
'FileFilled',
|
||||
'FileImageFilled',
|
||||
'FileMarkdownFilled',
|
||||
'FilePdfFilled',
|
||||
'FilePptFilled',
|
||||
'FileTextFilled',
|
||||
'FileUnknownFilled',
|
||||
'FileWordFilled',
|
||||
'FileZipFilled',
|
||||
'FilterFilled',
|
||||
'FireFilled',
|
||||
'FlagFilled',
|
||||
'FolderAddFilled',
|
||||
'FolderFilled',
|
||||
'FolderOpenFilled',
|
||||
'FormatPainterFilled',
|
||||
'FrownFilled',
|
||||
'FunnelPlotFilled',
|
||||
'GiftFilled',
|
||||
'GoldFilled',
|
||||
'GoldenFilled',
|
||||
'GoogleCircleFilled',
|
||||
'GooglePlusCircleFilled',
|
||||
'GooglePlusSquareFilled',
|
||||
'GoogleSquareFilled',
|
||||
'HddFilled',
|
||||
'HeartFilled',
|
||||
'HomeFilled',
|
||||
'HourglassFilled',
|
||||
'IdcardFilled',
|
||||
'IeCircleFilled',
|
||||
'IeSquareFilled',
|
||||
'InsuranceFilled',
|
||||
'InteractionFilled',
|
||||
'LayoutFilled',
|
||||
'LikeFilled',
|
||||
'LockFilled',
|
||||
'MacCommandFilled',
|
||||
'MailFilled',
|
||||
'MedicineBoxFilled',
|
||||
'MediumCircleFilled',
|
||||
'MediumSquareFilled',
|
||||
'MehFilled',
|
||||
'MessageFilled',
|
||||
'MobileFilled',
|
||||
'MoneyCollectFilled',
|
||||
'NotificationFilled',
|
||||
'PayCircleFilled',
|
||||
'PhoneFilled',
|
||||
'PictureFilled',
|
||||
'PlaySquareFilled',
|
||||
'PoundCircleFilled',
|
||||
'PrinterFilled',
|
||||
'ProfileFilled',
|
||||
'ProjectFilled',
|
||||
'PropertySafetyFilled',
|
||||
'PushpinFilled',
|
||||
'QqCircleFilled',
|
||||
'QqSquareFilled',
|
||||
'ReadFilled',
|
||||
'ReconciliationFilled',
|
||||
'RedEnvelopeFilled',
|
||||
'RedditCircleFilled',
|
||||
'RedditSquareFilled',
|
||||
'RestFilled',
|
||||
'RobotFilled',
|
||||
'RocketFilled',
|
||||
'SafetyCertificateFilled',
|
||||
'SaveFilled',
|
||||
'ScheduleFilled',
|
||||
'SecurityScanFilled',
|
||||
'SettingFilled',
|
||||
'ShopFilled',
|
||||
'ShoppingFilled',
|
||||
'SignalFilled',
|
||||
'SketchCircleFilled',
|
||||
'SketchSquareFilled',
|
||||
'SkinFilled',
|
||||
'SlackCircleFilled',
|
||||
'SmileFilled',
|
||||
'SoundFilled',
|
||||
'StarFilled',
|
||||
'SwitcherFilled',
|
||||
'TabletFilled',
|
||||
'TagFilled',
|
||||
'TagsFilled',
|
||||
'TaobaoSquareFilled',
|
||||
'ThunderboltFilled',
|
||||
'ToolFilled',
|
||||
'TrademarkCircleFilled',
|
||||
'TrophyFilled',
|
||||
'TwitterCircleFilled',
|
||||
'TwitterSquareFilled',
|
||||
'UnlockFilled',
|
||||
'UsbFilled',
|
||||
'VideoCameraFilled',
|
||||
'WalletFilled',
|
||||
'ZhihuCircleFilled',
|
||||
'ZhihuSquareFilled'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '双色风格',
|
||||
children: [
|
||||
{
|
||||
title: '方向性图标',
|
||||
icons: [
|
||||
'UpCircleTwoTone',
|
||||
'DownCircleTwoTone',
|
||||
'LeftCircleTwoTone',
|
||||
'RightCircleTwoTone',
|
||||
'PlayCircleTwoTone',
|
||||
'UpSquareTwoTone',
|
||||
'DownSquareTwoTone',
|
||||
'LeftSquareTwoTone',
|
||||
'RightSquareTwoTone'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '提示建议性',
|
||||
icons: [
|
||||
'QuestionCircleTwoTone',
|
||||
'PlusCircleTwoTone',
|
||||
'PauseCircleTwoTone',
|
||||
'MinusCircleTwoTone',
|
||||
'PlusSquareTwoTone',
|
||||
'MinusSquareTwoTone',
|
||||
'InfoCircleTwoTone',
|
||||
'ExclamationCircleTwoTone',
|
||||
'CloseCircleTwoTone',
|
||||
'CloseSquareTwoTone',
|
||||
'CheckCircleTwoTone',
|
||||
'CheckSquareTwoTone',
|
||||
'ClockCircleTwoTone',
|
||||
'WarningTwoTone',
|
||||
'StopTwoTone'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '编辑类图标',
|
||||
icons: [
|
||||
'EditTwoTone',
|
||||
'CopyTwoTone',
|
||||
'DeleteTwoTone',
|
||||
'SnippetsTwoTone',
|
||||
'DiffTwoTone',
|
||||
'HighlightTwoTone'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '数据类图标',
|
||||
icons: [
|
||||
'PieChartTwoTone',
|
||||
'BoxPlotTwoTone',
|
||||
'FundTwoTone',
|
||||
'SlidersTwoTone'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '品牌和标识',
|
||||
icons: [
|
||||
'Html5TwoTone'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '网站通用图标',
|
||||
icons: [
|
||||
'AccountBookTwoTone',
|
||||
'AlertTwoTone',
|
||||
'ApiTwoTone',
|
||||
'AppstoreTwoTone',
|
||||
'AudioTwoTone',
|
||||
'BankTwoTone',
|
||||
'BellTwoTone',
|
||||
'BookTwoTone',
|
||||
'BugTwoTone',
|
||||
'BuildTwoTone',
|
||||
'BulbTwoTone',
|
||||
'CalculatorTwoTone',
|
||||
'CalendarTwoTone',
|
||||
'CameraTwoTone',
|
||||
'CarTwoTone',
|
||||
'CarryOutTwoTone',
|
||||
'CiCircleTwoTone',
|
||||
'CiTwoTone',
|
||||
'CloudTwoTone',
|
||||
'CodeTwoTone',
|
||||
'CompassTwoTone',
|
||||
'ContactsTwoTone',
|
||||
'ContainerTwoTone',
|
||||
'ControlTwoTone',
|
||||
'CopyrightCircleTwoTone',
|
||||
'CopyrightTwoTone',
|
||||
'CreditCardTwoTone',
|
||||
'CrownTwoTone',
|
||||
'CustomerServiceTwoTone',
|
||||
'DashboardTwoTone',
|
||||
'DatabaseTwoTone',
|
||||
'DislikeTwoTone',
|
||||
'DollarCircleTwoTone',
|
||||
'DollarTwoTone',
|
||||
'EnvironmentTwoTone',
|
||||
'EuroCircleTwoTone',
|
||||
'EuroTwoTone',
|
||||
'ExperimentTwoTone',
|
||||
'EyeTwoTone',
|
||||
'EyeInvisibleTwoTone',
|
||||
'FileAddTwoTone',
|
||||
'FileExcelTwoTone',
|
||||
'FileExclamationTwoTone',
|
||||
'FileTwoTone',
|
||||
'FileImageTwoTone',
|
||||
'FileMarkdownTwoTone',
|
||||
'FilePdfTwoTone',
|
||||
'FilePptTwoTone',
|
||||
'FileTextTwoTone',
|
||||
'FileUnknownTwoTone',
|
||||
'FileWordTwoTone',
|
||||
'FileZipTwoTone',
|
||||
'FilterTwoTone',
|
||||
'FireTwoTone',
|
||||
'FlagTwoTone',
|
||||
'FolderAddTwoTone',
|
||||
'FolderTwoTone',
|
||||
'FolderOpenTwoTone',
|
||||
'FrownTwoTone',
|
||||
'FunnelPlotTwoTone',
|
||||
'GiftTwoTone',
|
||||
'GoldTwoTone',
|
||||
'HddTwoTone',
|
||||
'HeartTwoTone',
|
||||
'HomeTwoTone',
|
||||
'HourglassTwoTone',
|
||||
'IdcardTwoTone',
|
||||
'InsuranceTwoTone',
|
||||
'InteractionTwoTone',
|
||||
'LayoutTwoTone',
|
||||
'LikeTwoTone',
|
||||
'LockTwoTone',
|
||||
'MailTwoTone',
|
||||
'MedicineBoxTwoTone',
|
||||
'MehTwoTone',
|
||||
'MessageTwoTone',
|
||||
'MobileTwoTone',
|
||||
'MoneyCollectTwoTone',
|
||||
'NotificationTwoTone',
|
||||
'PhoneTwoTone',
|
||||
'PictureTwoTone',
|
||||
'PlaySquareTwoTone',
|
||||
'PoundCircleTwoTone',
|
||||
'PrinterTwoTone',
|
||||
'ProfileTwoTone',
|
||||
'ProjectTwoTone',
|
||||
'PropertySafetyTwoTone',
|
||||
'PushpinTwoTone',
|
||||
'ReconciliationTwoTone',
|
||||
'RedEnvelopeTwoTone',
|
||||
'RestTwoTone',
|
||||
'RocketTwoTone',
|
||||
'SafetyCertificateTwoTone',
|
||||
'SaveTwoTone',
|
||||
'ScheduleTwoTone',
|
||||
'SecurityScanTwoTone',
|
||||
'SettingTwoTone',
|
||||
'ShopTwoTone',
|
||||
'ShoppingTwoTone',
|
||||
'SkinTwoTone',
|
||||
'SmileTwoTone',
|
||||
'SoundTwoTone',
|
||||
'StarTwoTone',
|
||||
'SwitcherTwoTone',
|
||||
'TabletTwoTone',
|
||||
'TagTwoTone',
|
||||
'TagsTwoTone',
|
||||
'ThunderboltTwoTone',
|
||||
'ToolTwoTone',
|
||||
'TrademarkCircleTwoTone',
|
||||
'TrophyTwoTone',
|
||||
'UnlockTwoTone',
|
||||
'UsbTwoTone',
|
||||
'VideoCameraTwoTone',
|
||||
'WalletTwoTone'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,320 @@
|
||||
<!-- 图标选择器组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<a-dropdown
|
||||
v-model:visible="visible"
|
||||
:placement="placement"
|
||||
:trigger="trigger"
|
||||
:disabled="disabled">
|
||||
<div :class="['ele-icon-picker', {'disabled': this.disabled}]">
|
||||
<a-input
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
readonly>
|
||||
<template #prefix>
|
||||
<component v-if="value" :is="value"/>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<div class="ele-text-placeholder ele-icon-picker-arrow">
|
||||
<close-circle-filled
|
||||
v-if="this.allowClear&&this.value&&!this.disabled"
|
||||
@click.stop="onClear"/>
|
||||
<down-outlined/>
|
||||
</div>
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<div class="ant-dropdown-menu ele-icon-picker-popper">
|
||||
<div @click.stop="">
|
||||
<a-tabs v-model:active-key="activeKey">
|
||||
<a-tab-pane v-for="(d, i) in result" :key="i" :tab="d.title"/>
|
||||
<template #tabBarExtraContent>
|
||||
<div v-if="allowSearch" class="ele-icon-picker-search">
|
||||
<a-input-search
|
||||
v-model:value="keywords"
|
||||
:placeholder="searchPlaceholder"
|
||||
size="small"
|
||||
@search="onSearch"/>
|
||||
</div>
|
||||
</template>
|
||||
</a-tabs>
|
||||
<div class="ele-icon-picker-pane">
|
||||
<a-menu
|
||||
v-model:selected-keys="selectedKeys"
|
||||
mode="inline">
|
||||
<a-menu-item
|
||||
v-for="(d, i) in activeList"
|
||||
:key="i">{{ d.title }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<div class="ele-icon-picker-list">
|
||||
<div
|
||||
class="ele-icon-picker-item"
|
||||
v-for="(d, i) in currentList"
|
||||
:key="i">
|
||||
<a-card hoverable>
|
||||
<div
|
||||
class="ele-icon-picker-item-icon"
|
||||
:title="d"
|
||||
@click="onChoose(d)">
|
||||
<component :is="d"/>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as antIcons from '@ant-design/icons-vue';
|
||||
import iconData from './icon.js';
|
||||
|
||||
export default {
|
||||
name: 'EleIconPicker',
|
||||
components: {...antIcons},
|
||||
emits: ['update:value'],
|
||||
props: {
|
||||
// dropdown属性
|
||||
trigger: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['click'];
|
||||
}
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottomLeft'
|
||||
},
|
||||
// 选中图标
|
||||
value: String,
|
||||
// 提示文本
|
||||
placeholder: String,
|
||||
// 尺寸
|
||||
size: String,
|
||||
// 是否禁用
|
||||
disabled: Boolean,
|
||||
// 是否显示清除
|
||||
allowClear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示搜索框
|
||||
allowSearch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 搜索框提示文本
|
||||
searchPlaceholder: {
|
||||
type: String,
|
||||
default: '搜索..'
|
||||
},
|
||||
// 图标数据
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return iconData;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// popper是否显示
|
||||
visible: false,
|
||||
// tab选中
|
||||
activeKey: 0,
|
||||
// menu选中
|
||||
selectedKeys: [0],
|
||||
// 搜索关键字
|
||||
keywords: '',
|
||||
// 搜索后的数据
|
||||
result: this.data
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
/* 当前tab数据 */
|
||||
activeList() {
|
||||
if (!this.result.length) {
|
||||
return [];
|
||||
}
|
||||
const temp = this.result[this.activeKey];
|
||||
return temp ? temp.children : [];
|
||||
},
|
||||
/* 当前显示图标数据 */
|
||||
currentList() {
|
||||
if (!this.activeList.length) {
|
||||
return [];
|
||||
}
|
||||
if (!this.selectedKeys.length) {
|
||||
return [];
|
||||
}
|
||||
const temp = this.activeList[this.selectedKeys[0]];
|
||||
return temp ? temp.icons : [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 选择图标 */
|
||||
onChoose(value) {
|
||||
this.visible = false;
|
||||
this.$emit('update:value', value);
|
||||
},
|
||||
/* 清除 */
|
||||
onClear() {
|
||||
this.$emit('update:value', '');
|
||||
},
|
||||
/* 搜索 */
|
||||
onSearch() {
|
||||
if (!this.keywords) {
|
||||
this.result = this.data;
|
||||
return;
|
||||
}
|
||||
let result = [], firstIndex = -1, activeHave = true;
|
||||
this.data.forEach((item, index) => {
|
||||
let children = [], haveIcon = false;
|
||||
item.children.forEach((child => {
|
||||
let icons = child.icons.filter(d => d.toLowerCase().indexOf(this.keywords.toLowerCase()) !== -1);
|
||||
if (icons.length) {
|
||||
haveIcon = true;
|
||||
} else if (index === this.activeKey) {
|
||||
activeHave = false;
|
||||
}
|
||||
children.push({title: child.title, icons: icons});
|
||||
}));
|
||||
if (firstIndex === -1 && haveIcon) {
|
||||
firstIndex = index;
|
||||
}
|
||||
result.push({title: item.title, children: children});
|
||||
});
|
||||
this.result = result;
|
||||
if (!activeHave && firstIndex !== -1) {
|
||||
this.activeKey = firstIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 图标选择器popper */
|
||||
.ele-icon-picker-popper {
|
||||
width: 520px;
|
||||
max-width: 90vw;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* tab */
|
||||
.ele-icon-picker-popper .ant-tabs-bar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ant-tabs-tab {
|
||||
padding: 10px 0 !important;
|
||||
margin: 0 12px !important;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ant-tabs-extra-content {
|
||||
line-height: 41px;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.ele-icon-picker-popper .ele-icon-picker-search {
|
||||
width: 110px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
/* pane */
|
||||
.ele-icon-picker-popper .ele-icon-picker-pane {
|
||||
display: flex;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-pane > .ant-menu {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-pane > .ant-menu .ant-menu-item {
|
||||
padding: 0 12px !important;
|
||||
margin: 12px 0 0 0 !important;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-pane > .ant-menu .ant-menu-item-selected:after {
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-list {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* item */
|
||||
.ele-icon-picker-popper .ele-icon-picker-item {
|
||||
width: 16.6%;
|
||||
display: inline-block;
|
||||
padding: 6px 2px 6px 10px;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-item-icon {
|
||||
padding: 8px 0;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
transition: transform .1s;
|
||||
}
|
||||
|
||||
.ele-icon-picker-popper .ele-icon-picker-item-icon:hover {
|
||||
transform: scale(1.6);
|
||||
}
|
||||
|
||||
/* 默认风格 */
|
||||
.ele-icon-picker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-icon-picker.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ele-icon-picker:not(.disabled) .ant-input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-icon-picker.disabled .ant-input-prefix {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.ele-icon-picker .ele-icon-picker-arrow {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ele-icon-picker:not(:hover) .ele-icon-picker-arrow .anticon-close-circle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-icon-picker:hover .ele-icon-picker-arrow .anticon-close-circle + .anticon-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 自适应 */
|
||||
@media screen and (max-width: 520px) {
|
||||
.ele-icon-picker-popper .ele-icon-picker-item {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** iframe布局 license by http://eleadmin.com */
|
||||
import EleIframeLayout from './src/main';
|
||||
|
||||
EleIframeLayout.install = function (app) {
|
||||
app.component(EleIframeLayout.name, EleIframeLayout);
|
||||
};
|
||||
|
||||
export default EleIframeLayout;
|
||||
@@ -0,0 +1,32 @@
|
||||
<!-- iframe布局 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<iframe :src="src" frameborder="0" class="ele-admin-iframe"></iframe>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EleIframeLayout',
|
||||
props: {
|
||||
url: String
|
||||
},
|
||||
data() {
|
||||
const current = this.$route, meta = current ? current.meta : null;
|
||||
return {
|
||||
src: this.url ? this.url : (meta ? meta.iframe : null)
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
url() {
|
||||
this.src = this.url;
|
||||
},
|
||||
$route() {
|
||||
if (!this.url) {
|
||||
const current = this.$route, meta = current ? current.meta : null;
|
||||
if (meta && meta.iframe && meta.iframe !== this.src) {
|
||||
this.src = meta.iframe;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 地图位置选择组件 license by http://eleadmin.com */
|
||||
import EleMapPicker from './src/main';
|
||||
|
||||
EleMapPicker.install = function (app) {
|
||||
app.component(EleMapPicker.name, EleMapPicker);
|
||||
}
|
||||
|
||||
export default EleMapPicker;
|
||||
@@ -0,0 +1,645 @@
|
||||
<!-- 地图位置选择组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
:title="title || locale.map.title"
|
||||
:width="width"
|
||||
:centered="centered"
|
||||
:closable="closable"
|
||||
:destroy-on-close="destroyOnClose"
|
||||
:force-render="forceRender"
|
||||
:keyboard="keyboard"
|
||||
:mask="mask"
|
||||
:mask-closable="maskClosable"
|
||||
:mask-style="maskStyle"
|
||||
:wrap-class-name="wrapClassName"
|
||||
:z-index="zIndex"
|
||||
:dialog-style="dialogStyle"
|
||||
:dialog-class="dialogClass"
|
||||
:footer="null"
|
||||
:body-style="{padding: 0}"
|
||||
class="ele-map-picker-dialog"
|
||||
@update:visible="updateVisible">
|
||||
<template #title>
|
||||
<slot name="title"/>
|
||||
</template>
|
||||
<a-spin v-if="show" :spinning="loading">
|
||||
<div class="ele-map-picker-header">
|
||||
<div class="ele-map-picker-header-search">
|
||||
<a-auto-complete
|
||||
v-model:value="suggestionKeywords"
|
||||
:placeholder="searchPlaceholder || locale.map.placeholder"
|
||||
:options="suggestionData"
|
||||
@search="onSearch"
|
||||
@select="onSelect">
|
||||
<a-input>
|
||||
<template #suffix>
|
||||
<search-outlined class="ele-text-secondary"/>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-auto-complete>
|
||||
</div>
|
||||
<a-button
|
||||
:loading="doneLoading"
|
||||
type="primary"
|
||||
@click="onDone(locale.map.message)">
|
||||
{{ okText || locale.map.ok }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="ele-map-picker-body">
|
||||
<div class="ele-map-picker-main">
|
||||
<div ref="eleMapPickerMap" :style="{height: height}"></div>
|
||||
<plus-outlined v-if="searchType===0" class="ele-map-picker-main-plus"/>
|
||||
<img v-if="searchType===0" :class="iconClass" :src="markerSrc" alt=""/>
|
||||
</div>
|
||||
<a-spin :spinning="poiLoading">
|
||||
<div class="ele-map-picker-poi-list" :style="{height: height}">
|
||||
<div
|
||||
v-for="(poi,index) in poiData"
|
||||
:key="index"
|
||||
:class="['ele-map-picker-poi-item', {'active': index===chooseIndex}]"
|
||||
@click="onChoose(index)">
|
||||
<environment-outlined class="ele-map-picker-poi-item-icon"/>
|
||||
<div class="ele-map-picker-poi-item-title">{{ poi.name }}</div>
|
||||
<div v-if="poi.address" class="ele-map-picker-poi-item-address">{{ poi.address }}</div>
|
||||
<check-circle-outlined class="ele-map-picker-poi-item-check"/>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
import {
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
EnvironmentOutlined,
|
||||
CheckCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'EleMapPicker',
|
||||
components: {
|
||||
LocaleReceiver,
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
EnvironmentOutlined,
|
||||
CheckCircleOutlined
|
||||
},
|
||||
emits: ['done', 'open', 'closed', 'update:visible'],
|
||||
props: {
|
||||
// 是否显示
|
||||
visible: Boolean,
|
||||
// 地图的高度
|
||||
height: {
|
||||
type: String,
|
||||
default: '450px'
|
||||
},
|
||||
// 地图默认中心点
|
||||
center: Array,
|
||||
// 地图初始缩放级别
|
||||
zoom: {
|
||||
type: Number,
|
||||
default: 11
|
||||
},
|
||||
// 地图选中后缩放级别
|
||||
chooseZoom: {
|
||||
type: Number,
|
||||
default: 17
|
||||
},
|
||||
// poi检索每页数量
|
||||
poiSize: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
// poi检索兴趣点类别
|
||||
poiType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// poi检索关键字
|
||||
poiKeywords: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// poi检索半径
|
||||
poiRadius: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
// 是否返回行政区
|
||||
needCity: Boolean,
|
||||
// 是否强制选择
|
||||
forceChoose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 搜索建议的城市范围
|
||||
suggestionCity: {
|
||||
type: String,
|
||||
default: '全国'
|
||||
},
|
||||
// 地点检索类型, 0: POI检索, 1: 关键字检索
|
||||
searchType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 搜索框提示文本
|
||||
searchPlaceholder: String,
|
||||
// marker图标地址
|
||||
markerSrc: {
|
||||
type: String,
|
||||
default: 'https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png'
|
||||
},
|
||||
// 地图默认的key
|
||||
mapKey: {
|
||||
type: String,
|
||||
default: '006d995d433058322319fa797f2876f5'
|
||||
},
|
||||
// 地图默认版本号
|
||||
mapVersion: {
|
||||
type: String,
|
||||
default: '2.0'
|
||||
},
|
||||
// 地图风格
|
||||
mapStyle: String,
|
||||
// 弹窗属性
|
||||
centered: Boolean,
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
destroyOnClose: Boolean,
|
||||
forceRender: Boolean,
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskStyle: Object,
|
||||
title: String,
|
||||
width: {
|
||||
type: String,
|
||||
default: '780px'
|
||||
},
|
||||
wrapClassName: String,
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
dialogStyle: Object,
|
||||
dialogClass: String,
|
||||
// 完成按钮文字
|
||||
okText: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载
|
||||
show: false,
|
||||
// 地图实例
|
||||
map: null,
|
||||
// 地图中心标记点
|
||||
centerMarker: null,
|
||||
// poi检索实例
|
||||
placeSearch: null,
|
||||
// 输入建议实例
|
||||
autoComplete: null,
|
||||
// poi检索的数据
|
||||
poiData: [],
|
||||
// 选中的数据索引
|
||||
chooseIndex: null,
|
||||
// 是否是点击poi列表移动地图
|
||||
isSelMove: false,
|
||||
// 图标是否显示跳动动画
|
||||
showIconAnim: false,
|
||||
// 搜索输入内容
|
||||
suggestionKeywords: '',
|
||||
// 上次搜索输入内容
|
||||
lastSuggestion: '',
|
||||
// 搜索建议列表
|
||||
suggestionData: [],
|
||||
// 选中的建议
|
||||
chooseSuggestion: null,
|
||||
// 初始化loading
|
||||
loading: true,
|
||||
// poi检索loading
|
||||
poiLoading: false,
|
||||
// 确定按钮loading
|
||||
doneLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 跳动图标的class
|
||||
iconClass() {
|
||||
return [
|
||||
'ele-map-picker-main-icon',
|
||||
{'ele-map-picker-anim-bounce': this.showIconAnim}
|
||||
];
|
||||
},
|
||||
// 是否是暗黑模式
|
||||
darkMode() {
|
||||
try {
|
||||
return this.$store.state.theme.darkMode;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
if (this.visible) {
|
||||
this.onOpen();
|
||||
} else {
|
||||
this.onClosed();
|
||||
}
|
||||
},
|
||||
darkMode() {
|
||||
if (this.map && !this.mapStyle) {
|
||||
if (this.darkMode) {
|
||||
this.map.setMapStyle('amap://styles/dark');
|
||||
} else {
|
||||
this.map.setMapStyle('amap://styles/normal');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.visible) {
|
||||
this.onOpen();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 渲染地图 */
|
||||
render() {
|
||||
AMapLoader.load({
|
||||
'key': this.mapKey,
|
||||
'version': this.mapVersion,
|
||||
'plugins': ['AMap.PlaceSearch', 'AMap.AutoComplete']
|
||||
}).then((AMap) => {
|
||||
this.loading = false;
|
||||
this.poiLoading = true;
|
||||
// 渲染地图
|
||||
let option = {
|
||||
resizeEnable: true, // 监控地图容器尺寸变化
|
||||
zoom: this.zoom, // 初缩放级别
|
||||
center: this.center // 初始中心点
|
||||
};
|
||||
if (this.mapStyle) {
|
||||
option.mapStyle = this.mapStyle;
|
||||
} else if (this.darkMode) {
|
||||
option.mapStyle = 'amap://styles/dark';
|
||||
}
|
||||
this.map = new AMap.Map(this.$refs.eleMapPickerMap, option);
|
||||
// 获取poi检索实例
|
||||
this.placeSearch = new AMap.PlaceSearch({
|
||||
type: this.poiType,
|
||||
pageSize: this.poiSize,
|
||||
pageIndex: 1
|
||||
});
|
||||
// 获取输入建议实例
|
||||
this.autoComplete = new AMap.AutoComplete({
|
||||
city: this.suggestionCity
|
||||
});
|
||||
// 地图加载完成事件
|
||||
this.map.on('complete', () => {
|
||||
this.chooseIndex = null;
|
||||
let center = this.map.getCenter();
|
||||
this.searchNearBy(center.lat, center.lng, true);
|
||||
});
|
||||
// 地图移动结束事件
|
||||
this.map.on('moveend', () => {
|
||||
// 是否是poi列表点击的移动
|
||||
if (this.isSelMove) {
|
||||
this.isSelMove = false;
|
||||
} else {
|
||||
this.showIconAnim = false;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showIconAnim = true;
|
||||
}, 0);
|
||||
});
|
||||
let center = this.map.getCenter();
|
||||
this.searchNearBy(center.lat, center.lng);
|
||||
}
|
||||
});
|
||||
// 地图中心marker
|
||||
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)
|
||||
});
|
||||
}).catch(e => {
|
||||
this.loading = false;
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
/* poi检索 */
|
||||
searchNearBy(lat, lng, force) {
|
||||
if (!this.placeSearch) {
|
||||
return;
|
||||
}
|
||||
// 非POI检索模式
|
||||
if (!force && this.searchType !== 0) {
|
||||
this.poiLoading = false;
|
||||
return;
|
||||
}
|
||||
this.poiLoading = true;
|
||||
this.placeSearch.searchNearBy(this.poiKeywords, [lng, lat], this.poiRadius, (status, result) => {
|
||||
this.poiLoading = false;
|
||||
if (status === 'complete') {
|
||||
let data = result.poiList.pois.filter(p => p.location !== undefined);
|
||||
// 如果选中的搜索建议不在poi列表中则添加
|
||||
if (this.chooseSuggestion) {
|
||||
if (data.length === 0 || data[0].name !== this.chooseSuggestion.name) {
|
||||
data.unshift(Object.assign({}, this.chooseSuggestion));
|
||||
}
|
||||
this.chooseSuggestion = null;
|
||||
} else {
|
||||
this.chooseIndex = null;
|
||||
}
|
||||
this.poiData = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* poi列表选中 */
|
||||
onChoose(index) {
|
||||
this.isSelMove = true;
|
||||
this.chooseIndex = index;
|
||||
const point = this.poiData[index].location;
|
||||
this.map.setZoomAndCenter(this.chooseZoom, [point.lng, point.lat]);
|
||||
// 非poi检索类型给地图添加中心标记点
|
||||
if (this.searchType !== 0) {
|
||||
this.centerMarker.setPosition([point.lng, point.lat]);
|
||||
this.map.add(this.centerMarker);
|
||||
} else {
|
||||
// poi检索类型图标跳动
|
||||
this.showIconAnim = false;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showIconAnim = true;
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 搜索建议 */
|
||||
onSearch(value) {
|
||||
if (!this.autoComplete || !value || this.lastSuggestion === value) {
|
||||
return;
|
||||
}
|
||||
if (this.searchType !== 0) {
|
||||
this.poiLoading = true;
|
||||
}
|
||||
this.lastSuggestion = value;
|
||||
this.autoComplete.search(value, (status, result) => {
|
||||
let data = [];
|
||||
if (result.tips) {
|
||||
data = result.tips.map(d => {
|
||||
return Object.assign({}, d, {
|
||||
address: Array.isArray(d.address) ? d.address[0] : d.address,
|
||||
text: d.name,
|
||||
value: d.name
|
||||
});
|
||||
});
|
||||
}
|
||||
if (this.searchType === 0) { // POI检索模式
|
||||
this.suggestionData = data;
|
||||
} else { // 关键字检索模式
|
||||
this.poiData = data;
|
||||
this.chooseIndex = null;
|
||||
this.poiLoading = false;
|
||||
this.map.remove(this.centerMarker);
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 搜索建议选中 */
|
||||
onSelect(value, option) {
|
||||
this.chooseSuggestion = option;
|
||||
if (!this.poiData.length || this.poiData[0].name !== this.chooseSuggestion.name) {
|
||||
this.poiData.unshift(Object.assign({}, this.chooseSuggestion));
|
||||
}
|
||||
this.chooseIndex = 0;
|
||||
const point = this.chooseSuggestion.location;
|
||||
if (point && this.map) {
|
||||
this.map.setZoomAndCenter(this.chooseZoom, [point.lng, point.lat]);
|
||||
}
|
||||
},
|
||||
/* 确定选择 */
|
||||
onDone(msg) {
|
||||
if (!this.map) {
|
||||
return;
|
||||
}
|
||||
let location;
|
||||
if (this.chooseIndex === null) {
|
||||
if (this.forceChoose) { // 强制选择
|
||||
return this.$message.error(msg);
|
||||
} else { // 未选择使用地图中心点
|
||||
location = Object.assign({}, this.map.getCenter());
|
||||
}
|
||||
} else {
|
||||
location = Object.assign({
|
||||
name: this.poiData[this.chooseIndex].name,
|
||||
address: this.poiData[this.chooseIndex].address || ''
|
||||
}, this.poiData[this.chooseIndex].location);
|
||||
}
|
||||
if (this.needCity) { // 获取行政区
|
||||
this.doneLoading = true;
|
||||
this.map.setCenter([location.lng, location.lat]);
|
||||
this.map.getCity((result) => {
|
||||
this.doneLoading = false;
|
||||
location.city = result;
|
||||
this.$emit('done', location);
|
||||
});
|
||||
} else {
|
||||
this.$emit('done', location);
|
||||
}
|
||||
},
|
||||
/* 弹窗打开回调 */
|
||||
onOpen() {
|
||||
this.show = true;
|
||||
if (this.destroyOnClose || this.map === null) {
|
||||
this.render(); // 渲染地图
|
||||
}
|
||||
this.$emit('open');
|
||||
},
|
||||
/* 弹窗关闭回调 */
|
||||
onClosed() {
|
||||
if (this.destroyOnClose) {
|
||||
this.show = false;
|
||||
this.suggestionKeywords = '';
|
||||
this.lastSuggestion = '';
|
||||
this.poiData = [];
|
||||
this.chooseIndex = null;
|
||||
this.suggestionData = [];
|
||||
this.chooseSuggestion = null;
|
||||
}
|
||||
this.$emit('closed');
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 工具栏 */
|
||||
.ele-map-picker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 18px;
|
||||
}
|
||||
|
||||
.ele-map-picker-header .ele-map-picker-header-search {
|
||||
flex: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.ele-map-picker-header .ant-select-auto-complete {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* 地图 */
|
||||
.ele-map-picker-body {
|
||||
display: flex;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-main {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-main-plus {
|
||||
color: #1890ff;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-main-icon {
|
||||
width: 26px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
margin-left: -13px;
|
||||
}
|
||||
|
||||
/* poi列表 */
|
||||
.ele-map-picker-body .ele-map-picker-poi-list {
|
||||
width: 300px;
|
||||
overflow: auto;
|
||||
border-top: 1px solid hsla(0, 0%, 60%, .15);
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item {
|
||||
padding: 8px 30px 8px 44px;
|
||||
border-bottom: 1px solid hsla(0, 0%, 60%, .15);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item:hover {
|
||||
background: hsla(0, 0%, 60%, .05);
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 14px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 18px;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item-address {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item-check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 7px;
|
||||
transform: translateY(-50%);
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-item.active .ele-map-picker-poi-item-check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 地图图标跳动动画 */
|
||||
.ele-map-picker-body .ele-map-picker-anim-bounce {
|
||||
animation: eleMapPickerAnimBounce 500ms;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes eleMapPickerAnimBounce {
|
||||
0%, 60%, 75%, 90%, to {
|
||||
transition-timing-function: cubic-bezier(.215, .61, .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-dialog {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ele-map-picker-body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-main > div {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.ele-map-picker-body .ele-map-picker-poi-list {
|
||||
width: auto;
|
||||
height: calc(100vh - 370px) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 顶栏 license by http://eleadmin.com */
|
||||
import EleProHeader from './src/main';
|
||||
|
||||
EleProHeader.install = function (Vue) {
|
||||
Vue.component(EleProHeader.name, EleProHeader);
|
||||
};
|
||||
|
||||
export default EleProHeader;
|
||||
@@ -0,0 +1,134 @@
|
||||
<!-- 高级布局顶栏 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div :class="['ele-admin-header', {'ele-bg-primary': isPrimary}]">
|
||||
<!-- logo -->
|
||||
<div class="ele-admin-logo" @click="onLogoClick">
|
||||
<slot name="logo"/>
|
||||
<span v-if="projectName">{{ projectName }}</span>
|
||||
</div>
|
||||
<!-- 左侧功能区 -->
|
||||
<div class="ele-admin-header-tool" v-if="showLeftTool">
|
||||
<div v-if="showCollapse" class="ele-admin-header-tool-item" @click="toggleCollapse">
|
||||
<MenuUnfoldOutlined v-if="collapse"/>
|
||||
<MenuFoldOutlined v-else/>
|
||||
</div>
|
||||
<div v-if="showRefresh" class="ele-admin-header-tool-item" @click="reloadPage">
|
||||
<ReloadOutlined/>
|
||||
</div>
|
||||
<!-- 自定义左侧功能 -->
|
||||
<slot name="left"/>
|
||||
</div>
|
||||
<!-- 面包屑导航 -->
|
||||
<a-breadcrumb
|
||||
v-if="showBreadcrumb"
|
||||
class="ele-admin-breadcrumb"
|
||||
:separator="breadcrumbSeparator">
|
||||
<a-breadcrumb-item v-for="(d, i) in levels" :key="i">
|
||||
<router-link v-if="d.home" to="/">
|
||||
<home-outlined/>
|
||||
</router-link>
|
||||
<span v-else>{{ d.title }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<!-- 自定义中间区域 -->
|
||||
<slot name="center"/>
|
||||
<!-- 顶部菜单区 -->
|
||||
<a-menu
|
||||
v-if="useDeep"
|
||||
:theme="theme"
|
||||
mode="horizontal"
|
||||
:selected-keys="active"
|
||||
class="ele-admin-header-nav">
|
||||
<template v-for="m in menus">
|
||||
<ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m"/>
|
||||
</template>
|
||||
</a-menu>
|
||||
<ele-pro-sidebar-menus
|
||||
v-else
|
||||
:data="menus"
|
||||
:theme="theme"
|
||||
mode="horizontal"
|
||||
:selected-keys="active"
|
||||
class="ele-admin-header-nav"/>
|
||||
<!-- 右侧功能区 -->
|
||||
<slot name="right"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
ReloadOutlined,
|
||||
HomeOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import EleProSidebarItem from '../../ele-pro-sidebar-item';
|
||||
import EleProSidebarMenus from '../../ele-pro-sidebar-menus';
|
||||
|
||||
export default {
|
||||
name: 'EleProHeader',
|
||||
components: {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
ReloadOutlined,
|
||||
HomeOutlined,
|
||||
EleProSidebarItem,
|
||||
EleProSidebarMenus
|
||||
},
|
||||
emits: [
|
||||
'logo-click',
|
||||
'reload-page',
|
||||
'toggle-collapse'
|
||||
],
|
||||
props: {
|
||||
// 项目名
|
||||
projectName: String,
|
||||
// 面包屑导航数据
|
||||
levels: Array,
|
||||
// 顶栏菜单数据
|
||||
menus: Array,
|
||||
// 顶栏菜单选中
|
||||
active: Array,
|
||||
// 顶栏风格
|
||||
headStyle: String,
|
||||
// 是否折叠侧栏
|
||||
collapse: Boolean,
|
||||
// 是否显示左边功能区
|
||||
showLeftTool: Boolean,
|
||||
// 是否显示折叠按钮
|
||||
showCollapse: Boolean,
|
||||
// 是否显示刷新按钮
|
||||
showRefresh: Boolean,
|
||||
// 是否显示面包屑导航
|
||||
showBreadcrumb: Boolean,
|
||||
// 面包屑导航分隔符
|
||||
breadcrumbSeparator: String,
|
||||
// 是否使用递归渲染顶栏菜单
|
||||
useDeep: Boolean
|
||||
},
|
||||
computed: {
|
||||
// 是否是主色顶栏
|
||||
isPrimary() {
|
||||
return this.headStyle === 'primary';
|
||||
},
|
||||
// 顶栏菜单主题
|
||||
theme() {
|
||||
return this.isPrimary ? 'light' : this.headStyle;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 折叠展开侧栏 */
|
||||
toggleCollapse() {
|
||||
this.$emit('toggle-collapse');
|
||||
},
|
||||
/* 刷新页面 */
|
||||
reloadPage() {
|
||||
this.$emit('reload-page');
|
||||
},
|
||||
/* logo点击事件 */
|
||||
onLogoClick() {
|
||||
this.$emit('logo-click');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** ele admin 布局 license by http://eleadmin.com */
|
||||
import EleProLayout from './src/main';
|
||||
|
||||
EleProLayout.install = function (Vue) {
|
||||
Vue.component(EleProLayout.name, EleProLayout);
|
||||
};
|
||||
|
||||
export default EleProLayout;
|
||||
@@ -0,0 +1,970 @@
|
||||
<!-- 高级布局 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div :class="layoutClass">
|
||||
<!-- 顶栏 -->
|
||||
<ele-pro-header
|
||||
:levels="levelData"
|
||||
:use-deep="useDeep"
|
||||
:collapse="collapse"
|
||||
:menus="headMenuData"
|
||||
:head-style="headStyle"
|
||||
:active="headMenuActive"
|
||||
:project-name="projectName"
|
||||
:show-refresh="showRefresh"
|
||||
:show-left-tool="showHeadLeftTool"
|
||||
:breadcrumb-separator="breadcrumbSeparator"
|
||||
:show-collapse="showCollapse && showSideMenu"
|
||||
:show-breadcrumb="showBreadcrumb && layoutStyle === 'side'"
|
||||
@toggle-collapse="toggleCollapse"
|
||||
@reload-page="reloadPage"
|
||||
@logo-click="onLogoClick">
|
||||
<template #logo>
|
||||
<slot name="logo"/>
|
||||
</template>
|
||||
<template #left>
|
||||
<slot name="left"/>
|
||||
</template>
|
||||
<template #center>
|
||||
<slot name="center"/>
|
||||
</template>
|
||||
<template #right>
|
||||
<slot name="right"/>
|
||||
</template>
|
||||
</ele-pro-header>
|
||||
<div class="ele-admin-main">
|
||||
<!-- 侧栏一级导航 -->
|
||||
<ele-pro-sidebar-nav
|
||||
v-if="showSideNav"
|
||||
:data="sideNavData"
|
||||
:use-deep="useDeep"
|
||||
:theme="sideNavTheme"
|
||||
:collapse="navIsCollapse"
|
||||
:menu-collapse="collapse"
|
||||
:inline-indent="inlineIndent"
|
||||
:show-nav-collapse="showNavCollapse"
|
||||
:active="collapse ? sideMenuActive : sideNavActive"
|
||||
@toggle-collapse="toggleNavCollapse">
|
||||
<template #top>
|
||||
<slot name="nav-top"/>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<slot name="nav-bottom"/>
|
||||
</template>
|
||||
</ele-pro-sidebar-nav>
|
||||
<!-- 侧栏 -->
|
||||
<ele-pro-sidebar
|
||||
v-if="showSideMenu"
|
||||
:use-deep="useDeep"
|
||||
:data="sideMenuData"
|
||||
:theme="sideMenuTheme"
|
||||
:active="sideMenuActive"
|
||||
:menu-opens="sideMenuOpen"
|
||||
:collapse="sideMenuCollapse"
|
||||
:unique-open="sideUniqueOpen"
|
||||
:inline-indent="inlineIndent">
|
||||
<template #top>
|
||||
<slot name="top"/>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<slot name="bottom"/>
|
||||
</template>
|
||||
</ele-pro-sidebar>
|
||||
<!-- 主体 -->
|
||||
<div class="ele-admin-body">
|
||||
<!-- 多页签 -->
|
||||
<ele-pro-tabs
|
||||
v-if="showTabs"
|
||||
:tabs="tabData"
|
||||
:active="tabActive"
|
||||
:click-reload="clickReload"
|
||||
:home-title="homeRouteTitle"
|
||||
:show-refresh="showTabRefresh"
|
||||
:body-fullscreen="bodyFullscreen"
|
||||
@tab-change="tabChange"
|
||||
@tab-remove="tabRemove"
|
||||
@tab-remove-all="tabRemoveAll"
|
||||
@tab-remove-left="tabRemoveLeft"
|
||||
@tab-remove-right="tabRemoveRight"
|
||||
@tab-remove-other="tabRemoveOther"
|
||||
@fullscreen-body="toggleBodyFullscreen"
|
||||
@reload-page="reloadPage">
|
||||
<template #dropdown>
|
||||
<slot name="dropdown"/>
|
||||
</template>
|
||||
</ele-pro-tabs>
|
||||
<!-- 内容区域 -->
|
||||
<div class="ele-admin-content">
|
||||
<div v-if="showContent" class="ele-admin-content-view">
|
||||
<slot name="content">
|
||||
<ele-empty-layout/>
|
||||
</slot>
|
||||
</div>
|
||||
<template v-if="showContent && showFooter && !hideFooter">
|
||||
<slot name="footer"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏幕遮罩层 -->
|
||||
<div class="ele-admin-shade" @click="toggleCollapse"></div>
|
||||
<!-- 自定义内容 -->
|
||||
<slot/>
|
||||
<!-- 返回顶部 -->
|
||||
<a-back-top
|
||||
v-if="showBackTop && !fixedBody"
|
||||
:visibility-height="backTopVisibilityHeight"/>
|
||||
<a-back-top
|
||||
v-else-if="showBackTop"
|
||||
:target="getContentElem"
|
||||
:visibility-height="backTopVisibilityHeight"/>
|
||||
<!-- 主题设置抽屉 -->
|
||||
<ele-pro-setting
|
||||
v-if="needSetting"
|
||||
:tips="tips"
|
||||
:color="color"
|
||||
:themes="themes"
|
||||
:dark-mode="darkMode"
|
||||
:weak-mode="weakMode"
|
||||
:show-tabs="showTabs"
|
||||
:tab-style="tabStyle"
|
||||
:body-full="bodyFull"
|
||||
:visible="showSetting"
|
||||
:head-style="headStyle"
|
||||
:side-style="sideStyle"
|
||||
:fixed-body="fixedBody"
|
||||
:show-footer="showFooter"
|
||||
:color-picker="colorPicker"
|
||||
:fixed-header="fixedHeader"
|
||||
:layout-style="layoutStyle"
|
||||
:fixed-sidebar="fixedSidebar"
|
||||
:colorful-icon="colorfulIcon"
|
||||
:logo-auto-size="logoAutoSize"
|
||||
:side-menu-style="sideMenuStyle"
|
||||
:side-unique-open="sideUniqueOpen"
|
||||
:predefine-colors="predefineColors"
|
||||
@change-style="changeStyle"
|
||||
@change-color="changeColor"
|
||||
@change-dark-mode="changeDarkMode"
|
||||
@change-weak-mode="changeWeakMode"
|
||||
@update:visible="updateShowSetting"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import debounce from 'lodash-es/debounce';
|
||||
import EleProHeader from '../../ele-pro-header';
|
||||
import EleProSidebar from '../../ele-pro-sidebar';
|
||||
import EleProSidebarNav from '../../ele-pro-sidebar-nav';
|
||||
import EleProTabs from '../../ele-pro-tabs';
|
||||
import EleProSetting from '../../ele-pro-setting';
|
||||
import EleEmptyLayout from '../../ele-empty-layout';
|
||||
import {eachTreeData, formatTreeData} from '../../util.js';
|
||||
// 用于刷新路由的path
|
||||
const REDIRECT_PATH = '/redirect/';
|
||||
// 默认主页标题
|
||||
const DEFAULT_HOME_TITLE = '主页';
|
||||
|
||||
export default {
|
||||
name: 'EleProLayout',
|
||||
components: {
|
||||
EleProHeader,
|
||||
EleProSidebar,
|
||||
EleProSidebarNav,
|
||||
EleProTabs,
|
||||
EleProSetting,
|
||||
EleEmptyLayout
|
||||
},
|
||||
emits: [
|
||||
'logo-click',
|
||||
'reload-page',
|
||||
'update-screen',
|
||||
'update-collapse',
|
||||
'tab-add',
|
||||
'tab-remove',
|
||||
'tab-remove-all',
|
||||
'tab-remove-left',
|
||||
'tab-remove-right',
|
||||
'tab-remove-other',
|
||||
'change-color',
|
||||
'change-style',
|
||||
'change-dark-mode',
|
||||
'change-weak-mode',
|
||||
'set-home-components',
|
||||
'body-fullscreen-change',
|
||||
'update:side-nav-collapse',
|
||||
'update:show-setting'
|
||||
],
|
||||
props: {
|
||||
// 全部菜单数据
|
||||
menus: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 标签页数据
|
||||
tabs: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 项目名
|
||||
projectName: String,
|
||||
// 主页标题
|
||||
homeTitle: String,
|
||||
// 是否显示侧栏折叠按钮
|
||||
showCollapse: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示一级侧栏折叠按钮
|
||||
showNavCollapse: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示刷新按钮
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示面包屑导航
|
||||
showBreadcrumb: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 面包屑导航分隔符
|
||||
breadcrumbSeparator: {
|
||||
type: String,
|
||||
default: '/'
|
||||
},
|
||||
// 是否折叠侧栏
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否折叠侧栏一级菜单
|
||||
sideNavCollapse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 顶栏风格, light | dark
|
||||
headStyle: {
|
||||
type: String,
|
||||
default: 'light'
|
||||
},
|
||||
// 侧边栏风格, light | dark
|
||||
sideStyle: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
},
|
||||
// 布局风格, default | top | mix
|
||||
layoutStyle: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 侧边栏菜单模式, default | mix
|
||||
sideMenuStyle: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 是否固定顶栏
|
||||
fixedHeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否固定侧栏
|
||||
fixedSidebar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否固定主体
|
||||
fixedBody: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 内容区域宽度是否铺满
|
||||
bodyFull: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// logo宽度是否自适应
|
||||
logoAutoSize: Boolean,
|
||||
// 是否显示全局页脚
|
||||
showFooter: Boolean,
|
||||
// 侧栏菜单是否彩色图标
|
||||
colorfulIcon: Boolean,
|
||||
// 侧栏是否只保持一个子菜单展开
|
||||
sideUniqueOpen: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启多页签
|
||||
showTabs: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 标签页风格, default | dot | card
|
||||
tabStyle: {
|
||||
type: String,
|
||||
default: 'dot'
|
||||
},
|
||||
// 是否色弱模式
|
||||
weakMode: Boolean,
|
||||
// 是否暗黑模式
|
||||
darkMode: Boolean,
|
||||
// 当前主题色
|
||||
color: String,
|
||||
// 是否需要主题设置抽屉
|
||||
needSetting: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否打开主题设置抽屉, 支持v-model绑定
|
||||
showSetting: Boolean,
|
||||
// 主题设置抽屉界面显示的主题列表
|
||||
themes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 主题设置抽屉界面提示文字
|
||||
tips: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 主题设置抽屉是否显示颜色选择器
|
||||
colorPicker: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 主题设置抽屉颜色选择器预设颜色
|
||||
predefineColors: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [
|
||||
'#f5222d',
|
||||
'#fa541c',
|
||||
'#fa8c16',
|
||||
'#faad14',
|
||||
'#a0d911',
|
||||
'#52c41a',
|
||||
'#13c2c2',
|
||||
'#2f54eb',
|
||||
'#722ed1',
|
||||
'#eb2f96'
|
||||
];
|
||||
}
|
||||
},
|
||||
// 内容区域全屏时是否不显示页签栏
|
||||
contentFullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否按返回键退出内容区域全屏
|
||||
fullscreenExitOnEsc: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示主体部分
|
||||
showContent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否再次点击选中页签刷新
|
||||
clickReload: Boolean,
|
||||
// 开启多页签是否缓存组件
|
||||
tabKeepAlive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 菜单缩进
|
||||
inlineIndent: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
// 是否需要返回顶部组件
|
||||
showBackTop: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 返回顶部的滚动高度
|
||||
backTopVisibilityHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 不显示全局页脚的路由
|
||||
hideFooters: Array,
|
||||
// 不显示侧边栏的路由
|
||||
hideSidebars: Array,
|
||||
// 可重复打开页签的路由地址
|
||||
repeatableTabs: Array,
|
||||
// 是否使用递归渲染菜单
|
||||
useDeep: Boolean,
|
||||
// 自定义菜单标题的i18n
|
||||
i18n: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 国际化处理后的菜单数据
|
||||
menuData: [],
|
||||
// 国际化处理后的多页签数据
|
||||
tabData: [],
|
||||
// 面包屑导航数据
|
||||
levelData: [],
|
||||
// 侧栏一级菜单数据
|
||||
sideNavData: [],
|
||||
// 侧栏一级菜单选中
|
||||
sideNavActive: [],
|
||||
// 侧栏菜单数据
|
||||
sideMenuData: [],
|
||||
// 侧栏菜单选中
|
||||
sideMenuActive: [],
|
||||
// 侧栏菜单展开
|
||||
sideMenuOpen: [],
|
||||
// 顶栏菜单数据
|
||||
headMenuData: [],
|
||||
// 顶栏菜单选中
|
||||
headMenuActive: [],
|
||||
// 多页签选中
|
||||
tabActive: '/',
|
||||
// 当前路由是否隐藏侧栏
|
||||
hideSidebar: false,
|
||||
// 当前路由是否隐藏页脚
|
||||
hideFooter: false,
|
||||
// 是否全屏内容区域
|
||||
bodyFullscreen: false,
|
||||
// 主页路由标题
|
||||
homeRouteTitle: this.homeTitle || DEFAULT_HOME_TITLE,
|
||||
// 是否折叠一级菜单
|
||||
navIsCollapse: this.sideNavCollapse,
|
||||
// 内容区域元素
|
||||
contentElem: '.ele-admin-layout>.ele-admin-main>.ele-admin-body>.ele-admin-content',
|
||||
// 当前屏幕宽度
|
||||
screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
|
||||
// 窗口大小改变监听器
|
||||
onResizeListener: debounce(() => {
|
||||
this.updateScreen();
|
||||
}, 300)
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 布局class
|
||||
layoutClass() {
|
||||
const showSidebar = this.showSideNav || this.showSideMenu;
|
||||
return [
|
||||
'ele-admin-layout',
|
||||
// 折叠侧边栏
|
||||
{'ele-admin-collapse': this.collapse},
|
||||
// 固定顶栏
|
||||
{'ele-admin-fixed-header': this.fixedHeader},
|
||||
// 固定侧边栏
|
||||
{'ele-admin-fixed-sidebar': this.fixedSidebar && !this.isTopMenu && 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.isMobile},
|
||||
// 侧边栏彩色图标
|
||||
{'ele-admin-side-colorful': this.colorfulIcon},
|
||||
// logo宽度自适应
|
||||
{'ele-admin-logo-auto': (this.logoAutoSize || this.isTopMenu || !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.navIsCollapse && !this.isMobile}
|
||||
]
|
||||
},
|
||||
// 是否是移动端小屏幕
|
||||
isMobile() {
|
||||
return this.screenWidth < 768;
|
||||
},
|
||||
// 是否折叠侧栏菜单
|
||||
sideMenuCollapse() {
|
||||
return (this.isMobile || this.isMixSideMenu) ? false : this.collapse;
|
||||
},
|
||||
// 侧栏一级菜单主题
|
||||
sideNavTheme() {
|
||||
return this.sideStyle === 'dark' ? 'dark' : 'light';
|
||||
},
|
||||
// 侧栏菜单主题
|
||||
sideMenuTheme() {
|
||||
return (this.isMixSideMenu && !this.isMobile) ? 'light' : this.sideNavTheme;
|
||||
},
|
||||
// 是否显示顶栏左侧功能区
|
||||
showHeadLeftTool() {
|
||||
return this.isMobile || !this.isTopMenu;
|
||||
},
|
||||
// 是否显示侧栏一级菜单
|
||||
showSideNav() {
|
||||
return !(
|
||||
!this.isMixSideMenu ||
|
||||
this.isMobile ||
|
||||
this.isTopMenu ||
|
||||
(this.sideNavData.length === 0 && this.menuData.length !== 0) ||
|
||||
this.hideSidebar
|
||||
);
|
||||
},
|
||||
// 是否显示侧栏菜单
|
||||
showSideMenu() {
|
||||
return this.isMobile ? true : !(
|
||||
this.isTopMenu ||
|
||||
(this.sideMenuData.length === 0 && this.menuData.length !== 0) ||
|
||||
this.hideSidebar
|
||||
);
|
||||
},
|
||||
// 是否是栏菜单布局
|
||||
isTopMenu() {
|
||||
return this.layoutStyle === 'top';
|
||||
},
|
||||
// 是否是混合菜单布局
|
||||
isMixMenu() {
|
||||
return this.layoutStyle === 'mix';
|
||||
},
|
||||
// 是否是双栏菜单侧栏
|
||||
isMixSideMenu() {
|
||||
return this.sideMenuStyle === 'mix';
|
||||
},
|
||||
// 页签栏右侧下拉是否显示刷新按钮
|
||||
showTabRefresh() {
|
||||
return this.bodyFullscreen || (this.isTopMenu && !this.isMobile);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.changeLanguage();
|
||||
const current = this.$route;
|
||||
if (current) {
|
||||
this.onRouteChange(current);
|
||||
}
|
||||
// 监听浏览器窗口大小改变
|
||||
window.addEventListener('resize', this.onResizeListener);
|
||||
window.addEventListener('keydown', this.onKeydownListener);
|
||||
},
|
||||
methods: {
|
||||
/* 折叠展开侧栏 */
|
||||
toggleCollapse() {
|
||||
this.updateCollapse(!this.collapse);
|
||||
},
|
||||
/* 更新侧栏折叠状态 */
|
||||
updateCollapse(value) {
|
||||
this.$emit('update-collapse', value);
|
||||
},
|
||||
/* 折叠展开一级菜单 */
|
||||
toggleNavCollapse() {
|
||||
this.navIsCollapse = !this.navIsCollapse;
|
||||
this.$emit('update:side-nav-collapse', this.navIsCollapse);
|
||||
},
|
||||
/* logo点击事件 */
|
||||
onLogoClick() {
|
||||
this.$emit('logo-click', this.isHome(this.$route));
|
||||
},
|
||||
/* 刷新页面 */
|
||||
reloadPage() {
|
||||
this.$emit('reload-page');
|
||||
},
|
||||
/* 内容区域全屏切换 */
|
||||
toggleBodyFullscreen() {
|
||||
this.bodyFullscreen = !this.bodyFullscreen;
|
||||
this.$emit('body-fullscreen-change', this.bodyFullscreen);
|
||||
},
|
||||
/* 键盘事件监听 */
|
||||
onKeydownListener(event) {
|
||||
if (event.keyCode === 27) {
|
||||
if (this.fullscreenExitOnEsc && this.bodyFullscreen) {
|
||||
this.bodyFullscreen = false;
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 更新屏幕尺寸 */
|
||||
updateScreen() {
|
||||
this.screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
||||
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.$emit('update-screen', {width: this.screenWidth, height: screenHeight});
|
||||
},
|
||||
/* tab切换 */
|
||||
tabChange({fullPath, key}) {
|
||||
this.$router.push(fullPath || key);
|
||||
},
|
||||
/* 移除tab */
|
||||
tabRemove(value) {
|
||||
this.$emit('tab-remove', value);
|
||||
},
|
||||
/* 移除左边tab */
|
||||
tabRemoveLeft(value) {
|
||||
this.$emit('tab-remove-left', value);
|
||||
},
|
||||
/* 移除右边tab */
|
||||
tabRemoveRight(value) {
|
||||
this.$emit('tab-remove-right', value);
|
||||
},
|
||||
/* 移除其它tab */
|
||||
tabRemoveOther(value) {
|
||||
this.$emit('tab-remove-other', value);
|
||||
},
|
||||
/* 移除全部tab */
|
||||
tabRemoveAll(active) {
|
||||
this.$emit('tab-remove-all', active);
|
||||
},
|
||||
/* 切换布局配置 */
|
||||
changeStyle(value) {
|
||||
this.$emit('change-style', value);
|
||||
},
|
||||
/* 切换主题色 */
|
||||
changeColor(value) {
|
||||
this.$emit('change-color', value);
|
||||
},
|
||||
/* 切换暗黑模式 */
|
||||
changeDarkMode(value) {
|
||||
this.$emit('change-dark-mode', value);
|
||||
},
|
||||
/* 切换色弱模式 */
|
||||
changeWeakMode(value) {
|
||||
this.$emit('change-weak-mode', value);
|
||||
},
|
||||
/* 设置主页的组件用于keep-alive */
|
||||
setHomeComponents(components) {
|
||||
this.$emit('set-home-components', components);
|
||||
},
|
||||
/* 修改设置抽屉的visible */
|
||||
updateShowSetting(value) {
|
||||
this.$emit('update:show-setting', value);
|
||||
},
|
||||
/* 处理路由切换 */
|
||||
onRouteChange(current) {
|
||||
const {meta, matched, path, fullPath} = current;
|
||||
if (path.startsWith(REDIRECT_PATH)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 判断是否需要隐藏侧栏
|
||||
if (this.hideSidebars && this.hideSidebars.includes(current.path)) {
|
||||
this.hideSidebar = true;
|
||||
} else {
|
||||
this.hideSidebar = meta.hideSidebar;
|
||||
}
|
||||
|
||||
// 判断是否需要隐藏页脚
|
||||
if (this.hideFooters && this.hideFooters.includes(current.path)) {
|
||||
this.hideFooter = true;
|
||||
} else {
|
||||
this.hideFooter = meta.hideFooter;
|
||||
}
|
||||
|
||||
// 获取面包屑导航数据
|
||||
const levels = [], isHome = this.isHome(current), components = [];
|
||||
if (!isHome) {
|
||||
levels.push({home: true, title: this.homeRouteTitle});
|
||||
}
|
||||
matched.forEach((m) => {
|
||||
if (m.meta && m.meta.title && m.meta.breadcrumb !== false) {
|
||||
levels.push(this.toLevelObject(m.path, m.meta.title));
|
||||
}
|
||||
if (m.components && m.components.default && m.components.default.name) {
|
||||
components.push(m.components.default.name);
|
||||
}
|
||||
});
|
||||
this.levelData = levels;
|
||||
|
||||
// 添加页签
|
||||
if (isHome) {
|
||||
this.tabActive = '/';
|
||||
this.setHomeComponents(components);
|
||||
} else {
|
||||
let title = meta.title, closable = (meta.closable !== false), key = path;
|
||||
if (meta.tabUnique === false || (this.repeatableTabs && this.repeatableTabs.includes(key))) {
|
||||
key = fullPath;
|
||||
}
|
||||
if (title) {
|
||||
this.$emit('tab-add', {key, path, title, fullPath, components, closable});
|
||||
}
|
||||
this.tabActive = key;
|
||||
}
|
||||
|
||||
// 获取顶栏和侧栏的菜单数据和选中
|
||||
this.updateMenuActive(current);
|
||||
if (this.isMixMenu || this.isMixSideMenu) {
|
||||
this.splitMenuData();
|
||||
}
|
||||
|
||||
// 移动端自动收起侧边栏
|
||||
if (this.isMobile) {
|
||||
this.updateCollapse(true);
|
||||
}
|
||||
},
|
||||
/* 判断路由是否是主页 */
|
||||
isHome(route) {
|
||||
if (route) {
|
||||
const {path, matched} = route;
|
||||
return ('/' === path) || (matched.length ? (matched[0].redirect === path) : false);
|
||||
}
|
||||
},
|
||||
/* 获取path对应的面包屑导航数据 */
|
||||
toLevelObject(path, title) {
|
||||
const menu = this.findMenuByPath(path);
|
||||
return {path: path, title: (menu && menu.meta && menu.meta.title) || title};
|
||||
},
|
||||
/* 获取path对应的菜单数据 */
|
||||
findMenuByPath(path) {
|
||||
let data;
|
||||
eachTreeData(this.menuData, (d) => {
|
||||
if (path === d.path) {
|
||||
data = d;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return data;
|
||||
},
|
||||
/* 更新顶栏和侧栏的菜单选中 */
|
||||
updateMenuActive(current) {
|
||||
const {matched, meta, path} = current;
|
||||
let active = path, active1 = null, active2 = null, openKeys = [];
|
||||
if (meta && typeof meta.active === 'string') {
|
||||
active = meta.active;
|
||||
}
|
||||
if (matched && matched.length) {
|
||||
let match1 = matched[matched.length - 1], match2 = match1;
|
||||
if (matched.length > 1) {
|
||||
match1 = matched[1];
|
||||
}
|
||||
if (matched.length > 2) {
|
||||
match2 = matched[2];
|
||||
}
|
||||
if (match1.meta && typeof match1.meta.active === 'string') {
|
||||
active1 = match1.meta.active;
|
||||
} else {
|
||||
active1 = match1.path;
|
||||
}
|
||||
if (match2.meta && typeof match2.meta.active === 'string') {
|
||||
active2 = match2.meta.active;
|
||||
} else {
|
||||
active2 = match2.path;
|
||||
}
|
||||
// 获取菜单展开的key
|
||||
matched.forEach((d, i) => {
|
||||
if (i !== 0 && i !== (matched.length - 1)) {
|
||||
openKeys.push(d.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.isTopMenu) { // 顶栏导航
|
||||
this.headMenuActive = [active].concat(openKeys);
|
||||
this.sideNavActive = [];
|
||||
} else if (this.isMixMenu) { // 混合导航
|
||||
this.headMenuActive = [active1];
|
||||
this.sideNavActive = [active2];
|
||||
} else { // 左侧导航
|
||||
this.headMenuActive = [];
|
||||
this.sideNavActive = [active1];
|
||||
}
|
||||
this.sideMenuActive = [active].concat(openKeys);
|
||||
if (this.sideUniqueOpen) {
|
||||
this.sideMenuOpen = openKeys;
|
||||
} else {
|
||||
this.sideMenuOpen = Array.from(new Set(this.sideMenuOpen.concat(openKeys)));
|
||||
}
|
||||
},
|
||||
/* 分割出顶栏和侧栏的菜单数据 */
|
||||
splitMenuData() {
|
||||
if (!this.menuData || !this.menuData.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, meta: d.meta};
|
||||
});
|
||||
let sideMenus = this.headMenuActive ? this.menuData.filter((d) => {
|
||||
return this.headMenuActive[0] === d.path;
|
||||
}) : [];
|
||||
sideMenus = (sideMenus.length ? sideMenus[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,
|
||||
meta: d.meta,
|
||||
children: this.collapse ? d.children : null,
|
||||
tempChildren: d.children
|
||||
};
|
||||
});
|
||||
let temps = this.sideNavActive ? sideMenus.filter((d) => {
|
||||
return this.sideNavActive[0] === d.path;
|
||||
}) : [];
|
||||
temps = (temps.length ? temps[0].children : sideMenus[0].children) || [];
|
||||
this.sideMenuData = temps;
|
||||
} else { // 左侧单菜单
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = sideMenus;
|
||||
}
|
||||
} else { // 左侧导航
|
||||
this.headMenuData = [];
|
||||
if (this.isMixSideMenu) { // 左侧双菜单
|
||||
this.sideNavData = this.menuData.map((d) => {
|
||||
return {
|
||||
path: d.path,
|
||||
meta: d.meta,
|
||||
children: this.collapse ? d.children : null,
|
||||
tempChildren: d.children
|
||||
};
|
||||
});
|
||||
let temps = this.sideNavActive ? this.menuData.filter((d) => {
|
||||
return this.sideNavActive[0] === d.path;
|
||||
}) : [];
|
||||
temps = (temps.length ? temps[0].children : this.menuData[0].children) || [];
|
||||
this.sideMenuData = temps;
|
||||
} else { // 左侧单菜单
|
||||
this.sideNavData = [];
|
||||
this.sideMenuData = this.menuData;
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 语言切换后重新处理数据 */
|
||||
changeLanguage() {
|
||||
this.updateMenuData();
|
||||
this.updateLevelData();
|
||||
this.updateTabData();
|
||||
},
|
||||
/* 国际化改变后更新菜单数据 */
|
||||
updateMenuData() {
|
||||
let tempHomeTitle = null;
|
||||
this.menuData = formatTreeData(this.menus, (item) => {
|
||||
const title = item.meta ? item.meta.title : null;
|
||||
if (!tempHomeTitle && (!item.children || !item.children.length)) {
|
||||
tempHomeTitle = title;
|
||||
}
|
||||
return Object.assign({}, item, {
|
||||
meta: Object.assign({}, item.meta, {
|
||||
title: this.routeI18n(item.path, item) || title
|
||||
})
|
||||
});
|
||||
});
|
||||
this.splitMenuData();
|
||||
this.homeRouteTitle = this.homeTitle || tempHomeTitle || DEFAULT_HOME_TITLE;
|
||||
},
|
||||
/* 国际化改变后更新页签数据 */
|
||||
updateTabData() {
|
||||
const tabs = [];
|
||||
this.tabs.forEach((item) => {
|
||||
const menu = this.findMenuByPath(item.path);
|
||||
tabs.push(Object.assign({}, item, {
|
||||
title: this.routeI18n(item.path, menu) || item.title
|
||||
}));
|
||||
});
|
||||
this.tabData = tabs;
|
||||
},
|
||||
/* 国际化改变后更新面包屑导航数据 */
|
||||
updateLevelData() {
|
||||
const levels = [];
|
||||
this.levelData.forEach((d) => {
|
||||
if (d.home) {
|
||||
levels.push({home: true, title: this.homeRouteTitle});
|
||||
} else {
|
||||
levels.push(this.toLevelObject(d.path, d.title));
|
||||
}
|
||||
});
|
||||
this.levelData = levels;
|
||||
},
|
||||
/* 获取路由地址对应的il8n名称 */
|
||||
routeI18n(path, menu) {
|
||||
if (this.i18n && path) {
|
||||
let key;
|
||||
if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('//')) {
|
||||
key = path.replace(/\.(\w)/g, ($0, $1) => $1.toUpperCase());
|
||||
} else {
|
||||
key = (path.indexOf('/') === 0 ? path.substring(1) : path);
|
||||
key = key.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
|
||||
.replace(/_(\w)/g, ($0, $1) => $1.toUpperCase())
|
||||
.replace(/\//g, '.');
|
||||
}
|
||||
return this.i18n(path, key, menu);
|
||||
}
|
||||
},
|
||||
/* 侧栏折叠状态改变处理 */
|
||||
onCollapseChange() {
|
||||
if (this.isMixSideMenu) {
|
||||
if (this.collapse) {
|
||||
this.sideNavData.forEach((d) => {
|
||||
d.children = d.tempChildren;
|
||||
});
|
||||
} else {
|
||||
this.sideNavData.forEach((d) => {
|
||||
d.children = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 获取内容elem */
|
||||
getContentElem() {
|
||||
return document.querySelector(this.contentElem);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.onRouteChange(this.$route);
|
||||
},
|
||||
layoutStyle() {
|
||||
const current = this.$route;
|
||||
if (current) {
|
||||
this.updateMenuActive(current);
|
||||
this.splitMenuData();
|
||||
}
|
||||
},
|
||||
sideMenuStyle() {
|
||||
this.splitMenuData();
|
||||
},
|
||||
isMobile() {
|
||||
this.splitMenuData();
|
||||
},
|
||||
menus() {
|
||||
this.updateMenuData();
|
||||
},
|
||||
tabs() {
|
||||
this.updateTabData();
|
||||
},
|
||||
homeTitle() {
|
||||
if (this.homeTitle) {
|
||||
this.homeRouteTitle = this.homeTitle;
|
||||
} else {
|
||||
this.updateMenuData();
|
||||
}
|
||||
this.updateLevelData();
|
||||
},
|
||||
sideNavCollapse() {
|
||||
this.navIsCollapse = this.sideNavCollapse;
|
||||
},
|
||||
collapse() {
|
||||
this.onCollapseChange();
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
// 销毁监听
|
||||
window.removeEventListener('resize', this.onResizeListener);
|
||||
window.removeEventListener('keydown', this.onKeydownListener);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** ele admin 主题设置抽屉 license by http://eleadmin.com */
|
||||
import EleProSetting from './src/main';
|
||||
|
||||
EleProSetting.install = function (Vue) {
|
||||
Vue.component(EleProSetting.name, EleProSetting);
|
||||
};
|
||||
|
||||
export default EleProSetting;
|
||||
@@ -0,0 +1,523 @@
|
||||
<!-- 主题设置抽屉 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<a-drawer
|
||||
:width="280"
|
||||
:visible="visible"
|
||||
:body-style="{padding: 0}"
|
||||
@update:visible="updateVisible">
|
||||
<div :class="['ele-setting-wrapper', {'ele-setting-dark': darkMode}]">
|
||||
<!-- 侧栏风格 -->
|
||||
<div class="ele-setting-title">{{ locale.setting.title }}</div>
|
||||
<div class="ele-setting-theme ele-text-primary">
|
||||
<a-tooltip :title="locale.setting.sideStyles.dark">
|
||||
<div class="ele-bg-base ele-side-dark" @click="setSideStyle('dark')">
|
||||
<check-outlined v-if="sideStyle === 'dark'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="locale.setting.sideStyles.light">
|
||||
<div class="ele-bg-base" @click="setSideStyle('light')">
|
||||
<check-outlined v-if="sideStyle === 'light'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 顶栏风格 -->
|
||||
<div class="ele-setting-theme ele-text-primary">
|
||||
<a-tooltip :title="locale.setting.headStyles.light">
|
||||
<div class="ele-bg-base ele-head-light" @click="setHeadStyle('light')">
|
||||
<check-outlined v-if="headStyle === 'light'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="locale.setting.headStyles.dark">
|
||||
<div class="ele-bg-base ele-head-dark" @click="setHeadStyle('dark')">
|
||||
<check-outlined v-if="headStyle === 'dark'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="locale.setting.headStyles.primary">
|
||||
<div class="ele-bg-base ele-head-primary" @click="setHeadStyle('primary')">
|
||||
<div class="ele-bg-primary"></div>
|
||||
<check-outlined v-if="headStyle === 'primary'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<!-- 主题色 -->
|
||||
<div v-if="(typeof themes !== 'undefined') && (themes !== null)" class="ele-setting-colors">
|
||||
<template v-if="themes.length">
|
||||
<div
|
||||
v-for="(t, i) in themes"
|
||||
:key="i"
|
||||
class="ele-setting-color-item"
|
||||
:style="{'background-color': t.color || t.value}"
|
||||
@click="changeColor(t.value)">
|
||||
<check-outlined v-if="t.value ? (t.value === color) : !color"/>
|
||||
<a-tooltip :title="t.name">
|
||||
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(t, i) in defaultThemes"
|
||||
:key="i"
|
||||
class="ele-setting-color-item"
|
||||
:style="{'background-color': t.color || t.value}"
|
||||
@click="changeColor(t.value)">
|
||||
<check-outlined v-if="t.value ? (t.value === color) : !color"/>
|
||||
<a-tooltip :title="locale.setting.colors[t.name]">
|
||||
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<ele-color-picker
|
||||
v-if="colorPicker"
|
||||
v-model:value="chooseColor"
|
||||
:predefine="predefineColors"
|
||||
custom-class="ele-setting-color-picker"
|
||||
@change="changeColor"/>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.darkMode }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="darkMode" @change="setDarkMode"/>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<!-- 导航模式 -->
|
||||
<div class="ele-setting-title ele-text-secondary">{{ locale.setting.layoutStyle }}</div>
|
||||
<div class="ele-setting-theme ele-text-primary">
|
||||
<a-tooltip :title="locale.setting.layoutStyles.side">
|
||||
<div class="ele-bg-base ele-side-dark" @click="setLayoutStyle('side')">
|
||||
<CheckOutlined v-if="layoutStyle === 'side'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="locale.setting.layoutStyles.top">
|
||||
<div class="ele-bg-base ele-head-dark" @click="setLayoutStyle('top')">
|
||||
<CheckOutlined v-if="layoutStyle === 'top'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="locale.setting.layoutStyles.mix">
|
||||
<div class="ele-bg-base ele-layout-mix" @click="setLayoutStyle('mix')">
|
||||
<CheckOutlined v-if="layoutStyle === 'mix'"/>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.sideMenuStyle }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="sideMenuStyle === 'mix'" @change="setSideMenuStyle"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.bodyFull }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="bodyFull" @change="setBodyFull"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 其它配置 -->
|
||||
<a-divider/>
|
||||
<div class="ele-setting-title ele-text-secondary">{{ locale.setting.other }}</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.fixedHeader }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="fixedHeader" @change="setFixedHeader"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.fixedSidebar }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="fixedSidebar" @change="setFixedSidebar"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.fixedBody }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="fixedBody" @change="setFixedBody"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.logoAutoSize }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="logoAutoSize" @change="setLogoAutoSize"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.colorfulIcon }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="colorfulIcon" @change="setColorfulIcon"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.sideUniqueOpen }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="sideUniqueOpen" @change="setSideUniqueOpen"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.showFooter }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="showFooter" @change="setShowFooter"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.weakMode }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="weakMode" @change="setWeakMode"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.showTabs }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="showTabs" @change="setShowTabs"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ locale.setting.tabStyle }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-select size="small" :value="tabStyle" style="width: 95px;" @change="setTabStyle">
|
||||
<a-select-option value="default">{{ locale.setting.tabStyles.default }}</a-select-option>
|
||||
<a-select-option value="dot">{{ locale.setting.tabStyles.dot }}</a-select-option>
|
||||
<a-select-option value="card">{{ locale.setting.tabStyles.card }}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="(typeof tips !== 'undefined') && (tips !== null)">
|
||||
<a-divider/>
|
||||
<a-alert show-icon type="warning" :message="tips || locale.setting.tips">
|
||||
<template #icon>
|
||||
<sound-outlined/>
|
||||
</template>
|
||||
</a-alert>
|
||||
</template>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import {CheckOutlined, SoundOutlined} from '@ant-design/icons-vue';
|
||||
import EleColorPicker from '../../ele-color-picker';
|
||||
// 默认主题色
|
||||
const DEFAULT_THEMES = [
|
||||
{
|
||||
name: 'default',
|
||||
value: null,
|
||||
color: '#1890ff'
|
||||
},
|
||||
{
|
||||
name: 'dust',
|
||||
value: '#5f80c7'
|
||||
},
|
||||
{
|
||||
name: 'sunset',
|
||||
value: '#faad14'
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
value: '#f5686f'
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
value: '#9266f9'
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
value: '#33cc99'
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
value: '#32a2d4'
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
name: 'EleProSetting',
|
||||
components: {
|
||||
LocaleReceiver,
|
||||
CheckOutlined,
|
||||
SoundOutlined,
|
||||
EleColorPicker
|
||||
},
|
||||
emits: [
|
||||
'change-style',
|
||||
'change-color',
|
||||
'change-dark-mode',
|
||||
'change-weak-mode',
|
||||
'update:visible'
|
||||
],
|
||||
props: {
|
||||
// 是否显示, 支持 v-model 绑定
|
||||
visible: Boolean,
|
||||
// 顶栏风格
|
||||
headStyle: String,
|
||||
// 侧边栏风格
|
||||
sideStyle: String,
|
||||
// 布局风格
|
||||
layoutStyle: String,
|
||||
// 侧栏边菜单风格
|
||||
sideMenuStyle: String,
|
||||
// 内容区域宽度是否铺满
|
||||
bodyFull: Boolean,
|
||||
// 是否固定顶栏
|
||||
fixedHeader: Boolean,
|
||||
// 是否固定侧栏
|
||||
fixedSidebar: Boolean,
|
||||
// 是否固定主体
|
||||
fixedBody: Boolean,
|
||||
// logo是否自适应宽度
|
||||
logoAutoSize: Boolean,
|
||||
// 侧栏是否多彩图标
|
||||
colorfulIcon: Boolean,
|
||||
// 侧边栏是否只保持一个子菜单展开
|
||||
sideUniqueOpen: Boolean,
|
||||
// 是否开启页脚
|
||||
showFooter: Boolean,
|
||||
// 是否色弱模式
|
||||
weakMode: Boolean,
|
||||
// 是否开启多标签
|
||||
showTabs: Boolean,
|
||||
// 标签页风格
|
||||
tabStyle: String,
|
||||
// 是否暗黑模式
|
||||
darkMode: Boolean,
|
||||
// 当前主题色
|
||||
color: String,
|
||||
// 主题列表
|
||||
themes: Array,
|
||||
// 提示文字
|
||||
tips: String,
|
||||
// 是否显示颜色选择器
|
||||
colorPicker: Boolean,
|
||||
// 颜色选择器预设颜色
|
||||
predefineColors: Array
|
||||
},
|
||||
data() {
|
||||
let chooseColor = this.color;
|
||||
if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
|
||||
(this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
|
||||
if (this.color === t.value) {
|
||||
chooseColor = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
return {
|
||||
// 默认的主题色
|
||||
defaultThemes: DEFAULT_THEMES,
|
||||
// 颜色选择器选中颜色
|
||||
chooseColor: chooseColor
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 修改visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 切换主题色 */
|
||||
changeColor(value) {
|
||||
if (value !== this.color) {
|
||||
this.$emit('change-color', value);
|
||||
}
|
||||
},
|
||||
/* 修改主题风格 */
|
||||
changeStyle(key, value) {
|
||||
this.$emit('change-style', {key: key, value: value});
|
||||
},
|
||||
setHeadStyle(value) {
|
||||
this.changeStyle('headStyle', value);
|
||||
},
|
||||
setSideStyle(value) {
|
||||
this.changeStyle('sideStyle', value);
|
||||
},
|
||||
setLayoutStyle(value) {
|
||||
this.changeStyle('layoutStyle', value);
|
||||
},
|
||||
setSideMenuStyle(value) {
|
||||
this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
|
||||
},
|
||||
setBodyFull(value) {
|
||||
this.changeStyle('bodyFull', value);
|
||||
},
|
||||
setFixedHeader(value) {
|
||||
this.changeStyle('fixedHeader', value);
|
||||
},
|
||||
setFixedSidebar(value) {
|
||||
this.changeStyle('fixedSidebar', value);
|
||||
},
|
||||
setFixedBody(value) {
|
||||
this.changeStyle('fixedBody', value);
|
||||
if (value) {
|
||||
document.body.style.width = null;
|
||||
}
|
||||
},
|
||||
setLogoAutoSize(value) {
|
||||
this.changeStyle('logoAutoSize', value);
|
||||
},
|
||||
setColorfulIcon(value) {
|
||||
this.changeStyle('colorfulIcon', value);
|
||||
},
|
||||
setSideUniqueOpen(value) {
|
||||
this.changeStyle('sideUniqueOpen', value);
|
||||
},
|
||||
setWeakMode(value) {
|
||||
this.$emit('change-weak-mode', value);
|
||||
},
|
||||
setDarkMode(value) {
|
||||
this.$emit('change-dark-mode', value);
|
||||
},
|
||||
setShowFooter(value) {
|
||||
this.changeStyle('showFooter', value);
|
||||
if (!value) {
|
||||
document.body.style.width = null;
|
||||
}
|
||||
},
|
||||
setShowTabs(value) {
|
||||
this.changeStyle('showTabs', value);
|
||||
},
|
||||
setTabStyle(value) {
|
||||
this.changeStyle('tabStyle', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-setting-wrapper {
|
||||
padding: 20px 18px;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-title {
|
||||
font-size: 13px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 主题风格 */
|
||||
.ele-setting-wrapper .ele-setting-theme > div {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
margin: 0 20px 30px 0;
|
||||
padding: 16px 0 0 26px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-theme > div:before,
|
||||
.ele-setting-wrapper .ele-setting-theme > div:after,
|
||||
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
.ele-setting-dark .ele-setting-theme > div {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
|
||||
}
|
||||
|
||||
.ele-setting-dark .ele-setting-theme > div:before,
|
||||
.ele-setting-dark .ele-setting-theme > div:after,
|
||||
.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-theme > div:after {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
|
||||
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
|
||||
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
|
||||
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
|
||||
background: #001529;
|
||||
}
|
||||
|
||||
.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
|
||||
.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
|
||||
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
|
||||
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
|
||||
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
|
||||
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 主题色选择 */
|
||||
.ele-setting-wrapper .ele-setting-colors {
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-color-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
margin: 8px 8px 0 0;
|
||||
display: inline-block;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 主题配置项 */
|
||||
.ele-setting-wrapper .ele-setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-item .setting-item-title {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ele-setting-item .setting-item-control {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ele-setting-wrapper .ant-divider {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 颜色选择器 */
|
||||
.ele-setting-color-picker {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.ele-setting-color-picker > .ele-color-picker-trigger-inner {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ele-setting-color-picker > .ele-color-picker-trigger-inner.is-empty {
|
||||
background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
|
||||
}
|
||||
|
||||
.ele-setting-color-picker > .ele-color-picker-trigger-inner.is-empty + .ele-color-picker-trigger-arrow {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 侧边栏菜单 item license by http://eleadmin.com */
|
||||
import EleProSidebarItem from './src/main';
|
||||
|
||||
EleProSidebarItem.install = function (Vue) {
|
||||
Vue.component(EleProSidebarItem.name, EleProSidebarItem);
|
||||
};
|
||||
|
||||
export default EleProSidebarItem;
|
||||
@@ -0,0 +1,51 @@
|
||||
<!-- 侧边栏菜单item license by http://eleadmin.com -->
|
||||
<template>
|
||||
<a-sub-menu v-if="haveChildren" :key="item.path" :popup-class-name="firstPopClass">
|
||||
<template v-if="item.meta.icon" #icon>
|
||||
<component :is="item.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="child in item.children">
|
||||
<ele-pro-sidebar-item v-if="!child.meta.hide" :key="child.path" :item="child"/>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.path">
|
||||
<template v-if="item.meta.icon" #icon>
|
||||
<component :is="item.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
<a v-if="isUrl" :href="item.path" target="_blank"></a>
|
||||
<router-link v-else :to="item.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as antIcons from '@ant-design/icons-vue';
|
||||
import {isUrl} from '../../util.js';
|
||||
|
||||
export default {
|
||||
name: 'EleProSidebarItem',
|
||||
components: {...antIcons},
|
||||
props: {
|
||||
// item数据
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// 一级pop菜单class
|
||||
firstPopClass: String
|
||||
},
|
||||
computed: {
|
||||
/* 是否有子级 */
|
||||
haveChildren() {
|
||||
return !!(this.item.children && this.item.children.filter((d) => !d.meta.hide).length);
|
||||
},
|
||||
/* 是否是网址 */
|
||||
isUrl() {
|
||||
return isUrl(this.item.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 侧边栏菜单非递归 license by http://eleadmin.com */
|
||||
import EleProSidebarMenus from './src/main';
|
||||
|
||||
EleProSidebarMenus.install = function (Vue) {
|
||||
Vue.component(EleProSidebarMenus.name, EleProSidebarMenus);
|
||||
};
|
||||
|
||||
export default EleProSidebarMenus;
|
||||
@@ -0,0 +1,205 @@
|
||||
<!-- 非递归渲染侧边栏菜单 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<a-menu
|
||||
:mode="mode"
|
||||
:theme="theme"
|
||||
:open-keys="openKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:inline-indent="inlineIndent"
|
||||
:inline-collapsed="inlineCollapsed"
|
||||
@openChange="onOpenChange">
|
||||
<template v-for="m1 in data">
|
||||
<template v-if="!m1.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m1)" :key="m1.path" :popup-class-name="firstPopClass">
|
||||
<template v-if="m1.meta.icon" #icon>
|
||||
<component :is="m1.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m1.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m2 in m1.children">
|
||||
<template v-if="!m2.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m2)" :key="m2.path">
|
||||
<template v-if="m2.meta.icon" #icon>
|
||||
<component :is="m2.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m2.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m3 in m2.children">
|
||||
<template v-if="!m3.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m3)" :key="m3.path">
|
||||
<template v-if="m3.meta.icon" #icon>
|
||||
<component :is="m3.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m3.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m4 in m3.children">
|
||||
<template v-if="!m4.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m4)" :key="m4.path">
|
||||
<template v-if="m4.meta.icon" #icon>
|
||||
<component :is="m4.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m4.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m5 in m4.children">
|
||||
<template v-if="!m5.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m5)" :key="m5.path">
|
||||
<template v-if="m5.meta.icon" #icon>
|
||||
<component :is="m5.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m5.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m6 in m5.children">
|
||||
<template v-if="!m6.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m6)" :key="m6.path">
|
||||
<template v-if="m6.meta.icon" #icon>
|
||||
<component :is="m6.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m6.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m7 in m6.children">
|
||||
<template v-if="!m7.meta.hide">
|
||||
<a-sub-menu v-if="haveChildren(m7)" :key="m7.path">
|
||||
<template v-if="m7.meta.icon" #icon>
|
||||
<component :is="m7.meta.icon"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<span>{{ m7.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="m8 in m7.children">
|
||||
<a-menu-item v-if="!m8.meta.hide" :key="m8.path">
|
||||
<template v-if="m8.meta.icon" #icon>
|
||||
<component :is="m8.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m8.meta.title }}</span>
|
||||
<a v-if="isUrl(m8)" :href="m8.path" target="_blank"></a>
|
||||
<router-link v-else :to="m8.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m7.path">
|
||||
<template v-if="m7.meta.icon" #icon>
|
||||
<component :is="m7.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m7.meta.title }}</span>
|
||||
<a v-if="isUrl(m7)" :href="m7.path" target="_blank"></a>
|
||||
<router-link v-else :to="m7.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m6.path">
|
||||
<template v-if="m6.meta.icon" #icon>
|
||||
<component :is="m6.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m6.meta.title }}</span>
|
||||
<a v-if="isUrl(m6)" :href="m6.path" target="_blank"></a>
|
||||
<router-link v-else :to="m6.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m5.path">
|
||||
<template v-if="m5.meta.icon" #icon>
|
||||
<component :is="m5.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m5.meta.title }}</span>
|
||||
<a v-if="isUrl(m5)" :href="m5.path" target="_blank"></a>
|
||||
<router-link v-else :to="m5.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m4.path">
|
||||
<template v-if="m4.meta.icon" #icon>
|
||||
<component :is="m4.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m4.meta.title }}</span>
|
||||
<a v-if="isUrl(m4)" :href="m4.path" target="_blank"></a>
|
||||
<router-link v-else :to="m4.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m3.path">
|
||||
<template v-if="m3.meta.icon" #icon>
|
||||
<component :is="m3.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m3.meta.title }}</span>
|
||||
<a v-if="isUrl(m3)" :href="m3.path" target="_blank"></a>
|
||||
<router-link v-else :to="m3.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m2.path">
|
||||
<template v-if="m2.meta.icon" #icon>
|
||||
<component :is="m2.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m2.meta.title }}</span>
|
||||
<a v-if="isUrl(m2)" :href="m2.path" target="_blank"></a>
|
||||
<router-link v-else :to="m2.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="m1.path">
|
||||
<template v-if="m1.meta.icon" #icon>
|
||||
<component :is="m1.meta.icon"/>
|
||||
</template>
|
||||
<span>{{ m1.meta.title }}</span>
|
||||
<a v-if="isUrl(m1)" :href="m1.path" target="_blank"></a>
|
||||
<router-link v-else :to="m1.path"></router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as antIcons from '@ant-design/icons-vue';
|
||||
import {isUrl} from '../../util.js';
|
||||
|
||||
export default {
|
||||
name: 'EleProSidebarMenus',
|
||||
components: {...antIcons},
|
||||
emits: ['openChange'],
|
||||
props: {
|
||||
// 菜单数据
|
||||
data: Array,
|
||||
// 导航模式
|
||||
mode: String,
|
||||
// 主题, light | dark
|
||||
theme: String,
|
||||
// 展开的key
|
||||
openKeys: Array,
|
||||
// 选中的key
|
||||
selectedKeys: Array,
|
||||
// 子级缩进
|
||||
inlineIndent: Number,
|
||||
// 是否折叠
|
||||
inlineCollapsed: Boolean,
|
||||
// 一级pop菜单class
|
||||
firstPopClass: String
|
||||
},
|
||||
methods: {
|
||||
/* 子级展开事件 */
|
||||
onOpenChange(e) {
|
||||
this.$emit('openChange', e);
|
||||
},
|
||||
/* 是否有子级 */
|
||||
haveChildren(item) {
|
||||
return !!(item.children && item.children.filter((d) => !d.meta.hide).length);
|
||||
},
|
||||
/* 是否是网址 */
|
||||
isUrl(item) {
|
||||
return isUrl(item.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 侧边栏双排菜单一级 license by http://eleadmin.com */
|
||||
import EleProSidebarNav from './src/main';
|
||||
|
||||
EleProSidebarNav.install = function (Vue) {
|
||||
Vue.component(EleProSidebarNav.name, EleProSidebarNav);
|
||||
};
|
||||
|
||||
export default EleProSidebarNav;
|
||||
@@ -0,0 +1,86 @@
|
||||
<!-- 侧边栏双排菜单一级 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div class="ele-admin-sidebar-nav ele-scrollbar-hide">
|
||||
<slot name="top"/>
|
||||
<div class="ele-admin-sidebar-nav-menu ele-scrollbar-hide">
|
||||
<a-menu
|
||||
v-if="useDeep"
|
||||
mode="inline"
|
||||
:theme="theme"
|
||||
:selected-keys="active"
|
||||
:inline-indent="inlineIndent"
|
||||
:inline-collapsed="isCollapse">
|
||||
<template v-for="m in data">
|
||||
<ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m" :first-pop-class="firstPopClass"/>
|
||||
</template>
|
||||
</a-menu>
|
||||
<ele-pro-sidebar-menus
|
||||
v-else
|
||||
:data="data"
|
||||
mode="inline"
|
||||
:theme="theme"
|
||||
:selected-keys="active"
|
||||
:inline-indent="inlineIndent"
|
||||
:inline-collapsed="isCollapse"
|
||||
:first-pop-class="firstPopClass"/>
|
||||
</div>
|
||||
<div v-if="showNavCollapse" class="ele-admin-sidebar-nav-tool-item" @click="toggleCollapse">
|
||||
<menu-unfold-outlined v-if="collapse"/>
|
||||
<menu-fold-outlined v-else/>
|
||||
</div>
|
||||
<slot name="bottom"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue';
|
||||
import EleProSidebarItem from '../../ele-pro-sidebar-item';
|
||||
import EleProSidebarMenus from '../../ele-pro-sidebar-menus';
|
||||
|
||||
export default {
|
||||
name: 'EleProSidebarNav',
|
||||
components: {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
EleProSidebarItem,
|
||||
EleProSidebarMenus
|
||||
},
|
||||
emits: ['toggle-collapse'],
|
||||
props: {
|
||||
// 导航数据
|
||||
data: Array,
|
||||
// 导航选中
|
||||
active: Array,
|
||||
// 主题, light | dark
|
||||
theme: String,
|
||||
// 导航是否折叠
|
||||
collapse: Boolean,
|
||||
// 菜单是否折叠
|
||||
menuCollapse: Boolean,
|
||||
// 子级缩进
|
||||
inlineIndent: Number,
|
||||
// 是否显示折叠按钮
|
||||
showNavCollapse: Boolean,
|
||||
// 是否使用递归渲染菜单item
|
||||
useDeep: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 一级pop菜单class
|
||||
firstPopClass: 'ele-admin-sidebar-nav-menu-pop'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否折叠
|
||||
isCollapse() {
|
||||
return this.collapse || this.menuCollapse;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 折叠展开侧栏 */
|
||||
toggleCollapse() {
|
||||
this.$emit('toggle-collapse');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 侧边栏 license by http://eleadmin.com */
|
||||
import EleProSidebar from './src/main';
|
||||
|
||||
EleProSidebar.install = function (Vue) {
|
||||
Vue.component(EleProSidebar.name, EleProSidebar);
|
||||
};
|
||||
|
||||
export default EleProSidebar;
|
||||
@@ -0,0 +1,119 @@
|
||||
<!-- 侧边栏 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div class="ele-admin-sidebar ele-scrollbar-hide">
|
||||
<slot name="top"/>
|
||||
<div class="ele-admin-sidebar-menus">
|
||||
<a-menu
|
||||
v-if="useDeep"
|
||||
mode="inline"
|
||||
:theme="theme"
|
||||
:open-keys="openKeys"
|
||||
:selected-keys="active"
|
||||
:inline-collapsed="collapse"
|
||||
:inline-indent="inlineIndent"
|
||||
@openChange="onOpenChange">
|
||||
<template v-for="m in data">
|
||||
<ele-pro-sidebar-item v-if="!m.meta.hide" :key="m.path" :item="m"/>
|
||||
</template>
|
||||
</a-menu>
|
||||
<ele-pro-sidebar-menus
|
||||
v-else
|
||||
:data="data"
|
||||
mode="inline"
|
||||
:theme="theme"
|
||||
:open-keys="openKeys"
|
||||
:selected-keys="active"
|
||||
:inline-collapsed="collapse"
|
||||
:inline-indent="inlineIndent"
|
||||
@openChange="onOpenChange"/>
|
||||
</div>
|
||||
<slot name="bottom"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleProSidebarItem from '../../ele-pro-sidebar-item';
|
||||
import EleProSidebarMenus from '../../ele-pro-sidebar-menus';
|
||||
|
||||
export default {
|
||||
name: 'EleProSidebar',
|
||||
components: {EleProSidebarItem, EleProSidebarMenus},
|
||||
props: {
|
||||
// 菜单数据
|
||||
data: Array,
|
||||
// 菜单选中
|
||||
active: Array,
|
||||
// 主题, light | dark
|
||||
theme: String,
|
||||
// 展开的key
|
||||
menuOpens: Array,
|
||||
// 是否折叠
|
||||
collapse: Boolean,
|
||||
// 是否只保持一个子菜单展开
|
||||
uniqueOpen: Boolean,
|
||||
// 菜单缩进
|
||||
inlineIndent: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
// 是否使用递归渲染菜单
|
||||
useDeep: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 侧栏展开的key
|
||||
openKeys: this.collapse ? [] : this.menuOpens,
|
||||
// 侧栏展开的key备份
|
||||
openKeysCopy: this.menuOpens
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/* 子级展开事件 */
|
||||
onOpenChange(keys) {
|
||||
if (this.collapse) {
|
||||
this.openKeys = keys;
|
||||
} else {
|
||||
if (this.uniqueOpen && keys.length && (keys.length > this.openKeysCopy.length)) {
|
||||
const cks = keys.filter((k) => !this.openKeysCopy.some((t) => (k === t)));
|
||||
this.openKeysCopy = this.getTreeKeys(this.data, cks[0]) || [];
|
||||
} else {
|
||||
this.openKeysCopy = keys;
|
||||
}
|
||||
this.openKeys = this.openKeysCopy;
|
||||
}
|
||||
},
|
||||
/* 获取key及所有父级key */
|
||||
getTreeKeys(data, key, pks) {
|
||||
if (!pks) {
|
||||
pks = [];
|
||||
}
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const d = data[i];
|
||||
if (d.path === key) {
|
||||
return pks.concat([key]);
|
||||
} else if (d.children && d.children.length) {
|
||||
const ks = this.getTreeKeys(d.children, key, pks.concat([d.path]));
|
||||
if (ks) {
|
||||
return ks;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
collapse() {
|
||||
if (this.collapse) {
|
||||
this.openKeys = [];
|
||||
} else {
|
||||
this.openKeys = this.openKeysCopy;
|
||||
}
|
||||
},
|
||||
menuOpens() {
|
||||
this.openKeysCopy = this.menuOpens;
|
||||
if (!this.collapse) {
|
||||
this.openKeys = this.openKeysCopy;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 表格工具按钮组件 license by http://eleadmin.com */
|
||||
import EleProTableTools from './src/main';
|
||||
|
||||
EleProTableTools.install = function (app) {
|
||||
app.component(EleProTableTools.name, EleProTableTools);
|
||||
};
|
||||
|
||||
export default EleProTableTools;
|
||||
@@ -0,0 +1,363 @@
|
||||
<!-- 表格工具按钮组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<a-space :size="space" class="ele-tool" :style="customStyle">
|
||||
<slot/>
|
||||
<template v-for="tool in tools">
|
||||
<template v-if="tool==='reload'">
|
||||
<div class="ele-tool-item" :key="tool">
|
||||
<a-tooltip :title="locale.tableTools.refresh" :placement="tipsPlacement">
|
||||
<reload-outlined @click="reload"/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="tool==='size'">
|
||||
<div class="ele-tool-item" :key="tool">
|
||||
<a-tooltip :title="locale.tableTools.size" :placement="tipsPlacement">
|
||||
<a-dropdown
|
||||
:trigger="['click']"
|
||||
:overlay-style="{minWidth: '80px'}"
|
||||
placement="bottomRight">
|
||||
<column-height-outlined/>
|
||||
<template #overlay>
|
||||
<a-menu
|
||||
:selected-keys="selectedKeys"
|
||||
@click="updateSize">
|
||||
<a-menu-item key="default">{{ locale.tableTools.sizeOption.medium }}</a-menu-item>
|
||||
<a-menu-item key="middle">{{ locale.tableTools.sizeOption.small }}</a-menu-item>
|
||||
<a-menu-item key="small">{{ locale.tableTools.sizeOption.mini }}</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="tool==='columns'">
|
||||
<div class="ele-tool-item" :key="tool">
|
||||
<a-tooltip :title="locale.tableTools.columns" :placement="tipsPlacement">
|
||||
<a-dropdown
|
||||
:trigger="['click']"
|
||||
placement="bottomRight">
|
||||
<setting-outlined/>
|
||||
<template #overlay>
|
||||
<div class="ant-dropdown-menu ele-tool-column">
|
||||
<div @click.stop="">
|
||||
<div class="ele-tool-column-header ele-tool-column-item">
|
||||
<div v-if="columnsSort" style="width: 20px;"></div>
|
||||
<div v-else style="width: 10px;"></div>
|
||||
<a-checkbox
|
||||
v-model:checked="columnIsAllChecked"
|
||||
:indeterminate="columnIsIndeterminate"
|
||||
@change="onColumnCheckAllChange">
|
||||
{{ locale.tableTools.columnsOption.columns }}
|
||||
</a-checkbox>
|
||||
<a @click="resetColumnChecked">
|
||||
{{ locale.tableTools.columnsOption.reset }}</a>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-checkbox-group
|
||||
v-model:value="columnChecked"
|
||||
@change="onColumnCheckedChange">
|
||||
<draggable
|
||||
v-model="columnList"
|
||||
item-key="key"
|
||||
animation="300"
|
||||
handle=".ele-tool-column-handle"
|
||||
@change="onColumnSortChange">
|
||||
<template #item="{element}">
|
||||
<div class="ele-tool-column-item">
|
||||
<div class="ele-tool-column-handle" v-if="columnsSort">
|
||||
<more-outlined/>
|
||||
<more-outlined/>
|
||||
</div>
|
||||
<div v-else style="width: 10px;"></div>
|
||||
<a-checkbox :value="element.key">
|
||||
{{
|
||||
element.pname + element.title || (element.key === 'index' ? locale.tableTools.columnsOption.index : locale.tableTools.columnsOption.untitled)
|
||||
}}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</a-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="tool==='fullscreen'">
|
||||
<div
|
||||
class="ele-tool-item"
|
||||
:key="tool"
|
||||
@click="toggleFullscreen">
|
||||
<a-tooltip
|
||||
:placement="tipsPlacement"
|
||||
:title="locale.tableTools.fullscreen"
|
||||
v-model:visible="fullScreenTipVisible">
|
||||
<fullscreen-exit-outlined v-if="isFullscreen"/>
|
||||
<fullscreen-outlined v-else/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
ColumnHeightOutlined,
|
||||
SettingOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
MoreOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import draggable from 'vuedraggable';
|
||||
import {eachTreeData} from '../../util.js';
|
||||
|
||||
export default {
|
||||
name: 'EleProTableTools',
|
||||
components: {
|
||||
LocaleReceiver,
|
||||
ReloadOutlined,
|
||||
ColumnHeightOutlined,
|
||||
SettingOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined,
|
||||
MoreOutlined,
|
||||
draggable
|
||||
},
|
||||
emits: [
|
||||
'reload',
|
||||
'update:size',
|
||||
'update:columns',
|
||||
'fullscreen'
|
||||
],
|
||||
props: {
|
||||
// 间距
|
||||
space: {
|
||||
type: String,
|
||||
default: 'middle'
|
||||
},
|
||||
// 表格尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 表格列配置
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 工具按钮布局
|
||||
tools: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['reload', 'size', 'columns', 'fullscreen'];
|
||||
}
|
||||
},
|
||||
// 是否开启列拖拽排序
|
||||
columnsSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否是全屏状态
|
||||
isFullscreen: Boolean,
|
||||
// 自定义样式
|
||||
customStyle: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 列配置原始数据
|
||||
orgColumns: this.columns,
|
||||
// 列配置下拉列表数据
|
||||
columnList: [],
|
||||
// 列配置下拉列表选中数据
|
||||
columnChecked: [],
|
||||
// 列配置下拉列表是否全选
|
||||
columnIsAllChecked: false,
|
||||
// 列配置下拉列表是否半选
|
||||
columnIsIndeterminate: false,
|
||||
// 全屏切换tooltip是否显示
|
||||
fullScreenTipVisible: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 表格尺寸下拉选中
|
||||
selectedKeys() {
|
||||
return [this.size];
|
||||
},
|
||||
// tooltips的方向
|
||||
tipsPlacement() {
|
||||
return this.isFullscreen ? 'bottom' : 'top';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取列配置下拉列表数据
|
||||
this.initColumnList();
|
||||
},
|
||||
methods: {
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$emit('reload');
|
||||
},
|
||||
/* 修改表格尺寸 */
|
||||
updateSize({key}) {
|
||||
this.$emit('update:size', key);
|
||||
},
|
||||
/* 获取列配置下拉列表数据 */
|
||||
initColumnList(reset) {
|
||||
let data = [];
|
||||
eachTreeData(this.orgColumns, d => {
|
||||
if (d.children && d.children.length) {
|
||||
return;
|
||||
}
|
||||
if (d.dataIndex || d.key) {
|
||||
data.push({
|
||||
key: d.key || d.dataIndex,
|
||||
title: d.title/* || (d.key === 'index' ? '序号' : '无标题')*/,
|
||||
show: d.show !== false,
|
||||
pname: d.pname || ''
|
||||
});
|
||||
}
|
||||
});
|
||||
this.columnList = data;
|
||||
this.columnChecked = data.filter(d => d.show).map(d => d.key);
|
||||
this.columnIsAllChecked = this.columnList.length && this.columnList.length === this.columnChecked.length;
|
||||
this.columnIsIndeterminate = this.columnList.length !== this.columnChecked.length;
|
||||
// 默认有隐藏列或者强制重置
|
||||
if (reset || !this.columnIsAllChecked) {
|
||||
let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
|
||||
this.$emit('update:columns', columns);
|
||||
}
|
||||
},
|
||||
/* 列配置改变 */
|
||||
onColumnCheckedChange() {
|
||||
this.columnIsAllChecked = !!this.columnList.length && this.columnList.length === this.columnChecked.length;
|
||||
this.columnIsIndeterminate = !!this.columnChecked.length && this.columnList.length !== this.columnChecked.length;
|
||||
let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
|
||||
this.$emit('update:columns', columns);
|
||||
},
|
||||
/* 列配置全选/取消全选 */
|
||||
onColumnCheckAllChange() {
|
||||
if (this.columnIsAllChecked) {
|
||||
this.columnChecked = this.columnList.map(d => d.key);
|
||||
} else {
|
||||
this.columnChecked = [];
|
||||
}
|
||||
this.columnIsIndeterminate = false;
|
||||
let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
|
||||
this.$emit('update:columns', columns);
|
||||
},
|
||||
/* 重置列配置 */
|
||||
resetColumnChecked() {
|
||||
this.initColumnList(true);
|
||||
},
|
||||
/* 获取显示的列配置 */
|
||||
getCheckedColumns(columns, checked) {
|
||||
let data = [];
|
||||
columns.forEach(d => {
|
||||
if (this.columnList.some(c => c.key === d.key || c.key === d.dataIndex)) {
|
||||
if (checked.indexOf(d.key) === -1 && checked.indexOf(d.dataIndex) === -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (d.children) {
|
||||
let children = this.getCheckedColumns(d.children, checked);
|
||||
if (children.length) {
|
||||
data.push(Object.assign({}, d, {children: children}));
|
||||
}
|
||||
} else {
|
||||
data.push(Object.assign({}, d));
|
||||
}
|
||||
});
|
||||
// 排序
|
||||
if (this.columnsSort) {
|
||||
data.sort((a, b) => {
|
||||
let ai = this.columnList.findIndex(c => c.key === a.key || c.key === a.dataIndex),
|
||||
bi = this.columnList.findIndex(c => c.key === b.key || c.key === b.dataIndex);
|
||||
// 父级列处理
|
||||
if (ai === -1 && a.children && a.children.length) {
|
||||
ai = this.columnList.findIndex(c => c.key === a.children[0].key || c.key === a.children[0].dataIndex);
|
||||
}
|
||||
if (bi === -1 && b.children && b.children.length) {
|
||||
bi = this.columnList.findIndex(c => c.key === b.children[0].key || c.key === b.children[0].dataIndex);
|
||||
}
|
||||
// 固定列处理
|
||||
if (a.fixed === true || a.fixed === 'left') {
|
||||
ai -= this.columnList.length;
|
||||
} else if (a.fixed === 'right') {
|
||||
ai += this.columnList.length;
|
||||
}
|
||||
if (b.fixed === true || b.fixed === 'left') {
|
||||
bi -= this.columnList.length;
|
||||
} else if (b.fixed === 'right') {
|
||||
bi += this.columnList.length;
|
||||
}
|
||||
return ai - bi;
|
||||
});
|
||||
}
|
||||
return data;
|
||||
},
|
||||
/* 列配置拖动改变顺序 */
|
||||
onColumnSortChange() {
|
||||
let columns = this.getCheckedColumns(this.orgColumns, this.columnChecked);
|
||||
this.$emit('update:columns', columns);
|
||||
},
|
||||
/* 全屏切换 */
|
||||
toggleFullscreen() {
|
||||
this.fullScreenTipVisible = false;
|
||||
this.$emit('fullscreen', !this.isFullscreen);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 列配置 */
|
||||
.ele-tool-column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 16px 4px 4px;
|
||||
}
|
||||
|
||||
.ele-tool-column-header {
|
||||
padding: 5px 16px 10px 4px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.ele-tool-column .ant-checkbox-group {
|
||||
padding: 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ele-tool-column-item .ant-checkbox-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ele-tool-column-item .ele-tool-column-handle {
|
||||
opacity: .8;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.ele-tool-column-item .ele-tool-column-handle .anticon-more {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ele-tool-column-item .ele-tool-column-handle .anticon-more + .anticon-more {
|
||||
margin: 2px 4px 0 -8px;
|
||||
}
|
||||
|
||||
.ele-tool-column-item.sortable-chosen {
|
||||
background: hsla(0, 0%, 60%, .1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 高级表格组件 license by http://eleadmin.com */
|
||||
import EleProTable from './src/main';
|
||||
|
||||
EleProTable.install = function (Vue) {
|
||||
Vue.component(EleProTable.name, EleProTable);
|
||||
};
|
||||
|
||||
export default EleProTable;
|
||||
755
src/components/ele-admin-pro/packages/ele-pro-table/src/main.vue
Normal file
755
src/components/ele-admin-pro/packages/ele-pro-table/src/main.vue
Normal file
@@ -0,0 +1,755 @@
|
||||
<!-- 高级表格组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div
|
||||
:class="['ele-pro-table ele-bg-white', {'ele-pro-table-fullscreen': isFullscreen}]"
|
||||
:style="{zIndex: fullZIndex}">
|
||||
<ele-toolbar
|
||||
v-if="toolbar"
|
||||
ref="toolbar"
|
||||
:theme="toolsTheme"
|
||||
:title="title"
|
||||
:sub-title="subTitle"
|
||||
:size="tableSize"
|
||||
:columns="cols"
|
||||
:tools="toolkit"
|
||||
:columns-sort="columnsSort"
|
||||
:toolkit-style="toolkitStyle"
|
||||
:style="toolStyle"
|
||||
:class="toolClass"
|
||||
:is-fullscreen="isFullscreen"
|
||||
@reload="onRefresh"
|
||||
@update:size="updateSize"
|
||||
@update:columns="updateColumns"
|
||||
@fullscreen="toggleFullscreen">
|
||||
<slot name="toolbar"/>
|
||||
<template #action>
|
||||
<slot name="toolkit"/>
|
||||
</template>
|
||||
</ele-toolbar>
|
||||
<!-- 表格 -->
|
||||
<a-table
|
||||
ref="table"
|
||||
:table-layout="tableLayout"
|
||||
:bordered="bordered"
|
||||
:children-column-name="childrenColumnName"
|
||||
:columns="cols"
|
||||
:components="components"
|
||||
:data-source="list"
|
||||
:default-expand-all-rows="defaultExpandAllRows"
|
||||
:default-expanded-row-keys="defaultExpandedRowKeys"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
:expanded-row-render="expandedRowRender"
|
||||
:expand-icon="expandIcon"
|
||||
:expand-row-by-click="expandRowByClick"
|
||||
:expand-icon-column-index="expandIconColumnIndex"
|
||||
:footer="footer"
|
||||
:indent-size="indentSize"
|
||||
:loading="isLoading"
|
||||
:locale="localeText"
|
||||
:pagination="pagination"
|
||||
:row-class-name="rowClassName"
|
||||
:row-key="rowKey"
|
||||
:row-selection="tableRowSelection"
|
||||
:scroll="scroll"
|
||||
:show-header="showHeader"
|
||||
:size="tableSize"
|
||||
:custom-header-row="customHeaderRow"
|
||||
:custom-row="customRow"
|
||||
:get-popup-container="getPopupContainer"
|
||||
:transform-cell-text="transformCellText"
|
||||
@expandedRowsChange="onExpandedRowsChange"
|
||||
@change="onChange"
|
||||
@expand="onExpand">
|
||||
<template
|
||||
v-for="name in Object.keys($slots)"
|
||||
:key="name"
|
||||
v-slot:[name]="{text, record, index, indent, expanded, props}">
|
||||
<slot
|
||||
:name="name"
|
||||
:text="text"
|
||||
:record="record"
|
||||
:index="index"
|
||||
:indent="indent"
|
||||
:expanded="expanded"
|
||||
:props="props"/>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {eachTreeData} from '../../util';
|
||||
import EleToolbar from '../../ele-toolbar';
|
||||
// 如果是服务端数据源默认请求参数名称
|
||||
const defaultRequest = {
|
||||
// 页码的参数名称
|
||||
pageName: 'page',
|
||||
// 每页数据量的参数名
|
||||
limitName: 'limit',
|
||||
// 排序字段参数名称
|
||||
sortName: 'sort',
|
||||
// 排序方式的参数名称
|
||||
orderName: 'order'
|
||||
};
|
||||
// 如果是服务端数据源默认请求参数名称
|
||||
const defaultResponse = {
|
||||
// 数据状态的字段名称
|
||||
statusName: 'code',
|
||||
// 成功的状态码
|
||||
statusCode: 0,
|
||||
// 信息的字段名称
|
||||
msgName: 'msg',
|
||||
// 数据列表的字段名称
|
||||
dataName: 'data',
|
||||
// 数据总数的字段名称
|
||||
countName: 'count'
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'EleProTable',
|
||||
components: {EleToolbar},
|
||||
emits: [
|
||||
'done',
|
||||
'update:selection',
|
||||
'update:current',
|
||||
'columns-change',
|
||||
'size-change',
|
||||
'fullscreen-change',
|
||||
'refresh',
|
||||
'expandedRowsChange',
|
||||
'change',
|
||||
'expand'
|
||||
],
|
||||
props: {
|
||||
// 数据源
|
||||
datasource: [String, Array, Function],
|
||||
// 如果是服务端数据源设定请求方式
|
||||
method: {
|
||||
type: String,
|
||||
default: 'GET'
|
||||
},
|
||||
// 如果是服务端数据源设定请求的参数
|
||||
where: Object,
|
||||
// 如果是服务端数据源设定请求的header
|
||||
headers: Object,
|
||||
// 如果是服务端数据源设定请求数据类型
|
||||
contentType: {
|
||||
type: String,
|
||||
default: 'application/json'
|
||||
},
|
||||
// 如果是服务端数据源设定请求参数名称
|
||||
request: Object,
|
||||
// 如果是服务端数据源设定响应参数名称
|
||||
response: Object,
|
||||
// 如果是服务端数据源自定义返回格式解析
|
||||
parseData: Function,
|
||||
// 如果是服务端数据源自定义参数格式解析
|
||||
parseParam: Function,
|
||||
// 列表选中数据(多选)，支持 v-model 绑定
|
||||
selection: Array,
|
||||
// 列表选中数据(单选)，支持 v-model 绑定
|
||||
current: Object,
|
||||
// 是否需要分页组件
|
||||
needPage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 如果是服务端数据源默认是否请求数据
|
||||
initLoad: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 表格请求状态
|
||||
loading: Boolean,
|
||||
// 表格列配置
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局
|
||||
tableLayout: String,
|
||||
// 是否展示外边框和列边框
|
||||
bordered: Boolean,
|
||||
// 指定树形结构的列名
|
||||
childrenColumnName: Array,
|
||||
// 覆盖默认的 table 元素
|
||||
components: Object,
|
||||
// 初始时，是否展开所有行
|
||||
defaultExpandAllRows: Boolean,
|
||||
// 默认展开的行
|
||||
defaultExpandedRowKeys: Array,
|
||||
// 展开的行，控制属性
|
||||
expandedRowKeys: Array,
|
||||
// 额外的展开行
|
||||
expandedRowRender: Function,
|
||||
// 自定义展开图标
|
||||
expandIcon: Object,
|
||||
// 通过点击行来展开子行
|
||||
expandRowByClick: Boolean,
|
||||
// 展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面
|
||||
expandIconColumnIndex: Number,
|
||||
// 表格尾部
|
||||
footer: Function,
|
||||
// 展示树形数据时，每层缩进的宽度，以 px 为单位
|
||||
indentSize: {
|
||||
type: Number,
|
||||
default: 15
|
||||
},
|
||||
// 默认文案设置，目前包括排序、过滤、空数据文案
|
||||
locale: Object,
|
||||
// 表格行的类名
|
||||
rowClassName: Function,
|
||||
// 表格行 key 的取值，可以是字符串或一个函数
|
||||
rowKey: {
|
||||
type: [String, Function],
|
||||
default: 'key'
|
||||
},
|
||||
// 列表项是否可选择
|
||||
rowSelection: Object,
|
||||
// 设置横向或纵向滚动，也可用于指定滚动区域的宽和高
|
||||
scroll: Object,
|
||||
// 是否显示表头
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 表格大小
|
||||
size: {
|
||||
type: String,
|
||||
default: 'middle'
|
||||
},
|
||||
// 设置头部行属性
|
||||
customHeaderRow: Function,
|
||||
// 设置行属性
|
||||
customRow: Function,
|
||||
// 设置表格内各类浮层的渲染节点，如筛选菜单
|
||||
getPopupContainer: Function,
|
||||
// 数据渲染前可以再次改变，一般用户空数据的默认配置
|
||||
transformCellText: Function,
|
||||
// 分页组件默认页码
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 分页组件每页显示条目个数
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
// 分页组件只有一页时是否隐藏
|
||||
hideOnSinglePage: Boolean,
|
||||
// 分页组件每页显示个数选择器的选项设置
|
||||
pageSizeOptions: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['10', '20', '30', '40', '50', '100'];
|
||||
}
|
||||
},
|
||||
// 分页组件是否显示较少页面内容
|
||||
showLessItems: Boolean,
|
||||
// 分页组件是否可以快速跳转至某页
|
||||
showQuickJumper: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 分页组件是否可以改变 pageSize
|
||||
showSizeChanger: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 分页组件用于显示数据总量
|
||||
showTotal: {
|
||||
type: Function,
|
||||
default(total) {
|
||||
return `共 ${total} 条`;
|
||||
}
|
||||
},
|
||||
// 分页组件是否显示为简单分页
|
||||
simple: Boolean,
|
||||
// 指定分页显示的位置
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
// 表头工具栏主题风格
|
||||
toolsTheme: String,
|
||||
// 标题
|
||||
title: String,
|
||||
// 二级标题
|
||||
subTitle: String,
|
||||
// 表头工具按钮布局
|
||||
toolkit: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['reload', 'size', 'columns', 'fullscreen'];
|
||||
}
|
||||
},
|
||||
// 是否开启列拖拽排序
|
||||
columnsSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 行点击选中
|
||||
rowClickChecked: Boolean,
|
||||
// 行点击选中当单个选中时互斥
|
||||
rowClickCheckedIntelligent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示顶部工具栏
|
||||
toolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部工具栏样式
|
||||
toolStyle: [Object, String],
|
||||
// 自定义顶部工具栏class
|
||||
toolClass: String,
|
||||
// 顶部工具栏右侧样式
|
||||
toolkitStyle: [Object, String],
|
||||
// 表格全屏时的z-index
|
||||
fullZIndex: {
|
||||
type: Number,
|
||||
default: 999
|
||||
},
|
||||
// 是否自动修正页码
|
||||
autoAmendPage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 单选多选列类型
|
||||
selectionType: String
|
||||
},
|
||||
data() {
|
||||
const globalRequest = this.$ELEADMIN ? this.$ELEADMIN.request : null;
|
||||
let isServer = !Array.isArray(this.datasource), order = {}, filters = {},
|
||||
requestNames = Object.assign({}, defaultRequest, globalRequest, this.request);
|
||||
// 获取默认的排序信息
|
||||
eachTreeData(this.columns, (d) => {
|
||||
if (d.defaultSortOrder && d.dataIndex) {
|
||||
order[requestNames.sortName] = d.dataIndex;
|
||||
order[requestNames.orderName] = {
|
||||
ascend: 'asc',
|
||||
descend: 'desc'
|
||||
}[d.defaultSortOrder];
|
||||
}
|
||||
});
|
||||
return {
|
||||
// 数据请求状态
|
||||
isLoading: isServer ? true : this.loading,
|
||||
// 是否是服务端返回数据
|
||||
isServer: isServer,
|
||||
// 全部数据
|
||||
data: isServer ? [] : this.datasource,
|
||||
// 数据总数量
|
||||
total: isServer ? 0 : this.datasource.length,
|
||||
// 当前在第几页
|
||||
page: this.currentPage,
|
||||
// 每页显示数量
|
||||
limit: this.pageSize,
|
||||
// 当前排序参数
|
||||
order: order,
|
||||
// 当前筛选参数
|
||||
filters: filters,
|
||||
// 请求参数名称
|
||||
requestNames: requestNames,
|
||||
// 请求错误后的提示信息
|
||||
errorText: null,
|
||||
// 表格列配置
|
||||
cols: this.columns,
|
||||
// 表格尺寸
|
||||
tableSize: this.size,
|
||||
// 是否是全屏状态
|
||||
isFullscreen: false,
|
||||
// 表格选中行的key
|
||||
selectedRowKeys: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 表格当前显示数据
|
||||
list() {
|
||||
if (this.isServer) {
|
||||
return this.data;
|
||||
}
|
||||
let data = this.data,
|
||||
sort = this.order[this.requestNames.sortName],
|
||||
order = this.order[this.requestNames.orderName];
|
||||
// 前端排序
|
||||
if (sort) {
|
||||
data.sort((a, b) => {
|
||||
if (b[sort] == a[sort]) {
|
||||
return 0;
|
||||
}
|
||||
if (order === 'desc') {
|
||||
return (a[sort] < b[sort]) ? 1 : -1;
|
||||
}
|
||||
return (a[sort] < b[sort]) ? -1 : 1;
|
||||
});
|
||||
}
|
||||
// 前端分页
|
||||
if (this.needPage) {
|
||||
let start = (this.page - 1) * this.limit;
|
||||
let end = start + this.limit;
|
||||
if (end > data.length) {
|
||||
end = data.length;
|
||||
}
|
||||
return data.slice(start, end);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
// 表格索引开始序号
|
||||
tableIndex() {
|
||||
return this.needPage ? ((this.page - 1) * this.limit + 1) : 1;
|
||||
},
|
||||
// 表格分页组件参数
|
||||
pagination() {
|
||||
if (!this.needPage) {
|
||||
return false;
|
||||
}
|
||||
return {
|
||||
position: this.position,
|
||||
current: this.page,
|
||||
pageSize: this.limit,
|
||||
hideOnSinglePage: this.hideOnSinglePage,
|
||||
pageSizeOptions: this.pageSizeOptions,
|
||||
showLessItems: this.showLessItems,
|
||||
showQuickJumper: this.showQuickJumper,
|
||||
showSizeChanger: this.showSizeChanger,
|
||||
showTotal: this.showTotal,
|
||||
simple: this.simple,
|
||||
size: this.tableSize === 'default' ? '' : 'small',
|
||||
total: this.total
|
||||
};
|
||||
},
|
||||
// 表格文案设置
|
||||
localeText() {
|
||||
if (this.errorText) {
|
||||
if (this.locale) {
|
||||
return Object.assign({}, this.locale, {
|
||||
emptyText: this.errorText
|
||||
});
|
||||
} else {
|
||||
return {emptyText: this.errorText};
|
||||
}
|
||||
}
|
||||
return this.locale;
|
||||
},
|
||||
// 表格复选框
|
||||
tableRowSelection() {
|
||||
let type;
|
||||
if (this.current || this.current === null) {
|
||||
type = 'radio';
|
||||
}
|
||||
if (!type && !this.selection && !this.rowSelection) {
|
||||
return null;
|
||||
}
|
||||
return Object.assign({}, this.rowSelection || {}, {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.onSelectionChange,
|
||||
type: this.selectionType || type
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
datasource() {
|
||||
this.isServer = !Array.isArray(this.datasource);
|
||||
if (!this.isServer) {
|
||||
this.total = this.datasource.length;
|
||||
if (this.needPage) {
|
||||
const maxPage = Math.ceil(this.total / this.limit);
|
||||
if (maxPage && this.page > maxPage) {
|
||||
this.page = maxPage;
|
||||
}
|
||||
}
|
||||
this.data = this.datasource;
|
||||
}
|
||||
this.reload();
|
||||
},
|
||||
request() {
|
||||
const globalRequest = this.$ELEADMIN ? this.$ELEADMIN.request : null;
|
||||
this.requestNames = Object.assign({}, defaultRequest, globalRequest, this.request);
|
||||
},
|
||||
pageSize() {
|
||||
this.limit = this.pageSize;
|
||||
this.reload();
|
||||
},
|
||||
currentPage() {
|
||||
this.page = this.currentPage;
|
||||
this.reload();
|
||||
},
|
||||
columns() {
|
||||
this.cols = this.columns;
|
||||
if (this.toolbar) {
|
||||
this.$refs.toolbar.initColumnList();
|
||||
}
|
||||
},
|
||||
size() {
|
||||
this.tableSize = this.size;
|
||||
},
|
||||
loading() {
|
||||
this.isLoading = this.loading;
|
||||
},
|
||||
selection() {
|
||||
this.selectedRowKeys = this.selection.map(d => d[this.rowKey]);
|
||||
},
|
||||
current() {
|
||||
if (this.current) {
|
||||
this.selectedRowKeys = [this.current[this.rowKey]];
|
||||
} else {
|
||||
this.selectedRowKeys = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.initLoad) {
|
||||
this.reload();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
reload(obj) {
|
||||
if (obj) {
|
||||
if (obj.page) {
|
||||
this.page = obj.page;
|
||||
}
|
||||
if (obj.limit) {
|
||||
this.limit = obj.limit;
|
||||
}
|
||||
}
|
||||
this.errorText = null;
|
||||
// 前端分页
|
||||
if (!this.isServer) {
|
||||
this.total = this.datasource.length;
|
||||
//this.isLoading = false;
|
||||
this.$emit('done', {
|
||||
data: this.list,
|
||||
total: this.total
|
||||
},
|
||||
this.needPage ? this.page : 1,
|
||||
this.total,
|
||||
this.$refs.table
|
||||
);
|
||||
return;
|
||||
}
|
||||
// 后端分页
|
||||
this.isLoading = true;
|
||||
if (typeof this.datasource === 'function') {
|
||||
// 自定义请求方法
|
||||
this.datasource({
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
where: Object.assign({}, ((obj && obj.where) || this.where) || {}),
|
||||
order: this.order,
|
||||
filters: this.filters
|
||||
}, (data, total) => {
|
||||
this.isLoading = false;
|
||||
if (Array.isArray(data)) {
|
||||
// 自动修正页码
|
||||
if (this.autoAmendPage && this.needPage && !data.length && total) {
|
||||
let maxPage = Math.ceil(total / this.limit);
|
||||
if (maxPage && this.page > maxPage) {
|
||||
this.page = maxPage;
|
||||
this.reload();
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 获取返回的数据
|
||||
this.data = data;
|
||||
this.total = total || data.length;
|
||||
this.$emit('done', {
|
||||
data: data,
|
||||
total: total
|
||||
},
|
||||
this.needPage ? this.page : 1,
|
||||
this.total,
|
||||
this.$refs.table
|
||||
);
|
||||
} else if (typeof data === 'string') {
|
||||
this.errorText = data;
|
||||
} else {
|
||||
this.errorText = '获取数据失败';
|
||||
console.error('callback返回的data格式错误: ', data);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 数据源为url方式
|
||||
let pageParam = {};
|
||||
if (this.needPage) {
|
||||
pageParam[this.requestNames.pageName] = this.page;
|
||||
pageParam[this.requestNames.limitName] = this.limit;
|
||||
}
|
||||
let params = Object.assign(
|
||||
{},
|
||||
((obj && obj.where) || this.where) || {},
|
||||
this.filters,
|
||||
this.order,
|
||||
pageParam
|
||||
), data = null;
|
||||
if (this.parseParam) {
|
||||
params = this.parseParam(params);
|
||||
}
|
||||
let method = this.method ? this.method.toUpperCase() : 'GET';
|
||||
if (['POST', 'PUT', 'PATCH'].indexOf(method) !== -1) {
|
||||
data = params;
|
||||
params = null;
|
||||
if (this.contentType && this.contentType.toLowerCase().indexOf('form') !== -1) {
|
||||
let formData = new FormData();
|
||||
for (let key in data) {
|
||||
if (!Object.prototype.hasOwnProperty.call(data, key)) {
|
||||
continue;
|
||||
}
|
||||
formData.append(key, data[key]);
|
||||
}
|
||||
data = formData;
|
||||
}
|
||||
}
|
||||
this.$http.request({
|
||||
url: this.datasource,
|
||||
method: method,
|
||||
params: params,
|
||||
data: data,
|
||||
headers: this.headers
|
||||
}).then(res => {
|
||||
this.isLoading = false;
|
||||
const result = this.getResponseResult(res.data);
|
||||
if (result.code === 0) {
|
||||
// 自动修正页码
|
||||
if (this.autoAmendPage && this.needPage && result.data && !result.data.length && result.count) {
|
||||
let maxPage = Math.ceil(result.count / this.limit);
|
||||
if (maxPage && this.page > maxPage) {
|
||||
this.page = maxPage;
|
||||
this.reload();
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 获取请求的数据
|
||||
this.data = result.data;
|
||||
this.total = result.count || result.data.length;
|
||||
this.$emit('done',
|
||||
res.data,
|
||||
this.needPage ? this.page : 1,
|
||||
this.total,
|
||||
this.$refs.table
|
||||
);
|
||||
} else {
|
||||
this.errorText = result.msg || '获取数据失败, 正确的状态码为0';
|
||||
}
|
||||
}).catch(e => {
|
||||
this.isLoading = false;
|
||||
this.errorText = e.message;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 展开的行变化时触发
|
||||
onExpandedRowsChange(expandedRows) {
|
||||
this.$emit('expandedRowsChange', expandedRows);
|
||||
},
|
||||
// 分页、排序、筛选变化时触发
|
||||
onChange(pagination, filters, sorter, {currentDataSource}) {
|
||||
this.$emit('change', pagination, filters, sorter, {currentDataSource});
|
||||
// 更新分页信息
|
||||
this.limit = pagination.pageSize;
|
||||
this.page = pagination.current;
|
||||
// 更新排序信息
|
||||
let temp = {};
|
||||
if (sorter.order) {
|
||||
temp[this.requestNames.sortName] = sorter.field;
|
||||
temp[this.requestNames.orderName] = {ascend: 'asc', descend: 'desc'}[sorter.order];
|
||||
}
|
||||
this.order = temp;
|
||||
// 更新列筛选信息
|
||||
this.filters = Object.assign({}, filters);
|
||||
// 重新获取数据
|
||||
this.reload();
|
||||
},
|
||||
// 点击展开图标时触发
|
||||
onExpand(expanded, record) {
|
||||
this.$emit('expand', expanded, record);
|
||||
},
|
||||
/* 选择项发生变化时会触发 */
|
||||
onSelectionChange(selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.$emit('update:selection', selectedRows);
|
||||
this.$emit('update:current', selectedRows.length ? selectedRows[0] : null);
|
||||
},
|
||||
/* 修改表格尺寸 */
|
||||
updateSize(value) {
|
||||
this.tableSize = value;
|
||||
this.$emit('size-change', value);
|
||||
},
|
||||
/* 修改表格列配置 */
|
||||
updateColumns(value) {
|
||||
this.cols = value;
|
||||
this.$emit('columns-change', value);
|
||||
},
|
||||
/* 全屏切换 */
|
||||
toggleFullscreen(value) {
|
||||
this.isFullscreen = value;
|
||||
this.$emit('fullscreen-change', value);
|
||||
},
|
||||
/* 工具栏刷新按钮点击 */
|
||||
onRefresh() {
|
||||
if (this.isServer) {
|
||||
this.reload();
|
||||
} else {
|
||||
this.$emit('refresh');
|
||||
}
|
||||
},
|
||||
/* 获取返回的结果(解析格式) */
|
||||
getResponseResult(data) {
|
||||
let result = this.parseData ? this.parseData(data) : data;
|
||||
const globalResponse = this.$ELEADMIN ? this.$ELEADMIN.response : null;
|
||||
const responseNames = Object.assign({}, defaultResponse, globalResponse, this.response);
|
||||
let code = this.getFieldValue(result, responseNames.statusName);
|
||||
if (responseNames.statusCode === code) {
|
||||
code = 0;
|
||||
}
|
||||
return {
|
||||
code: code,
|
||||
msg: this.getFieldValue(result, responseNames.msgName),
|
||||
data: this.getFieldValue(result, responseNames.dataName),
|
||||
count: this.getFieldValue(result, responseNames.countName)
|
||||
};
|
||||
},
|
||||
/* 获取字段的值(支持多层*.*) */
|
||||
getFieldValue(obj, field) {
|
||||
if (!field) {
|
||||
return;
|
||||
}
|
||||
let value = obj;
|
||||
field.split('.').forEach(f => {
|
||||
if (value) {
|
||||
value = value[f];
|
||||
} else {
|
||||
value = null;
|
||||
}
|
||||
});
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 表格全屏样式 */
|
||||
.ele-pro-table.ele-pro-table-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
padding: 0 0 16px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ele-pro-table.ele-pro-table-fullscreen .ant-table-pagination {
|
||||
margin-bottom: 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.ele-pro-table.ele-pro-table-fullscreen .ele-table-tool:not(.ele-table-tool-default) {
|
||||
margin-top: 10px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 标签页 license by http://eleadmin.com */
|
||||
import EleProTabs from './src/main';
|
||||
|
||||
EleProTabs.install = function (Vue) {
|
||||
Vue.component(EleProTabs.name, EleProTabs);
|
||||
};
|
||||
|
||||
export default EleProTabs;
|
||||
192
src/components/ele-admin-pro/packages/ele-pro-tabs/src/main.vue
Normal file
192
src/components/ele-admin-pro/packages/ele-pro-tabs/src/main.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<!-- 标签页 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<locale-receiver component-name="ele">
|
||||
<template #default="locale">
|
||||
<a-tabs
|
||||
:hide-add="true"
|
||||
:animated="false"
|
||||
:active-key="active"
|
||||
type="editable-card"
|
||||
class="ele-admin-tabs"
|
||||
@tabClick="onTabClick"
|
||||
@edit="onTabEdit">
|
||||
<a-tab-pane key="/" :tab="homeTitle" :closable="false"/>
|
||||
<template v-for="t in tabs" :key="t.key">
|
||||
<a-tab-pane :tab="t.title" :closable="t.closable"/>
|
||||
</template>
|
||||
<template #tabBarExtraContent>
|
||||
<a-dropdown :overlay-style="{paddingRight: '5px', minWidth: '120px'}" placement="bottomRight">
|
||||
<div class="ele-admin-tabs-drop">
|
||||
<down-outlined/>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<slot name="dropdown">
|
||||
<a-menu @click="onDropClick">
|
||||
<a-menu-item key="fullscreen">
|
||||
<div v-if="bodyFullscreen" class="ele-cell">
|
||||
<compress-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.fullscreenExit }}</div>
|
||||
</div>
|
||||
<div v-else class="ele-cell">
|
||||
<expand-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.fullscreen }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="left">
|
||||
<div class="ele-cell">
|
||||
<arrow-left-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.closeLeft }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="right">
|
||||
<div class="ele-cell">
|
||||
<arrow-right-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.closeRight }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="other">
|
||||
<div class="ele-cell">
|
||||
<close-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.closeOther }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="all">
|
||||
<div class="ele-cell">
|
||||
<close-circle-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.closeAll }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-if="showRefresh" key="reload">
|
||||
<div class="ele-cell">
|
||||
<reload-outlined/>
|
||||
<div class="ele-cell-content">{{ locale.tabs.reload }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</slot>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</template>
|
||||
</locale-receiver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
|
||||
import {
|
||||
DownOutlined,
|
||||
ReloadOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined,
|
||||
CloseOutlined,
|
||||
CloseCircleOutlined,
|
||||
ExpandOutlined,
|
||||
CompressOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'EleProTabs',
|
||||
components: {
|
||||
LocaleReceiver,
|
||||
DownOutlined,
|
||||
ReloadOutlined,
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined,
|
||||
CloseOutlined,
|
||||
CloseCircleOutlined,
|
||||
ExpandOutlined,
|
||||
CompressOutlined
|
||||
},
|
||||
emits: [
|
||||
'tab-change',
|
||||
'tab-remove',
|
||||
'tab-remove-all',
|
||||
'tab-remove-left',
|
||||
'tab-remove-right',
|
||||
'tab-remove-other',
|
||||
'fullscreen-body',
|
||||
'reload-page'
|
||||
],
|
||||
props: {
|
||||
// 标签页数据
|
||||
tabs: Array,
|
||||
// 页签选中
|
||||
active: String,
|
||||
// 主页标题
|
||||
homeTitle: String,
|
||||
// 右侧下拉是否显示刷新按钮
|
||||
showRefresh: Boolean,
|
||||
// 是否再次点击选中tab刷新
|
||||
clickReload: Boolean,
|
||||
// 内容区域是否处于全屏状态
|
||||
bodyFullscreen: Boolean
|
||||
},
|
||||
methods: {
|
||||
/* 处理tab点击 */
|
||||
onTabClick(key) {
|
||||
if (this.active === key) {
|
||||
if (this.clickReload) {
|
||||
this.reloadPage();
|
||||
}
|
||||
return;
|
||||
}
|
||||
let tab;
|
||||
for (let i = 0; i < this.tabs.length; i++) {
|
||||
if (this.tabs[i].key === key) {
|
||||
tab = this.tabs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.$emit('tab-change', tab ? tab : {key: key});
|
||||
},
|
||||
/* 处理tab编辑 */
|
||||
onTabEdit(key, action) {
|
||||
if (action === 'remove') {
|
||||
this.$emit('tab-remove', {name: key, active: this.active});
|
||||
}
|
||||
},
|
||||
/* 下拉菜单点击 */
|
||||
onDropClick(obj) {
|
||||
switch (obj.key) {
|
||||
// 关闭左侧
|
||||
case 'left':
|
||||
this.$emit('tab-remove-left', this.active);
|
||||
break;
|
||||
// 关闭右侧
|
||||
case 'right':
|
||||
if (this.active === '/') {
|
||||
this.removeAllTab();
|
||||
} else {
|
||||
this.$emit('tab-remove-right', this.active);
|
||||
}
|
||||
break;
|
||||
// 关闭其他
|
||||
case 'other':
|
||||
this.$emit('tab-remove-other', this.active);
|
||||
break;
|
||||
// 关闭全部
|
||||
case 'all':
|
||||
this.removeAllTab();
|
||||
break;
|
||||
// 刷新当前
|
||||
case 'reload':
|
||||
this.reloadPage();
|
||||
break;
|
||||
// 内容全屏
|
||||
case 'fullscreen':
|
||||
this.$emit('fullscreen-body', !this.bodyFullscreen);
|
||||
break;
|
||||
}
|
||||
},
|
||||
/* 关闭全部Tab */
|
||||
removeAllTab() {
|
||||
this.$emit('tab-remove-all', this.active);
|
||||
},
|
||||
/* 刷新页面 */
|
||||
reloadPage() {
|
||||
this.$emit('reload-page');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 用于刷新路由 license by http://eleadmin.com */
|
||||
import EleRedirect from './src/main';
|
||||
|
||||
EleRedirect.install = function (Vue) {
|
||||
Vue.component(EleRedirect.name, EleRedirect);
|
||||
};
|
||||
|
||||
export default EleRedirect;
|
||||
@@ -0,0 +1,26 @@
|
||||
/** 用于刷新路由 license by http://eleadmin.com */
|
||||
import {createVNode, defineComponent, unref} from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import {useStore} from 'vuex';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EleRedirect',
|
||||
setup() {
|
||||
const {currentRoute, replace} = useRouter();
|
||||
const {dispatch} = useStore();
|
||||
const {params, query} = unref(currentRoute);
|
||||
const {path} = params;
|
||||
const _path = Array.isArray(path) ? path.join('/') : path;
|
||||
dispatch('theme/setKeepAliveExclude', []).then(() => {
|
||||
replace({
|
||||
path: '/' + _path,
|
||||
query: query,
|
||||
}).then(() => {
|
||||
});
|
||||
});
|
||||
return {};
|
||||
},
|
||||
render() {
|
||||
return createVNode('div');
|
||||
}
|
||||
});
|
||||
8
src/components/ele-admin-pro/packages/ele-tag/index.js
Normal file
8
src/components/ele-admin-pro/packages/ele-tag/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/** 标签组件 license by http://eleadmin.com */
|
||||
import EleTag from './src/main';
|
||||
|
||||
EleTag.install = function (app) {
|
||||
app.component(EleTag.name, EleTag);
|
||||
};
|
||||
|
||||
export default EleTag;
|
||||
155
src/components/ele-admin-pro/packages/ele-tag/src/main.vue
Normal file
155
src/components/ele-admin-pro/packages/ele-tag/src/main.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<!-- 标签组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<a-tag
|
||||
:class="tagClass"
|
||||
:closable="closable"
|
||||
:color="color"
|
||||
:visible="true"
|
||||
@close="onClose">
|
||||
<slot/>
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EleTag',
|
||||
props: {
|
||||
closable: Boolean,
|
||||
color: String,
|
||||
size: {
|
||||
type: String,
|
||||
default: 'mini',
|
||||
validator: function (value) {
|
||||
return ['large', 'middle', 'small', 'mini'].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: function (value) {
|
||||
return ['round', 'default', 'circle'].indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
tagClass() {
|
||||
return [
|
||||
'ele-tag',
|
||||
{'ele-tag-round': this.shape === 'round'},
|
||||
{'ele-tag-circle': this.shape === 'circle'},
|
||||
{'ele-tag-lg': this.size === 'large'},
|
||||
{'ele-tag-md': this.size === 'middle'},
|
||||
{'ele-tag-mini': this.size === 'mini'}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* close事件 */
|
||||
onClose(e) {
|
||||
this.$emit('close', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-tag.ant-tag {
|
||||
margin: 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
box-sizing: content-box;
|
||||
padding: 0 8px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ele-tag.ant-tag .anticon-close {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ele-tag + .ele-tag {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.ele-tag.ant-tag > .anticon + span,
|
||||
.ele-tag.ant-tag > span + .anticon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 圆形、圆角 */
|
||||
.ele-tag.ele-tag-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-round {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* 中型尺寸 */
|
||||
.ele-tag.ele-tag-md {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-md.ele-tag-circle {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-md.ele-tag-round {
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-md > .anticon + span,
|
||||
.ele-tag.ele-tag-md > span + .anticon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* 大型尺寸 */
|
||||
.ele-tag.ele-tag-lg {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-lg.ele-tag-circle {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-lg.ele-tag-round {
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-lg > .anticon + span,
|
||||
.ele-tag.ele-tag-lg > span + .anticon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 超小尺寸 */
|
||||
.ele-tag.ele-tag-mini {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-mini.ele-tag-circle {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-mini.ele-tag-round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.ele-tag.ele-tag-mini > .anticon + span,
|
||||
.ele-tag.ele-tag-mini > span + .anticon {
|
||||
margin-left: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 表格工具栏组件 license by http://eleadmin.com */
|
||||
import EleToolbar from './src/main';
|
||||
|
||||
EleToolbar.install = function (Vue) {
|
||||
Vue.component(EleToolbar.name, EleToolbar);
|
||||
};
|
||||
|
||||
export default EleToolbar;
|
||||
123
src/components/ele-admin-pro/packages/ele-toolbar/src/main.vue
Normal file
123
src/components/ele-admin-pro/packages/ele-toolbar/src/main.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<!-- 表格工具栏组件 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<div :class="['ele-table-tool', {'ele-table-tool-default': 'default'===theme}]">
|
||||
<div class="ele-table-tool-title ele-cell">
|
||||
<div v-if="title||subTitle" style="margin-right: 8px;">
|
||||
<h6 v-if="title">{{ title }}</h6>
|
||||
<div v-if="subTitle">{{ subTitle }}</div>
|
||||
</div>
|
||||
<div class="ele-cell-content" style="margin-left: 0;">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
<ele-pro-table-tools
|
||||
v-if="tools"
|
||||
ref="tool"
|
||||
:size="size"
|
||||
:columns="columns"
|
||||
:tools="tools"
|
||||
:space="space"
|
||||
:columns-sort="columnsSort"
|
||||
:custom-style="toolkitStyle"
|
||||
:is-fullscreen="isFullscreen||fullscreen"
|
||||
@reload="reload"
|
||||
@update:size="updateSize"
|
||||
@update:columns="updateColumns"
|
||||
@fullscreen="toggleFullscreen">
|
||||
<slot name="action"/>
|
||||
</ele-pro-table-tools>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleProTableTools from '../../ele-pro-table-tools';
|
||||
|
||||
export default {
|
||||
name: 'EleToolbar',
|
||||
components: {EleProTableTools},
|
||||
emits: [
|
||||
'reload',
|
||||
'update:size',
|
||||
'update:columns',
|
||||
'fullscreen'
|
||||
],
|
||||
props: {
|
||||
// 主题风格
|
||||
theme: String,
|
||||
// 标题
|
||||
title: String,
|
||||
// 二级标题
|
||||
subTitle: String,
|
||||
// 表格尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 表格列配置
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 工具按钮布局
|
||||
tools: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['reload', 'size', 'columns', 'fullscreen'];
|
||||
}
|
||||
},
|
||||
// 是否开启列拖拽排序
|
||||
columnsSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 工具栏右侧样式
|
||||
toolkitStyle: [Object, String],
|
||||
// 是否是全屏状态
|
||||
isFullscreen: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullscreen: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 右侧工具按钮间距
|
||||
space() {
|
||||
return this.theme === 'default' ? 'small' : 'middle';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 初始化列配置 */
|
||||
initColumnList() {
|
||||
this.$refs.tool.initColumnList();
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$emit('reload');
|
||||
},
|
||||
/* 修改表格尺寸 */
|
||||
updateSize(value) {
|
||||
this.$emit('update:size', value);
|
||||
},
|
||||
/* 修改表格尺寸 */
|
||||
updateColumns(value) {
|
||||
this.$emit('update:columns', value);
|
||||
},
|
||||
/* 全屏切换 */
|
||||
toggleFullscreen(value) {
|
||||
if (this.isFullscreen !== null && this.isFullscreen !== undefined) {
|
||||
this.$emit('fullscreen', value);
|
||||
} else {
|
||||
this.fullscreen = !this.fullscreen;
|
||||
this.$emit('fullscreen', this.fullscreen);
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 全屏切换 */
|
||||
toggleFullscreen(el, fullscreen) {
|
||||
EleProTableTools.toggleFullscreen(el, fullscreen);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** echarts 词云组件封装 license by http://eleadmin.com */
|
||||
import EleWordCloud from './src/main';
|
||||
|
||||
EleWordCloud.install = function (app) {
|
||||
app.component(EleWordCloud.name, EleWordCloud);
|
||||
};
|
||||
|
||||
export default EleWordCloud;
|
||||
@@ -0,0 +1,99 @@
|
||||
<!-- echarts 词云组件封装 license by http://eleadmin.com -->
|
||||
<template>
|
||||
<ele-chart ref="chart" :options="options" :click="onClick"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'echarts-wordcloud';
|
||||
import EleChart from '../../ele-chart';
|
||||
|
||||
export default {
|
||||
name: 'EleWordCloud',
|
||||
components: {EleChart},
|
||||
emits: ['click'],
|
||||
props: {
|
||||
// 词云数据
|
||||
data: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 词云文字颜色
|
||||
colors: [
|
||||
'rgb(24,144,255)',
|
||||
'rgb(102,181,255)',
|
||||
'rgb(65, 217, 199)',
|
||||
'rgb(47, 194, 91)',
|
||||
'rgb(110, 219, 143)',
|
||||
'rgb(154, 230, 92)',
|
||||
'rgb(250, 204, 20)',
|
||||
'rgb(230, 150, 92)',
|
||||
'rgb(87, 173, 113)',
|
||||
'rgb(34, 50, 115)',
|
||||
'rgb(115, 138, 230)',
|
||||
'rgb(117, 100, 204)',
|
||||
'rgb(133, 67, 224)',
|
||||
'rgb(168, 119, 237)',
|
||||
'rgb(92, 142, 230)',
|
||||
'rgb(19, 194, 194)',
|
||||
'rgb(112, 224, 224)',
|
||||
'rgb(92, 163, 230)',
|
||||
'rgb(52, 54, 199)',
|
||||
'rgb(128, 130, 255)',
|
||||
'rgb(221, 129, 230)',
|
||||
'rgb(240, 72, 100)',
|
||||
'rgb(250, 125, 146)',
|
||||
'rgb(213, 152, 217)'
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// echarts配置
|
||||
options() {
|
||||
return {
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
sizeRange: [12, 24],
|
||||
gridSize: 6,
|
||||
textStyle: {
|
||||
color: () => {
|
||||
return this.randomColor();
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
shadowBlur: 8,
|
||||
shadowColor: 'rgba(0, 0, 0, .15)'
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 取随机颜色 */
|
||||
randomColor() {
|
||||
return this.colors[this.random(0, this.colors.length)];
|
||||
},
|
||||
/* 取随机数 */
|
||||
random(m, n) {
|
||||
return Math.floor(Math.random() * (m - n) + n);
|
||||
},
|
||||
/* 图表渲染完成回调 */
|
||||
onClick(e) {
|
||||
this.$emit('click', e.data);
|
||||
},
|
||||
/* 重置尺寸 */
|
||||
resize() {
|
||||
this.$refs.chart.resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
src/components/ele-admin-pro/packages/index.js
Normal file
60
src/components/ele-admin-pro/packages/index.js
Normal file
@@ -0,0 +1,60 @@
|
||||
/** ele admin pro license by http://eleadmin.com */
|
||||
import NProgress from 'nprogress';
|
||||
import Antd from 'ant-design-vue';
|
||||
import EleAvatarList from './ele-avatar-list';
|
||||
import EleEditTag from './ele-edit-tag';
|
||||
import EleProLayout from './ele-pro-layout';
|
||||
import EleProTable from './ele-pro-table';
|
||||
import EleProTableTools from './ele-pro-table-tools';
|
||||
import EleTag from './ele-tag';
|
||||
import EleToolbar from './ele-toolbar';
|
||||
import * as util from './util.js';
|
||||
import messageLoading from './message-loading.js';
|
||||
import {menuToRoutes, formatMenus} from './menu-util.js';
|
||||
|
||||
export {
|
||||
EleAvatarList,
|
||||
EleEditTag,
|
||||
EleProLayout,
|
||||
EleProTable,
|
||||
EleProTableTools,
|
||||
EleTag,
|
||||
EleToolbar,
|
||||
messageLoading,
|
||||
menuToRoutes,
|
||||
formatMenus,
|
||||
util
|
||||
}
|
||||
|
||||
export default {
|
||||
install: function (app, opt) {
|
||||
// 配置nprogress
|
||||
NProgress.configure(Object.assign({
|
||||
speed: 200,
|
||||
minimum: 0.02,
|
||||
trickleRate: 0.1,
|
||||
trickleSpeed: 200,
|
||||
showSpinner: false
|
||||
}, opt ? opt.nProgress : null));
|
||||
|
||||
// 安装antd
|
||||
app.use(Antd);
|
||||
|
||||
// 添加全局属性
|
||||
app.config.globalProperties.$ELEADMIN = {
|
||||
request: opt ? opt.request : null,
|
||||
response: opt ? opt.response : null
|
||||
};
|
||||
app.config.globalProperties.$util = util;
|
||||
app.config.globalProperties.$messageLoading = messageLoading;
|
||||
|
||||
// 注册全局组件
|
||||
app.component(EleAvatarList.name, EleAvatarList);
|
||||
app.component(EleEditTag.name, EleEditTag);
|
||||
app.component(EleProLayout.name, EleProLayout);
|
||||
app.component(EleProTable.name, EleProTable);
|
||||
app.component(EleProTableTools.name, EleProTableTools);
|
||||
app.component(EleTag.name, EleTag);
|
||||
app.component(EleToolbar.name, EleToolbar);
|
||||
}
|
||||
}
|
||||
113
src/components/ele-admin-pro/packages/lang/ar_EG.js
Normal file
113
src/components/ele-admin-pro/packages/lang/ar_EG.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 阿拉伯语 */
|
||||
import lang from 'ant-design-vue/es/locale/ar_EG';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'منعش',
|
||||
fullscreen: 'فول سكرين',
|
||||
fullscreenExit: 'فول سكرين',
|
||||
closeLeft: 'إغلاق الجانب الأيسر',
|
||||
closeRight: 'إغلاق اليمين',
|
||||
closeOther: 'إغلاق أخرى',
|
||||
closeAll: 'إغلاق جميع'
|
||||
},
|
||||
setting: {
|
||||
title: 'إعدادات الموضوع',
|
||||
sideStyles: {
|
||||
dark: 'الجانب المظلم',
|
||||
light: 'ضوء الشريط الجانبي'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'مصباح حامل',
|
||||
dark: 'عنوان الظلام',
|
||||
primary: 'الجدول الرئيسي'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'الجانب قائمة تخطيط',
|
||||
top: 'أعلى القائمة تخطيط',
|
||||
mix: 'مزيج من تصميم القائمة'
|
||||
},
|
||||
colors: {
|
||||
default: 'لي مينغ',
|
||||
dust: 'رمادي أزرق',
|
||||
sunset: 'الغروب البرتقالي',
|
||||
volcano: 'البراكين',
|
||||
purple: 'الذهب الأرجواني',
|
||||
cyan: 'سماوي',
|
||||
green: 'القطبية الخضراء',
|
||||
geekblue: 'المهوس الأزرق'
|
||||
},
|
||||
darkMode: 'نمط الظلام',
|
||||
layoutStyle: 'نمط الملاحة',
|
||||
sideMenuStyle: 'القائمة المزدوجة للشريط الجانبي',
|
||||
bodyFull: 'كامل الشاشة',
|
||||
other: 'إعدادات أخرى',
|
||||
fixedHeader: 'ثابت الجدول الحصاد',
|
||||
fixedSidebar: 'شريط جانبي ثابت',
|
||||
fixedBody: 'جسم ثابت',
|
||||
logoAutoSize: 'تعديل التوقيع',
|
||||
colorfulIcon: 'رمز اللون',
|
||||
sideUniqueOpen: 'القائمة مفتوحة فقط',
|
||||
weakMode: 'وضع ضعيف',
|
||||
showFooter: 'عرض تذييل',
|
||||
showTabs: 'عرض علامة التبويب',
|
||||
tabStyle: 'نمط التسمية',
|
||||
tabStyles: {
|
||||
default: 'خرق العقد',
|
||||
dot: 'رقصة البولكا النقاط',
|
||||
card: 'البطاقات'
|
||||
},
|
||||
tips: 'في المرة القادمة التي تفتح ، وسوف تذكر التكوين الخاص بك'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'منعش',
|
||||
size: 'كثافة',
|
||||
sizeOption: {
|
||||
large: 'سهل',
|
||||
medium: 'خرق العقد',
|
||||
small: 'الثانوية',
|
||||
mini: 'عقد'
|
||||
},
|
||||
columns: 'عمود',
|
||||
columnsOption: {
|
||||
columns: 'عمود',
|
||||
reset: 'ريست',
|
||||
index: 'ديجيتال',
|
||||
selection: 'اختار',
|
||||
untitled: 'بدون عنوان'
|
||||
},
|
||||
fullscreen: 'فول سكرين'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'انتخاب كامل',
|
||||
selectTips: 'اختار من {total} فايل/المحتويات',
|
||||
fileName: 'الاسم الكامل',
|
||||
fileSize: 'مقاس',
|
||||
fileTimestamp: 'آخر تعديل'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'مكبرة',
|
||||
zoomOut: 'تصغير',
|
||||
rotateLeft: 'تناوب اليسار',
|
||||
rotateRight: 'تدوير الحق',
|
||||
moveLeft: 'تحرك يسارا',
|
||||
moveRight: 'رايت ›',
|
||||
moveUp: 'صاعد صاعد',
|
||||
moveDown: 'نزول',
|
||||
flipX: 'فليب اكس',
|
||||
flipY: 'الوجه ي',
|
||||
reset: 'ريست',
|
||||
upload: 'ابلود',
|
||||
ok: 'حسناً',
|
||||
title: 'آلة قطع'
|
||||
},
|
||||
map: {
|
||||
title: 'آدرس',
|
||||
placeholder: 'ادخل كلمة',
|
||||
message: 'الرجاء اختيار العنوان',
|
||||
ok: 'حسناً'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/bg_BG.js
Normal file
113
src/components/ele-admin-pro/packages/lang/bg_BG.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 保加利亚语 */
|
||||
import lang from 'ant-design-vue/es/locale/bg_BG';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Освежаване',
|
||||
fullscreen: 'пълен екран',
|
||||
fullscreenExit: 'пълен екран',
|
||||
closeLeft: 'Ляво затваряне',
|
||||
closeRight: 'Затваряне надясно',
|
||||
closeOther: 'Затваряне на други',
|
||||
closeAll: 'Затваряне на всички'
|
||||
},
|
||||
setting: {
|
||||
title: 'Настройки на тема',
|
||||
sideStyles: {
|
||||
dark: 'Тъмна страна',
|
||||
light: 'Страничен панел'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Светлина глава',
|
||||
dark: 'Тъмна глава',
|
||||
primary: 'Главна глава'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Настройки на страничното меню',
|
||||
top: 'Настройки на менюто',
|
||||
mix: 'Настройки на менюто'
|
||||
},
|
||||
colors: {
|
||||
default: 'Дневна Синьо',
|
||||
dust: 'Dust Blue',
|
||||
sunset: 'Залез Оранжев',
|
||||
volcano: 'Вулкан',
|
||||
purple: 'Златен Пурпурно',
|
||||
cyan: 'Циан',
|
||||
green: 'Полярно Зелено',
|
||||
geekblue: 'Смотаняк Синьо'
|
||||
},
|
||||
darkMode: 'Мрачен режим',
|
||||
layoutStyle: 'Навигационен режим',
|
||||
sideMenuStyle: 'двойно меню',
|
||||
bodyFull: 'Телесно покритие',
|
||||
other: 'Други настройки',
|
||||
fixedHeader: 'Настояща глава',
|
||||
fixedSidebar: 'Постоянен панел',
|
||||
fixedBody: 'Твърдо тяло',
|
||||
logoAutoSize: 'Адаптация на логото',
|
||||
colorfulIcon: 'Цветна икона',
|
||||
sideUniqueOpen: 'Отваряне на меню',
|
||||
weakMode: 'Слаб режим',
|
||||
showFooter: 'Показване на стъпка',
|
||||
showTabs: 'Показване на подпрозорците',
|
||||
tabStyle: 'Стил на подпрозореца',
|
||||
tabStyles: {
|
||||
default: 'Стандартно',
|
||||
dot: 'Точка',
|
||||
card: 'Карта'
|
||||
},
|
||||
tips: 'Той ще запомни конфигурацията ти следващия път, когато я отвориш.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Освежаване',
|
||||
size: 'Плътност',
|
||||
sizeOption: {
|
||||
large: 'Леко',
|
||||
medium: 'Стандартно',
|
||||
small: 'Вторичен',
|
||||
mini: 'Компактен'
|
||||
},
|
||||
columns: 'Колони',
|
||||
columnsOption: {
|
||||
columns: 'Колони',
|
||||
reset: 'Рестартиране',
|
||||
index: 'Числа',
|
||||
selection: 'Маркиране',
|
||||
untitled: 'Без заглавие'
|
||||
},
|
||||
fullscreen: 'пълен екран'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Избор на всичко',
|
||||
selectTips: 'Избрано {total} файл/директория',
|
||||
fileName: 'Име',
|
||||
fileSize: 'Размер',
|
||||
fileTimestamp: 'Последна модификация'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Увеличаване на',
|
||||
zoomOut: 'Увеличаване на мащаба',
|
||||
rotateLeft: 'Завъртане наляво',
|
||||
rotateRight: 'Завъртане надясно',
|
||||
moveLeft: 'Преместване наляво',
|
||||
moveRight: 'Преместване надясно',
|
||||
moveUp: 'Преместване нагоре',
|
||||
moveDown: 'Преместване надолу',
|
||||
flipX: 'Завъртане',
|
||||
flipY: 'Завъртане',
|
||||
reset: 'Рестартиране',
|
||||
upload: 'Качване',
|
||||
ok: 'Добре',
|
||||
title: 'Кропър'
|
||||
},
|
||||
map: {
|
||||
title: 'Адрес',
|
||||
placeholder: 'Въведете ключова дума',
|
||||
message: 'Моля, изберете адрес',
|
||||
ok: 'Добре'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/ca_ES.js
Normal file
113
src/components/ele-admin-pro/packages/lang/ca_ES.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 加泰罗尼亚语 */
|
||||
import lang from 'ant-design-vue/es/locale/ca_ES';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Actualitzar',
|
||||
fullscreen: 'Pantalla completa',
|
||||
fullscreenExit: 'Pantalla completa',
|
||||
closeLeft: 'tancar a esquerra',
|
||||
closeRight: 'Zarrar a la dreta',
|
||||
closeOther: 'Zarrar altres',
|
||||
closeAll: 'Zarrar tot'
|
||||
},
|
||||
setting: {
|
||||
title: 'Configuració del tema',
|
||||
sideStyles: {
|
||||
dark: 'Barra lateral fosca',
|
||||
light: 'Barra lateral llum'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'cap lliure',
|
||||
dark: 'Cap negre',
|
||||
primary: 'Cap principal'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Disposició del menú lateral',
|
||||
top: 'Disposició del menú superior',
|
||||
mix: 'Distribució del Menú Mix'
|
||||
},
|
||||
colors: {
|
||||
default: 'blau de la matinada',
|
||||
dust: 'Blau de pols',
|
||||
sunset: 'naranja del sol',
|
||||
volcano: 'Volcà',
|
||||
purple: 'Púrpura dorada',
|
||||
cyan: 'Cian',
|
||||
green: 'Verd Polar',
|
||||
geekblue: 'blau geek'
|
||||
},
|
||||
darkMode: 'Mou fosc',
|
||||
layoutStyle: 'Mod de navegació',
|
||||
sideMenuStyle: 'doble menú',
|
||||
bodyFull: 'Corp a pantalla completa',
|
||||
other: 'altres condicions',
|
||||
fixedHeader: 'cap fixa',
|
||||
fixedSidebar: 'Barra lateral fixa',
|
||||
fixedBody: 'Corp fixe',
|
||||
logoAutoSize: 'Adaptació al logo',
|
||||
colorfulIcon: 'Icó colorida',
|
||||
sideUniqueOpen: 'Menú únic obert',
|
||||
weakMode: 'Mod frac',
|
||||
showFooter: 'Mostrar el pie',
|
||||
showTabs: 'Mostrar les llingüetes',
|
||||
tabStyle: 'Estil de llingüetes',
|
||||
tabStyles: {
|
||||
default: 'Predeterminat',
|
||||
dot: 'Punt',
|
||||
card: 'Carta'
|
||||
},
|
||||
tips: 'Recordarà la vostra configuració la propera vegada que l\'obreu.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Actualitzar',
|
||||
size: 'La densitat',
|
||||
sizeOption: {
|
||||
large: 'Fàcil',
|
||||
medium: 'Predeterminat',
|
||||
small: 'Secundari',
|
||||
mini: 'Compacte'
|
||||
},
|
||||
columns: 'Columnes',
|
||||
columnsOption: {
|
||||
columns: 'Columnes',
|
||||
reset: 'Reiniciar',
|
||||
index: 'Números',
|
||||
selection: 'Selecció',
|
||||
untitled: 'Sen títol'
|
||||
},
|
||||
fullscreen: 'Pantalla completa'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Seleccionar tot',
|
||||
selectTips: 'Seleccionat {total} arxiu/directori',
|
||||
fileName: 'Nom',
|
||||
fileSize: 'Tamañ',
|
||||
fileTimestamp: 'Última modificació'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Ampliar',
|
||||
zoomOut: 'Ampliar',
|
||||
rotateLeft: 'Xirar a l\'esquerra',
|
||||
rotateRight: 'Xirar a la dreta',
|
||||
moveLeft: 'Movir a l\'esquerra',
|
||||
moveRight: 'Movir a la dreta',
|
||||
moveUp: 'Subir',
|
||||
moveDown: 'Baixar',
|
||||
flipX: 'Xirar X',
|
||||
flipY: 'Xirar Y',
|
||||
reset: 'Reiniciar',
|
||||
upload: 'Enviar',
|
||||
ok: 'D\'acord',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresa',
|
||||
placeholder: 'Introdueix la paraula clau',
|
||||
message: 'Si us plau seleccioneu una adreça',
|
||||
ok: 'D\'acord'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/cs_CZ.js
Normal file
113
src/components/ele-admin-pro/packages/lang/cs_CZ.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 捷克语 */
|
||||
import lang from 'ant-design-vue/es/locale/cs_CZ';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Obnovit',
|
||||
fullscreen: 'Celoobrazovka',
|
||||
fullscreenExit: 'Celoobrazovka',
|
||||
closeLeft: 'Zavřít Doleva',
|
||||
closeRight: 'Zavřít Vpravo',
|
||||
closeOther: 'Zavřít Další',
|
||||
closeAll: 'Zavřít Vše'
|
||||
},
|
||||
setting: {
|
||||
title: 'Téma Nastavení',
|
||||
sideStyles: {
|
||||
dark: 'Tmavé Vedlejší',
|
||||
light: 'Světlo Vedlejší'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Světlo Hlavička',
|
||||
dark: 'Tmavé Hlavička',
|
||||
primary: 'Primární Hlavička'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Strana Menu Uspořádání',
|
||||
top: 'Nahoře Menu Uspořádání',
|
||||
mix: 'Směs Menu Uspořádání'
|
||||
},
|
||||
colors: {
|
||||
default: 'Svátek Modrá',
|
||||
dust: 'Prach Modrá',
|
||||
sunset: 'Západ Oranžová',
|
||||
volcano: 'Sopky',
|
||||
purple: 'Zlatá Fialová',
|
||||
cyan: 'Kyan',
|
||||
green: 'Polární Zelená',
|
||||
geekblue: 'Geeku Modrá'
|
||||
},
|
||||
darkMode: 'Tmavý Režim',
|
||||
layoutStyle: 'Navigační Režim',
|
||||
sideMenuStyle: 'dvojité menu',
|
||||
bodyFull: 'Tělo Celoobrazovka',
|
||||
other: 'Ostatní Nastavení',
|
||||
fixedHeader: 'Pevná hlavička',
|
||||
fixedSidebar: 'Pevná postranní lišta',
|
||||
fixedBody: 'Pevné Tělo',
|
||||
logoAutoSize: 'Loga Přizpůsobení',
|
||||
colorfulIcon: 'Barva Ikony',
|
||||
sideUniqueOpen: 'Nabídka Unikátní',
|
||||
weakMode: 'Slabý Režim',
|
||||
showFooter: 'Zápatí Zobrazit',
|
||||
showTabs: 'Karet Zobrazit',
|
||||
tabStyle: 'Karet Styl',
|
||||
tabStyles: {
|
||||
default: 'Výchozí',
|
||||
dot: 'tečka',
|
||||
card: 'Karta'
|
||||
},
|
||||
tips: 'Bude si pamatovat vaši konfiguraci, až ji příště otevřete.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Obnovit',
|
||||
size: 'Hustota',
|
||||
sizeOption: {
|
||||
large: 'Pomalu.',
|
||||
medium: 'Výchozí',
|
||||
small: 'Sekundární',
|
||||
mini: 'Kompaktní'
|
||||
},
|
||||
columns: 'Sloupce',
|
||||
columnsOption: {
|
||||
columns: 'Sloupce',
|
||||
reset: 'Obnovit',
|
||||
index: 'Čísla',
|
||||
selection: 'Výběr',
|
||||
untitled: 'Nepojmenované'
|
||||
},
|
||||
fullscreen: 'Celoobrazovka'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'VybratVše',
|
||||
selectTips: 'Vybrané {total} soubor/adresář',
|
||||
fileName: 'Jméno',
|
||||
fileSize: 'Velikost',
|
||||
fileTimestamp: 'Poslední úpravy'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'PřiblížitSe',
|
||||
zoomOut: 'ZvětšitVen',
|
||||
rotateLeft: 'RotovatDoleva',
|
||||
rotateRight: 'RotovatVpravo',
|
||||
moveLeft: 'PřesunoutDoleva',
|
||||
moveRight: 'PřesunoutVpravo',
|
||||
moveUp: 'PřesunoutNahoru',
|
||||
moveDown: 'PřesunoutDolů',
|
||||
flipX: 'PřevrátitX',
|
||||
flipY: 'PřevrátitY',
|
||||
reset: 'Obnovit',
|
||||
upload: 'Nahrát',
|
||||
ok: 'OK',
|
||||
title: 'Plechovka'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresa',
|
||||
placeholder: 'Klíčové slovo',
|
||||
message: 'Prosím vyberte adresu',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/da_DK.js
Normal file
113
src/components/ele-admin-pro/packages/lang/da_DK.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 丹麦语 */
|
||||
import lang from 'ant-design-vue/es/locale/da_DK';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Genopfrisk',
|
||||
fullscreen: 'FuldskærmName',
|
||||
fullscreenExit: 'FuldskærmName',
|
||||
closeLeft: 'Luk Venstre',
|
||||
closeRight: 'Luk Højre',
|
||||
closeOther: 'Luk Andet',
|
||||
closeAll: 'Luk Alle'
|
||||
},
|
||||
setting: {
|
||||
title: 'Tema Indstilling',
|
||||
sideStyles: {
|
||||
dark: 'Mørk Sidebjælke',
|
||||
light: 'Lys Sidebjælke'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Lys Overskrift',
|
||||
dark: 'Mørkets Overskrift',
|
||||
primary: 'Primær Overskrift'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Side Menu Layout',
|
||||
top: 'Øverste Menu Layout',
|
||||
mix: 'Bland Menu Layout'
|
||||
},
|
||||
colors: {
|
||||
default: 'Dagbreak Blå',
|
||||
dust: 'Støv Blå',
|
||||
sunset: 'Solnedgang Orange',
|
||||
volcano: 'Vulcan',
|
||||
purple: 'Gylden Lilla',
|
||||
cyan: 'Cyan',
|
||||
green: 'Grøn Polar',
|
||||
geekblue: 'Nørd Blå'
|
||||
},
|
||||
darkMode: 'Mørke Tilstand',
|
||||
layoutStyle: 'Navigation Tilstand',
|
||||
sideMenuStyle: 'Sidemenu dobbeltmenu',
|
||||
bodyFull: 'Krop Fuldskærm',
|
||||
other: 'Anden Indstilling',
|
||||
fixedHeader: 'Fast Overskrift',
|
||||
fixedSidebar: 'Fast Sidebjælke',
|
||||
fixedBody: 'Fast Krop',
|
||||
logoAutoSize: 'Logo Tilpasning',
|
||||
colorfulIcon: 'Farvestoffer Ikon',
|
||||
sideUniqueOpen: 'Menu Unik Åbn',
|
||||
weakMode: 'Svag Tilstand',
|
||||
showFooter: 'Vis Foder',
|
||||
showTabs: 'Vis Tabs',
|
||||
tabStyle: 'Tab Stil',
|
||||
tabStyles: {
|
||||
default: 'Standard',
|
||||
dot: 'Punkt',
|
||||
card: 'KortName'
|
||||
},
|
||||
tips: 'Den vil huske din indstilling næste gang du åbner den.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Genopfrisk',
|
||||
size: 'Tæthed',
|
||||
sizeOption: {
|
||||
large: 'Nemt',
|
||||
medium: 'Standard',
|
||||
small: 'Sekundær',
|
||||
mini: 'Kompakt'
|
||||
},
|
||||
columns: 'Kolonner',
|
||||
columnsOption: {
|
||||
columns: 'Kolonner',
|
||||
reset: 'Nulstil',
|
||||
index: 'Tal',
|
||||
selection: 'Valg',
|
||||
untitled: 'Unavngivet'
|
||||
},
|
||||
fullscreen: 'FuldskærmName'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Markér alle',
|
||||
selectTips: 'Udvalgt {total} fil/mappe',
|
||||
fileName: 'Navn',
|
||||
fileSize: 'Størrelse',
|
||||
fileTimestamp: 'Senest ændret'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Vergrößern',
|
||||
zoomOut: 'Rauszoomen',
|
||||
rotateLeft: 'RotérVenstre',
|
||||
rotateRight: 'RotérHøjre',
|
||||
moveLeft: 'FlytVenstre',
|
||||
moveRight: 'FlytHøjre',
|
||||
moveUp: 'FlytOp',
|
||||
moveDown: 'FlytNed',
|
||||
flipX: 'FlipX',
|
||||
flipY: 'FlipY',
|
||||
reset: 'Nulstil',
|
||||
upload: 'Hochladen',
|
||||
ok: 'OK',
|
||||
title: 'Markør'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresse',
|
||||
placeholder: 'Indtast søgeord',
|
||||
message: 'Vælg venligst en adresse',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/de_DE.js
Normal file
113
src/components/ele-admin-pro/packages/lang/de_DE.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 德语 */
|
||||
import lang from 'ant-design-vue/es/locale/de_DE';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Aktualisieren',
|
||||
fullscreen: 'Vollbild',
|
||||
fullscreenExit: 'Vollbild',
|
||||
closeLeft: 'Links Schließen',
|
||||
closeRight: 'Rechtes Schließen',
|
||||
closeOther: 'Andere Schließen',
|
||||
closeAll: 'Alle Schließen'
|
||||
},
|
||||
setting: {
|
||||
title: 'Designs Einstellung',
|
||||
sideStyles: {
|
||||
dark: 'Dunkle Seitenleiste',
|
||||
light: 'Leichte Seitenleiste'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Lichts Kopfzeile',
|
||||
dark: 'Dunkler Kopfzeile',
|
||||
primary: 'Primärer Kopfzeile'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Seitenmenüs Layout',
|
||||
top: 'Oben Menüs Layout',
|
||||
mix: 'Mix Menü Layout'
|
||||
},
|
||||
colors: {
|
||||
default: 'Blaue Morgendämmerung',
|
||||
dust: 'Staub Blau',
|
||||
sunset: 'Orange Sonnenuntergang',
|
||||
volcano: 'Vulkan',
|
||||
purple: 'Goldenes Purpur',
|
||||
cyan: 'Cyan',
|
||||
green: 'Polares Grün',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Dunkler Modus',
|
||||
layoutStyle: 'Navigation Modus',
|
||||
sideMenuStyle: 'Seitenleiste Doppelmenü',
|
||||
bodyFull: 'Körper Vollbild',
|
||||
other: 'Sonstige Einstellung',
|
||||
fixedHeader: 'Feste Kopfzeile',
|
||||
fixedSidebar: 'Feste Seitenleiste',
|
||||
fixedBody: 'Feste Karosserie',
|
||||
logoAutoSize: 'Logo Anpassung',
|
||||
colorfulIcon: 'Farbiges Symbol',
|
||||
sideUniqueOpen: 'Menü Einmaliges Öffnen',
|
||||
weakMode: 'Schwacher Modus',
|
||||
showFooter: 'Anzeigen Fußzeile',
|
||||
showTabs: 'Anzeigen Tabulatoren',
|
||||
tabStyle: 'Unterfenster Stil',
|
||||
tabStyles: {
|
||||
default: 'Standard',
|
||||
dot: 'Punkt',
|
||||
card: 'Karte'
|
||||
},
|
||||
tips: 'Sie wird sich beim nächsten Öffnen an Ihre Konfiguration erinnern.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Aktualisieren',
|
||||
size: 'Dichte',
|
||||
sizeOption: {
|
||||
large: 'Ruhig',
|
||||
medium: 'Standard',
|
||||
small: 'Sekundär',
|
||||
mini: 'Kompakt'
|
||||
},
|
||||
columns: 'Spalten',
|
||||
columnsOption: {
|
||||
columns: 'Spalten',
|
||||
reset: 'Zurücksetzen',
|
||||
index: 'Zahlen',
|
||||
selection: 'Auswahl',
|
||||
untitled: 'Ohne Titel'
|
||||
},
|
||||
fullscreen: 'Vollbild'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'AuswählenAlle',
|
||||
selectTips: 'Ausgewählte {total} datei/verzeichnis',
|
||||
fileName: 'Name',
|
||||
fileSize: 'Größe',
|
||||
fileTimestamp: 'ZuletztGeändert'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'VergrößernIn',
|
||||
zoomOut: 'VergrößernSie',
|
||||
rotateLeft: 'DrehenLinks',
|
||||
rotateRight: 'DrehenRechts',
|
||||
moveLeft: 'BewegungLinks',
|
||||
moveRight: 'BewegungRechts',
|
||||
moveUp: 'BewegungHoch',
|
||||
moveDown: 'BewegungUnten',
|
||||
flipX: 'DrehenX',
|
||||
flipY: 'DrehenY',
|
||||
reset: 'Zurücksetzen',
|
||||
upload: 'Hochladen',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresse',
|
||||
placeholder: 'Einträge filtern',
|
||||
message: 'Bitte wählen Sie eine Adresse',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/el_GR.js
Normal file
113
src/components/ele-admin-pro/packages/lang/el_GR.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 希腊语 */
|
||||
import lang from 'ant-design-vue/es/locale/el_GR';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Ανανέωση',
|
||||
fullscreen: 'Πλήρης οθόνη',
|
||||
fullscreenExit: 'Πλήρης οθόνη',
|
||||
closeLeft: 'Κλείσιμο Αριστερά',
|
||||
closeRight: 'Κλείσιμο Σωστά',
|
||||
closeOther: 'Κλείσιμο Άλλα',
|
||||
closeAll: 'Κλείσιμο Όλα'
|
||||
},
|
||||
setting: {
|
||||
title: 'Θέμα Ρύθμιση',
|
||||
sideStyles: {
|
||||
dark: 'Σκοτεινή Πλευρικό',
|
||||
light: 'Ελαφρά Πλευρικό'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Ελαφρά Κεφαλίδα',
|
||||
dark: 'Σκοτεινή Κεφαλίδα',
|
||||
primary: 'Κύρια Κεφαλίδα'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Πλαίσιο μενού πλευρών',
|
||||
top: 'Διάταξη άνω μενού',
|
||||
mix: 'Ρύθμιση μενού Mix'
|
||||
},
|
||||
colors: {
|
||||
default: 'Μπλε ξημέρωμα',
|
||||
dust: 'Μπλε σκόνη',
|
||||
sunset: 'Ηλιοβασίλεμα πορτοκάλι',
|
||||
volcano: 'Ηφαίστειο',
|
||||
purple: 'Χρυσό μωβ',
|
||||
cyan: 'Κυανή',
|
||||
green: 'Πολικό πράσινο',
|
||||
geekblue: 'Κομπιουτεράκιας Μπλε'
|
||||
},
|
||||
darkMode: 'Σκοτεινή κατάσταση',
|
||||
layoutStyle: 'Λειτουργία πλοήγησης',
|
||||
sideMenuStyle: 'διπλό μενού',
|
||||
bodyFull: 'Πλήρης οθόνη σώματος',
|
||||
other: 'Άλλες ρυθμίσεις',
|
||||
fixedHeader: 'Σταθερή επικεφαλίδα',
|
||||
fixedSidebar: 'Σταθερή πλευρική γραμμή',
|
||||
fixedBody: 'Σταθερό σώμα',
|
||||
logoAutoSize: 'Προσαρμογή ημερολογίου',
|
||||
colorfulIcon: 'Χρωματικό εικονίδιο',
|
||||
sideUniqueOpen: 'Μοναδικό άνοιγμα μενού',
|
||||
weakMode: 'Αδύναμη κατάσταση',
|
||||
showFooter: 'Εμφάνιση υποδήματος',
|
||||
showTabs: 'Εμφάνιση καρτελών',
|
||||
tabStyle: 'Στυλ καρτελών',
|
||||
tabStyles: {
|
||||
default: 'Προκαθορισμένο',
|
||||
dot: 'Ντοτ',
|
||||
card: 'Κάρτα'
|
||||
},
|
||||
tips: 'Θα θυμάται τις ρυθμίσεις σας την επόμενη φορά που θα τις ανοίξετε.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Ανανέωση',
|
||||
size: 'πυκνότητα',
|
||||
sizeOption: {
|
||||
large: 'Εύκολο',
|
||||
medium: 'Προκαθορισμένο',
|
||||
small: 'Δευτερογενής',
|
||||
mini: 'Συμπίεση'
|
||||
},
|
||||
columns: 'Στήλες',
|
||||
columnsOption: {
|
||||
columns: 'Στήλες',
|
||||
reset: 'Επαναφορά',
|
||||
index: 'Αριθμοί',
|
||||
selection: 'Επιλογή',
|
||||
untitled: 'Χωρίς'
|
||||
},
|
||||
fullscreen: 'Πλήρης οθόνη'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Επιλογή όλων',
|
||||
selectTips: 'Επιλεγμένο {total} αρχείο/κατάλογος',
|
||||
fileName: 'όνομα',
|
||||
fileSize: 'Μέγεθος',
|
||||
fileTimestamp: 'Τελευταία τροποποίηση'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Μεγέθυνση μέσα',
|
||||
zoomOut: 'Μεγέθυνση έξω',
|
||||
rotateLeft: 'Περιστροφή αριστερά',
|
||||
rotateRight: 'Περιστροφή δεξιά',
|
||||
moveLeft: 'Μετακίνηση αριστερά',
|
||||
moveRight: 'Μετακίνηση δεξιά',
|
||||
moveUp: 'Μετακίνηση πάνω',
|
||||
moveDown: 'Μετακίνηση κάτω',
|
||||
flipX: 'Αναστροφή X',
|
||||
flipY: 'Αναστροφή Υ',
|
||||
reset: 'Επαναφορά',
|
||||
upload: 'Αποστολή',
|
||||
ok: 'Εντάξει',
|
||||
title: 'Θεριστής'
|
||||
},
|
||||
map: {
|
||||
title: 'Διεύθυνση',
|
||||
placeholder: 'Αναζήτηση',
|
||||
message: 'Παρακαλώ επιλέξτε μια διεύθυνση',
|
||||
ok: 'Εντάξει'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/en_GB.js
Normal file
113
src/components/ele-admin-pro/packages/lang/en_GB.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 英语 */
|
||||
import lang from 'ant-design-vue/es/locale/en_GB';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Refresh',
|
||||
fullscreen: 'Fullscreen',
|
||||
fullscreenExit: 'Fullscreen',
|
||||
closeLeft: 'Close Left',
|
||||
closeRight: 'Close Right',
|
||||
closeOther: 'Close Other',
|
||||
closeAll: 'Close All'
|
||||
},
|
||||
setting: {
|
||||
title: 'Theme Setting',
|
||||
sideStyles: {
|
||||
dark: 'Dark Sidebar',
|
||||
light: 'Light Sidebar'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Light Header',
|
||||
dark: 'Dark Header',
|
||||
primary: 'Primary Header'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Side Menu Layout',
|
||||
top: 'Top Menu Layout',
|
||||
mix: 'Mix Menu Layout'
|
||||
},
|
||||
colors: {
|
||||
default: 'Daybreak Blue',
|
||||
dust: 'Dust Blue',
|
||||
sunset: 'Sunset Orange',
|
||||
volcano: 'Volcano',
|
||||
purple: 'Golden Purple',
|
||||
cyan: 'Cyan',
|
||||
green: 'Polar Green',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Dark Mode',
|
||||
layoutStyle: 'Navigation Mode',
|
||||
sideMenuStyle: 'Sidebar Double Menu',
|
||||
bodyFull: 'Body Fullscreen',
|
||||
other: 'Other Setting',
|
||||
fixedHeader: 'Fixed Header',
|
||||
fixedSidebar: 'Fixed Sidebar',
|
||||
fixedBody: 'Fixed Body',
|
||||
logoAutoSize: 'Logo Adaptation',
|
||||
colorfulIcon: 'Colorful Icon',
|
||||
sideUniqueOpen: 'Menu Unique Open',
|
||||
weakMode: 'Weak Mode',
|
||||
showFooter: 'Show Footer',
|
||||
showTabs: 'Show Tabs',
|
||||
tabStyle: 'Tab Style',
|
||||
tabStyles: {
|
||||
default: 'Default',
|
||||
dot: 'Dot',
|
||||
card: 'Card'
|
||||
},
|
||||
tips: 'It will remember your configuration the next time you open it.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Refresh',
|
||||
size: 'Density',
|
||||
sizeOption: {
|
||||
large: 'Easy',
|
||||
medium: 'Default',
|
||||
small: 'Secondary',
|
||||
mini: 'Compact'
|
||||
},
|
||||
columns: 'Columns',
|
||||
columnsOption: {
|
||||
columns: 'Columns',
|
||||
reset: 'Reset',
|
||||
index: 'Numbers',
|
||||
selection: 'Selection',
|
||||
untitled: 'Untitled'
|
||||
},
|
||||
fullscreen: 'Fullscreen'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'SelectAll',
|
||||
selectTips: 'Selected {total} file/directory',
|
||||
fileName: 'Name',
|
||||
fileSize: 'Size',
|
||||
fileTimestamp: 'LastModified'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'ZoomIn',
|
||||
zoomOut: 'ZoomOut',
|
||||
rotateLeft: 'RotateLeft',
|
||||
rotateRight: 'RotateRight',
|
||||
moveLeft: 'MoveLeft',
|
||||
moveRight: 'MoveRight',
|
||||
moveUp: 'MoveUp',
|
||||
moveDown: 'MoveDown',
|
||||
flipX: 'FlipX',
|
||||
flipY: 'FlipY',
|
||||
reset: 'Reset',
|
||||
upload: 'Upload',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Address',
|
||||
placeholder: 'Enter keyword',
|
||||
message: 'Please select an address',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
115
src/components/ele-admin-pro/packages/lang/en_US.js
Normal file
115
src/components/ele-admin-pro/packages/lang/en_US.js
Normal file
@@ -0,0 +1,115 @@
|
||||
/** 英语 */
|
||||
import lang from 'ant-design-vue/es/locale/en_US';
|
||||
import ColorPicker from 'ant-design-vue/es/color-picker/locale/en_US.js';
|
||||
|
||||
export default {
|
||||
ColorPicker: ColorPicker,
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Refresh',
|
||||
fullscreen: 'Fullscreen',
|
||||
fullscreenExit: 'Fullscreen',
|
||||
closeLeft: 'Close Left',
|
||||
closeRight: 'Close Right',
|
||||
closeOther: 'Close Other',
|
||||
closeAll: 'Close All'
|
||||
},
|
||||
setting: {
|
||||
title: 'Theme Setting',
|
||||
sideStyles: {
|
||||
dark: 'Dark Sidebar',
|
||||
light: 'Light Sidebar'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Light Header',
|
||||
dark: 'Dark Header',
|
||||
primary: 'Primary Header'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Side Menu Layout',
|
||||
top: 'Top Menu Layout',
|
||||
mix: 'Mix Menu Layout'
|
||||
},
|
||||
colors: {
|
||||
default: 'Daybreak Blue',
|
||||
dust: 'Dust Blue',
|
||||
sunset: 'Sunset Orange',
|
||||
volcano: 'Volcano',
|
||||
purple: 'Golden Purple',
|
||||
cyan: 'Cyan',
|
||||
green: 'Polar Green',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Dark Mode',
|
||||
layoutStyle: 'Navigation Mode',
|
||||
sideMenuStyle: 'Sidebar Double Menu',
|
||||
bodyFull: 'Body Fullscreen',
|
||||
other: 'Other Setting',
|
||||
fixedHeader: 'Fixed Header',
|
||||
fixedSidebar: 'Fixed Sidebar',
|
||||
fixedBody: 'Fixed Body',
|
||||
logoAutoSize: 'Logo Adaptation',
|
||||
colorfulIcon: 'Colorful Icon',
|
||||
sideUniqueOpen: 'Menu Unique Open',
|
||||
weakMode: 'Weak Mode',
|
||||
showFooter: 'Show Footer',
|
||||
showTabs: 'Show Tabs',
|
||||
tabStyle: 'Tab Style',
|
||||
tabStyles: {
|
||||
default: 'Default',
|
||||
dot: 'Dot',
|
||||
card: 'Card'
|
||||
},
|
||||
tips: 'It will remember your configuration the next time you open it.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Refresh',
|
||||
size: 'Density',
|
||||
sizeOption: {
|
||||
large: 'Easy',
|
||||
medium: 'Default',
|
||||
small: 'Secondary',
|
||||
mini: 'Compact'
|
||||
},
|
||||
columns: 'Columns',
|
||||
columnsOption: {
|
||||
columns: 'Columns',
|
||||
reset: 'Reset',
|
||||
index: 'Numbers',
|
||||
selection: 'Selection',
|
||||
untitled: 'Untitled'
|
||||
},
|
||||
fullscreen: 'Fullscreen'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'SelectAll',
|
||||
selectTips: 'Selected {total} file/directory',
|
||||
fileName: 'Name',
|
||||
fileSize: 'Size',
|
||||
fileTimestamp: 'LastModified'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'ZoomIn',
|
||||
zoomOut: 'ZoomOut',
|
||||
rotateLeft: 'RotateLeft',
|
||||
rotateRight: 'RotateRight',
|
||||
moveLeft: 'MoveLeft',
|
||||
moveRight: 'MoveRight',
|
||||
moveUp: 'MoveUp',
|
||||
moveDown: 'MoveDown',
|
||||
flipX: 'FlipX',
|
||||
flipY: 'FlipY',
|
||||
reset: 'Reset',
|
||||
upload: 'Upload',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Address',
|
||||
placeholder: 'Enter keyword',
|
||||
message: 'Please select an address',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/es_ES.js
Normal file
113
src/components/ele-admin-pro/packages/lang/es_ES.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 西班牙语 */
|
||||
import lang from 'ant-design-vue/es/locale/es_ES';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Refrescar',
|
||||
fullscreen: 'Pantalla completa',
|
||||
fullscreenExit: 'Pantalla completa',
|
||||
closeLeft: 'Cerrar izquierdo',
|
||||
closeRight: 'Cerrar derecho',
|
||||
closeOther: 'Cerrar otro',
|
||||
closeAll: 'Cerrar todas'
|
||||
},
|
||||
setting: {
|
||||
title: 'Tema Configuración',
|
||||
sideStyles: {
|
||||
dark: 'Oscuro Barra',
|
||||
light: 'Luz Barra'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Luz Encabezado',
|
||||
dark: 'Oscuro Encabezado',
|
||||
primary: 'Principal Encabezado'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Lateral Menú Diseño',
|
||||
top: 'Principal Menú Diseño',
|
||||
mix: 'Mix Menú Diseño'
|
||||
},
|
||||
colors: {
|
||||
default: 'Amanecer Azul',
|
||||
dust: 'Polvo Azul',
|
||||
sunset: 'Atardecer Naranja',
|
||||
volcano: 'Volcán',
|
||||
purple: 'Dorado Morado',
|
||||
cyan: 'Cian',
|
||||
green: 'Polar Verde',
|
||||
geekblue: 'Adicto Azul'
|
||||
},
|
||||
darkMode: 'Oscuro Modo',
|
||||
layoutStyle: 'Navegación Modo',
|
||||
sideMenuStyle: 'menú doble',
|
||||
bodyFull: 'Cuerpo Pantalla Completa',
|
||||
other: 'Otro Configuración',
|
||||
fixedHeader: 'Reparado Encabezamiento',
|
||||
fixedSidebar: 'Reparado Barra Lateral',
|
||||
fixedBody: 'Reparado Cuerpo',
|
||||
logoAutoSize: 'Logo Adaptación',
|
||||
colorfulIcon: 'Vistoso Icono',
|
||||
sideUniqueOpen: 'Menú Único Abierto',
|
||||
weakMode: 'Débil Modo',
|
||||
showFooter: 'Mostrar Pie De Página',
|
||||
showTabs: 'Mostrar Pestaña',
|
||||
tabStyle: 'Etiqueta Estilo',
|
||||
tabStyles: {
|
||||
default: 'Incumplimiento',
|
||||
dot: 'Punto',
|
||||
card: 'Tarjeta'
|
||||
},
|
||||
tips: 'La próxima vez que se abra, recordará su configuración.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Refrescar',
|
||||
size: 'Densidad',
|
||||
sizeOption: {
|
||||
large: 'Fácil',
|
||||
medium: 'Incumplimiento',
|
||||
small: 'Secundaria',
|
||||
mini: 'Contrato'
|
||||
},
|
||||
columns: 'Columna',
|
||||
columnsOption: {
|
||||
columns: 'Columna',
|
||||
reset: 'Reiniciar',
|
||||
index: 'Número',
|
||||
selection: 'Selección',
|
||||
untitled: 'Intitulado'
|
||||
},
|
||||
fullscreen: 'Pantalla Completa'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Seleccionar Todo',
|
||||
selectTips: 'Seleccionado {total} expediente/directorio',
|
||||
fileName: 'Nombre',
|
||||
fileSize: 'Tamaño',
|
||||
fileTimestamp: 'Última Modificación'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Acercarse',
|
||||
zoomOut: 'Encoger',
|
||||
rotateLeft: 'Girar Izquierdo',
|
||||
rotateRight: 'Girar Derecho',
|
||||
moveLeft: 'Mover Izquierdo',
|
||||
moveRight: 'Mover Derecho',
|
||||
moveUp: 'Ascender',
|
||||
moveDown: 'Bajar',
|
||||
flipX: 'VoltearX',
|
||||
flipY: 'VoltearY',
|
||||
reset: 'Reiniciar',
|
||||
upload: 'Subir',
|
||||
ok: 'Confirmar',
|
||||
title: 'Cultivador'
|
||||
},
|
||||
map: {
|
||||
title: 'Dirección',
|
||||
placeholder: 'Ingresar palabra clave',
|
||||
message: 'Por favor seleccione una direccion',
|
||||
ok: 'Confirmar'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/et_EE.js
Normal file
113
src/components/ele-admin-pro/packages/lang/et_EE.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 爱沙尼亚语 */
|
||||
import lang from 'ant-design-vue/es/locale/et_EE';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Värskenda',
|
||||
fullscreen: 'Täisekraan',
|
||||
fullscreenExit: 'Täisekraan',
|
||||
closeLeft: 'Sulge Vasakult',
|
||||
closeRight: 'Sulge Paremal',
|
||||
closeOther: 'Sulge Muu',
|
||||
closeAll: 'Sulge Kõik'
|
||||
},
|
||||
setting: {
|
||||
title: 'Teema Seadistamine',
|
||||
sideStyles: {
|
||||
dark: 'Tume Külgriba',
|
||||
light: 'Hele Külgriba'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Hele Päis',
|
||||
dark: 'Tume Päis',
|
||||
primary: 'Esmane Päis'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Külg Menüü Paigutus',
|
||||
top: 'Ülal Menüü Paigutus',
|
||||
mix: 'Segu Menüü Paigutus'
|
||||
},
|
||||
colors: {
|
||||
default: 'Koidiku Sinine',
|
||||
dust: 'Mulla Sinine',
|
||||
sunset: 'Päikeseloojangu Oranž',
|
||||
volcano: 'Vulkaan',
|
||||
purple: 'Kuldne Lilla',
|
||||
cyan: 'Tsüaan',
|
||||
green: 'Polar Roheline',
|
||||
geekblue: 'Nohiku Sinine'
|
||||
},
|
||||
darkMode: 'Tume Režiim',
|
||||
layoutStyle: 'Liikumise Režiim',
|
||||
sideMenuStyle: 'Külgriba topeltmenüü',
|
||||
bodyFull: 'Keha Täisekraan',
|
||||
other: 'Muu Seadistus',
|
||||
fixedHeader: 'Fikseeritud Päis',
|
||||
fixedSidebar: 'Fikseeritud Külgriba',
|
||||
fixedBody: 'Fikseeritud Kere',
|
||||
logoAutoSize: 'Logo Kohandamine',
|
||||
colorfulIcon: 'Värviline Ikoon',
|
||||
sideUniqueOpen: 'Menüü Ainulaadne Avamine',
|
||||
weakMode: 'Nõrk Režiim',
|
||||
showFooter: 'Näita Jalust',
|
||||
showTabs: 'Näita Kaarte',
|
||||
tabStyle: 'Kaardi Stiil',
|
||||
tabStyles: {
|
||||
default: 'Vaikimisi',
|
||||
dot: 'Punkt',
|
||||
card: 'Kaart'
|
||||
},
|
||||
tips: 'See mäletab sinu seadistust, kui sa selle järgmine kord avad.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Värskenda',
|
||||
size: 'Tihedus',
|
||||
sizeOption: {
|
||||
large: 'Rahulikult',
|
||||
medium: 'Vaikimisi',
|
||||
small: 'Sekundaarne',
|
||||
mini: 'Tihe'
|
||||
},
|
||||
columns: 'Veerud',
|
||||
columnsOption: {
|
||||
columns: 'Veerud',
|
||||
reset: 'Lähtesta',
|
||||
index: 'Numbrid',
|
||||
selection: 'Valik',
|
||||
untitled: 'Nimetu'
|
||||
},
|
||||
fullscreen: 'Täisekraan'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'ValiKõik',
|
||||
selectTips: 'Valitud {total} fail/kataloog',
|
||||
fileName: 'Nimi',
|
||||
fileSize: 'Suurus',
|
||||
fileTimestamp: 'ViimatiMuudetud'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Suurendada',
|
||||
zoomOut: 'Kitsas',
|
||||
rotateLeft: 'Pööra vasakule',
|
||||
rotateRight: 'Pöörake paremale',
|
||||
moveLeft: 'Liigu vasakule',
|
||||
moveRight: 'Liigu paremale',
|
||||
moveUp: 'Üles liikuma',
|
||||
moveDown: 'Liigu alla',
|
||||
flipX: 'Klapp X',
|
||||
flipY: 'Pöörake Y',
|
||||
reset: 'Lähtesta',
|
||||
upload: 'Üleslaadimine',
|
||||
ok: 'OK',
|
||||
title: 'Põllukultuurid'
|
||||
},
|
||||
map: {
|
||||
title: 'Aadress',
|
||||
placeholder: 'Sisesta märksõna',
|
||||
message: 'Palun vali aadress',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/fa_IR.js
Normal file
113
src/components/ele-admin-pro/packages/lang/fa_IR.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 波斯语 */
|
||||
import lang from 'ant-design-vue/es/locale/fa_IR';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'تازه کردن',
|
||||
fullscreen: 'تمام صفحه',
|
||||
fullscreenExit: 'تمام صفحه',
|
||||
closeLeft: 'چپ را ببند',
|
||||
closeRight: 'درست ببند',
|
||||
closeOther: 'بستن دیگر',
|
||||
closeAll: 'بستن همه'
|
||||
},
|
||||
setting: {
|
||||
title: 'تنظیم تم',
|
||||
sideStyles: {
|
||||
dark: 'نوار کناری تاریک',
|
||||
light: 'نوار کناری سبک'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'هدر نور',
|
||||
dark: 'سربرگ تیره',
|
||||
primary: 'هدر اصلی'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'طرح منوی کناری',
|
||||
top: 'چیدمان منو',
|
||||
mix: 'طرح منو را مخلوط کنید'
|
||||
},
|
||||
colors: {
|
||||
default: 'آبی روشن',
|
||||
dust: 'آبی غبار',
|
||||
sunset: 'غروب نارنجی',
|
||||
volcano: 'آتشفشان',
|
||||
purple: 'بنفش طلایی',
|
||||
cyan: 'فیروزه ای',
|
||||
green: 'قطبی سبز',
|
||||
geekblue: 'آبی گیک'
|
||||
},
|
||||
darkMode: 'حالت تاریک',
|
||||
layoutStyle: 'حالت پیمایش',
|
||||
sideMenuStyle: 'نوار کناری منوی دو',
|
||||
bodyFull: 'تمام صفحه بدن',
|
||||
other: 'تنظیمات دیگر',
|
||||
fixedHeader: 'سرصفحه ثابت',
|
||||
fixedSidebar: 'نوار کناری ثابت',
|
||||
fixedBody: 'بدن ثابت',
|
||||
logoAutoSize: 'سازگاری آرم',
|
||||
colorfulIcon: 'نماد رنگارنگ',
|
||||
sideUniqueOpen: 'منو منحصر به فرد باز',
|
||||
weakMode: 'حالت ضعیف',
|
||||
showFooter: 'نمایش پاورقی',
|
||||
showTabs: 'نمایش برگه ها',
|
||||
tabStyle: 'سبک زبانه',
|
||||
tabStyles: {
|
||||
default: 'پیش فرض',
|
||||
dot: 'نقطه',
|
||||
card: 'کارت'
|
||||
},
|
||||
tips: 'دفعه بعد که آن را باز کنید ، پیکربندی شما را به خاطر می آورد.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'تازه کردن',
|
||||
size: 'تراکم',
|
||||
sizeOption: {
|
||||
large: 'آسان',
|
||||
medium: 'پیش فرض',
|
||||
small: 'ثانوی',
|
||||
mini: 'فشرده - جمع و جور'
|
||||
},
|
||||
columns: 'ستون ها',
|
||||
columnsOption: {
|
||||
columns: 'ستون ها',
|
||||
reset: 'تنظیم مجدد',
|
||||
index: 'شماره',
|
||||
selection: 'انتخاب',
|
||||
untitled: 'بدون عنوان'
|
||||
},
|
||||
fullscreen: 'تمام صفحه'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'انتخاب همه',
|
||||
selectTips: 'انتخاب شد {total} فایل/فهرست راهنما',
|
||||
fileName: 'نام',
|
||||
fileSize: 'اندازه',
|
||||
fileTimestamp: 'آخرین تغییر'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'بزرگنمایی',
|
||||
zoomOut: 'کوچک نمایی',
|
||||
rotateLeft: 'چرخش به چپ',
|
||||
rotateRight: 'به طرف راست بچرخان',
|
||||
moveLeft: 'حرکت به سمت چپ',
|
||||
moveRight: 'برو راست',
|
||||
moveUp: 'حرکت به بالا',
|
||||
moveDown: 'حرکت به پایین',
|
||||
flipX: 'تلنگر X',
|
||||
flipY: 'تلنگر Y',
|
||||
reset: 'تنظیم مجدد',
|
||||
upload: 'بارگذاری',
|
||||
ok: 'باشد',
|
||||
title: 'کراپ'
|
||||
},
|
||||
map: {
|
||||
title: 'نشانی',
|
||||
placeholder: 'کلید واژه هارو وارد کن',
|
||||
message: 'لطفاً یک آدرس انتخاب کنید',
|
||||
ok: 'باشد'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/fi_FI.js
Normal file
113
src/components/ele-admin-pro/packages/lang/fi_FI.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 芬兰语 */
|
||||
import lang from 'ant-design-vue/es/locale/fi_FI';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'virkistää',
|
||||
fullscreen: 'Koko näyttö',
|
||||
fullscreenExit: 'Koko näyttö',
|
||||
closeLeft: 'Sulje Vasen',
|
||||
closeRight: 'Sulje oikea',
|
||||
closeOther: 'Sulje Muu',
|
||||
closeAll: 'Sulje kaikki'
|
||||
},
|
||||
setting: {
|
||||
title: 'Teeman asetus',
|
||||
sideStyles: {
|
||||
dark: 'Tumma sivupalkki',
|
||||
light: 'Vaalea sivupalkki'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Kevyt otsikko',
|
||||
dark: 'Tumma otsikko',
|
||||
primary: 'Ensisijainen otsikko'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Sivuvalikon asettelu',
|
||||
top: 'Ylävalikon asettelu',
|
||||
mix: 'Sekoita valikon asettelu'
|
||||
},
|
||||
colors: {
|
||||
default: 'Auringonnousu sininen',
|
||||
dust: 'Pölysininen',
|
||||
sunset: 'Auringonlasku oranssi',
|
||||
volcano: 'Tulivuori',
|
||||
purple: 'Kulta violetti',
|
||||
cyan: 'Syaani',
|
||||
green: 'Polaarivihreä',
|
||||
geekblue: 'Geek sininen'
|
||||
},
|
||||
darkMode: 'Tumma tila',
|
||||
layoutStyle: 'Navigointitila',
|
||||
sideMenuStyle: 'Sivupalkin kaksoisvalikko',
|
||||
bodyFull: 'Runko Koko näyttö',
|
||||
other: 'Muu asetus',
|
||||
fixedHeader: 'Kiinteä otsikko',
|
||||
fixedSidebar: 'Kiinteä sivupalkki',
|
||||
fixedBody: 'Kiinteä runko',
|
||||
logoAutoSize: 'Logon mukauttaminen',
|
||||
colorfulIcon: 'Värikäs kuvake',
|
||||
sideUniqueOpen: 'Valikko Ainutlaatuinen auki',
|
||||
weakMode: 'Heikko tila',
|
||||
showFooter: 'Näytä alatunniste',
|
||||
showTabs: 'Näytä välilehdet',
|
||||
tabStyle: 'Välilehden tyyli',
|
||||
tabStyles: {
|
||||
default: 'Oletus',
|
||||
dot: 'Piste',
|
||||
card: 'Kortti'
|
||||
},
|
||||
tips: 'Se muistaa asetuksesi seuraavan kerran, kun avaat sen.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'virkistää',
|
||||
size: 'Tiheys',
|
||||
sizeOption: {
|
||||
large: 'Helppo',
|
||||
medium: 'Oletus',
|
||||
small: 'Toissijainen',
|
||||
mini: 'Kompakti'
|
||||
},
|
||||
columns: 'Sarakkeet',
|
||||
columnsOption: {
|
||||
columns: 'Sarakkeet',
|
||||
reset: 'Nollaa',
|
||||
index: 'Numerot',
|
||||
selection: 'Valinta',
|
||||
untitled: 'Nimetön'
|
||||
},
|
||||
fullscreen: 'Koko näyttö'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Valitse kaikki',
|
||||
selectTips: 'Valittu {total} tiedosto/hakemistoon',
|
||||
fileName: 'Nimi',
|
||||
fileSize: 'Koko',
|
||||
fileTimestamp: 'Viimeksi muokattu'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Lähennä',
|
||||
zoomOut: 'Loitontaa',
|
||||
rotateLeft: 'Käänny vasemmalle',
|
||||
rotateRight: 'Kierrä oikealle',
|
||||
moveLeft: 'Siirry vasemmalle',
|
||||
moveRight: 'Liiku oikealle',
|
||||
moveUp: 'Liiku ylös',
|
||||
moveDown: 'Siirry alas',
|
||||
flipX: 'Käännä X',
|
||||
flipY: 'Käännä Y',
|
||||
reset: 'Nollaa',
|
||||
upload: 'Lähetä',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Osoite',
|
||||
placeholder: 'Syötä hakusana',
|
||||
message: 'Valitse osoite',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/fr_BE.js
Normal file
113
src/components/ele-admin-pro/packages/lang/fr_BE.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 法语（比利时） */
|
||||
import lang from 'ant-design-vue/es/locale/fr_BE';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Rafraîchir',
|
||||
fullscreen: 'Plein écran',
|
||||
fullscreenExit: 'Plein écran',
|
||||
closeLeft: 'Fermer à gauche',
|
||||
closeRight: 'Fermer à droite',
|
||||
closeOther: 'Fermer Autre',
|
||||
closeAll: 'Ferme tout'
|
||||
},
|
||||
setting: {
|
||||
title: 'Réglage du thème',
|
||||
sideStyles: {
|
||||
dark: 'Barre latérale sombre',
|
||||
light: 'Barre latérale lumineuse'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'En-tête léger',
|
||||
dark: 'En-tête sombre',
|
||||
primary: 'En-tête principal'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Disposition du menu latéral',
|
||||
top: 'Disposition du menu supérieur',
|
||||
mix: 'Disposition du menu de mixage'
|
||||
},
|
||||
colors: {
|
||||
default: 'Bleu de l\'aube',
|
||||
dust: 'Bleu poussière',
|
||||
sunset: 'Orange coucher de soleil',
|
||||
volcano: 'Volcan',
|
||||
purple: 'Violet doré',
|
||||
cyan: 'Cyan',
|
||||
green: 'vert polaire',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Mode sombre',
|
||||
layoutStyle: 'Mode de navigation',
|
||||
sideMenuStyle: 'menu double',
|
||||
bodyFull: 'Corps plein écran',
|
||||
other: 'Autre cadre',
|
||||
fixedHeader: 'En-tête fixe',
|
||||
fixedSidebar: 'Barre latérale fixe',
|
||||
fixedBody: 'Corps fixe',
|
||||
logoAutoSize: 'Adaptation du logo',
|
||||
colorfulIcon: 'Icône colorée',
|
||||
sideUniqueOpen: 'Menu unique ouvert',
|
||||
weakMode: 'mode faible',
|
||||
showFooter: 'Afficher le pied de page',
|
||||
showTabs: 'Afficher les onglets',
|
||||
tabStyle: 'Style d\'onglet',
|
||||
tabStyles: {
|
||||
default: 'Défaut',
|
||||
dot: 'Point',
|
||||
card: 'Carte'
|
||||
},
|
||||
tips: 'Il se souviendra de votre configuration la prochaine fois que vous l\'ouvrirez.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Rafraîchir',
|
||||
size: 'Densité',
|
||||
sizeOption: {
|
||||
large: 'Facile',
|
||||
medium: 'Défaut',
|
||||
small: 'Secondaire',
|
||||
mini: 'Compact'
|
||||
},
|
||||
columns: 'Colonnes',
|
||||
columnsOption: {
|
||||
columns: 'Colonnes',
|
||||
reset: 'Réinitialiser',
|
||||
index: 'Nombres',
|
||||
selection: 'Sélection',
|
||||
untitled: 'Sans titre'
|
||||
},
|
||||
fullscreen: 'Plein écran'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Tout sélectionner',
|
||||
selectTips: 'Choisi {total} déposer/annuaire',
|
||||
fileName: 'Nom',
|
||||
fileSize: 'Taille',
|
||||
fileTimestamp: 'Dernière modification'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Agrandir',
|
||||
zoomOut: 'Dézoomer',
|
||||
rotateLeft: 'Tourne à gauche',
|
||||
rotateRight: 'Tourner à droite',
|
||||
moveLeft: 'Se déplacer à gauche',
|
||||
moveRight: 'Déplacer vers la droite',
|
||||
moveUp: 'Déplacer vers le haut',
|
||||
moveDown: 'Descendre',
|
||||
flipX: 'Retourner X',
|
||||
flipY: 'Retourner Y',
|
||||
reset: 'Réinitialiser',
|
||||
upload: 'Télécharger',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresse',
|
||||
placeholder: 'Entrer un mot clef',
|
||||
message: 'Veuillez sélectionner une adresse',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/fr_FR.js
Normal file
113
src/components/ele-admin-pro/packages/lang/fr_FR.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 法语 */
|
||||
import lang from 'ant-design-vue/es/locale/fr_FR';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Rafraîchir',
|
||||
fullscreen: 'Plein écran',
|
||||
fullscreenExit: 'Plein écran',
|
||||
closeLeft: 'Fermer à gauche',
|
||||
closeRight: 'Fermer à droite',
|
||||
closeOther: 'Fermer Autre',
|
||||
closeAll: 'Ferme tout'
|
||||
},
|
||||
setting: {
|
||||
title: 'Réglage du thème',
|
||||
sideStyles: {
|
||||
dark: 'Barre latérale sombre',
|
||||
light: 'Barre latérale lumineuse'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'En-tête léger',
|
||||
dark: 'En-tête sombre',
|
||||
primary: 'En-tête principal'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Disposition du menu latéral',
|
||||
top: 'Disposition du menu supérieur',
|
||||
mix: 'Disposition du menu de mixage'
|
||||
},
|
||||
colors: {
|
||||
default: 'Bleu de l\'aube',
|
||||
dust: 'Bleu poussière',
|
||||
sunset: 'Orange coucher de soleil',
|
||||
volcano: 'Volcan',
|
||||
purple: 'Violet doré',
|
||||
cyan: 'Cyan',
|
||||
green: 'vert polaire',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Mode sombre',
|
||||
layoutStyle: 'Mode de navigation',
|
||||
sideMenuStyle: 'menu double',
|
||||
bodyFull: 'Corps plein écran',
|
||||
other: 'Autre cadre',
|
||||
fixedHeader: 'En-tête fixe',
|
||||
fixedSidebar: 'Barre latérale fixe',
|
||||
fixedBody: 'Corps fixe',
|
||||
logoAutoSize: 'Adaptation du logo',
|
||||
colorfulIcon: 'Icône colorée',
|
||||
sideUniqueOpen: 'Menu unique ouvert',
|
||||
weakMode: 'mode faible',
|
||||
showFooter: 'Afficher le pied de page',
|
||||
showTabs: 'Afficher les onglets',
|
||||
tabStyle: 'Style d\'onglet',
|
||||
tabStyles: {
|
||||
default: 'Défaut',
|
||||
dot: 'Point',
|
||||
card: 'Carte'
|
||||
},
|
||||
tips: 'Il se souviendra de votre configuration la prochaine fois que vous l\'ouvrirez.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Rafraîchir',
|
||||
size: 'Densité',
|
||||
sizeOption: {
|
||||
large: 'Facile',
|
||||
medium: 'Défaut',
|
||||
small: 'Secondaire',
|
||||
mini: 'Compact'
|
||||
},
|
||||
columns: 'Colonnes',
|
||||
columnsOption: {
|
||||
columns: 'Colonnes',
|
||||
reset: 'Réinitialiser',
|
||||
index: 'Nombres',
|
||||
selection: 'Sélection',
|
||||
untitled: 'Sans titre'
|
||||
},
|
||||
fullscreen: 'Plein écran'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Tout sélectionner',
|
||||
selectTips: 'Choisi {total} déposer/annuaire',
|
||||
fileName: 'Nom',
|
||||
fileSize: 'Taille',
|
||||
fileTimestamp: 'Dernière modification'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Agrandir',
|
||||
zoomOut: 'Dézoomer',
|
||||
rotateLeft: 'Tourne à gauche',
|
||||
rotateRight: 'Tourner à droite',
|
||||
moveLeft: 'Se déplacer à gauche',
|
||||
moveRight: 'Déplacer vers la droite',
|
||||
moveUp: 'Déplacer vers le haut',
|
||||
moveDown: 'Descendre',
|
||||
flipX: 'Retourner X',
|
||||
flipY: 'Retourner Y',
|
||||
reset: 'Réinitialiser',
|
||||
upload: 'Télécharger',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresse',
|
||||
placeholder: 'Entrer un mot clef',
|
||||
message: 'Veuillez sélectionner une adresse',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/ga_IE.js
Normal file
113
src/components/ele-admin-pro/packages/lang/ga_IE.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 爱尔兰语 */
|
||||
import lang from 'ant-design-vue/es/locale/ga_IE';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'athnuachan',
|
||||
fullscreen: 'scáileán iomlán',
|
||||
fullscreenExit: 'scáileán iomlán',
|
||||
closeLeft: 'gar ar chlé',
|
||||
closeRight: 'gar ar dheis',
|
||||
closeOther: 'dún eile',
|
||||
closeAll: 'dún gach'
|
||||
},
|
||||
setting: {
|
||||
title: 'suíomh téama',
|
||||
sideStyles: {
|
||||
dark: 'barra taobh dorcha',
|
||||
light: 'barra taobh éadrom'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'ceanntásc éadrom',
|
||||
dark: 'ceanntásc dorcha',
|
||||
primary: 'ceanntásc bunscoile'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'leagan amach an roghchláir taobh',
|
||||
top: 'leagan amach barr an roghchláir',
|
||||
mix: 'leagan amach an roghchláir a mheascadh'
|
||||
},
|
||||
colors: {
|
||||
default: 'gorm lae',
|
||||
dust: 'gorm deannaigh',
|
||||
sunset: 'oráiste luí na gréine',
|
||||
volcano: 'bolcán',
|
||||
purple: 'corcra órga',
|
||||
cyan: 'cian',
|
||||
green: 'glas polach',
|
||||
geekblue: 'gorm geek'
|
||||
},
|
||||
darkMode: 'modh dorcha',
|
||||
layoutStyle: 'modh nascleanúna',
|
||||
sideMenuStyle: 'Roghchlár Dúbailte Barra Taobh',
|
||||
bodyFull: 'lánscáileán coirp',
|
||||
other: 'suíomh eile',
|
||||
fixedHeader: 'ceanntásc seasta',
|
||||
fixedSidebar: 'barra taobh seasta',
|
||||
fixedBody: 'comhlacht seasta',
|
||||
logoAutoSize: 'oiriúnú lógó',
|
||||
colorfulIcon: 'íocón ildaite',
|
||||
sideUniqueOpen: 'roghchlár oscailte uathúil',
|
||||
weakMode: 'modh lag',
|
||||
showFooter: 'taispeáin buntásc',
|
||||
showTabs: 'cluaisíní a thaispeáint',
|
||||
tabStyle: 'stíl cluaisín',
|
||||
tabStyles: {
|
||||
default: 'réamhshocraithe',
|
||||
dot: 'ponc',
|
||||
card: 'cárta'
|
||||
},
|
||||
tips: 'cuimhneoidh sé ar do chumraíocht an chéad uair eile a osclóidh tú é.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'athnuachan',
|
||||
size: 'dlús',
|
||||
sizeOption: {
|
||||
large: 'éasca',
|
||||
medium: 'réamhshocraithe',
|
||||
small: 'tánaisteach',
|
||||
mini: 'dlúth'
|
||||
},
|
||||
columns: 'colúin',
|
||||
columnsOption: {
|
||||
columns: 'colúin',
|
||||
reset: 'athshocrú',
|
||||
index: 'uimhreacha',
|
||||
selection: 'roghnú',
|
||||
untitled: 'gan ainm'
|
||||
},
|
||||
fullscreen: 'scáileán iomlán'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'roghnú go léir',
|
||||
selectTips: 'roghnaithe {total} comhad/eolaire',
|
||||
fileName: 'ainm',
|
||||
fileSize: 'méid',
|
||||
fileTimestamp: 'modhnaithe go deireanach'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'zúmáil isteach',
|
||||
zoomOut: 'súmáil amach',
|
||||
rotateLeft: 'rothlú ar chlé',
|
||||
rotateRight: 'rothlú ar dheis',
|
||||
moveLeft: 'bog ar chlé',
|
||||
moveRight: 'bogadh ar dheis',
|
||||
moveUp: 'Éirí suas',
|
||||
moveDown: 'bogadh síos',
|
||||
flipX: 'smeach x',
|
||||
flipY: 'smeach y',
|
||||
reset: 'athshocrú',
|
||||
upload: 'uaslódáil',
|
||||
ok: 'OK',
|
||||
title: 'cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'seoladh',
|
||||
placeholder: 'cuir isteach eochairfhocal',
|
||||
message: 'roghnaigh seoladh le do thoil',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/he_IL.js
Normal file
113
src/components/ele-admin-pro/packages/lang/he_IL.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 希伯来语 */
|
||||
import lang from 'ant-design-vue/es/locale/he_IL';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'לְרַעֲנֵן',
|
||||
fullscreen: 'מסך מלא',
|
||||
fullscreenExit: 'מסך מלא',
|
||||
closeLeft: 'סגור שמאל',
|
||||
closeRight: 'סגור ימינה',
|
||||
closeOther: 'סגור אחר',
|
||||
closeAll: 'סגור הכל'
|
||||
},
|
||||
setting: {
|
||||
title: 'הגדרת נושא',
|
||||
sideStyles: {
|
||||
dark: 'סרגל צדדי כהה',
|
||||
light: 'סרגל צדדי קל'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'כותרת קלה',
|
||||
dark: 'כותרת כהה',
|
||||
primary: 'כותרת ראשית'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'פריסת תפריט צד',
|
||||
top: 'פריסת התפריט העליון',
|
||||
mix: 'פריסת תפריט מיקס'
|
||||
},
|
||||
colors: {
|
||||
default: 'שחר כחול',
|
||||
dust: 'אבק כחול',
|
||||
sunset: 'תפוז שקיעה',
|
||||
volcano: 'הַר גַעַשׁ',
|
||||
purple: 'סגול זהוב',
|
||||
cyan: 'טורקיז',
|
||||
green: 'קוטב ירוק',
|
||||
geekblue: 'חנון כחול'
|
||||
},
|
||||
darkMode: 'מצב כהה',
|
||||
layoutStyle: 'מצב ניווט',
|
||||
sideMenuStyle: 'תפריט כפול בסרגל הצדדי',
|
||||
bodyFull: 'גוף מסך מלא',
|
||||
other: 'הגדרה אחרת',
|
||||
fixedHeader: 'כותרת קבועה',
|
||||
fixedSidebar: 'סרגל צד קבוע',
|
||||
fixedBody: 'גוף קבוע',
|
||||
logoAutoSize: 'התאמת לוגו',
|
||||
colorfulIcon: 'אייקון צבעוני',
|
||||
sideUniqueOpen: 'תפריט ייחודי פתוח',
|
||||
weakMode: 'מצב חלש',
|
||||
showFooter: 'הצג כותרת תחתונה',
|
||||
showTabs: 'הצג כרטיסיות',
|
||||
tabStyle: 'סגנון טאב',
|
||||
tabStyles: {
|
||||
default: 'בְּרִירַת מֶחדָל',
|
||||
dot: 'נְקוּדָה',
|
||||
card: 'כַּרְטִיס'
|
||||
},
|
||||
tips: 'הוא יזכור את התצורה שלך בפעם הבאה שתפתח אותה.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'לְרַעֲנֵן',
|
||||
size: 'צְפִיפוּת',
|
||||
sizeOption: {
|
||||
large: 'קַל',
|
||||
medium: 'בְּרִירַת מֶחדָל',
|
||||
small: 'מִשׁנִי',
|
||||
mini: 'קוֹמפָּקטִי'
|
||||
},
|
||||
columns: 'עמודות',
|
||||
columnsOption: {
|
||||
columns: 'עמודות',
|
||||
reset: 'אִתחוּל',
|
||||
index: 'מספרים',
|
||||
selection: 'בְּחִירָה',
|
||||
untitled: 'ללא כותרת'
|
||||
},
|
||||
fullscreen: 'מסך מלא'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'בחר הכל',
|
||||
selectTips: 'נבחר {total} קוֹבֶץ/מַדרִיך',
|
||||
fileName: 'שֵׁם',
|
||||
fileSize: 'גודל',
|
||||
fileTimestamp: 'שונה לאחרונה'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'לְהִתְמַקֵד',
|
||||
zoomOut: 'להקטין את התצוגה',
|
||||
rotateLeft: 'סובב שמאלה',
|
||||
rotateRight: 'לסובב ימינה',
|
||||
moveLeft: 'זוז שמאלה',
|
||||
moveRight: 'זוז ימינה',
|
||||
moveUp: 'זוז למעלה',
|
||||
moveDown: 'לרדת',
|
||||
flipX: 'הפוך את X',
|
||||
flipY: 'הפוך את Y',
|
||||
reset: 'אִתחוּל',
|
||||
upload: 'העלה',
|
||||
ok: 'אישור',
|
||||
title: 'קרופר'
|
||||
},
|
||||
map: {
|
||||
title: 'כתובת',
|
||||
placeholder: 'הקלד',
|
||||
message: 'אנא בחר כתובת',
|
||||
ok: 'אישור'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/hi_IN.js
Normal file
113
src/components/ele-admin-pro/packages/lang/hi_IN.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 印地语 */
|
||||
import lang from 'ant-design-vue/es/locale/hi_IN';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'ताज़ा करना',
|
||||
fullscreen: 'पूर्ण स्क्रीन',
|
||||
fullscreenExit: 'पूर्ण स्क्रीन',
|
||||
closeLeft: 'बाईं ओर',
|
||||
closeRight: 'सही पास',
|
||||
closeOther: 'अन्य को बंद करें',
|
||||
closeAll: 'सब बंद करें'
|
||||
},
|
||||
setting: {
|
||||
title: 'विषय सेटिंग',
|
||||
sideStyles: {
|
||||
dark: 'डार्क साइडबार',
|
||||
light: 'लाइट साइडबार'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'प्रकाश हैडर',
|
||||
dark: 'डार्क हेडर',
|
||||
primary: 'प्राथमिक शीर्षक'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'साइड मेनू लेआउट',
|
||||
top: 'शीर्ष मेनू लेआउट',
|
||||
mix: 'मिक्स मेनू लेआउट'
|
||||
},
|
||||
colors: {
|
||||
default: 'दिन का नीला',
|
||||
dust: 'धूल का नीला',
|
||||
sunset: 'सूर्यास्त नारंगी',
|
||||
volcano: 'ज्वर भाता',
|
||||
purple: 'सुनहरा बैंगनी',
|
||||
cyan: 'सियान',
|
||||
green: 'ध्रुवीय हरा',
|
||||
geekblue: 'geek नीला'
|
||||
},
|
||||
darkMode: 'डार्क मोड',
|
||||
layoutStyle: 'नेविगेशन मोड',
|
||||
sideMenuStyle: 'साइडबार डबल मेनू',
|
||||
bodyFull: 'बॉडी फुलस्क्रीन',
|
||||
other: 'अन्य सेटिंग',
|
||||
fixedHeader: 'निश्चित शीर्षक',
|
||||
fixedSidebar: 'तय साइडबार',
|
||||
fixedBody: 'निश्चित शरीर',
|
||||
logoAutoSize: 'लोगो का अनुकूलन',
|
||||
colorfulIcon: 'रंगीन आइकन',
|
||||
sideUniqueOpen: 'मेनू अद्वितीय खुला',
|
||||
weakMode: 'कमजोर मोड',
|
||||
showFooter: 'पाद दिखाना',
|
||||
showTabs: 'टैब दिखाएं',
|
||||
tabStyle: 'टैब शैली',
|
||||
tabStyles: {
|
||||
default: 'चूक',
|
||||
dot: 'दूरसंचार विभाग',
|
||||
card: 'कार्ड'
|
||||
},
|
||||
tips: 'अगली बार इसे खोलने पर यह आपके कॉन्फ़िगरेशन को याद रखेगा।'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'ताज़ा करना',
|
||||
size: 'घनत्व',
|
||||
sizeOption: {
|
||||
large: 'आसान',
|
||||
medium: 'चूक',
|
||||
small: 'माध्यमिक',
|
||||
mini: 'सघन'
|
||||
},
|
||||
columns: 'कॉलम',
|
||||
columnsOption: {
|
||||
columns: 'कॉलम',
|
||||
reset: 'रीसेट',
|
||||
index: 'नंबर',
|
||||
selection: 'चयन',
|
||||
untitled: 'शीर्षकहीन'
|
||||
},
|
||||
fullscreen: 'पूर्ण स्क्रीन'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'सभी का चयन करे',
|
||||
selectTips: 'चयनित {total} फ़ाइल/निर्देशिका',
|
||||
fileName: 'नाम',
|
||||
fileSize: 'आकार',
|
||||
fileTimestamp: 'अंतिम बार संशोधित'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'ज़ूम इन',
|
||||
zoomOut: 'ज़ूम आउट',
|
||||
rotateLeft: 'बायीं तरफ',
|
||||
rotateRight: 'दाएं घुमाएं',
|
||||
moveLeft: 'बाएं खिसको',
|
||||
moveRight: 'सही कदम',
|
||||
moveUp: 'बढ़ाना',
|
||||
moveDown: 'नीचे की ओर',
|
||||
flipX: 'फ्लिप एक्स',
|
||||
flipY: 'पलटें',
|
||||
reset: 'रीसेट',
|
||||
upload: 'डालना',
|
||||
ok: 'निर्धारित',
|
||||
title: 'कबूतर'
|
||||
},
|
||||
map: {
|
||||
title: 'पता',
|
||||
placeholder: 'कुंजीशब्द दर्ज करें',
|
||||
message: 'कृपया एक पता चुनें',
|
||||
ok: 'निर्धारित'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/hr_HR.js
Normal file
113
src/components/ele-admin-pro/packages/lang/hr_HR.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 克罗地亚 */
|
||||
import lang from 'ant-design-vue/es/locale/hr_HR';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Osvježiti',
|
||||
fullscreen: 'Puni zaslon',
|
||||
fullscreenExit: 'Puni zaslon',
|
||||
closeLeft: 'Zatvori lijevo',
|
||||
closeRight: 'Zatvori desno',
|
||||
closeOther: 'Zatvori Ostalo',
|
||||
closeAll: 'Zatvori sve'
|
||||
},
|
||||
setting: {
|
||||
title: 'Postavljanje teme',
|
||||
sideStyles: {
|
||||
dark: 'Tamna bočna traka',
|
||||
light: 'Lagana bočna traka'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Svjetlosno zaglavlje',
|
||||
dark: 'Tamno zaglavlje',
|
||||
primary: 'Primarno zaglavlje'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Izgled bočnog izbornika',
|
||||
top: 'Izgled gornjeg izbornika',
|
||||
mix: 'Izmiješajte izgled izbornika'
|
||||
},
|
||||
colors: {
|
||||
default: 'Zora plava',
|
||||
dust: 'Prašina plava',
|
||||
sunset: 'Sunset Orange',
|
||||
volcano: 'Vulkan',
|
||||
purple: 'Zlatnoljubičasta',
|
||||
cyan: 'Cijan',
|
||||
green: 'Polarno zelena',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Tamni način rada',
|
||||
layoutStyle: 'Način navigacije',
|
||||
sideMenuStyle: 'Dvostruki izbornik bočne trake',
|
||||
bodyFull: 'Puni zaslon tijela',
|
||||
other: 'Ostale postavke',
|
||||
fixedHeader: 'Fiksno zaglavlje',
|
||||
fixedSidebar: 'Fiksna bočna traka',
|
||||
fixedBody: 'Fiksno tijelo',
|
||||
logoAutoSize: 'Prilagođavanje logotipa',
|
||||
colorfulIcon: 'Ikona u boji',
|
||||
sideUniqueOpen: 'Izbornik Jedinstveno otvoren',
|
||||
weakMode: 'Slabi način rada',
|
||||
showFooter: 'Prikaži podnožje',
|
||||
showTabs: 'Prikaži kartice',
|
||||
tabStyle: 'Stil kartice',
|
||||
tabStyles: {
|
||||
default: 'Zadano',
|
||||
dot: 'Točka',
|
||||
card: 'Kartica'
|
||||
},
|
||||
tips: 'Sjetit će se vaše konfiguracije kad je sljedeći put otvorite.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Osvježiti',
|
||||
size: 'Gustoća',
|
||||
sizeOption: {
|
||||
large: 'Lako',
|
||||
medium: 'Zadano',
|
||||
small: 'Sekundarni',
|
||||
mini: 'Kompaktni'
|
||||
},
|
||||
columns: 'Stupci',
|
||||
columnsOption: {
|
||||
columns: 'Stupci',
|
||||
reset: 'Resetirati',
|
||||
index: 'Brojevi',
|
||||
selection: 'Izbor',
|
||||
untitled: 'Bez naslova'
|
||||
},
|
||||
fullscreen: 'Puni zaslon'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Odaberi sve',
|
||||
selectTips: 'Odabran {total} datoteka/imenik',
|
||||
fileName: 'Ime',
|
||||
fileSize: 'Veličina',
|
||||
fileTimestamp: 'Zadnja promjena'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Povećaj',
|
||||
zoomOut: 'Umanji',
|
||||
rotateLeft: 'Rotirajte ulijevo',
|
||||
rotateRight: 'Rotiraj udesno',
|
||||
moveLeft: 'Pomakni se ulijevo',
|
||||
moveRight: 'Pomaknuti se udesno',
|
||||
moveUp: 'Pomakni se gore',
|
||||
moveDown: 'Pomicati prema dolje',
|
||||
flipX: 'Preokrenite X',
|
||||
flipY: 'Preokrenite Y',
|
||||
reset: 'Resetirati',
|
||||
upload: 'Učitaj',
|
||||
ok: 'OK',
|
||||
title: 'Fijasko'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresa',
|
||||
placeholder: 'Unesite ključnu riječ',
|
||||
message: 'Odaberite adresu',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/hu_HU.js
Normal file
113
src/components/ele-admin-pro/packages/lang/hu_HU.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 匈牙利语 */
|
||||
import lang from 'ant-design-vue/es/locale/hu_HU';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Frissítés',
|
||||
fullscreen: 'Teljes képernyő',
|
||||
fullscreenExit: 'Teljes képernyő',
|
||||
closeLeft: 'Bezárás balra',
|
||||
closeRight: 'Bezárás jobbra',
|
||||
closeOther: 'Zárja be az Egyéb elemet',
|
||||
closeAll: 'Bezárja az összeset'
|
||||
},
|
||||
setting: {
|
||||
title: 'Téma beállítása',
|
||||
sideStyles: {
|
||||
dark: 'Sötét oldalsáv',
|
||||
light: 'Világos oldalsáv'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Fényfejléc',
|
||||
dark: 'Sötét fejléc',
|
||||
primary: 'Elsődleges fejléc'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Oldalsó menü elrendezése',
|
||||
top: 'Felső menü elrendezése',
|
||||
mix: 'Keverje össze a menüelrendezést'
|
||||
},
|
||||
colors: {
|
||||
default: 'Hajnalban kék',
|
||||
dust: 'Por kék',
|
||||
sunset: 'Naplemente narancssárga',
|
||||
volcano: 'Vulkán',
|
||||
purple: 'Aranylila',
|
||||
cyan: 'Cián',
|
||||
green: 'Sarki zöld',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Sötét mód',
|
||||
layoutStyle: 'Navigációs mód',
|
||||
sideMenuStyle: 'Oldalsáv dupla menü',
|
||||
bodyFull: 'Test teljes képernyős',
|
||||
other: 'Egyéb beállítás',
|
||||
fixedHeader: 'Fix fejléc',
|
||||
fixedSidebar: 'Rögzített oldalsáv',
|
||||
fixedBody: 'Rögzített test',
|
||||
logoAutoSize: 'Logó adaptáció',
|
||||
colorfulIcon: 'Színes ikonra',
|
||||
sideUniqueOpen: 'Menü Egyedi Megnyitás',
|
||||
weakMode: 'Gyenge mód',
|
||||
showFooter: 'Lábléc megjelenítése',
|
||||
showTabs: 'Fülek megjelenítése',
|
||||
tabStyle: 'Tab stílus',
|
||||
tabStyles: {
|
||||
default: 'Alapértelmezett',
|
||||
dot: 'Pont',
|
||||
card: 'Kártya'
|
||||
},
|
||||
tips: 'A következő megnyitásakor emlékezni fog a konfigurációjára.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Frissítés',
|
||||
size: 'Sűrűség',
|
||||
sizeOption: {
|
||||
large: 'Könnyen',
|
||||
medium: 'Alapértelmezett',
|
||||
small: 'Másodlagos',
|
||||
mini: 'Kompakt'
|
||||
},
|
||||
columns: 'Oszlopok',
|
||||
columnsOption: {
|
||||
columns: 'Oszlopok',
|
||||
reset: 'Visszaállítás',
|
||||
index: 'Számok',
|
||||
selection: 'Kiválasztás',
|
||||
untitled: 'Névtelen'
|
||||
},
|
||||
fullscreen: 'Teljes képernyő'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Mindet kiválaszt',
|
||||
selectTips: 'Kiválasztott {total} fájl/Könyvtár',
|
||||
fileName: 'Név',
|
||||
fileSize: 'Méret',
|
||||
fileTimestamp: 'Utoljára módosítva'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Ráközelíteni',
|
||||
zoomOut: 'Kicsinyítés',
|
||||
rotateLeft: 'Forgasd balra',
|
||||
rotateRight: 'Forgasd jobbra',
|
||||
moveLeft: 'Menj balra',
|
||||
moveRight: 'Mozdulj jobbra',
|
||||
moveUp: 'Haladj felfelé',
|
||||
moveDown: 'Mozgás lefelé',
|
||||
flipX: 'FlipX',
|
||||
flipY: 'FlipY',
|
||||
reset: 'Visszaállítás',
|
||||
upload: 'Feltöltés',
|
||||
ok: 'OK',
|
||||
title: 'Posztónyíró'
|
||||
},
|
||||
map: {
|
||||
title: 'Cím',
|
||||
placeholder: 'Kulcsszó',
|
||||
message: 'Válasszon címet',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/hy_AM.js
Normal file
113
src/components/ele-admin-pro/packages/lang/hy_AM.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 亚美尼亚语 */
|
||||
import lang from 'ant-design-vue/es/locale/hy_AM';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Թարմացնել',
|
||||
fullscreen: 'Ամբողջ էկրան',
|
||||
fullscreenExit: 'Ամբողջ էկրան',
|
||||
closeLeft: 'Փակել ձախը',
|
||||
closeRight: 'Փակել աջ',
|
||||
closeOther: 'Փակել այլ',
|
||||
closeAll: 'Փակել բոլորը'
|
||||
},
|
||||
setting: {
|
||||
title: 'Թեմայի կարգավորում',
|
||||
sideStyles: {
|
||||
dark: 'Մութ կողային տող',
|
||||
light: 'Թեթև կողային տող'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Լույսի վերնագիր',
|
||||
dark: 'Մուգ վերնագիր',
|
||||
primary: 'Հիմնական վերնագիր'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Կողային ընտրացանկի դասավորություն',
|
||||
top: 'Topանկի լավագույն դասավորությունը',
|
||||
mix: 'Խառնել ընտրացանկի դասավորությունը'
|
||||
},
|
||||
colors: {
|
||||
default: 'Լուսաբաց կապույտ',
|
||||
dust: 'Փոշի կապույտ',
|
||||
sunset: 'Մայրամուտ նարնջագույն',
|
||||
volcano: 'Հրաբուխ',
|
||||
purple: 'Ոսկե մանուշակագույն',
|
||||
cyan: 'Կապույտ',
|
||||
green: 'Բեւեռային կանաչ',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Մութ ռեժիմ',
|
||||
layoutStyle: 'Նավիգացիոն ռեժիմ',
|
||||
sideMenuStyle: 'Կողային երկակի ընտրացանկ',
|
||||
bodyFull: 'Մարմնի ամբողջ էկրան',
|
||||
other: 'Այլ պարամետրեր',
|
||||
fixedHeader: 'Ֆիքսված վերնագիր',
|
||||
fixedSidebar: 'Ֆիքսված կողային տող',
|
||||
fixedBody: 'Հաստատուն մարմին',
|
||||
logoAutoSize: 'Լոգոյի հարմարեցում',
|
||||
colorfulIcon: 'Գունագեղ պատկերակ',
|
||||
sideUniqueOpen: 'Uաշացանկը եզակի բաց է',
|
||||
weakMode: 'Թույլ ռեժիմ',
|
||||
showFooter: 'Footույց տալ ստորագիր',
|
||||
showTabs: 'Showուցադրել ներդիրները',
|
||||
tabStyle: 'Տաբ ոճը',
|
||||
tabStyles: {
|
||||
default: 'Լռելյայն',
|
||||
dot: 'Կետ',
|
||||
card: 'Քարտ'
|
||||
},
|
||||
tips: 'Այն կհիշի ձեր կազմաձևը հաջորդ անգամ, երբ այն բացեք:'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Թարմացնել',
|
||||
size: 'Խտություն',
|
||||
sizeOption: {
|
||||
large: 'Հեշտ',
|
||||
medium: 'Լռելյայն',
|
||||
small: 'Երկրորդական',
|
||||
mini: 'Կոմպակտ'
|
||||
},
|
||||
columns: 'Սյունակներ',
|
||||
columnsOption: {
|
||||
columns: 'Սյունակներ',
|
||||
reset: 'Վերականգնել',
|
||||
index: 'Համարներ',
|
||||
selection: 'Ընտրություն',
|
||||
untitled: 'Անվերնագիր'
|
||||
},
|
||||
fullscreen: 'Ամբողջ էկրան'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Ընտրել բոլորը',
|
||||
selectTips: 'Ընտրված է {total} ֆայլ/գրացուցակ',
|
||||
fileName: 'Անուն',
|
||||
fileSize: 'Չափը',
|
||||
fileTimestamp: 'Վերջին փոփոխված'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Խոշորացնել. մոտեցնել',
|
||||
zoomOut: 'Մանրացնել',
|
||||
rotateLeft: 'Պտտեք ձախ',
|
||||
rotateRight: 'Պտտեք աջ',
|
||||
moveLeft: 'Շարժվիր ձախ',
|
||||
moveRight: 'Շարժվել աջ',
|
||||
moveUp: 'Վեր շարժվեք',
|
||||
moveDown: 'Իջնել',
|
||||
flipX: 'Մատով խփել',
|
||||
flipY: 'Մատով խփել',
|
||||
reset: 'Վերականգնել',
|
||||
upload: 'Վերբեռնել',
|
||||
ok: 'Լաւ',
|
||||
title: 'Կտրող'
|
||||
},
|
||||
map: {
|
||||
title: 'Հասցե',
|
||||
placeholder: 'Մուտքագրեք բանալի բառ',
|
||||
message: 'Խնդրում ենք ընտրել հասցե',
|
||||
ok: 'Լաւ'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/id_ID.js
Normal file
113
src/components/ele-admin-pro/packages/lang/id_ID.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 印尼语 */
|
||||
import lang from 'ant-design-vue/es/locale/id_ID';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Menyegarkan',
|
||||
fullscreen: 'Layar penuh',
|
||||
fullscreenExit: 'Layar penuh',
|
||||
closeLeft: 'Tutup Kiri',
|
||||
closeRight: 'Tutup Kanan',
|
||||
closeOther: 'Tutup Lainnya',
|
||||
closeAll: 'Tutup semua'
|
||||
},
|
||||
setting: {
|
||||
title: 'Pengaturan Tema',
|
||||
sideStyles: {
|
||||
dark: 'Sidebar Gelap',
|
||||
light: 'Sidebar Cahaya'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Header Cahaya',
|
||||
dark: 'Header Gelap',
|
||||
primary: 'Header Utama'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Tata Letak Menu Samping',
|
||||
top: 'Tata Letak Menu Atas',
|
||||
mix: 'Tata Letak Menu Campuran'
|
||||
},
|
||||
colors: {
|
||||
default: 'Fajar Biru',
|
||||
dust: 'Debu Biru',
|
||||
sunset: 'Matahari Terbenam Jeruk',
|
||||
volcano: 'Gunung Berapi',
|
||||
purple: 'Keemasan Ungu',
|
||||
cyan: 'Cyan',
|
||||
green: 'Kutub Hijau',
|
||||
geekblue: 'Geek Biru'
|
||||
},
|
||||
darkMode: 'Mode Gelap',
|
||||
layoutStyle: 'Mode Navigasi',
|
||||
sideMenuStyle: 'Menu ganda bilah sisi',
|
||||
bodyFull: 'Layar Penuh Tubuh',
|
||||
other: 'Pengaturan Lainnya',
|
||||
fixedHeader: 'Header Tetap',
|
||||
fixedSidebar: 'Sidebar Tetap',
|
||||
fixedBody: 'Tubuh Tetap',
|
||||
logoAutoSize: 'Adaptasi Logo',
|
||||
colorfulIcon: 'Ikon Berwarna-warni',
|
||||
sideUniqueOpen: 'Menu Unik Terbuka',
|
||||
weakMode: 'Mode Lemah',
|
||||
showFooter: 'Tunjukkan Footer',
|
||||
showTabs: 'Tampilkan Tab',
|
||||
tabStyle: 'Gaya Tab',
|
||||
tabStyles: {
|
||||
default: 'Default',
|
||||
dot: 'Dot',
|
||||
card: 'Kartu'
|
||||
},
|
||||
tips: 'Ini akan mengingat konfigurasi Anda saat Anda membukanya lagi.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Menyegarkan',
|
||||
size: 'Massa jenis',
|
||||
sizeOption: {
|
||||
large: 'Mudah',
|
||||
medium: 'Default',
|
||||
small: 'Sekunder',
|
||||
mini: 'Kompak'
|
||||
},
|
||||
columns: 'Kolom',
|
||||
columnsOption: {
|
||||
columns: 'Kolom',
|
||||
reset: 'Setel ulang',
|
||||
index: 'Angka',
|
||||
selection: 'Pilihan',
|
||||
untitled: 'Tanpa judul'
|
||||
},
|
||||
fullscreen: 'Layar penuh'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Pilih Semua',
|
||||
selectTips: 'Terpilih {total} mengajukan/direktori',
|
||||
fileName: 'Nama',
|
||||
fileSize: 'Ukuran',
|
||||
fileTimestamp: 'Terakhir Diubah'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Perbesar',
|
||||
zoomOut: 'Perkecil',
|
||||
rotateLeft: 'Putar ke Kiri',
|
||||
rotateRight: 'Putar ke kanan',
|
||||
moveLeft: 'Pindah ke Kiri',
|
||||
moveRight: 'Bergerak ke kanan',
|
||||
moveUp: 'Pindah ke Atas',
|
||||
moveDown: 'Turunkan',
|
||||
flipX: 'Balik X',
|
||||
flipY: 'Balik Y',
|
||||
reset: 'Setel ulang',
|
||||
upload: 'Unggah',
|
||||
ok: 'Pilih',
|
||||
title: 'Keruntuhan'
|
||||
},
|
||||
map: {
|
||||
title: 'Alamat',
|
||||
placeholder: 'Masukan kata kunci',
|
||||
message: 'Silakan pilih sebuah alamat',
|
||||
ok: 'Pilih'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/is_IS.js
Normal file
113
src/components/ele-admin-pro/packages/lang/is_IS.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 冰岛语 */
|
||||
import lang from 'ant-design-vue/es/locale/is_IS';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'hressa',
|
||||
fullscreen: 'fullskjár',
|
||||
fullscreenExit: 'fullskjár',
|
||||
closeLeft: 'loka til vinstri',
|
||||
closeRight: 'loka rétt',
|
||||
closeOther: 'loka öðru',
|
||||
closeAll: 'loka öllum'
|
||||
},
|
||||
setting: {
|
||||
title: 'þema stilling',
|
||||
sideStyles: {
|
||||
dark: 'dökk hliðarrönd',
|
||||
light: 'létt skenkur'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'létt haus',
|
||||
dark: 'dökkur haus',
|
||||
primary: 'aðal haus'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'hliðarmatseðli',
|
||||
top: 'toppvalmyndarskipulag',
|
||||
mix: 'blanda matseðill skipulag'
|
||||
},
|
||||
colors: {
|
||||
default: 'dögun blár',
|
||||
dust: 'rykblátt',
|
||||
sunset: 'sólarlag appelsínugult',
|
||||
volcano: 'eldfjall',
|
||||
purple: 'gullfjólublátt',
|
||||
cyan: 'blágrænt',
|
||||
green: 'skautgrænn',
|
||||
geekblue: 'gáfaður blár'
|
||||
},
|
||||
darkMode: 'dökk háttur',
|
||||
layoutStyle: 'leiðsöguhamur',
|
||||
sideMenuStyle: 'Tvöfaldur valmynd hliðarstiku',
|
||||
bodyFull: 'líkami fullskjár',
|
||||
other: 'önnur stilling',
|
||||
fixedHeader: 'fastur haus',
|
||||
fixedSidebar: 'föst skenkur',
|
||||
fixedBody: 'fastur líkami',
|
||||
logoAutoSize: 'aðlögun lógósins',
|
||||
colorfulIcon: 'litríkt tákn',
|
||||
sideUniqueOpen: 'matseðill einstakur opinn',
|
||||
weakMode: 'veikur háttur',
|
||||
showFooter: 'sýna fót',
|
||||
showTabs: 'sýna flipa',
|
||||
tabStyle: 'flipastíl',
|
||||
tabStyles: {
|
||||
default: 'sjálfgefið',
|
||||
dot: 'punktur',
|
||||
card: 'Spil'
|
||||
},
|
||||
tips: 'það muna stillingar þínar næst þegar þú opnar það.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'hressa',
|
||||
size: 'þéttleiki',
|
||||
sizeOption: {
|
||||
large: 'auðvelt',
|
||||
medium: 'sjálfgefið',
|
||||
small: 'aukaatriði',
|
||||
mini: 'samningur'
|
||||
},
|
||||
columns: 'dálkar',
|
||||
columnsOption: {
|
||||
columns: 'dálkar',
|
||||
reset: 'endurstilla',
|
||||
index: 'tölur',
|
||||
selection: 'val',
|
||||
untitled: 'án titils'
|
||||
},
|
||||
fullscreen: 'fullskjár'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'velja allt',
|
||||
selectTips: 'valinn {total} skjal/Skrá',
|
||||
fileName: 'nafn',
|
||||
fileSize: 'stærð',
|
||||
fileTimestamp: 'síðast breytt'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'þysja inn',
|
||||
zoomOut: 'þysja út',
|
||||
rotateLeft: 'snúið til vinstri',
|
||||
rotateRight: 'snúið til hægri',
|
||||
moveLeft: 'færa til vinstri',
|
||||
moveRight: 'hreyfðu þig til hægri',
|
||||
moveUp: 'fara upp',
|
||||
moveDown: 'færa sig niður',
|
||||
flipX: 'flettu x',
|
||||
flipY: 'flettu y',
|
||||
reset: 'endurstilla',
|
||||
upload: 'hlaða upp',
|
||||
ok: 'OK',
|
||||
title: 'cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'heimilisfang',
|
||||
placeholder: 'sláðu inn leitarorð',
|
||||
message: 'vinsamlegast veldu heimilisfang',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/it_IT.js
Normal file
113
src/components/ele-admin-pro/packages/lang/it_IT.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 意大利语 */
|
||||
import lang from 'ant-design-vue/es/locale/it_IT';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'ricaricare',
|
||||
fullscreen: 'A schermo intero',
|
||||
fullscreenExit: 'A schermo intero',
|
||||
closeLeft: 'Chiudi a sinistra',
|
||||
closeRight: 'Chiudi a destra',
|
||||
closeOther: 'Chiudi altro',
|
||||
closeAll: 'Chiudi tutto'
|
||||
},
|
||||
setting: {
|
||||
title: 'Impostazione del tema',
|
||||
sideStyles: {
|
||||
dark: 'Buio Sidebar',
|
||||
light: 'Leggero Sidebar'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Intestazione leggera',
|
||||
dark: 'Intestazione scura',
|
||||
primary: 'Intestazione primaria'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Laterale Menu Layout',
|
||||
top: 'Superiore Menu Layout',
|
||||
mix: 'Mix Menu Layout'
|
||||
},
|
||||
colors: {
|
||||
default: 'Daybreak Blu',
|
||||
dust: 'Polvere Blu',
|
||||
sunset: 'Tramonto Arancia',
|
||||
volcano: 'Vulcano',
|
||||
purple: 'D\'oro Viola',
|
||||
cyan: 'Ciano',
|
||||
green: 'Polare Verde',
|
||||
geekblue: 'Geek Blu'
|
||||
},
|
||||
darkMode: 'Modalità scura',
|
||||
layoutStyle: 'Modalità di navigazione',
|
||||
sideMenuStyle: 'Doppio menù sidebar',
|
||||
bodyFull: 'Corpo a schermo intero',
|
||||
other: 'Altre impostazioni',
|
||||
fixedHeader: 'Intestazione fissa',
|
||||
fixedSidebar: 'Barra laterale fissa',
|
||||
fixedBody: 'Corpo fisso',
|
||||
logoAutoSize: 'Adattamento del logo',
|
||||
colorfulIcon: 'Icona colorata',
|
||||
sideUniqueOpen: 'Menu unico aperto',
|
||||
weakMode: 'Modalità debole',
|
||||
showFooter: 'Mostra piè di pagina',
|
||||
showTabs: 'Mostra schede',
|
||||
tabStyle: 'Stile scheda',
|
||||
tabStyles: {
|
||||
default: 'Predefinito',
|
||||
dot: 'Punto',
|
||||
card: 'Carta'
|
||||
},
|
||||
tips: 'Ricorderà la tua configurazione la prossima volta che lo aprirai.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Ricaricare',
|
||||
size: 'Densità',
|
||||
sizeOption: {
|
||||
large: 'Facile',
|
||||
medium: 'Predefinito',
|
||||
small: 'Secondario',
|
||||
mini: 'Compatto'
|
||||
},
|
||||
columns: 'Colonne',
|
||||
columnsOption: {
|
||||
columns: 'Colonne',
|
||||
reset: 'Ripristina',
|
||||
index: 'Numeri',
|
||||
selection: 'Selezione',
|
||||
untitled: 'Senza titolo'
|
||||
},
|
||||
fullscreen: 'Schermo intero'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Seleziona tutto',
|
||||
selectTips: 'Selezionato {total} file/directory',
|
||||
fileName: 'Nome',
|
||||
fileSize: 'Dimensione',
|
||||
fileTimestamp: 'Ultima modifica'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Ingrandire',
|
||||
zoomOut: 'Zoom indietro',
|
||||
rotateLeft: 'Gira a sinistra',
|
||||
rotateRight: 'Ruota a destra',
|
||||
moveLeft: 'Muovere a sinistra',
|
||||
moveRight: 'Vai a destra',
|
||||
moveUp: 'Andare avanti',
|
||||
moveDown: 'Abbassati',
|
||||
flipX: 'Capovolgi X',
|
||||
flipY: 'Capovolgi Y',
|
||||
reset: 'Ripristina',
|
||||
upload: 'Caricare',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Indirizzo',
|
||||
placeholder: 'Inserisci filtro',
|
||||
message: 'Seleziona un indirizzo',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
114
src/components/ele-admin-pro/packages/lang/ja_JP.js
Normal file
114
src/components/ele-admin-pro/packages/lang/ja_JP.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/** 日语 */
|
||||
import lang from 'ant-design-vue/es/locale/ja_JP';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: '現在を更新',
|
||||
fullscreen: 'フルスクリーン',
|
||||
fullscreenExit: 'フルスクリーン',
|
||||
closeLeft: '左を閉じる',
|
||||
closeRight: '右側を閉じる',
|
||||
closeOther: 'その他を閉じる',
|
||||
closeAll: 'すべてを閉じる'
|
||||
},
|
||||
setting: {
|
||||
title: 'テーマの設定',
|
||||
sideStyles: {
|
||||
dark: '暗いサイドバー',
|
||||
light: '明るいサイドバー'
|
||||
},
|
||||
headStyles: {
|
||||
light: '明るいトップバー',
|
||||
dark: '暗いトップバー',
|
||||
primary: 'カラートップバー'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: '左メニューレイアウト',
|
||||
top: 'トップメニューレイアウト',
|
||||
mix: 'ミックスメニューレイアウト'
|
||||
},
|
||||
colors: {
|
||||
default: '明けの空',
|
||||
dust: '夕暮れ',
|
||||
sunset: '日が暮れる',
|
||||
volcano: '火山',
|
||||
purple: '濃い紫色',
|
||||
cyan: '明るい青',
|
||||
green: '极光绿',
|
||||
geekblue: '极客蓝'
|
||||
},
|
||||
darkMode: '暗黒モード',
|
||||
layoutStyle: 'ナビゲーションモード',
|
||||
sideMenuStyle: 'サイドバーダブルメニュー',
|
||||
bodyFull: '内容がしきつめる',
|
||||
other: 'その他の設定',
|
||||
fixedHeader: 'トップバーを固定',
|
||||
fixedSidebar: 'サイドバーを固定する',
|
||||
fixedBody: '本体を固定する',
|
||||
logoAutoSize: 'Logo幅適応',
|
||||
colorfulIcon: 'カラーバーのアイコン',
|
||||
sideUniqueOpen: '横の列を彼が広げます',
|
||||
weakMode: '色弱モード',
|
||||
showFooter: 'グローバルフッタ',
|
||||
showTabs: '複数ページの欄',
|
||||
tabStyle: 'ページスタイル',
|
||||
tabStyles: {
|
||||
default: 'デフォルト',
|
||||
dot: '円点',
|
||||
card: 'カード'
|
||||
},
|
||||
tips: '修正後はローカルにキャッシュされます。今度はテーマ設定を記憶します。'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: '更新',
|
||||
size: '密度',
|
||||
sizeOption: {
|
||||
large: '緩い',
|
||||
medium: 'デフォルト',
|
||||
small: '中ぐらい',
|
||||
mini: 'コンパクト'
|
||||
},
|
||||
columns: '列の設定',
|
||||
columnsOption: {
|
||||
columns: '列の展示',
|
||||
reset: 'リセット',
|
||||
index: '番号付け',
|
||||
selection: '列を選択',
|
||||
untitled: 'タイトルなし'
|
||||
},
|
||||
fullscreen: 'フルスクリーン',
|
||||
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'すべて選択',
|
||||
selectTips: '選択されました {total} ファイル/フォルダ',
|
||||
fileName: '名前',
|
||||
fileSize: 'サイズ',
|
||||
fileTimestamp: '変更日'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: '拡大',
|
||||
zoomOut: '縮小',
|
||||
rotateLeft: '左に回る',
|
||||
rotateRight: '右に回転',
|
||||
moveLeft: '左に移動',
|
||||
moveRight: '右に移動',
|
||||
moveUp: '上へ移動',
|
||||
moveDown: '下に移動',
|
||||
flipX: '左右反転',
|
||||
flipY: '上下反転',
|
||||
reset: '新たに始める',
|
||||
upload: '画像を選択',
|
||||
ok: '確認',
|
||||
title: '画像を切り取り'
|
||||
},
|
||||
map: {
|
||||
title: '場所を選択',
|
||||
placeholder: 'キーワードを入力',
|
||||
message: 'リストの選択位置をクリックしてください',
|
||||
ok: '確認'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/kn_IN.js
Normal file
113
src/components/ele-admin-pro/packages/lang/kn_IN.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 卡纳达语 */
|
||||
import lang from 'ant-design-vue/es/locale/kn_IN';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'ರಿಫ್ರೆಶ್ ಮಾಡಿ',
|
||||
fullscreen: 'ಪೂರ್ಣ ಪರದೆ',
|
||||
fullscreenExit: 'ಪೂರ್ಣ ಪರದೆ',
|
||||
closeLeft: 'ಎಡಕ್ಕೆ ಮುಚ್ಚಿ',
|
||||
closeRight: 'ಬಲಕ್ಕೆ ಮುಚ್ಚಿ',
|
||||
closeOther: 'ಇತರ ಮುಚ್ಚಿ',
|
||||
closeAll: 'ಎಲ್ಲವನ್ನೂ ಮುಚ್ಚಿ'
|
||||
},
|
||||
setting: {
|
||||
title: 'ಥೀಮ್ ಸೆಟ್ಟಿಂಗ್',
|
||||
sideStyles: {
|
||||
dark: 'ಡಾರ್ಕ್ ಸೈಡ್ಬಾರ್',
|
||||
light: 'ಬೆಳಕಿನ ಸೈಡ್ಬಾರ್'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'ಬೆಳಕಿನ ಹೆಡರ್',
|
||||
dark: 'ಡಾರ್ಕ್ ಹೆಡರ್',
|
||||
primary: 'ಪ್ರಾಥಮಿಕ ಹೆಡರ್'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'ಸೈಡ್ ಮೆನು ವಿನ್ಯಾಸ',
|
||||
top: 'ಉನ್ನತ ಮೆನು ವಿನ್ಯಾಸ',
|
||||
mix: 'ಮಿಶ್ರಣ ಮೆನು ವಿನ್ಯಾಸ'
|
||||
},
|
||||
colors: {
|
||||
default: 'ಹಗಲು ನೀಲಿ',
|
||||
dust: 'ಧೂಳು ನೀಲಿ',
|
||||
sunset: 'ಸೂರ್ಯಾಸ್ತ ಕಿತ್ತಳೆ',
|
||||
volcano: 'ಜ್ವಾಲಾಮುಖಿ',
|
||||
purple: 'ಚಿನ್ನದ ನೇರಳೆ',
|
||||
cyan: 'ಸಯಾನ್',
|
||||
green: 'ಧ್ರುವ ಹಸಿರು',
|
||||
geekblue: 'ಗೀಕ್ ನೀಲಿ'
|
||||
},
|
||||
darkMode: 'ಡಾರ್ಕ್ ಮೋಡ್',
|
||||
layoutStyle: 'ನ್ಯಾವಿಗೇಷನ್ ಮೋಡ್',
|
||||
sideMenuStyle: 'ಸೈಡ್ಬಾರ್ ಡಬಲ್ ಮೆನು',
|
||||
bodyFull: 'ದೇಹದ ಪೂರ್ಣ ಪರದೆ',
|
||||
other: 'ಇತರ ಸೆಟ್ಟಿಂಗ್',
|
||||
fixedHeader: 'ಸ್ಥಿರ ಹೆಡರ್',
|
||||
fixedSidebar: 'ಸ್ಥಿರ ಸೈಡ್ಬಾರ್',
|
||||
fixedBody: 'ಸ್ಥಿರ ದೇಹ',
|
||||
logoAutoSize: 'ಲೋಗೋ ರೂಪಾಂತರ',
|
||||
colorfulIcon: 'ವರ್ಣರಂಜಿತ ಐಕಾನ್',
|
||||
sideUniqueOpen: 'ಮೆನು ಅನನ್ಯವಾಗಿದೆ',
|
||||
weakMode: 'ದುರ್ಬಲ ಮೋಡ್',
|
||||
showFooter: 'ಅಡಿಟಿಪ್ಪಣಿ ತೋರಿಸಿ',
|
||||
showTabs: 'ಟ್ಯಾಬ್ಗಳನ್ನು ತೋರಿಸಿ',
|
||||
tabStyle: 'ಟ್ಯಾಬ್ ಶೈಲಿ',
|
||||
tabStyles: {
|
||||
default: 'ಡೀಫಾಲ್ಟ್',
|
||||
dot: 'ಡಾಟ್',
|
||||
card: 'ಕಾರ್ಡ್'
|
||||
},
|
||||
tips: 'ಮುಂದಿನ ಬಾರಿ ನೀವು ಅದನ್ನು ತೆರೆದಾಗ ಅದು ನಿಮ್ಮ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೆನಪಿಸುತ್ತದೆ.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'ರಿಫ್ರೆಶ್ ಮಾಡಿ',
|
||||
size: 'ಸಾಂದ್ರತೆ',
|
||||
sizeOption: {
|
||||
large: 'ಸುಲಭ',
|
||||
medium: 'ಡೀಫಾಲ್ಟ್',
|
||||
small: 'ದ್ವಿತೀಯ',
|
||||
mini: 'ಕಾಂಪ್ಯಾಕ್ಟ್'
|
||||
},
|
||||
columns: 'ಕಾಲಮ್ಗಳು',
|
||||
columnsOption: {
|
||||
columns: 'ಕಾಲಮ್ಗಳು',
|
||||
reset: 'ಮರುಹೊಂದಿಸಿ',
|
||||
index: 'ಸಂಖ್ಯೆಗಳು',
|
||||
selection: 'ಆಯ್ಕೆ',
|
||||
untitled: 'ಶೀರ್ಷಿಕೆರಹಿತ'
|
||||
},
|
||||
fullscreen: 'ಪೂರ್ಣ ಪರದೆ'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'ಎಲ್ಲವನ್ನು ಆರಿಸು',
|
||||
selectTips: 'ಆಯ್ಕೆ ಮಾಡಲಾಗಿದೆ {total} ಫೈಲ್/ಡೈರೆಕ್ಟರಿ',
|
||||
fileName: 'ಹೆಸರು',
|
||||
fileSize: 'ಗಾತ್ರ',
|
||||
fileTimestamp: 'ಕೊನೆಯದಾಗಿ ಮಾರ್ಪಡಿಸಲಾಗಿದೆ'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'ಇನ್ನು ಹತ್ತಿರವಾಗಿಸಿ',
|
||||
zoomOut: 'ಜೂಮ್ .ಟ್ ಮಾಡಿ',
|
||||
rotateLeft: 'ಎಡಕ್ಕೆ ತಿರುಗಿಸಿ',
|
||||
rotateRight: 'ಬಲಕ್ಕೆ ತಿರುಗಿಸಿ',
|
||||
moveLeft: 'ಎಡಕ್ಕೆ ಸರಿಸಿ',
|
||||
moveRight: 'ಬಲಕ್ಕೆ ಹೋಗು',
|
||||
moveUp: 'ಮೇಲೇರು',
|
||||
moveDown: 'ಕೆಳಗೆ ಸರಿಸಿ',
|
||||
flipX: 'ಫ್ಲಿಪ್ x',
|
||||
flipY: 'ಫ್ಲಿಪ್ ವೈ',
|
||||
reset: 'ಮರುಹೊಂದಿಸಿ',
|
||||
upload: 'ಅಪ್ಲೋಡ್ ಮಾಡಿ',
|
||||
ok: 'ಸರಿ',
|
||||
title: 'ಕ್ರಾಪರ್'
|
||||
},
|
||||
map: {
|
||||
title: 'ವಿಳಾಸ',
|
||||
placeholder: 'ಕೀವರ್ಡ್ ನಮೂದಿಸಿ',
|
||||
message: 'ದಯವಿಟ್ಟು ವಿಳಾಸವನ್ನು ಆರಿಸಿ',
|
||||
ok: 'ಸರಿ'
|
||||
}
|
||||
}
|
||||
};
|
||||
114
src/components/ele-admin-pro/packages/lang/ko_KR.js
Normal file
114
src/components/ele-admin-pro/packages/lang/ko_KR.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/** 韩语 */
|
||||
import lang from 'ant-design-vue/es/locale/ko_KR';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: '새로 고침',
|
||||
fullscreen: '전체 화면',
|
||||
fullscreenExit: '전체 화면',
|
||||
closeLeft: '왼쪽 닫 기',
|
||||
closeRight: '오른쪽 닫 기',
|
||||
closeOther: '기타 닫 기',
|
||||
closeAll: '모두 닫 기'
|
||||
},
|
||||
setting: {
|
||||
title: '테마 설정',
|
||||
sideStyles: {
|
||||
dark: '어두운 사이드 바',
|
||||
light: '밝은 사이드 바'
|
||||
},
|
||||
headStyles: {
|
||||
light: '밝은 상단 바',
|
||||
dark: '어두운 상단 막대',
|
||||
primary: '기본 헤더'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: '왼쪽 메뉴 레이아웃',
|
||||
top: '상위 메뉴 레이아웃',
|
||||
mix: '혼합 메뉴 레이아웃'
|
||||
},
|
||||
colors: {
|
||||
default: '새벽의 푸른',
|
||||
dust: '황혼',
|
||||
sunset: '선셋 오렌지',
|
||||
volcano: '화산',
|
||||
purple: '골든 퍼플',
|
||||
cyan: '청록색',
|
||||
green: '폴라 그린',
|
||||
geekblue: '괴짜 블루'
|
||||
},
|
||||
darkMode: '다크 모드 켜기',
|
||||
layoutStyle: '탐색 모드',
|
||||
sideMenuStyle: '사이드 바 더블 메뉴',
|
||||
bodyFull: '콘텐츠 영역 전체 화면',
|
||||
other: '기타 구성',
|
||||
fixedHeader: '고정 상단 바 영역',
|
||||
fixedSidebar: '고정 사이드 바 영역',
|
||||
fixedBody: '고정 컨텐츠 영역',
|
||||
logoAutoSize: '자동 로고 너비',
|
||||
colorfulIcon: '사이드 바 색상 아이콘',
|
||||
sideUniqueOpen: '메뉴 독점 확장',
|
||||
weakMode: '색 약화 모드 켜기',
|
||||
showFooter: '글로벌 바닥 글 켜기',
|
||||
showTabs: '여러 탭 열기',
|
||||
tabStyle: '탭 표시 스타일',
|
||||
tabStyles: {
|
||||
default: '기본',
|
||||
dot: '도트',
|
||||
card: '카드'
|
||||
},
|
||||
tips: '수정 후에는 로컬로 캐시되며 다음에 열 때 테마 구성이 기억됩니다.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: '최신 정보',
|
||||
size: '밀도',
|
||||
sizeOption: {
|
||||
large: '느슨하게',
|
||||
medium: '기본',
|
||||
small: '매질',
|
||||
mini: '콤팩트'
|
||||
},
|
||||
columns: '열 설정',
|
||||
columnsOption: {
|
||||
columns: '열 설정',
|
||||
reset: '초기화',
|
||||
index: '일련 번호',
|
||||
selection: '列选择',
|
||||
untitled: '제목 없음'
|
||||
},
|
||||
fullscreen: '전체 화면',
|
||||
|
||||
},
|
||||
fileList: {
|
||||
selectAll: '모두 선택',
|
||||
selectTips: '선택된 {total} 파일/폴더',
|
||||
fileName: '파일 이름',
|
||||
fileSize: '크기',
|
||||
fileTimestamp: '수정 날짜'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: '크게 하다',
|
||||
zoomOut: '축소',
|
||||
rotateLeft: '왼쪽으로 회전',
|
||||
rotateRight: '오른쪽으로 회전',
|
||||
moveLeft: '왼쪽으로 이동',
|
||||
moveRight: '오른쪽으로 이동',
|
||||
moveUp: '이동',
|
||||
moveDown: '아래로 이동',
|
||||
flipX: '좌우로 뒤집기',
|
||||
flipY: '거꾸로 뒤집기',
|
||||
reset: '재시작',
|
||||
upload: '이미지 선택',
|
||||
ok: '확인',
|
||||
title: '사진 자르기'
|
||||
},
|
||||
map: {
|
||||
title: '지역 선택',
|
||||
placeholder: '입력하세요',
|
||||
message: '위치를 선택하려면 목록을 클릭하십시오',
|
||||
ok: '확인'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/ku_IQ.js
Normal file
113
src/components/ele-admin-pro/packages/lang/ku_IQ.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 库尔德语 */
|
||||
import lang from 'ant-design-vue/es/locale/ku_IQ';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Hênikkirin',
|
||||
fullscreen: 'Dîmendera tevahî',
|
||||
fullscreenExit: 'Dîmendera tevahî',
|
||||
closeLeft: 'Çep bigire',
|
||||
closeRight: 'Rast bigire',
|
||||
closeOther: 'Yê din bigire',
|
||||
closeAll: 'Girtî Hemî'
|
||||
},
|
||||
setting: {
|
||||
title: 'Sazkirina Temayê',
|
||||
sideStyles: {
|
||||
dark: 'Tenişta tarî',
|
||||
light: 'Milê sivik'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Sernavê ronahî',
|
||||
dark: 'Sernavê tarî',
|
||||
primary: 'Sernavê bingehîn'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'hêl qerta xûrekê',
|
||||
top: 'lûtik qerta xûrekê',
|
||||
mix: 'lihevxitin qerta xûrekê'
|
||||
},
|
||||
colors: {
|
||||
default: 'roj şîn',
|
||||
dust: 'toza şîn',
|
||||
sunset: 'rojava porteqalî',
|
||||
volcano: 'çîyayê agirî',
|
||||
purple: 'binefşî zêrîn',
|
||||
cyan: 'cyan',
|
||||
green: 'kesk polar',
|
||||
geekblue: 'geek blue'
|
||||
},
|
||||
darkMode: 'moda tarî',
|
||||
layoutStyle: 'moda navîgasyonê',
|
||||
sideMenuStyle: 'Menu menu du qat',
|
||||
bodyFull: 'fullscreen laş',
|
||||
other: 'mîhengê din',
|
||||
fixedHeader: 'sernavê sabît',
|
||||
fixedSidebar: 'keviya kêlekê sabît',
|
||||
fixedBody: 'laşê sabit',
|
||||
logoAutoSize: 'adaptekirina logoyê',
|
||||
colorfulIcon: 'îkona rengîn',
|
||||
sideUniqueOpen: 'menu yekta vekirî',
|
||||
weakMode: 'moda lawaz',
|
||||
showFooter: 'footer nîşan bide',
|
||||
showTabs: 'taban nîşan bide',
|
||||
tabStyle: 'şêwaza tabê',
|
||||
tabStyles: {
|
||||
default: 'Destçûnî',
|
||||
dot: 'Dot',
|
||||
card: 'Qert'
|
||||
},
|
||||
tips: 'Gava ku hûn vebikin dê veavakirina we bi bîr bîne.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Hênikkirin',
|
||||
size: 'Density',
|
||||
sizeOption: {
|
||||
large: 'Sivik',
|
||||
medium: 'Destçûnî',
|
||||
small: 'Dûwemdor',
|
||||
mini: 'Gişt'
|
||||
},
|
||||
columns: 'Stûn',
|
||||
columnsOption: {
|
||||
columns: 'Stûn',
|
||||
reset: 'Reset bikin',
|
||||
index: 'Jimare',
|
||||
selection: 'Neqînî',
|
||||
untitled: 'Bê sernav'
|
||||
},
|
||||
fullscreen: 'dîmendera tevahî'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Hemî hilbijêrin',
|
||||
selectTips: 'Hilbijartin {total} dosî/peldank',
|
||||
fileName: 'Nav',
|
||||
fileSize: 'Mezinayî',
|
||||
fileTimestamp: 'paşîn hate guherandin'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Mezin bike',
|
||||
zoomOut: 'Dûr xistin',
|
||||
rotateLeft: 'Çepê Zivirandin',
|
||||
rotateRight: 'Rast Bike',
|
||||
moveLeft: 'Çepê Bizivirin',
|
||||
moveRight: 'Rast Bike',
|
||||
moveUp: 'Derketina jor',
|
||||
moveDown: 'Dakêşin Jêr',
|
||||
flipX: 'FlipX',
|
||||
flipY: 'FlipY',
|
||||
reset: 'Reset',
|
||||
upload: 'Upload',
|
||||
ok: 'Temam',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Navnîşan',
|
||||
placeholder: 'Binivîse',
|
||||
message: 'Ji kerema xwe navnîşanek hilbijêrin',
|
||||
ok: 'Temam'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/lv_LV.js
Normal file
113
src/components/ele-admin-pro/packages/lang/lv_LV.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 拉脱维亚语 */
|
||||
import lang from 'ant-design-vue/es/locale/lv_LV';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'atjaunot',
|
||||
fullscreen: 'Pilnekrāna režīmā',
|
||||
fullscreenExit: 'Pilnekrāna režīmā',
|
||||
closeLeft: 'Aizvērt pa kreisi',
|
||||
closeRight: 'Aizveriet labo pusi',
|
||||
closeOther: 'Aizvērt citu',
|
||||
closeAll: 'Aizvērt visu'
|
||||
},
|
||||
setting: {
|
||||
title: 'Tēmas iestatīšana',
|
||||
sideStyles: {
|
||||
dark: 'Tumšā sānjosla',
|
||||
light: 'Viegla sānjosla'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Gaismas galvene',
|
||||
dark: 'Tumša galvene',
|
||||
primary: 'Galvenā galvene'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Sānu izvēlnes izkārtojums',
|
||||
top: 'Augšējās izvēlnes izkārtojums',
|
||||
mix: 'Sajaukt izvēlnes izkārtojumu'
|
||||
},
|
||||
colors: {
|
||||
default: 'Diennakts zils',
|
||||
dust: 'Putekļu zils',
|
||||
sunset: 'Saulrieta oranža',
|
||||
volcano: 'Vulkāns',
|
||||
purple: 'Zeltaini violets',
|
||||
cyan: 'Ciāna',
|
||||
green: 'Polārā zaļā krāsā',
|
||||
geekblue: 'Geek zils'
|
||||
},
|
||||
darkMode: 'Tumšais režīms',
|
||||
layoutStyle: 'Navigācijas režīms',
|
||||
sideMenuStyle: 'Sānjoslas dubultā izvēlne',
|
||||
bodyFull: 'Virsbūve pilnekrāna režīmā',
|
||||
other: 'Cits iestatījums',
|
||||
fixedHeader: 'Fiksēta galvene',
|
||||
fixedSidebar: 'Fiksēta sānjosla',
|
||||
fixedBody: 'Fiksēts korpuss',
|
||||
logoAutoSize: 'Logotipa pielāgošana',
|
||||
colorfulIcon: 'Krāsaina ikona',
|
||||
sideUniqueOpen: 'Izvēlne Unikāli Atvērt',
|
||||
weakMode: 'Vājš režīms',
|
||||
showFooter: 'Rādīt kājeni',
|
||||
showTabs: 'Rādīt cilnes',
|
||||
tabStyle: 'Cilnes stils',
|
||||
tabStyles: {
|
||||
default: 'Noklusējums',
|
||||
dot: 'Punkts',
|
||||
card: 'Karte'
|
||||
},
|
||||
tips: 'Nākamo reizi, kad to atvērsit, tā atcerēsies jūsu konfigurāciju.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'atjaunot',
|
||||
size: 'Blīvums',
|
||||
sizeOption: {
|
||||
large: 'Viegli',
|
||||
medium: 'Noklusējums',
|
||||
small: 'Sekundāra',
|
||||
mini: 'Kompakts'
|
||||
},
|
||||
columns: 'Kolonnas',
|
||||
columnsOption: {
|
||||
columns: 'Kolonnas',
|
||||
reset: 'Atiestatīt',
|
||||
index: 'Skaitļi',
|
||||
selection: 'Atlase',
|
||||
untitled: 'Bez nosaukuma'
|
||||
},
|
||||
fullscreen: 'Pilnekrāna režīmā'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Izvēlēties visus',
|
||||
selectTips: 'Atlasīts {total} failu/direktorijā',
|
||||
fileName: 'Nosaukums',
|
||||
fileSize: 'Izmērs',
|
||||
fileTimestamp: 'Pēdējoreiz modificēts'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Pietuvināt',
|
||||
zoomOut: 'Attālināt',
|
||||
rotateLeft: 'Pagriezt pa kreisi',
|
||||
rotateRight: 'Pagrieziet pa labi',
|
||||
moveLeft: 'Pārvietoties pa kreisi',
|
||||
moveRight: 'Kusties pa labi',
|
||||
moveUp: 'Virzīties uz augšu',
|
||||
moveDown: 'Pārvietoties uz leju',
|
||||
flipX: 'Apvērst X',
|
||||
flipY: 'Pārvērst Y',
|
||||
reset: 'Atiestatīt',
|
||||
upload: 'Augšupielādēt',
|
||||
ok: 'Labi',
|
||||
title: 'augkopējs'
|
||||
},
|
||||
map: {
|
||||
title: 'Adrese',
|
||||
placeholder: 'Ievadīt atslēgvārdu',
|
||||
message: 'Lūdzu, izvēlieties adresi',
|
||||
ok: 'Labi'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/mk_MK.js
Normal file
113
src/components/ele-admin-pro/packages/lang/mk_MK.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 马其顿语 */
|
||||
import lang from 'ant-design-vue/es/locale/mk_MK';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Освежи',
|
||||
fullscreen: 'Цел екран',
|
||||
fullscreenExit: 'Цел екран',
|
||||
closeLeft: 'Затвори лево',
|
||||
closeRight: 'Затвори десно',
|
||||
closeOther: 'Затвори други',
|
||||
closeAll: 'Затвори ги сите'
|
||||
},
|
||||
setting: {
|
||||
title: 'Тема за поставување',
|
||||
sideStyles: {
|
||||
dark: 'Темна странична лента',
|
||||
light: 'Лесна странична лента'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Светло заглавие',
|
||||
dark: 'Темно заглавие',
|
||||
primary: 'Примарен заглавие'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Распоред на странично мени',
|
||||
top: 'Врвен распоред на менито',
|
||||
mix: 'Распоред на мени'
|
||||
},
|
||||
colors: {
|
||||
default: 'Ден на разденување сино',
|
||||
dust: 'Сина прашина',
|
||||
sunset: 'Зајдисонце портокалова',
|
||||
volcano: 'Вулкан',
|
||||
purple: 'Златна виолетова',
|
||||
cyan: 'Цијан',
|
||||
green: 'Поларно зелено',
|
||||
geekblue: 'Гик Блу'
|
||||
},
|
||||
darkMode: 'Темен режим',
|
||||
layoutStyle: 'Режим на навигација',
|
||||
sideMenuStyle: 'Странична двојно мени',
|
||||
bodyFull: 'Цел екран на телото',
|
||||
other: 'Друго поставување',
|
||||
fixedHeader: 'Фиксен заглавие',
|
||||
fixedSidebar: 'Поправена странична лента',
|
||||
fixedBody: 'Фиксно тело',
|
||||
logoAutoSize: 'Адаптација на логото',
|
||||
colorfulIcon: 'Шарена икона',
|
||||
sideUniqueOpen: 'Мени Единствено отворено',
|
||||
weakMode: 'Слаб режим',
|
||||
showFooter: 'Покажи подножје',
|
||||
showTabs: 'Покажи јазичиња',
|
||||
tabStyle: 'Стил на јазиче',
|
||||
tabStyles: {
|
||||
default: 'Стандардно',
|
||||
dot: 'Точка',
|
||||
card: 'Картичка'
|
||||
},
|
||||
tips: 'Willе ја запомни вашата конфигурација следниот пат кога ќе ја отворите.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Освежи',
|
||||
size: 'Густина',
|
||||
sizeOption: {
|
||||
large: 'Лесно',
|
||||
medium: 'Стандардно',
|
||||
small: 'Средно',
|
||||
mini: 'Компактен'
|
||||
},
|
||||
columns: 'Колумни',
|
||||
columnsOption: {
|
||||
columns: 'Колумни',
|
||||
reset: 'Ресетирај',
|
||||
index: 'Броеви',
|
||||
selection: 'Избор',
|
||||
untitled: 'Без наслов'
|
||||
},
|
||||
fullscreen: 'Цел екран'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Селектирај се',
|
||||
selectTips: 'Избрани {total} досие/директориум',
|
||||
fileName: 'Име',
|
||||
fileSize: 'Големина',
|
||||
fileTimestamp: 'LastModified'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Зумирај',
|
||||
zoomOut: 'Зумирај',
|
||||
rotateLeft: 'Ротирај лево',
|
||||
rotateRight: 'RotateRight',
|
||||
moveLeft: 'Помести се на лево',
|
||||
moveRight: 'Движете се надесно',
|
||||
moveUp: 'MoveUp',
|
||||
moveDown: 'Да се движи надолу',
|
||||
flipX: 'Флип X',
|
||||
flipY: 'Флип Y',
|
||||
reset: 'Ресетирај',
|
||||
upload: 'Поставете',
|
||||
ok: 'добро',
|
||||
title: 'Кропер'
|
||||
},
|
||||
map: {
|
||||
title: 'Адреса',
|
||||
placeholder: 'Внесете клучен збор',
|
||||
message: 'Ве молиме изберете адреса',
|
||||
ok: 'добро'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/mn_MN.js
Normal file
113
src/components/ele-admin-pro/packages/lang/mn_MN.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 蒙古语 */
|
||||
import lang from 'ant-design-vue/es/locale/mn_MN';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Сэргээх',
|
||||
fullscreen: 'Дэлгэц дүүрэн',
|
||||
fullscreenExit: 'Дэлгэц дүүрэн',
|
||||
closeLeft: 'Зүүн хаах',
|
||||
closeRight: 'Баруун хаах',
|
||||
closeOther: 'Бусадыг хаах',
|
||||
closeAll: 'Бүгдийг хаах'
|
||||
},
|
||||
setting: {
|
||||
title: 'Сэдвийн тохиргоо',
|
||||
sideStyles: {
|
||||
dark: 'Харанхуй хажуугийн самбар',
|
||||
light: 'Хөнгөн хажуугийн самбар'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Хөнгөн толгой',
|
||||
dark: 'Харанхуй толгой',
|
||||
primary: 'Үндсэн толгой'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Хажуугийн цэсний байршил',
|
||||
top: 'Шилдэг цэсийн байршил',
|
||||
mix: 'Холимог цэсийн байршил'
|
||||
},
|
||||
colors: {
|
||||
default: 'Өдрийн цэнхэр',
|
||||
dust: 'Тоос хөх',
|
||||
sunset: 'Нар жаргах улбар шар',
|
||||
volcano: 'Галт уул',
|
||||
purple: 'Алтан ягаан',
|
||||
cyan: 'Цэнхэр',
|
||||
green: 'Алтан гадас',
|
||||
geekblue: 'Geek Цэнхэр'
|
||||
},
|
||||
darkMode: 'Харанхуй горим',
|
||||
layoutStyle: 'Навигацийн горим',
|
||||
sideMenuStyle: 'Хажуугийн давхар цэс',
|
||||
bodyFull: 'Биеийн бүтэн дэлгэц',
|
||||
other: 'Бусад тохиргоо',
|
||||
fixedHeader: 'Тогтмол толгой',
|
||||
fixedSidebar: 'Суурин талын самбар',
|
||||
fixedBody: 'Тогтмол бие',
|
||||
logoAutoSize: 'Логоны тохируулга',
|
||||
colorfulIcon: 'Өнгөт дүрс',
|
||||
sideUniqueOpen: 'Өвөрмөц цэс',
|
||||
weakMode: 'Сул горим',
|
||||
showFooter: 'Хөлийг харуулах',
|
||||
showTabs: 'Табуудыг харуулах',
|
||||
tabStyle: 'Табын хэв маяг',
|
||||
tabStyles: {
|
||||
default: 'Анхдагч',
|
||||
dot: 'Цэг',
|
||||
card: 'Карт'
|
||||
},
|
||||
tips: 'Энэ нь дараагийн удаа нээхэд таны тохиргоог санах болно.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Сэргээх',
|
||||
size: 'Нягт',
|
||||
sizeOption: {
|
||||
large: 'Хялбар',
|
||||
medium: 'Анхдагч',
|
||||
small: 'Хоёрдогч',
|
||||
mini: 'Компакт'
|
||||
},
|
||||
columns: 'Багана',
|
||||
columnsOption: {
|
||||
columns: 'Багана',
|
||||
reset: 'Дахин тохируулах',
|
||||
index: 'Тоо',
|
||||
selection: 'Сонголт',
|
||||
untitled: 'Гарчиггүй'
|
||||
},
|
||||
fullscreen: 'Дэлгэц дүүрэн'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Бүгдийг сонгох',
|
||||
selectTips: 'Сонгосон {total} файл/лавлах',
|
||||
fileName: 'Нэр',
|
||||
fileSize: 'Хэмжээ',
|
||||
fileTimestamp: 'Хамгийн сүүлд өөрчилсөн'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Томруулах',
|
||||
zoomOut: 'Томруулах',
|
||||
rotateLeft: 'Зүүн тийш эргүүлэх',
|
||||
rotateRight: 'Зөв эргүүлэх',
|
||||
moveLeft: 'Зүүн тийш шилжих',
|
||||
moveRight: 'Баруун тийш шилжих',
|
||||
moveUp: 'Дээшээ хөдөл',
|
||||
moveDown: 'Доош шилжих',
|
||||
flipX: 'X-г дарах',
|
||||
flipY: 'Y-г дарна уу',
|
||||
reset: 'Дахин тохируулах',
|
||||
upload: 'Байршуулах',
|
||||
ok: 'Тийм',
|
||||
title: 'Тайруулагч'
|
||||
},
|
||||
map: {
|
||||
title: 'Хаяг',
|
||||
placeholder: 'Утга оруул',
|
||||
message: 'Хаяг сонгоно уу',
|
||||
ok: 'Тийм'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/ms_MY.js
Normal file
113
src/components/ele-admin-pro/packages/lang/ms_MY.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 马来语 */
|
||||
import lang from 'ant-design-vue/es/locale/ms_MY';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Segarkan',
|
||||
fullscreen: 'Skrin penuh',
|
||||
fullscreenExit: 'Skrin penuh',
|
||||
closeLeft: 'Tutup Kiri',
|
||||
closeRight: 'Tutup Kanan',
|
||||
closeOther: 'Tutup Lain',
|
||||
closeAll: 'Tutup semua'
|
||||
},
|
||||
setting: {
|
||||
title: 'Penetapan Tema',
|
||||
sideStyles: {
|
||||
dark: 'Bilah Sisi Gelap',
|
||||
light: 'Bilah Sisi Cahaya'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Tajuk Cahaya',
|
||||
dark: 'Tajuk Gelap',
|
||||
primary: 'Tajuk Utama'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Susun atur Menu Sampingan',
|
||||
top: 'Susun atur Menu Teratas',
|
||||
mix: 'Susun atur Menu Campuran'
|
||||
},
|
||||
colors: {
|
||||
default: 'Daybreak Biru',
|
||||
dust: 'Debu Biru',
|
||||
sunset: 'Jingga Matahari Terbenam',
|
||||
volcano: 'Gunung Berapi',
|
||||
purple: 'Ungu Emas',
|
||||
cyan: 'Sian',
|
||||
green: 'Hijau Kutub',
|
||||
geekblue: 'Geek Biru'
|
||||
},
|
||||
darkMode: 'Mod Gelap',
|
||||
layoutStyle: 'Mod Navigasi',
|
||||
sideMenuStyle: 'Menu Berkembar Sisi',
|
||||
bodyFull: 'Skrin Penuh Badan',
|
||||
other: 'Tetapan Lain',
|
||||
fixedHeader: 'Tajuk Tetap',
|
||||
fixedSidebar: 'Membetulkan Sidebar',
|
||||
fixedBody: 'Memperbaiki Badan',
|
||||
logoAutoSize: 'Penyesuaian Logo',
|
||||
colorfulIcon: 'Ikon Berwarna-warni',
|
||||
sideUniqueOpen: 'Menu Terbuka Unik',
|
||||
weakMode: 'Mod Lemah',
|
||||
showFooter: 'Tunjukkan Footer',
|
||||
showTabs: 'Tunjukkan Tab',
|
||||
tabStyle: 'Gaya Tab',
|
||||
tabStyles: {
|
||||
default: 'Lalai',
|
||||
dot: 'Dot',
|
||||
card: 'Kad'
|
||||
},
|
||||
tips: 'Ia akan mengingati konfigurasi anda pada saat anda membukanya.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Segarkan',
|
||||
size: 'Ketumpatan',
|
||||
sizeOption: {
|
||||
large: 'Mudah',
|
||||
medium: 'Lalai',
|
||||
small: 'Menengah',
|
||||
mini: 'Ringkas'
|
||||
},
|
||||
columns: 'Lajur',
|
||||
columnsOption: {
|
||||
columns: 'Lajur',
|
||||
reset: 'Tetapkan semula',
|
||||
index: 'Nombor',
|
||||
selection: 'Pemilihan',
|
||||
untitled: 'Tanpa tajuk'
|
||||
},
|
||||
fullscreen: 'Skrin penuh'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Pilih semua',
|
||||
selectTips: 'Terpilih {total} fail/direktori',
|
||||
fileName: 'Nama',
|
||||
fileSize: 'Saiz',
|
||||
fileTimestamp: 'Terakhir Diubahsuai'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Mengezum masuk',
|
||||
zoomOut: 'Zum keluar',
|
||||
rotateLeft: 'Pusing kiri',
|
||||
rotateRight: 'Putar ke Kanan',
|
||||
moveLeft: 'Bergerak ke kiri',
|
||||
moveRight: 'Bergerak ke Kanan',
|
||||
moveUp: 'Bergerak ke atas',
|
||||
moveDown: 'Bergerak ke bawah',
|
||||
flipX: 'Balik X',
|
||||
flipY: 'Balik Y',
|
||||
reset: 'Tetapkan semula',
|
||||
upload: 'Muat naik',
|
||||
ok: 'OK',
|
||||
title: 'Pemangkas'
|
||||
},
|
||||
map: {
|
||||
title: 'Alamat',
|
||||
placeholder: 'Masukkan kata kunci',
|
||||
message: 'Sila pilih alamat',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/nb_NO.js
Normal file
113
src/components/ele-admin-pro/packages/lang/nb_NO.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 挪威语 */
|
||||
import lang from 'ant-design-vue/es/locale/nb_NO';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'Forfriske',
|
||||
fullscreen: 'Full skjerm',
|
||||
fullscreenExit: 'Full skjerm',
|
||||
closeLeft: 'Lukk Venstre',
|
||||
closeRight: 'Lukk høyre',
|
||||
closeOther: 'Lukk Annet',
|
||||
closeAll: 'Lukk alle'
|
||||
},
|
||||
setting: {
|
||||
title: 'Temainnstilling',
|
||||
sideStyles: {
|
||||
dark: 'Mørk sidefelt',
|
||||
light: 'Lys sidefelt'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'Lett topptekst',
|
||||
dark: 'Mørk topptekst',
|
||||
primary: 'Primær topptekst'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'Sidemenyoppsett',
|
||||
top: 'Toppmenyoppsett',
|
||||
mix: 'Mix Menu Layout'
|
||||
},
|
||||
colors: {
|
||||
default: 'Daybreak Blue',
|
||||
dust: 'Støvblå',
|
||||
sunset: 'Sunset Orange',
|
||||
volcano: 'Vulkan',
|
||||
purple: 'Golden Purple',
|
||||
cyan: 'Cyan',
|
||||
green: 'Polar Green',
|
||||
geekblue: 'Geek Blue'
|
||||
},
|
||||
darkMode: 'Mørk modus',
|
||||
layoutStyle: 'Navigasjonsmodus',
|
||||
sideMenuStyle: 'Dobbel meny på sidelinjen',
|
||||
bodyFull: 'Kropp fullskjerm',
|
||||
other: 'Andre innstillinger',
|
||||
fixedHeader: 'Fast topptekst',
|
||||
fixedSidebar: 'Fast sidefelt',
|
||||
fixedBody: 'Fast kropp',
|
||||
logoAutoSize: 'Logo Tilpasning',
|
||||
colorfulIcon: 'Fargerikt ikon',
|
||||
sideUniqueOpen: 'Meny Unik Åpne',
|
||||
weakMode: 'Svak modus',
|
||||
showFooter: 'Vis bunntekst',
|
||||
showTabs: 'Vis faner',
|
||||
tabStyle: 'Tab Style',
|
||||
tabStyles: {
|
||||
default: 'Misligholde',
|
||||
dot: 'Punktum',
|
||||
card: 'Kort'
|
||||
},
|
||||
tips: 'Den vil huske konfigurasjonen din neste gang du åpner den.'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'Forfriske',
|
||||
size: 'Tetthet',
|
||||
sizeOption: {
|
||||
large: 'Lett',
|
||||
medium: 'Misligholde',
|
||||
small: 'Sekundær',
|
||||
mini: 'Kompakt'
|
||||
},
|
||||
columns: 'Kolonner',
|
||||
columnsOption: {
|
||||
columns: 'Kolonner',
|
||||
reset: 'Nullstille',
|
||||
index: 'Tall',
|
||||
selection: 'Utvalg',
|
||||
untitled: 'Uten navn'
|
||||
},
|
||||
fullscreen: 'Full skjerm'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'Velg alle',
|
||||
selectTips: 'Valgt {total} fil/katalog',
|
||||
fileName: 'Navn',
|
||||
fileSize: 'Størrelse',
|
||||
fileTimestamp: 'Sist endret'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'Zoom inn',
|
||||
zoomOut: 'Zoome ut',
|
||||
rotateLeft: 'Rotér mot venstre',
|
||||
rotateRight: 'Roter til høyre',
|
||||
moveLeft: 'Gå til venstre',
|
||||
moveRight: 'Flytt til høyre',
|
||||
moveUp: 'Flytte opp',
|
||||
moveDown: 'Flytt ned',
|
||||
flipX: 'FlipX',
|
||||
flipY: 'FlipY',
|
||||
reset: 'Nullstille',
|
||||
upload: 'Laste opp',
|
||||
ok: 'OK',
|
||||
title: 'Cropper'
|
||||
},
|
||||
map: {
|
||||
title: 'Adresse',
|
||||
placeholder: 'Skriv inn nøkkelord',
|
||||
message: 'Velg en adresse',
|
||||
ok: 'OK'
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/components/ele-admin-pro/packages/lang/ne_NP.js
Normal file
113
src/components/ele-admin-pro/packages/lang/ne_NP.js
Normal file
@@ -0,0 +1,113 @@
|
||||
/** 尼泊尔语 */
|
||||
import lang from 'ant-design-vue/es/locale/ne_NP';
|
||||
|
||||
export default {
|
||||
...lang,
|
||||
ele: {
|
||||
tabs: {
|
||||
reload: 'रिफ्रेस गर्नुहोस्',
|
||||
fullscreen: 'पूर्णस्क्रीन',
|
||||
fullscreenExit: 'पूर्णस्क्रीन',
|
||||
closeLeft: 'बाँया बन्द गर्नुहोस्',
|
||||
closeRight: 'दाँया बन्द गर्नुहोस्',
|
||||
closeOther: 'बन्द गर्नुहोस्',
|
||||
closeAll: 'सबै बन्द गर्नुहोस्'
|
||||
},
|
||||
setting: {
|
||||
title: 'थिम सेटिंग',
|
||||
sideStyles: {
|
||||
dark: 'गाढा साइडबार',
|
||||
light: 'लाइट साइडबार'
|
||||
},
|
||||
headStyles: {
|
||||
light: 'हल्का हेडर',
|
||||
dark: 'गाढा हेडर',
|
||||
primary: 'प्राथमिक हेडर'
|
||||
},
|
||||
layoutStyles: {
|
||||
side: 'साइड मेनू लेआउट',
|
||||
top: 'शीर्ष मेनू लेआउट',
|
||||
mix: 'मेनू लेआउट मिक्स गर्नुहोस्'
|
||||
},
|
||||
colors: {
|
||||
default: 'डेब्रेक निलो',
|
||||
dust: 'धुलो निलो',
|
||||
sunset: 'सूर्यास्त सुन्तला',
|
||||
volcano: 'ज्वालामुखी',
|
||||
purple: 'गोल्डन बैजनी',
|
||||
cyan: 'सियान',
|
||||
green: 'ध्रुव हरियो',
|
||||
geekblue: 'गीक निलो'
|
||||
},
|
||||
darkMode: 'गाढा मोड',
|
||||
layoutStyle: 'नेभिगेसन मोड',
|
||||
sideMenuStyle: 'साइडबार डबल मेनू',
|
||||
bodyFull: 'शरीर पूर्णस्क्रीन',
|
||||
other: 'अन्य सेटिंग्स',
|
||||
fixedHeader: 'फिक्स्ड हेडर',
|
||||
fixedSidebar: 'फिक्स साइडबार',
|
||||
fixedBody: 'स्थिर शरीर',
|
||||
logoAutoSize: 'लोगो अनुकूलन',
|
||||
colorfulIcon: 'रंगीन प्रतिमा',
|
||||
sideUniqueOpen: 'मेनू अद्वितीय खोल्नुहोस्',
|
||||
weakMode: 'कमजोर मोड',
|
||||
showFooter: 'फुटर देखाउनुहोस्',
|
||||
showTabs: 'ट्याबहरू देखाउनुहोस्',
|
||||
tabStyle: 'ट्याब शैली',
|
||||
tabStyles: {
|
||||
default: 'पूर्वनिर्धारित',
|
||||
dot: 'डट',
|
||||
card: 'कार्ड'
|
||||
},
|
||||
tips: 'यो तपाईको कन्फिगरेसन याद आउँदछ जुन तपाईले अर्को पटक खोल्नु भयो।'
|
||||
},
|
||||
tableTools: {
|
||||
refresh: 'रिफ्रेस गर्नुहोस्',
|
||||
size: 'घनत्व',
|
||||
sizeOption: {
|
||||
large: 'सजिलो',
|
||||
medium: 'पूर्वनिर्धारित',
|
||||
small: 'माध्यमिक',
|
||||
mini: 'कम्प्याक्ट'
|
||||
},
|
||||
columns: 'स्तम्भहरू',
|
||||
columnsOption: {
|
||||
columns: 'स्तम्भहरू',
|
||||
reset: 'रिसेट गर्नुहोस्',
|
||||
index: 'नम्बरहरू',
|
||||
selection: 'छनौट',
|
||||
untitled: 'शीर्षकविहीन'
|
||||
},
|
||||
fullscreen: 'पूर्णस्क्रीन'
|
||||
},
|
||||
fileList: {
|
||||
selectAll: 'सबै छान्नु',
|
||||
selectTips: 'चयन गरिएको {total} फाईल/निर्देशिका',
|
||||
fileName: 'नाम',
|
||||
fileSize: 'आकार',
|
||||
fileTimestamp: 'अन्तिम परिमार्जित'
|
||||
},
|
||||
cropper: {
|
||||
zoomIn: 'जुम इन',
|
||||
zoomOut: 'जुम आउट',
|
||||
rotateLeft: 'बाँया घुमाउनुहोस्',
|
||||
rotateRight: 'दाँया घुमाउनुहोस्',
|
||||
moveLeft: 'बाँया सार्नुहोस्',
|
||||
moveRight: 'दायाँ सार्नुहोस्',
|
||||
moveUp: 'माथि बढ्नु',
|
||||
moveDown: 'तल झर',
|
||||
flipX: 'फ्लिप एक्स',
|
||||
flipY: 'फ्लिप वाई',
|
||||
reset: 'रिसेट गर्नुहोस्',
|
||||
upload: 'अपलोड गर्नुहोस्',
|
||||
ok: 'सिद्द्याउनु',
|
||||
title: 'क्रपर'
|
||||
},
|
||||
map: {
|
||||
title: 'ठेगाना',
|
||||
placeholder: 'कुञ्जी शब्द प्रविष्ट गर्नुहोस्',
|
||||
message: 'कृपया ठेगाना चयन गर्नुहोस्',
|
||||
ok: 'सिद्द्याउनु'
|
||||
}
|
||||
}
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user