diff --git a/components/_util/hasProp.js b/components/_util/hasProp.js deleted file mode 100644 index 8ceb0fa2c..000000000 --- a/components/_util/hasProp.js +++ /dev/null @@ -1,5 +0,0 @@ -export default (instance, prop) => { - const $options = instance.$options || {} - const propsData = $options.propsData || {} - return prop in propsData -} diff --git a/components/_util/openAnimation.js b/components/_util/openAnimation.js index 4bde0bbba..00be03f36 100644 --- a/components/_util/openAnimation.js +++ b/components/_util/openAnimation.js @@ -44,9 +44,9 @@ const animation = { leave (node, done) { return animate(node, false, done) }, - appear (node, done) { - return animate(node, true, done) - }, + // appear (node, done) { + // return animate(node, true, done) + // }, } export default animation diff --git a/components/align/Align.vue b/components/align/Align.vue index c85af8120..e02267071 100644 --- a/components/align/Align.vue +++ b/components/align/Align.vue @@ -39,8 +39,8 @@ export default { disabled: PropTypes.bool.def(false), }, data () { + this.aligned = false return { - aligned: false, } }, mounted () { @@ -103,7 +103,6 @@ export default { if (!props.disabled) { const source = this.$el this.aligned = true - // this.$emit('align', source, align(source, props.target(), props.align)) this.$listeners.align && this.$listeners.align(source, align(source, props.target(), props.align)) } }, diff --git a/components/checkbox/Checkbox.vue b/components/checkbox/Checkbox.vue index 047e7cc45..20836ba67 100644 --- a/components/checkbox/Checkbox.vue +++ b/components/checkbox/Checkbox.vue @@ -1,17 +1,3 @@ - diff --git a/components/checkbox/Group.vue b/components/checkbox/Group.vue index 62de663fe..48950902f 100644 --- a/components/checkbox/Group.vue +++ b/components/checkbox/Group.vue @@ -1,11 +1,3 @@ - diff --git a/components/menu/MenuItem.vue b/components/menu/MenuItem.vue new file mode 100644 index 000000000..006d9f049 --- /dev/null +++ b/components/menu/MenuItem.vue @@ -0,0 +1,40 @@ + diff --git a/components/menu/index.vue b/components/menu/index.vue new file mode 100644 index 000000000..0d1e2dde3 --- /dev/null +++ b/components/menu/index.vue @@ -0,0 +1,208 @@ + diff --git a/components/menu/src/MenuItem.vue b/components/menu/src/MenuItem.vue index 8b7c4d27f..6a4a8be20 100644 --- a/components/menu/src/MenuItem.vue +++ b/components/menu/src/MenuItem.vue @@ -3,24 +3,23 @@ import PropTypes from '../../_util/vue-types' import KeyCode from '../../_util/KeyCode' import { noop } from './util' import BaseMixin from '../../_util/BaseMixin' - +const props = { + rootPrefixCls: PropTypes.string, + eventKey: PropTypes.string, + active: PropTypes.bool, + selectedKeys: PropTypes.array, + disabled: PropTypes.bool, + title: PropTypes.string, + index: PropTypes.number, + inlineIndent: PropTypes.number.def(24), + level: PropTypes.number.def(1), + mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'), + parentMenu: PropTypes.object, + clearSubMenuTimers: PropTypes.func.def(noop), +} const MenuItem = { name: 'MenuItem', - - props: { - rootPrefixCls: PropTypes.string, - eventKey: PropTypes.string, - active: PropTypes.bool, - selectedKeys: PropTypes.array, - disabled: PropTypes.bool, - title: PropTypes.string, - index: PropTypes.number, - inlineIndent: PropTypes.number.def(24), - level: PropTypes.number.def(1), - mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'), - parentMenu: PropTypes.object, - clearSubMenuTimers: PropTypes.func.def(noop), - }, + props, inject: { parentMenuContext: { default: undefined }, }, @@ -162,4 +161,5 @@ const MenuItem = { } export default MenuItem +export { props as menuItemProps } diff --git a/components/menu/src/SubMenu.vue b/components/menu/src/SubMenu.vue index 1057c4601..31f81f11e 100644 --- a/components/menu/src/SubMenu.vue +++ b/components/menu/src/SubMenu.vue @@ -18,13 +18,11 @@ const popupPlacementMap = { export default { name: 'SubMenu', - props: { mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'), title: PropTypes.any.def(''), selectedKeys: PropTypes.array.def([]), openKeys: PropTypes.array.def([]), - // onClick: PropTypes.func, openChange: PropTypes.func.def(noop), rootPrefixCls: PropTypes.string, eventKey: PropTypes.string, @@ -32,8 +30,6 @@ export default { active: PropTypes.bool, // TODO: remove isRootMenu: PropTypes.bool, index: PropTypes.number, - // onItemHover: PropTypes.func, - // onSelect: PropTypes.func, triggerSubMenuAction: PropTypes.string, popupClassName: PropTypes.string, getPopupContainer: PropTypes.func, @@ -48,6 +44,7 @@ export default { }, inject: { parentMenuContext: { default: undefined }, + antdMenuTheme: { default: 'light' }, }, mixins: [BaseMixin], isSubMenu: true, @@ -324,6 +321,7 @@ export default { render (h) { const props = this.$props + const { rootPrefixCls, antdMenuTheme } = this const isOpen = this.isOpen() const prefixCls = this.getPrefixCls() const isInlineMode = props.mode === 'inline' @@ -440,7 +438,7 @@ export default { {!isInlineMode && ( &-item, + &-dark&-horizontal > &-submenu { + border-color: @menu-dark-bg; + border-bottom: 0; + } + + &-dark &-item, + &-dark &-item-group-title, + &-dark &-item > a { + color: @text-color-secondary-dark; + } + + &-dark&-inline, + &-dark&-vertical, + &-dark&-vertical-left, + &-dark&-vertical-right { + border-right: 0; + } + + &-dark&-inline &-item, + &-dark&-vertical &-item, + &-dark&-vertical-left &-item, + &-dark&-vertical-right &-item { + border-right: 0; + margin-left: 0; + left: 0; + &:after { + border-right: 0; + } + } + + &-dark&-inline &-item, + &-dark&-inline &-submenu-title { + width: 100%; + } + + &-dark &-item:hover, + &-dark &-item-active, + &-dark &-submenu-active, + &-dark &-submenu-open, + &-dark &-submenu-selected, + &-dark &-submenu-title:hover { + background-color: transparent; + color: #fff; + > a { + color: #fff; + } + > .@{menu-prefix-cls}-submenu-title, + > .@{menu-prefix-cls}-submenu-title:hover { + > .@{menu-prefix-cls}-submenu-arrow { + opacity: 1; + &:after, + &:before { + background: #fff; + } + } + } + } + + &-dark &-item-selected { + border-right: 0; + color: #fff; + &:after { + border-right: 0; + } + > a, + > a:hover { + color: #fff; + } + } + + &&-dark &-item-selected, + &-submenu-popup&-dark &-item-selected { + background-color: @primary-color; + } + + // Disabled state sets text to dark gray and nukes hover/tab effects + &-dark &-item-disabled, + &-dark &-submenu-disabled { + &, + > a { + opacity: 0.8; + color: @disabled-color-dark !important; + } + > .@{menu-prefix-cls}-submenu-title { + color: @disabled-color-dark !important; + } + } +} diff --git a/components/menu/style/index.js b/components/menu/style/index.js index cf31ed80f..581a385b2 100644 --- a/components/menu/style/index.js +++ b/components/menu/style/index.js @@ -1,2 +1,5 @@ import '../../style/index.less' import './index.less' + +// style dependencies +import '../../tooltip/style' diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 10f0cf3b0..e4f8a7c9c 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -1,64 +1,144 @@ -@menuPrefixCls: rc-menu; +@import "../../style/themes/default"; +@import "../../style/mixins/index"; -@font-face { - font-family: 'FontAwesome'; - src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0'); - src: url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('https://cdn.bootcss.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; -} +@menu-prefix-cls: ~"@{ant-prefix}-menu"; +@menu-inline-toplevel-item-height: 40px; +@menu-item-height: 40px; -.@{menuPrefixCls} { +// default theme +.@{menu-prefix-cls} { + .reset-component; outline: none; margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; - border: 1px solid #d9d9d9; - box-shadow: 0 0 4px #d9d9d9; - border-radius: 3px; - color: #666; + box-shadow: @box-shadow-base; + background: @component-background; + line-height: 0; // Fix display inline-block gap + transition: background .3s, width .2s; + .clearfix; + + ul, + ol { + list-style: none; + margin: 0; + padding: 0; + } &-hidden { display: none; } - &-collapse { - overflow: hidden; - &-active { - overflow: hidden; - transition: height .3s ease-out; + &-item-group-title { + color: @text-color-secondary; + font-size: @font-size-base; + line-height: @line-height-base; + padding: 8px 16px; + transition: all .3s; + } + + &-submenu, + &-submenu-inline { + transition: border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out; + } + + &-item:active, + &-submenu-title:active { + background: @item-active-bg; + } + + &-submenu &-sub { + cursor: initial; + transition: background .3s @ease-in-out, padding .3s @ease-in-out; + } + + &-item > a { + display: block; + color: @text-color; + &:hover { + color: @primary-color; + } + &:focus { + text-decoration: none; + } + &:before { + position: absolute; + background-color: transparent; + width: 100%; + height: 100%; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; } } - &-item-group-list { - margin: 0; - padding: 0; - } - - &-item-group-title { - color: #999; - line-height: 1.5; - padding: 8px 10px; - border-bottom: 1px solid #dedede; + &-item-divider { + height: 1px; + overflow: hidden; + background-color: @border-color-split; + line-height: 0; } + &-item:hover, &-item-active, - &-submenu-active > span > &-submenu-title { - background-color: #eaf8fe; + &:not(&-inline) &-submenu-open, + &-submenu-active, + &-submenu-title:hover { + color: @primary-color; + } + + &-horizontal &-item, + &-horizontal &-submenu { + margin-top: -1px; + } + + &-horizontal > &-item:hover, + &-horizontal > &-item-active, + &-horizontal > &-submenu &-submenu-title:hover { + background-color: transparent; } &-item-selected { - background-color: #eaf8fe; - // fix chrome render bug - transform: translateZ(0); + color: @primary-color; + > a, + > a:hover { + color: @primary-color; + } } - &-submenu-selected { - background-color: #eaf8fe; + &:not(&-horizontal) &-item-selected { + background-color: @item-active-bg; } - & > li&-submenu { + &-inline, + &-vertical, + &-vertical-left { + border-right: @border-width-base @border-style-base @border-color-split; + } + &-vertical-right { + border-left: @border-width-base @border-style-base @border-color-split; + } + + &-vertical&-sub, + &-vertical-left&-sub, + &-vertical-right&-sub { + border-right: 0; padding: 0; + transform-origin: 0 0; + .@{menu-prefix-cls}-item { + border-right: 0; + margin-left: 0; + left: 0; + &:after { + border-right: 0; + } + } + > .@{menu-prefix-cls}-item, + > .@{menu-prefix-cls}-submenu { + transform-origin: 0 0; + } } &-horizontal&-sub, @@ -66,67 +146,147 @@ &-vertical-left&-sub, &-vertical-right&-sub { min-width: 160px; - margin-top: 0; } - &-item, &-submenu-title { + &-item, + &-submenu-title { + cursor: pointer; margin: 0; + padding: 0 20px; position: relative; display: block; - padding: 7px 7px 7px 16px; white-space: nowrap; - - // Disabled state sets text to gray and nukes hover/tab effects - &.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled { - color: #777 !important; + transition: color .3s @ease-in-out, border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out; + .@{iconfont-css-prefix} { + min-width: 14px; + margin-right: 10px; + transition: font-size .15s @ease-out, margin .3s @ease-in-out; + + span { + transition: opacity .3s @ease-in-out, width .3s @ease-in-out; + opacity: 1; + } } } + & > &-item-divider { height: 1px; margin: 1px 0; overflow: hidden; padding: 0; line-height: 0; - background-color: #e5e5e5; + background-color: @border-color-split; } &-submenu { &-popup { position: absolute; + border-radius: @border-radius-base; + z-index: @zindex-dropdown; } - > .@{menuPrefixCls} { - background-color: #fff; + + > .@{menu-prefix-cls} { + background-color: @component-background; + border-radius: @border-radius-base; + &-submenu-title:after { + transition: transform .3s @ease-in-out; + } + } + + &-vertical, + &-vertical-left, + &-vertical-right, + &-inline { + > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { + transition: transform .3s @ease-in-out; + position: absolute; + top: 50%; + right: 16px; + width: 10px; + &:before, + &:after { + content: ''; + position: absolute; + vertical-align: baseline; + background: #fff; + background-image: linear-gradient(to right, @text-color, @text-color); + width: 6px; + height: 1.5px; + border-radius: 2px; + transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out; + } + &:before { + transform: rotate(45deg) translateY(-2px); + } + &:after { + transform: rotate(-45deg) translateY(2px); + } + } + > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow { + &:after, + &:before { + background: linear-gradient(to right, @primary-color, @primary-color); + } + } + } + + &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { + &:before { + transform: rotate(-45deg) translateX(2px); + } + &:after { + transform: rotate(45deg) translateX(-2px); + } + } + + &-open { + &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { + transform: translateY(-2px); + &:after { + transform: rotate(-45deg) translateX(-2px); + } + &:before { + transform: rotate(45deg) translateX(2px); + } + } } } - .@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item { - .anticon { - width: 14px; - height: 14px; - margin-right: 8px; - top: -1px; + &-vertical &-submenu-selected, + &-vertical-left &-submenu-selected, + &-vertical-right &-submenu-selected { + color: @primary-color; + > a { + color: @primary-color; } } &-horizontal { - background-color: #F3F5F7; - border: none; - border-bottom: 1px solid transparent; - border-bottom: 1px solid #d9d9d9; + border: 0; + border-bottom: @border-width-base @border-style-base @border-color-split; box-shadow: none; + line-height: 46px; - & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title { - padding: 15px 20px; - } - - & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item { + > .@{menu-prefix-cls}-item, + > .@{menu-prefix-cls}-submenu { + position: relative; + top: 1px; float: left; border-bottom: 2px solid transparent; - &-active { - border-bottom: 2px solid #2db7f5; - background-color: #F3F5F7; - color: #2baee9; + &:hover, + &-active, + &-open, + &-selected { + border-bottom: 2px solid @primary-color; + color: @primary-color; + } + + > a { + display: block; + color: @text-color; + &:hover { + color: @primary-color; + } } } @@ -137,169 +297,162 @@ clear: both; } } - &-inline { - overflow: hidden; - } + &-vertical, &-vertical-left, &-vertical-right, &-inline { - padding: 12px 0; - & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title { - padding: 12px 8px 12px 24px; - } - .@{menuPrefixCls}-submenu-arrow { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - vertical-align: baseline; - text-align: center; - text-transform: none; - text-rendering: auto; - position: absolute; - right: 16px; - line-height: 1.5em; - &:before { - content: "\f0da"; + .@{menu-prefix-cls}-item { + position: relative; + &:after { + content: ""; + position: absolute; + right: 0; + top: 0; + bottom: 0; + border-right: 3px solid @primary-color; + transform: scaleY(.0001); + opacity: 0; + transition: transform .15s @ease-out, opacity .15s @ease-out; } } - } - &-inline { - .@{menuPrefixCls}-submenu-arrow { - transform: rotate(90deg); - transition: transform .3s; + + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu-title { + padding: 0 16px; + font-size: @font-size-base; + line-height: @menu-item-height; + height: @menu-item-height; + margin-top: 4px; + margin-bottom: 4px; + overflow: hidden; + text-overflow: ellipsis; } - & .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title { - .@{menuPrefixCls}-submenu-arrow { - transform: rotate(-90deg); - } + + // disable margin collapsed + .@{menu-prefix-cls}-submenu { + padding-bottom: 0.01px; + } + + .@{menu-prefix-cls}-item:not(:last-child) { + margin-bottom: 8px; + } + + > .@{menu-prefix-cls}-item, + > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { + line-height: @menu-inline-toplevel-item-height; + height: @menu-inline-toplevel-item-height; } } - &-vertical&-sub, - &-vertical-left&-sub, - &-vertical-right&-sub { + &-inline { + width: 100%; + .@{menu-prefix-cls}-selected, + .@{menu-prefix-cls}-item-selected { + &:after { + transition: transform .15s @ease-in-out, opacity .15s @ease-in-out; + opacity: 1; + transform: scaleY(1); + } + } + + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu-title { + width: ~"calc(100% + 1px)"; + } + } + + &-inline-collapsed { + width: @menu-collapsed-width; + > .@{menu-prefix-cls}-item, + > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item, + > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { + left: 0; + text-overflow: clip; + padding: 0 (@menu-collapsed-width - 16px) / 2 !important; + .@{menu-prefix-cls}-submenu-arrow { + display: none; + } + .@{iconfont-css-prefix} { + font-size: 16px; + line-height: @menu-item-height; + margin: 0; + + span { + max-width: 0; + display: inline-block; + opacity: 0; + } + } + } + &-tooltip { + pointer-events: none; + .@{iconfont-css-prefix} { + display: none; + } + a { + color: @text-color-dark; + } + } + + .@{menu-prefix-cls}-item-group-title { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-left: 4px; + padding-right: 4px; + } + } + + &-item-group-list { + margin: 0; padding: 0; + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu-title { + padding: 0 16px 0 28px; + } + } + + &-root&-vertical, + &-root&-vertical-left, + &-root&-vertical-right, + &-root&-inline { + box-shadow: none; } &-sub&-inline { padding: 0; - border: none; - border-radius: 0; + border: 0; box-shadow: none; + border-radius: 0; + & > .@{menu-prefix-cls}-item, + & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { + line-height: @menu-item-height; + height: @menu-item-height; + list-style-type: disc; + list-style-position: inside; + } - & > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu .@{menuPrefixCls}-submenu-title { - padding-top: 8px; - padding-bottom: 8px; - padding-right: 0; + & .@{menu-prefix-cls}-item-group-title { + padding-left: 32px; } } - .effect() { - animation-duration: .3s; - animation-fill-mode: both; - transform-origin: 0 0; - } - - &-open { - - &-slide-up-enter, &-slide-up-appear { - .effect(); - opacity: 0; - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - animation-play-state: paused; + // Disabled state sets text to gray and nukes hover/tab effects + &-item-disabled, + &-submenu-disabled { + color: @disabled-color !important; + cursor: not-allowed; + background: none; + border-color: transparent !important; + > a { + color: @disabled-color !important; + pointer-events: none; } - - &-slide-up-leave { - .effect(); - opacity: 1; - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - animation-play-state: paused; - } - - &-slide-up-enter-active, &-slide-up-appear-active { - .effect(); - animation-name: rcMenuOpenSlideUpIn; - animation-play-state: running; - } - - &-slide-up-leave-active { - .effect(); - animation-name: rcMenuOpenSlideUpOut; - animation-play-state: running; - } - - @keyframes rcMenuOpenSlideUpIn { - 0% { - opacity: 0; - transform-origin: 0% 0%; - transform: scaleY(0); - } - 100% { - opacity: 1; - transform-origin: 0% 0%; - transform: scaleY(1); - } - } - - @keyframes rcMenuOpenSlideUpOut { - 0% { - opacity: 1; - transform-origin: 0% 0%; - transform: scaleY(1); - } - 100% { - opacity: 0; - transform-origin: 0% 0%; - transform: scaleY(0); - } - } - - &-zoom-enter, &-zoom-appear { - opacity: 0; - .effect(); - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - animation-play-state: paused; - } - - &-zoom-leave { - .effect(); - animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); - animation-play-state: paused; - } - - &-zoom-enter-active, &-zoom-appear-active { - .effect(); - animation-name: rcMenuOpenZoomIn; - animation-play-state: running; - } - - &-zoom-leave-active { - .effect(); - animation-name: rcMenuOpenZoomOut; - animation-play-state: running; - } - - @keyframes rcMenuOpenZoomIn { - 0% { - opacity: 0; - transform: scale(0, 0); - } - 100% { - opacity: 1; - transform: scale(1, 1); - } - } - - @keyframes rcMenuOpenZoomOut { - 0% { - transform: scale(1, 1); - } - 100% { - opacity: 0; - transform: scale(0, 0); - } + > .@{menu-prefix-cls}-submenu-title { + color: @disabled-color !important; + cursor: not-allowed; } } } +@import './dark'; diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue index 6471b068d..a7345b58c 100644 --- a/components/trigger/Popup.vue +++ b/components/trigger/Popup.vue @@ -24,8 +24,8 @@ export default { popupClassName: PropTypes.any, }, data () { + this.aligned = false return { - aligned: false, destroyPopup: false, initAlign: false, // mounted之后再实例化align,即改变this.$el位置后实例化 } diff --git a/examples/routes.js b/examples/routes.js index 70c886a5e..bb1f1c2c6 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const com = pathnameArr[1] || 'button' const demo = pathnameArr[2] || 'index' return { - component: import(`../components/tooltip/demo/${demo}.vue`), + component: import(`../components/checkbox/demo/${demo}.vue`), } } export default [