Skip to content

E
Element
Commit 287868d1 authored by qingwei.li's avatar qingwei.li
Browse files
Options

update route

parent e320f43c
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 106 deletions
bin/build-entry.js
View file @ 287868d1
...@@ -10,6 +10,8 @@ var ISNTALL_COMPONENT_TEMPLATE = ` Vue.component({{name}}.name, {{name}});` ...@@ -10,6 +10,8 @@ var ISNTALL_COMPONENT_TEMPLATE = ` Vue.component({{name}}.name, {{name}});`
var MAIN_TEMPLATE = `{{include}} var MAIN_TEMPLATE = `{{include}}
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return;
{{install}} {{install}}
Vue.use(Loading); Vue.use(Loading);
......
examples/app.vue
View file @ 287868d1
...@@ -263,52 +263,54 @@ ...@@ -263,52 +263,54 @@
</style> </style>
<template> <template>
<div class="pure-g"> <div id="app">
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu"> <div class="pure-g">
<a class="pure-menu-heading app__brand" v-link="'/'"> <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
<span class="app__eleme">ELEME</span>NT <router-link class="pure-menu-heading app__brand" to="/">
</a> <span class="app__eleme">ELEME</span>NT
</router-link>
<template v-for="nav in navs">
<a <template v-for="(nav, key) in navs">
href="#" <a
@click.prevent="navState.$set($index, !navState[$index] || false)" href="#"
class="pure-menu-heading app__menu__label" @click.prevent="navState.$set(key, !navState[key] || false)"
:class="{ 'unfold': !navState[$index] }" class="pure-menu-heading app__menu__label"
v-text="nav.group"></a> :class="{ 'unfold': !navState[key] }"
<ul v-text="nav.group"></a>
class="pure-menu-list" <ul
transition="slidedown" class="pure-menu-list"
v-show="!navState[$index]" transition="slidedown"
:style="{ v-show="!navState[key]"
maxHeight: nav.list.length * 44 + 'px' :style="{
}"> maxHeight: nav.list.length * 44 + 'px'
<li }">
class="pure-menu-item app__menu__item" <li
v-for="item in nav.list" class="pure-menu-item app__menu__item"
v-if="!item.disabled"> v-for="item in nav.list"
<a v-if="!item.disabled">
class="pure-menu-link app__menu__link" <router-link
v-link="{ path: item.path, activeClass: 'active' }" class="pure-menu-link app__menu__link"
v-text="item.name"></a> :to="{ path: item.path, activeClass: 'active' }"
</li> v-text="item.name"></router-link>
</ul> </li>
</template> </ul>
</template>
</div>
<div class="pure-u-5-6 app__content"> </div>
<header class="app__header"> <div class="pure-u-5-6 app__content">
<h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1> <header class="app__header">
</header> <h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
<section class="app__main" v-el:main> </header>
<p class="app__description">{{ $route.description }}</p> <section class="app__main" ref="main">
<router-view></router-view> <p class="app__description">{{ $route.description }}</p>
</section> <router-view></router-view>
<toc main=".app__main"></toc> </section>
<toc main=".app__main"></toc>
</div>
</div> </div>
</div>
<button class="hljs__button" v-el:button></button> <button class="hljs__button" ref="button"></button>
</div>
</template> </template>
<script> <script>
...@@ -341,10 +343,10 @@ ...@@ -341,10 +343,10 @@
this.navs = navs; this.navs = navs;
}, },
ready() { mounted() {
this.mainContent = document.querySelector('.app__content'); this.mainContent = document.querySelector('.app__content');
E.delegate(this.$els.main, '.hljs__button', 'click.highlight', e => { E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
const parent = e.target.parentNode; const parent = e.target.parentNode;
toggleClass(parent, 'open'); toggleClass(parent, 'open');
...@@ -352,7 +354,7 @@ ...@@ -352,7 +354,7 @@
}, },
beforeDestroy() { beforeDestroy() {
E.undelegate(this.$els.main, '.hljs', 'click.highlight'); E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
}, },
watch: { watch: {
......
examples/docs/tooltip.md
View file @ 287868d1
...@@ -34,20 +34,20 @@ ...@@ -34,20 +34,20 @@
module.exports = { module.exports = {
data() { data() {
return { return {
switch: true value: true
} }
}, },
computed: { computed: {
effect() { effect() {
return this.switch ? 'dark' : 'light'; return this.value ? 'dark' : 'light';
} }
} }
} }
</script> </script>
<el-switch <el-switch
:value.sync="switch" v-model="value"
on-text="黑色" on-text="黑色"
off-text="白色" off-text="白色"
on-color="#1f2d3d" on-color="#1f2d3d"
......
examples/entry.js
View file @ 287868d1
...@@ -5,22 +5,15 @@ import configRouter from './route.config'; ...@@ -5,22 +5,15 @@ import configRouter from './route.config';
import Element from 'main/index.js'; import Element from 'main/index.js';
import 'packages/theme-default/src/index.css'; import 'packages/theme-default/src/index.css';
// test Released package
// import Element from '../lib/index.js';
// import '../lib/theme-default/index.css';
Vue.use(Element); Vue.use(Element);
Vue.use(VueRouter); Vue.use(VueRouter);
const router = new VueRouter(); const router = new VueRouter({
const app = Vue.extend({ base: __dirname,
template: '<entry></entry>', routes: configRouter
components: { entry }
}); });
configRouter(router); new Vue({ // eslint-disable-line
router.start(app, 'app'); render: h => h(entry),
router
router.afterEach(() => { }).$mount('#app');
document.body.scrollTop = 0;
});
examples/index.template.html
View file @ 287868d1
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>test-vue2</title>
<title>Element 后台组件</title>
</head> </head>
<body> <body>
<app></app> <div id="app"></div>
<!-- built files will be auto injected -->
</body> </body>
</html> </html>
examples/route.config.js
View file @ 287868d1
import navConfig from './nav.config.json'; import navConfig from './nav.config.json';
const registerRoute = (config) => { const registerRoute = (config) => {
let route = {}; let route = [];
config.map(nav => nav.list.map(page => { config
try { .map(nav =>
route[page.path] = page.path !== '/changelog' ? { nav.list.map(page => {
component: require(`./docs${page.path}.md`), if (page.path === '/changelog') return;
title: page.title || page.name, const component = require(`./docs${page.path}.md`);
description: page.description
} : { route.push({
component: require('../CHANGELOG.md'), path: page.path,
title: page.title || page.name, title: page.title || page.name,
description: page.description description: page.description,
}; component: component.default || component
} catch (e) { });
console.error(e); })
page.disabled = true; );
}
}));
return { route, navs: config }; return { route, navs: config };
}; };
const route = registerRoute(navConfig); const route = registerRoute(navConfig);
export const navs = route.navs; route.route.push({
export default function configRouter(router) { path: '/changelog',
router.map(Object.assign({ component: require('../CHANGELOG.md')
'*': { });
component: require('./docs/home.md')
}
}, route.route));
router.beforeEach(transition => { route.route.push({
document.title = transition.to.title || document.title; path: '*',
transition.to.router.app.$broadcast('element.example.reload'); component: require('./docs/home.md')
transition.next(); });
});
}; export const navs = route.navs;
export default route.route;
packages/button/src/button.vue
View file @ 287868d1
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
} }
]" ]"
> >
<i class="el-icon-loading" v-if="loading"></i><i :class="'el-icon-' + icon" v-if="icon && !loading"></i><span v-if="_slotContents && _slotContents.default"> <i class="el-icon-loading" v-if="loading"></i>
<slot></slot> <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
</span> <slot></slot>
</button> </button>
</template> </template>
<script> <script>
......
scripts/cooking.demo.js
View file @ 287868d1
...@@ -84,6 +84,6 @@ Object.keys(Components).forEach(function (key) { ...@@ -84,6 +84,6 @@ Object.keys(Components).forEach(function (key) {
// 开发模式不需要将不存在的 style.css 打包进去 // 开发模式不需要将不存在的 style.css 打包进去
cooking.add('externals', externals); cooking.add('externals', externals);
cooking.config.vue.loaders.html = 'html?minimize=true&conservativeCollapse=false'; // cooking.config.vue.loaders.html = 'html?minimize=true&conservativeCollapse=false';
module.exports = cooking.resolve(); module.exports = cooking.resolve();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment