lisang
/
iview-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #701 from iview/2.0 

2.0
This commit is contained in:
Lison 2018-06-07 17:23:36 +08:00 committed by GitHub
parent b3ec75aef3 9ecde9ce2a
commit 55c5528aea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 376 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -14881,9 +14881,9 @@
"dev": true
},
"vue-i18n": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-5.0.3.tgz",
"integrity": "sha1-ttlsyDJgQjfmE53kceDUyCCu2+0="
"version": "7.8.0",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-7.8.0.tgz",
"integrity": "sha512-06lw8q6+hWhcCq1O5hw7pZ0CYKcY8CFV4iUjKctz5VRXTVvYC/soEfEQyWrQ3qjYHNCtePv/YieArm3pF70JVg=="
},
"vue-loader": {
"version": "15.0.11",

2
package.json
View File

@ -23,7 +23,7 @@
"sortablejs": "^1.7.0",
"tinymce": "^4.7.11",
"vue": "^2.5.10",
"vue-i18n": "^5.0.3",
"vue-i18n": "^7.8.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},

31
src/assets/icons/iconfont.css Normal file
View File

@ -0,0 +1,31 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1528361751996'); /* IE9*/
src: url('iconfont.eot?t=1528361751996#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1528361751996') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1528361751996#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bear:before { content: "\e600"; }
.icon-resize-vertical:before { content: "\e7c3"; }
.icon-frown:before { content: "\e77e"; }
.icon-meh:before { content: "\e780"; }
.icon-smile:before { content: "\e783"; }
.icon-man:before { content: "\e7e2"; }
.icon-woman:before { content: "\e7e5"; }

BIN
src/assets/icons/iconfont.eot Normal file
View File

Binary file not shown.

54
src/assets/icons/iconfont.svg Normal file
View File

@ -0,0 +1,54 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="bear" unicode="&#58880;" d="M1024 683.008q0-70.656-46.08-121.856 46.08-89.088 46.08-193.536 0-96.256-39.936-181.248t-109.568-147.968-162.816-99.328-199.68-36.352-199.68 36.352-162.304 99.328-109.568 147.968-40.448 181.248q0 104.448 46.08 193.536-46.08 51.2-46.08 121.856 0 37.888 13.824 71.168t37.376 58.368 55.808 39.424 68.096 14.336q43.008 0 78.848-18.432t59.392-50.176q46.08 17.408 96.256 26.624t102.4 9.216 102.4-9.216 96.256-26.624q24.576 31.744 59.904 50.176t78.336 18.432q36.864 0 68.608-14.336t55.296-39.424 37.376-58.368 13.824-71.168zM205.824 268.288q10.24 0 18.944 10.24t15.36 28.672 10.24 42.496 3.584 51.712-3.584 51.712-10.24 41.984-15.36 28.16-18.944 10.24q-9.216 0-17.92-10.24t-15.36-28.16-10.752-41.984-4.096-51.712 4.096-51.712 10.752-42.496 15.36-28.672 17.92-10.24zM512-31.744000000000028q53.248 0 99.84 13.312t81.408 35.84 54.784 52.736 19.968 65.024q0 33.792-19.968 64t-54.784 52.736-81.408 35.84-99.84 13.312-99.84-13.312-81.408-35.84-54.784-52.736-19.968-64q0-34.816 19.968-65.024t54.784-52.736 81.408-35.84 99.84-13.312zM818.176 268.288q10.24 0 18.944 10.24t15.36 28.672 10.24 42.496 3.584 51.712-3.584 51.712-10.24 41.984-15.36 28.16-18.944 10.24q-9.216 0-17.92-10.24t-15.36-28.16-10.752-41.984-4.096-51.712 4.096-51.712 10.752-42.496 15.36-28.672 17.92-10.24zM512 235.51999999999998q39.936 0 68.096-9.728t28.16-24.064-28.16-24.064-68.096-9.728-68.096 9.728-28.16 24.064 28.16 24.064 68.096 9.728z" horiz-adv-x="1024" />
<glyph glyph-name="resize-vertical" unicode="&#59331;" d="M512 896C229.248 896 0 666.752 0 384s229.248-512 512-512 512 229.248 512 512S794.752 896 512 896zM576 192l64 0-128-128-128 128 64 0L448 576l-64 0 128 128 128-128-64 0L576 192z" horiz-adv-x="1024" />
<glyph glyph-name="frown" unicode="&#59262;" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM512 363c-85.5 0-155.6-67.3-160-151.6-0.2-4.6 3.4-8.4 8-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 259.9 461.5 299 512 299s92.1-39.1 95.8-88.6c0.3-4.2 3.9-7.4 8.1-7.4H664c4.6 0 8.2 3.8 8 8.4-4.4 84.3-74.5 151.6-160 151.6z" horiz-adv-x="1024" />
<glyph glyph-name="meh" unicode="&#59264;" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM664 331H360c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8z" horiz-adv-x="1024" />
<glyph glyph-name="smile" unicode="&#59267;" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM664 363h-48.1c-4.2 0-7.8-3.2-8.1-7.4C604 306.1 562.5 267 512 267s-92.1 39.1-95.8 88.6c-0.3 4.2-3.9 7.4-8.1 7.4H360c-4.6 0-8.2-3.8-8-8.4 4.4-84.3 74.5-151.6 160-151.6s155.6 67.3 160 151.6c0.2 4.6-3.4 8.4-8 8.4z" horiz-adv-x="1024" />
<glyph glyph-name="man" unicode="&#59362;" d="M874 776H622c-3.3 0-6-2.7-6-6v-56c0-3.3 2.7-6 6-6h160.4L583.1 508.7c-50 38.5-111 59.3-175.1 59.3-76.9 0-149.3-30-203.6-84.4S120 356.9 120 280s30-149.3 84.4-203.6C258.7 22 331.1-8 408-8s149.3 30 203.6 84.4C666 130.7 696 203.1 696 280c0 64.1-20.8 124.9-59.2 174.9L836 654.1V494c0-3.3 2.7-6 6-6h56c3.3 0 6 2.7 6 6V746c0 16.5-13.5 30-30 30zM408 68c-116.9 0-212 95.1-212 212s95.1 212 212 212 212-95.1 212-212-95.1-212-212-212z" horiz-adv-x="1024" />
<glyph glyph-name="woman" unicode="&#59365;" d="M909.7 739.4l-42.2 42.2c-3.1 3.1-8.2 3.1-11.3 0L764 689.4l-84.2 84.2c-3.1 3.1-8.2 3.1-11.3 0l-42.1-42.1c-3.1-3.1-3.1-8.1 0-11.3l84.2-84.2-135.5-135.3c-50 38.5-111 59.3-175.1 59.3-76.9 0-149.3-30-203.6-84.4S112 348.9 112 272s30-149.3 84.4-203.6C250.7 14 323.1-16 400-16s149.3 30 203.6 84.4C658 122.7 688 195.1 688 272c0 64.2-20.9 125.1-59.3 175.1l135.4 135.4 84.2-84.2c3.1-3.1 8.2-3.1 11.3 0l42.1 42.1c3.1 3.1 3.1 8.1 0 11.3l-84.2 84.2 92.2 92.2c3.1 3.1 3.1 8.2 0 11.3zM400 60c-116.9 0-212 95.1-212 212s95.1 212 212 212 212-95.1 212-212-95.1-212-212-212z" horiz-adv-x="1024" />
</font>
</defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/assets/icons/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/icons/iconfont.woff Normal file
View File

Binary file not shown.

42
src/components/common-icon/common-icon.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"/>
</template>
<script>
import Icons from '_c/icons'
export default {
name: 'CommonIcon',
components: {Icons},
props: {
type: {
type: String,
required: true
},
color: String,
size: Number
},
computed: {
iconType () {
return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
},
iconName () {
return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
},
iconSize () {
return this.size || (this.iconType === 'Icons' ? 12 : undefined)
},
iconColor () {
return this.color || ''
}
},
methods: {
getCustomIconName (iconName) {
return iconName.slice(1)
}
}
}
</script>
<style>
</style>

2
src/components/common-icon/index.js Normal file
View File

@ -0,0 +1,2 @@
import CommonIcon from './common-icon.vue'
export default CommonIcon

35
src/components/icons/icons.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<i :class="`iconfont icon-${type}`" :style="styles"></i>
</template>
<script>
export default {
name: 'Icons',
props: {
type: {
type: String,
required: true
},
color: {
type: String,
default: '#5c6b77'
},
size: {
type: Number,
default: 16
}
},
computed: {
styles () {
return {
fontSize: `${this.size}px`,
color: this.color
}
}
}
}
</script>
<style>
</style>

2
src/components/icons/index.js Normal file
View File

@ -0,0 +1,2 @@
import Icons from './icons.vue'
export default Icons

51
src/components/split-pane/index.less
View File

@ -1,4 +1,13 @@
@split-prefix-cls: ~"ivu-split";
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
@trigger-bar-background: rgba(23, 35, 61, 0.25);
@trigger-background: #F8F8F9;
@trigger-width: 6px;
@trigger-bar-width: 4px;
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
@trigger-bar-interval: 3px;
@trigger-bar-weight: 1px;
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
.@{split-prefix-cls}{
&-wrapper{
@ -35,19 +44,49 @@
transform: translate(-50%, -50%);
z-index: 10;
}
&-bar-con{
position: absolute;
overflow: hidden;
&.vertical{
left: @trigger-bar-offset;
top: 50%;
height: @trigger-bar-con-height;
transform: translate(0, -50%);
}
&.horizontal{
left: 50%;
top: @trigger-bar-offset;
width: @trigger-bar-con-height;
transform: translate(-50%, 0);
}
}
&-vertical{
width: 6px;
width: @trigger-width;
height: 100%;
background: #F8F8F9;
box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.32);
background: @trigger-background;
box-shadow: @box-shadow;
cursor: col-resize;
.@{split-prefix-cls}-trigger-bar{
width: @trigger-bar-width;
height: 1px;
background: @trigger-bar-background;
float: left;
margin-top: @trigger-bar-interval;
}
}
&-horizontal{
height: 6px;
height: @trigger-width;
width: 100%;
background: #F8F8F9;
box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.32);
background: @trigger-background;
box-shadow: @box-shadow;
cursor: row-resize;
.@{split-prefix-cls}-trigger-bar{
height: @trigger-bar-width;
width: 1px;
background: @trigger-bar-background;
float: left;
margin-right: @trigger-bar-interval;
}
}
}
&-horizontal{

6
src/components/split-pane/split.vue
View File

@ -49,6 +49,12 @@ export default {
default: '40px'
}
},
/**
* Events
* @on-move-start
* @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
* @on-move-end
*/
data () {
return {
prefix: 'ivu-split',

17
src/components/split-pane/trigger.vue
View File

@ -1,5 +1,9 @@
<template>
<div :class="classes"></div>
<div :class="classes">
<div :class="barConClasses">
<i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
</div>
</div>
</template>
<script>
@ -15,10 +19,19 @@ export default {
}
},
computed: {
isVertical () {
return this.mode === 'vertical'
},
classes () {
return [
this.prefix,
this.mode === 'vertical' ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
]
},
barConClasses () {
return [
`${this.prefix}-bar-con`,
this.isVertical ? 'vertical' : 'horizontal'
]
}
}

28
src/locale/index.js
View File

@ -18,18 +18,20 @@ let lang = 'zh-CN'
Vue.config.lang = lang
// vue-i18n 6.x+写法
// Vue.locale = () => {}
// const messages = {
// 'zh-CN': Object.assign(zhCnLocale, customZhCn),
// 'zh-TW': Object.assign(zhTwLocale, customZhTw),
// 'en-US': Object.assign(enUsLocale, customEnUs)
// }
// const i18n = new VueI18n({
// locale: lang,
// messages
// })
Vue.locale = () => {}
const messages = {
'zh-CN': Object.assign(zhCnLocale, customZhCn),
'zh-TW': Object.assign(zhTwLocale, customZhTw),
'en-US': Object.assign(enUsLocale, customEnUs)
}
const i18n = new VueI18n({
locale: lang,
messages
})
export default i18n
// vue-i18n 5.x写法
Vue.locale('zh-CN', Object.assign(zhCnLocale, customZhCn))
Vue.locale('en-US', Object.assign(zhTwLocale, customZhTw))
Vue.locale('zh-TW', Object.assign(enUsLocale, customEnUs))
// Vue.locale('zh-CN', Object.assign(zhCnLocale, customZhCn))
// Vue.locale('en-US', Object.assign(zhTwLocale, customZhTw))
// Vue.locale('zh-TW', Object.assign(enUsLocale, customEnUs))

7
src/main.js
View File

@ -5,13 +5,16 @@ import App from './App'
import router from './router'
import store from './store'
import iView from 'iview'
import '@/locale'
import i18n from '@/locale'
import config from '@/config'
import 'iview/dist/styles/iview.css'
import '@/assets/icons/iconfont.css'
import env from '../config/env'
if (env === 'development') require('@/mock')
Vue.use(iView)
Vue.use(iView, {
i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
/**
* @description 全局注册应用配置

50
src/router/base-router.js
View File

@ -1,50 +0,0 @@
import Main from '@/view/main'
import parentView from '@/components/main/parent-view'
export default [
{
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录'
},
component: () => import('@/view/login/login.vue')
},
{
path: '/',
name: 'index',
// redirect: '/home',
component: Main,
children: [
{
path: 'home',
name: 'home',
component: () => import('@/view/single-page/home')
},
{
path: 'multilevel',
name: 'multilevel',
component: parentView,
children: [
{
path: 'level_1',
name: 'level_1',
component: () => import('@/view/multilevel/level-1.vue')
},
{
path: 'level_2',
name: 'level_2',
component: parentView,
children: [
{
path: 'level_2_1',
name: 'level_2_1',
component: () => import('@/view/multilevel/level-2/level-2-1.vue')
}
]
}
]
}
]
}
]

9
src/router/routers.js
View File

@ -67,6 +67,15 @@ export default [
title: '分割窗口'
},
component: () => import('@/view/components/split-pane/split-pane.vue')
},
{
path: 'icons_page',
name: 'icons_page',
meta: {
icon: '_bear',
title: '自定义图标'
},
component: () => import('@/view/components/icons/icons.vue')
}
]
},

63
src/view/components/icons/icons.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<Row>
<i-col span="16">
<Row v-for="i in (customIconList.length / 3)" :key="`custom-icon-row-${i}`">
<i-col span="8" v-for="item in customIconList.slice((i - 1) * 3, i * 3)" :key="`custom-icon-${item}`">
<Card style="margin: 0 5px 5px; text-align: center;">
<icons :size="30" :type="item"/>
<p class="icon-code">&lt;Icons :size="30" type="{{ item }}"&gt;</p>
<p>&lt;CommonIcon :size="30" type="_{{ item }}"&gt;</p>
</Card>
</i-col>
</Row>
<Row>
<i-col>
<Card style="margin: 0 5px 5px; text-align: center;">
<common-icon :size="30" type="ionic"/>
<p class="icon-code">iView内置图标</p>
<p>&lt;CommonIcon :size="30" type="ionic"&gt;</p>
</Card>
</i-col>
</Row>
</i-col>
<i-col span="8">
<Card>
<p class="intro-p"><Icon style="margin-right: 10px;" :size="10" type="heart"/>Icons组件支持自定义图标的显示，具体自定义图标字体文件的制作请参考文档。</p>
<p class="intro-p"><Icon style="margin-right: 10px;" :size="10" type="heart"/>CommonIcon组件同时支持iView内置图标类型和自定义图标类型，为了区别这两种类型，需要在自定义图标名称前加下划线"_"</p>
</Card>
</i-col>
</Row>
</template>
<script>
import Icons from '_c/icons'
import CommonIcon from '_c/common-icon'
export default {
name: 'icons_pages',
components: {
Icons,
CommonIcon
},
data () {
return {
customIconList: [
'woman',
'man',
'smile',
'meh',
'frown',
'bear'
]
}
}
}
</script>
<style lang="less">
.icon-code{
margin: 20px 0 10px;
}
.intro-p{
margin-bottom: 10px;
}
</style>

25
src/view/components/split-pane/split-pane.vue
View File

@ -5,6 +5,9 @@
<split-pane v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
<div slot="top" class="pane top-pane"></div>
<div slot="bottom" class="pane bottom-pane"></div>
<div slot="trigger" class="custom-trigger">
<icons class="trigger-icon" :size="22" type="resize-vertical" color="#fff"/>
</div>
</split-pane>
</div>
<div slot="right" class="pane right-pane"></div>
@ -14,10 +17,12 @@
<script>
import SplitPane from '_c/split-pane'
import Icons from '_c/icons'
export default {
name: 'split_pane_page',
components: {
SplitPane
SplitPane,
Icons
},
data () {
return {
@ -34,6 +39,12 @@ export default {
</script>
<style lang="less">
.center-middle{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.split-pane-page-wrapper{
height: 600px;
.pane{
@ -52,5 +63,17 @@ export default {
background: palevioletred;
}
}
.custom-trigger{
width: 20px;
height: 20px;
border-radius: 50%;
background: #000000;
position: absolute;
.center-middle;
box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
i.trigger-icon{
.center-middle;
}
}
}
</style>

16
src/view/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue
View File

@ -1,15 +1,22 @@
<template>
<div class="custom-bread-crumb">
<Breadcrumb :style="{fontSize: `${fontSize}px`}">
<BreadcrumbItem v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`"><Icon v-if="showIcon" :type="item.icon" style="margin-right: 4px;" />{{ showTitle(item) }}</BreadcrumbItem>
<BreadcrumbItem v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`">
<common-icon style="margin-right: 4px;" :type="item.icon || ''"/>
{{ showTitle(item) }}
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script>
import { showTitle } from '_c/common/util'
import CommonIcon from '_c/common-icon'
import './custom-bread-crumb.less'
export default {
name: 'customBreadCrumb',
components: {
CommonIcon
},
props: {
list: {
type: Array,
@ -27,6 +34,13 @@ export default {
methods: {
showTitle (item) {
return showTitle(item, this)
},
isCustomIcon (iconName) {
return iconName.indexOf('_') === 0
},
getCustomIconName (iconName) {
console.log(iconName)
return iconName.slice(1)
}
}
}

4
src/view/main/components/side-menu/mixin.js
View File

@ -1,4 +1,8 @@
import CommonIcon from '_c/common-icon'
export default {
components: {
CommonIcon
},
methods: {
showTitle (item) {
return this.$config.useI18n ? this.$t(item.name) : ((item.meta && item.meta.title) || item.name)

5
src/view/main/components/side-menu/side-menu-item.vue
View File

@ -6,7 +6,10 @@
</template>
<template v-for="item in children">
<side-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`"><Icon :type="item.icon"/><span>{{ showTitle(item) }}</span></menu-item>
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">
<common-icon :type="item.icon || ''"/>
<span>{{ showTitle(item) }}</span>
</menu-item>
</template>
</Submenu>
</template>

2
src/view/main/components/side-menu/side-menu.vue
View File

@ -4,7 +4,7 @@
<Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
<template v-for="item in menuList">
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`"><Icon :type="item.icon"/><span>{{ showTitle(item) }}</span></menu-item>
<menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
</template>
</Menu>
<div class="menu-collapsed" v-show="collapsed" :list="menuList">