Skip to content

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

update route

parent e320f43c
Show 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}});`
var MAIN_TEMPLATE = `{{include}}
const install = function(Vue) {
if (install.installed) return;
{{install}}
Vue.use(Loading);
......
examples/app.vue
View file @ 287868d1
......@@ -263,23 +263,24 @@
</style>
<template>
<div id="app">
<div class="pure-g">
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
<a class="pure-menu-heading app__brand" v-link="'/'">
<router-link class="pure-menu-heading app__brand" to="/">
<span class="app__eleme">ELEME</span>NT
</a>
</router-link>
<template v-for="nav in navs">
<template v-for="(nav, key) in navs">
<a
href="#"
@click.prevent="navState.$set($index, !navState[$index] || false)"
@click.prevent="navState.$set(key, !navState[key] || false)"
class="pure-menu-heading app__menu__label"
:class="{ 'unfold': !navState[$index] }"
:class="{ 'unfold': !navState[key] }"
v-text="nav.group"></a>
<ul
class="pure-menu-list"
transition="slidedown"
v-show="!navState[$index]"
v-show="!navState[key]"
:style="{
maxHeight: nav.list.length * 44 + 'px'
}">
......@@ -287,10 +288,10 @@
class="pure-menu-item app__menu__item"
v-for="item in nav.list"
v-if="!item.disabled">
<a
<router-link
class="pure-menu-link app__menu__link"
v-link="{ path: item.path, activeClass: 'active' }"
v-text="item.name"></a>
:to="{ path: item.path, activeClass: 'active' }"
v-text="item.name"></router-link>
</li>
</ul>
</template>
......@@ -300,7 +301,7 @@
<header class="app__header">
<h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
</header>
<section class="app__main" v-el:main>
<section class="app__main" ref="main">
<p class="app__description">{{ $route.description }}</p>
<router-view></router-view>
</section>
......@@ -308,7 +309,8 @@
</div>
</div>
<button class="hljs__button" v-el:button></button>
<button class="hljs__button" ref="button"></button>
</div>
</template>
<script>
......@@ -341,10 +343,10 @@
this.navs = navs;
},
ready() {
mounted() {
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;
toggleClass(parent, 'open');
......@@ -352,7 +354,7 @@
},
beforeDestroy() {
E.undelegate(this.$els.main, '.hljs', 'click.highlight');
E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
},
watch: {
......
examples/docs/tooltip.md
View file @ 287868d1
......@@ -34,20 +34,20 @@
module.exports = {
data() {
return {
switch: true
value: true
}
},
computed: {
effect() {
return this.switch ? 'dark' : 'light';
return this.value ? 'dark' : 'light';
}
}
}
</script>
<el-switch
:value.sync="switch"
v-model="value"
on-text="黑色"
off-text="白色"
on-color="#1f2d3d"
......
examples/entry.js
View file @ 287868d1
......@@ -5,22 +5,15 @@ import configRouter from './route.config';
import Element from 'main/index.js';
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(VueRouter);
const router = new VueRouter();
const app = Vue.extend({
template: '<entry></entry>',
components: { entry }
const router = new VueRouter({
base: __dirname,
routes: configRouter
});
configRouter(router);
router.start(app, 'app');
router.afterEach(() => {
document.body.scrollTop = 0;
});
new Vue({ // eslint-disable-line
render: h => h(entry),
router
}).$mount('#app');
examples/index.template.html
View file @ 287868d1
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<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>Element 后台组件</title>
<title>test-vue2</title>
</head>
<body>
<app></app>
<!-- built files will be auto injected -->
<div id="app"></div>
</body>
</html>
examples/route.config.js
View file @ 287868d1
import navConfig from './nav.config.json';
const registerRoute = (config) => {
let route = {};
config.map(nav => nav.list.map(page => {
try {
route[page.path] = page.path !== '/changelog' ? {
component: require(`./docs${page.path}.md`),
title: page.title || page.name,
description: page.description
} : {
component: require('../CHANGELOG.md'),
let route = [];
config
.map(nav =>
nav.list.map(page => {
if (page.path === '/changelog') return;
const component = require(`./docs${page.path}.md`);
route.push({
path: page.path,
title: page.title || page.name,
description: page.description
};
} catch (e) {
console.error(e);
page.disabled = true;
}
}));
description: page.description,
component: component.default || component
});
})
);
return { route, navs: config };
};
const route = registerRoute(navConfig);
export const navs = route.navs;
export default function configRouter(router) {
router.map(Object.assign({
'*': {
route.route.push({
path: '/changelog',
component: require('../CHANGELOG.md')
});
route.route.push({
path: '*',
component: require('./docs/home.md')
}
}, route.route));
});
router.beforeEach(transition => {
document.title = transition.to.title || document.title;
transition.to.router.app.$broadcast('element.example.reload');
transition.next();
});
};
export const navs = route.navs;
export default route.route;
packages/button/src/button.vue
View file @ 287868d1
......@@ -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>
<i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
<slot></slot>
</span>
</button>
</template>
<script>
......
scripts/cooking.demo.js
View file @ 287868d1
......@@ -84,6 +84,6 @@ Object.keys(Components).forEach(function (key) {
// 开发模式不需要将不存在的 style.css 打包进去
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();
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