2019-05-24 20:09:35 +08:00
|
|
|
<template>
|
2019-11-09 22:45:07 +08:00
|
|
|
<n-config-provider
|
2019-09-17 19:28:28 +08:00
|
|
|
class="demo"
|
|
|
|
namespace="naive-ui-doc"
|
|
|
|
:theme="theme"
|
|
|
|
>
|
2019-06-23 18:00:21 +08:00
|
|
|
<n-nimbus-service-layout
|
2019-09-20 17:38:45 +08:00
|
|
|
:padding-body="false"
|
2019-06-23 18:00:21 +08:00
|
|
|
:items="items"
|
|
|
|
>
|
2019-09-27 16:54:23 +08:00
|
|
|
<template v-slot:nav>
|
2019-09-24 16:59:07 +08:00
|
|
|
<doc-header
|
|
|
|
:lang="lang"
|
|
|
|
@lang-change="handleLangChange"
|
|
|
|
/>
|
2019-09-17 19:28:28 +08:00
|
|
|
</template>
|
2019-06-23 19:52:26 +08:00
|
|
|
<router-view />
|
2019-06-23 18:00:21 +08:00
|
|
|
</n-nimbus-service-layout>
|
2019-11-09 22:45:07 +08:00
|
|
|
</n-config-provider>
|
2019-05-24 20:09:35 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-09-17 19:28:28 +08:00
|
|
|
import DocHeader from './header.vue'
|
2019-09-24 16:59:07 +08:00
|
|
|
import { i18n } from './init'
|
2019-09-17 19:28:28 +08:00
|
|
|
|
2019-05-24 20:09:35 +08:00
|
|
|
export default {
|
2019-09-17 19:28:28 +08:00
|
|
|
components: {
|
|
|
|
DocHeader
|
|
|
|
},
|
2019-09-24 16:59:07 +08:00
|
|
|
beforeRouteEnter (to, from, next) {
|
2019-09-28 18:50:56 +08:00
|
|
|
// console.log(i18n)
|
2019-09-24 16:59:07 +08:00
|
|
|
i18n.locale = to.params.lang
|
|
|
|
next()
|
|
|
|
},
|
|
|
|
beforeRouteUpdate (to, from, next) {
|
|
|
|
this.$i18n.locale = to.params.lang
|
|
|
|
next()
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
items () {
|
|
|
|
return [
|
2019-06-23 19:52:26 +08:00
|
|
|
{
|
2019-10-10 22:38:29 +08:00
|
|
|
name: 'Naive UI',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/intro'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Getting Started',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/start'
|
2019-06-23 19:52:26 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-10-10 22:38:29 +08:00
|
|
|
name: 'Develop Guidelines',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Develop Status',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/status'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Nimbus Components',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/',
|
2019-06-23 18:00:21 +08:00
|
|
|
childItems: [
|
|
|
|
{
|
|
|
|
name: 'Nimbus Service Layout',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout'
|
2019-11-09 14:19:07 +08:00
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Config Components',
|
|
|
|
childItems: [
|
2019-07-15 11:34:30 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Config Provider',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-config-provider'
|
2019-11-09 15:02:34 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Config Consumer',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-config-consumer'
|
2019-06-23 18:00:21 +08:00
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Layout Components',
|
2019-06-23 18:00:21 +08:00
|
|
|
childItems: [
|
2019-07-14 18:39:36 +08:00
|
|
|
{
|
2019-11-19 18:38:01 +08:00
|
|
|
name: 'Layout',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-layout'
|
2019-07-14 18:39:36 +08:00
|
|
|
},
|
2019-10-13 20:16:43 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Grid',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-grid'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Common Components',
|
|
|
|
childItems: [
|
2019-07-02 18:08:59 +08:00
|
|
|
{
|
2019-11-22 13:27:49 +08:00
|
|
|
name: 'Avatar',
|
2019-11-19 18:38:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-avatar'
|
2019-07-02 18:08:59 +08:00
|
|
|
},
|
2019-08-13 17:50:14 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Button',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-button'
|
2019-08-13 17:50:14 +08:00
|
|
|
},
|
2019-08-20 16:47:51 +08:00
|
|
|
{
|
2019-11-18 18:37:20 +08:00
|
|
|
name: 'Card',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-card'
|
2019-08-20 16:47:51 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Collapse',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-collapse'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Divider',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-divider'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-08-08 16:03:56 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Dropdown',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-dropdown'
|
2019-08-08 16:03:56 +08:00
|
|
|
},
|
2019-08-01 11:14:14 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Gradient Text',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-gradient-text'
|
2019-08-01 11:14:14 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Icon',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-icon'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Tag',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-tag'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Data Input Components',
|
|
|
|
childItems: [
|
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Auto Complete (in progress)',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-08-07 11:40:23 +08:00
|
|
|
{
|
|
|
|
name: 'Cascader',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-cascader'
|
2019-08-07 11:40:23 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
|
|
|
name: 'Checkbox',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-checkbox'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-08-01 11:14:14 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Custom Input (in progress)',
|
2019-10-23 23:08:29 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-custom-input'
|
|
|
|
},
|
2019-07-04 16:47:41 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Date Picker',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-date-picker'
|
2019-07-04 16:47:41 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Form',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-form'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-08-08 18:00:30 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Input',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-input'
|
2019-09-04 16:06:07 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Input Number',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-input-number'
|
2019-08-08 18:00:30 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Radio',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-radio'
|
2019-08-16 16:48:36 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Select',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-select'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-08-16 16:48:36 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Slider',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-slider'
|
2019-08-16 16:48:36 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Switch',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-switch'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-10-28 18:29:52 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Time Picker',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-time-picker'
|
2019-10-28 18:29:52 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Transfer',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-transfer'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Data Display Components',
|
|
|
|
childItems: [
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Advanced Table (in progress)',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-advance-table'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-07-10 19:07:16 +08:00
|
|
|
{
|
2019-11-12 15:04:42 +08:00
|
|
|
name: 'Descriptions',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-descriptions'
|
2019-07-10 19:07:16 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Empty (in progress)',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-empty'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-22 16:54:32 +08:00
|
|
|
name: 'List',
|
2019-10-27 10:58:24 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-list'
|
|
|
|
},
|
2019-09-04 18:48:03 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Statistic',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-statistic'
|
2019-09-04 18:48:03 +08:00
|
|
|
},
|
2019-11-22 16:54:32 +08:00
|
|
|
{
|
|
|
|
name: 'Thing',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-thing'
|
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Time',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-time'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Timeline',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-timeline'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Tree (in progress)',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-tree'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Navigation Components',
|
|
|
|
childItems: [
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Affix',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-affix'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Anchor',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-anchor'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-07-02 18:08:59 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'BackTop',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-back-top'
|
2019-07-02 18:08:59 +08:00
|
|
|
},
|
2019-08-13 15:27:11 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Breadcrumb',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-breadcrumb'
|
2019-08-13 15:27:11 +08:00
|
|
|
},
|
2019-08-16 19:19:59 +08:00
|
|
|
{
|
2019-11-09 22:45:07 +08:00
|
|
|
name: 'Loading Bar',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-loading-bar'
|
2019-08-16 19:19:59 +08:00
|
|
|
},
|
2019-08-01 11:14:14 +08:00
|
|
|
{
|
2019-11-09 22:58:38 +08:00
|
|
|
name: 'Menu (in progress)',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-menu'
|
2019-08-01 11:14:14 +08:00
|
|
|
},
|
2019-07-15 15:05:56 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Pagination',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-pagination'
|
2019-07-15 15:05:56 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Steps',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-steps'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Tabs',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-tabs'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Feedback Components',
|
|
|
|
childItems: [
|
|
|
|
{
|
|
|
|
name: 'Alert',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-alert'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-09-05 18:06:01 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Badge',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-badge'
|
2019-09-05 18:06:01 +08:00
|
|
|
},
|
2019-09-04 16:06:07 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Confirm',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-confirm'
|
2019-09-04 16:06:07 +08:00
|
|
|
},
|
2019-10-27 10:58:24 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Drawer',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-drawer'
|
2019-10-27 10:58:24 +08:00
|
|
|
},
|
2019-08-01 11:14:14 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Message',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-message'
|
2019-08-01 11:14:14 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Modal',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-modal'
|
2019-06-23 18:00:21 +08:00
|
|
|
},
|
2019-08-16 16:48:36 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Notification',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-notification'
|
2019-08-16 16:48:36 +08:00
|
|
|
},
|
2019-08-01 11:14:14 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Popover',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-popover'
|
2019-08-01 11:14:14 +08:00
|
|
|
},
|
2019-09-04 18:48:03 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Popconfirm',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-popconfirm'
|
2019-09-04 18:48:03 +08:00
|
|
|
},
|
2019-07-22 17:41:56 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Popselect',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-popselect'
|
2019-07-22 17:41:56 +08:00
|
|
|
},
|
2019-06-23 18:00:21 +08:00
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Progress',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-progress'
|
2019-08-01 11:14:14 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-22 12:22:58 +08:00
|
|
|
name: 'Result',
|
2019-11-09 14:19:07 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-result'
|
2019-09-03 19:18:16 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Spin',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-spin'
|
2019-09-05 18:06:01 +08:00
|
|
|
},
|
|
|
|
{
|
2019-11-09 14:19:07 +08:00
|
|
|
name: 'Tooltip',
|
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-tooltip'
|
2019-06-23 18:00:21 +08:00
|
|
|
}
|
|
|
|
]
|
2019-07-24 23:53:02 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Debug',
|
|
|
|
childItems: [
|
2019-08-22 23:21:01 +08:00
|
|
|
{
|
|
|
|
name: 'CancelMarkDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-cancel-mark-debug'
|
2019-08-22 23:21:01 +08:00
|
|
|
},
|
2019-07-24 23:53:02 +08:00
|
|
|
{
|
2019-07-25 10:48:46 +08:00
|
|
|
name: 'PopoverDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-popover-debug'
|
2019-07-25 10:48:46 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'RouterDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-router-debug'
|
2019-07-26 16:33:01 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'ModalDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-modal-debug'
|
2019-07-31 17:34:17 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'ScrollbarDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-scrollbar-debug'
|
2019-08-07 16:52:18 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'ScrollbarDebug2',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-scrollbar-debug2'
|
2019-08-08 16:03:56 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'DatePickerDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-date-picker-debug'
|
2019-08-08 16:03:56 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'BackTopDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-back-top-debug'
|
2019-08-27 11:19:53 +08:00
|
|
|
},
|
|
|
|
{
|
2019-09-12 11:56:49 +08:00
|
|
|
name: 'CascaderDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-cascader-debug'
|
2019-09-12 11:56:49 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'VerticalAlignDebug',
|
2019-09-27 15:56:01 +08:00
|
|
|
path: `/${this.lang}/${this.theme}` + '/n-vertical-align-debug'
|
2019-07-24 23:53:02 +08:00
|
|
|
}
|
|
|
|
]
|
2019-06-23 18:00:21 +08:00
|
|
|
}
|
|
|
|
]
|
2019-09-24 16:59:07 +08:00
|
|
|
},
|
|
|
|
lang: {
|
|
|
|
get () {
|
|
|
|
return this.$route.params.lang || 'en-us'
|
|
|
|
},
|
|
|
|
set (lang) {
|
|
|
|
this.$router.push(changeLangInPath(
|
|
|
|
this.$route.fullPath,
|
|
|
|
lang
|
|
|
|
))
|
|
|
|
}
|
|
|
|
},
|
|
|
|
theme: {
|
|
|
|
get () {
|
2019-09-27 15:56:01 +08:00
|
|
|
return this.$route.params.theme === 'light' ? 'light' : 'dark'
|
2019-09-24 16:59:07 +08:00
|
|
|
},
|
|
|
|
set (theme) {
|
2019-09-27 15:56:01 +08:00
|
|
|
this.$router.push(changeThemeInPath(
|
|
|
|
this.$route.fullPath,
|
|
|
|
theme
|
|
|
|
))
|
2019-09-24 16:59:07 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleLangChange (lang) {
|
|
|
|
this.lang = lang
|
2019-06-23 18:00:21 +08:00
|
|
|
}
|
|
|
|
}
|
2019-05-24 20:09:35 +08:00
|
|
|
}
|
2019-09-24 16:59:07 +08:00
|
|
|
|
|
|
|
function changeLangInPath (path, lang) {
|
|
|
|
const langReg = /^\/(zh-cn|en-us)\//
|
|
|
|
return path.replace(langReg, `/${lang}/`)
|
|
|
|
}
|
2019-09-27 15:56:01 +08:00
|
|
|
|
|
|
|
function changeThemeInPath (path, theme) {
|
|
|
|
const themeReg = /(^\/[^/]+\/)([^/]+)/
|
|
|
|
return path.replace(themeReg, '$1' + theme)
|
|
|
|
}
|
2019-05-24 20:09:35 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.demo {
|
2019-06-23 18:00:21 +08:00
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
2019-06-27 16:26:23 +08:00
|
|
|
min-width: 1080px;
|
2019-05-24 20:09:35 +08:00
|
|
|
}
|
|
|
|
</style>
|
2019-06-18 16:53:16 +08:00
|
|
|
|
2019-06-24 01:16:38 +08:00
|
|
|
<style lang="scss">
|
2019-06-27 18:17:07 +08:00
|
|
|
body {
|
|
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
}
|
|
|
|
|
2019-06-24 01:16:38 +08:00
|
|
|
.n-doc {
|
2019-06-27 16:26:23 +08:00
|
|
|
width: 720px;
|
2019-06-24 01:16:38 +08:00
|
|
|
margin: 0 auto;
|
|
|
|
.n-doc-header {
|
|
|
|
display: flex;
|
2019-09-20 00:21:33 +08:00
|
|
|
// height: 60px;
|
|
|
|
// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
margin-bottom: 16px;
|
|
|
|
// align-items: center;
|
2019-06-24 01:16:38 +08:00
|
|
|
}
|
|
|
|
.n-doc-section {
|
|
|
|
.n-doc-section__header {
|
|
|
|
font-size: 16px;
|
2019-10-10 22:38:29 +08:00
|
|
|
font-weight: 700;
|
2019-06-24 01:16:38 +08:00
|
|
|
margin-bottom: 12px;
|
|
|
|
}
|
|
|
|
.n-doc-section__view {
|
2019-06-26 20:16:11 +08:00
|
|
|
background: #5c657eff;
|
2019-06-24 01:16:38 +08:00
|
|
|
padding: 18px;
|
|
|
|
border-radius: 8px;
|
|
|
|
justify-content: center;
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
2019-07-15 17:41:56 +08:00
|
|
|
.n-doc-section__inspect {
|
|
|
|
background: #5c657eff;
|
|
|
|
padding: 18px;
|
|
|
|
border-radius: 8px;
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
2019-06-26 13:37:58 +08:00
|
|
|
.n-doc-section__text-content {
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
2019-06-24 01:16:38 +08:00
|
|
|
.n-doc-section__source {
|
2019-06-28 10:34:29 +08:00
|
|
|
position: relative;
|
2019-06-24 01:16:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-06-18 16:53:16 +08:00
|
|
|
</style>
|