Skip to content

W
web-monitor
Unverified Commit 5d769533 authored by 花裤衩's avatar 花裤衩 Committed by GitHub
Browse files
Options

add: eslint-plugin-vue (#148)

parent 8754757e
Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 142 deletions
.eslintrc.js
View file @ 5d769533
module.exports = { module.exports = {
root: true, root: true,
parser: 'babel-eslint',
parserOptions: { parserOptions: {
parser: 'babel-eslint',
sourceType: 'module' sourceType: 'module'
}, },
env: { env: {
...@@ -9,22 +9,19 @@ module.exports = { ...@@ -9,22 +9,19 @@ module.exports = {
node: true, node: true,
es6: true, es6: true,
}, },
extends: 'eslint:recommended', extends: ['plugin:vue/recommended', 'eslint:recommended'],
// required to lint *.vue files
plugins: [
'html'
],
// check if imports actually resolve
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here // add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue //it is base on https://github.com/vuejs/eslint-config-vue
rules: { rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/name-property-casing": ["error", "PascalCase"],
'accessor-pairs': 2, 'accessor-pairs': 2,
'arrow-spacing': [2, { 'arrow-spacing': [2, {
'before': true, 'before': true,
...@@ -196,3 +193,4 @@ module.exports = { ...@@ -196,3 +193,4 @@ module.exports = {
'array-bracket-spacing': [2, 'never'] 'array-bracket-spacing': [2, 'never']
} }
} }
package.json
View file @ 5d769533
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
"eslint": "4.19.1", "eslint": "4.19.1",
"eslint-friendly-formatter": "4.0.1", "eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0", "eslint-loader": "2.0.0",
"eslint-plugin-html": "4.0.5", "eslint-plugin-vue": "4.7.1",
"eventsource-polyfill": "0.9.6", "eventsource-polyfill": "0.9.6",
"file-loader": "1.1.11", "file-loader": "1.1.11",
"friendly-errors-webpack-plugin": "1.7.0", "friendly-errors-webpack-plugin": "1.7.0",
......
src/App.vue
View file @ 5d769533
<template> <template>
<div id="app"> <div id="app">
<router-view></router-view> <router-view/>
</div> </div>
</template> </template>
......
src/components/Breadcrumb/index.vue
View file @ 5d769533
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title"> <el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span> <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
<router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link> <router-link v-else :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
</el-breadcrumb> </el-breadcrumb>
...@@ -11,9 +11,6 @@ ...@@ -11,9 +11,6 @@
<script> <script>
export default { export default {
created() {
this.getBreadcrumb()
},
data() { data() {
return { return {
levelList: null levelList: null
...@@ -24,6 +21,9 @@ export default { ...@@ -24,6 +21,9 @@ export default {
this.getBreadcrumb() this.getBreadcrumb()
} }
}, },
created() {
this.getBreadcrumb()
},
methods: { methods: {
getBreadcrumb() { getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name) let matched = this.$route.matched.filter(item => item.name)
......
src/components/Hamburger/index.vue
View file @ 5d769533
<template> <template>
<div> <div>
<svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" <svg
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"> :class="{'is-active':isActive}"
<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" t="1492500959545"
p-id="1692"></path> class="hamburger"
<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" style=""
p-id="1693"></path> viewBox="0 0 1024 1024"
<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" version="1.1"
p-id="1694"></path> xmlns="http://www.w3.org/2000/svg"
p-id="1691"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
@click="toggleClick">
<path
d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
p-id="1692" />
<path
d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
p-id="1693" />
<path
d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
p-id="1694" />
</svg> </svg>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'hamburger', name: 'Hamburger',
props: { props: {
isActive: { isActive: {
type: Boolean, type: Boolean,
......
src/components/SvgIcon/index.vue
View file @ 5d769533
<template> <template>
<svg :class="svgClass" aria-hidden="true"> <svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use> <use :xlink:href="iconName"/>
</svg> </svg>
</template> </template>
<script> <script>
export default { export default {
name: 'svg-icon', name: 'SvgIcon',
props: { props: {
iconClass: { iconClass: {
type: String, type: String,
required: true required: true
}, },
className: { className: {
type: String type: String,
default: ''
} }
}, },
computed: { computed: {
......
src/router/index.js
View file @ 5d769533
...@@ -76,7 +76,7 @@ export const constantRouterMap = [ ...@@ -76,7 +76,7 @@ export const constantRouterMap = [
path: '/nested', path: '/nested',
component: Layout, component: Layout,
redirect: '/nested/menu1', redirect: '/nested/menu1',
name: 'nested', name: 'Nested',
meta: { meta: {
title: 'nested', title: 'nested',
icon: 'nested' icon: 'nested'
...@@ -85,31 +85,31 @@ export const constantRouterMap = [ ...@@ -85,31 +85,31 @@ export const constantRouterMap = [
{ {
path: 'menu1', path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'menu1', name: 'Menu1',
meta: { title: 'menu1' }, meta: { title: 'menu1' },
children: [ children: [
{ {
path: 'menu1-1', path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'), component: () => import('@/views/nested/menu1/menu1-1'),
name: 'menu1-1', name: 'Menu1-1',
meta: { title: 'menu1-1' } meta: { title: 'menu1-1' }
}, },
{ {
path: 'menu1-2', path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'), component: () => import('@/views/nested/menu1/menu1-2'),
name: 'menu1-2', name: 'Menu1-2',
meta: { title: 'menu1-2' }, meta: { title: 'menu1-2' },
children: [ children: [
{ {
path: 'menu1-2-1', path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'menu1-2-1', name: 'Menu1-2-1',
meta: { title: 'menu1-2-1' } meta: { title: 'menu1-2-1' }
}, },
{ {
path: 'menu1-2-2', path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'menu1-2-2', name: 'Menu1-2-2',
meta: { title: 'menu1-2-2' } meta: { title: 'menu1-2-2' }
} }
] ]
...@@ -117,7 +117,7 @@ export const constantRouterMap = [ ...@@ -117,7 +117,7 @@ export const constantRouterMap = [
{ {
path: 'menu1-3', path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'), component: () => import('@/views/nested/menu1/menu1-3'),
name: 'menu1-3', name: 'Menu1-3',
meta: { title: 'menu1-3' } meta: { title: 'menu1-3' }
} }
] ]
...@@ -138,4 +138,3 @@ export default new Router({ ...@@ -138,4 +138,3 @@ export default new Router({
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap routes: constantRouterMap
}) })
src/views/404.vue
View file @ 5d769533
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="bullshit"> <div class="bullshit">
<div class="bullshit__oops">OOPS!</div> <div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">版权所有 <div class="bullshit__info">版权所有
<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a> <a class="link-type" href="https://wallstreetcn.com" target="_blank">华尔街见闻</a>
</div> </div>
<div class="bullshit__headline">{{ message }}</div> <div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div> <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<script> <script>
export default { export default {
name: 'page404', name: 'Page404',
computed: { computed: {
message() { message() {
return '网管说这个页面你不能进......' return '网管说这个页面你不能进......'
......
src/views/dashboard/index.vue
View file @ 5d769533
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<div class="dashboard-text">name:{{name}}</div> <div class="dashboard-text">name:{{ name }}</div>
<div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div> <div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>
</div> </div>
</template> </template>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'dashboard', name: 'Dashboard',
computed: { computed: {
...mapGetters([ ...mapGetters([
'name', 'name',
......
src/views/form/index.vue
View file @ 5d769533
...@@ -2,42 +2,42 @@ ...@@ -2,42 +2,42 @@
<div class="app-container"> <div class="app-container">
<el-form ref="form" :model="form" label-width="120px"> <el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name"> <el-form-item label="Activity name">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"/>
</el-form-item> </el-form-item>
<el-form-item label="Activity zone"> <el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone"> <el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option> <el-option label="Zone one" value="shanghai"/>
<el-option label="Zone two" value="beijing"></el-option> <el-option label="Zone two" value="beijing"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Activity time"> <el-form-item label="Activity time">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker> <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;"/>
</el-col> </el-col>
<el-col class="line" :span="2">-</el-col> <el-col :span="2" class="line">-</el-col>
<el-col :span="11"> <el-col :span="11">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker> <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;"/>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="Instant delivery"> <el-form-item label="Instant delivery">
<el-switch v-model="form.delivery"></el-switch> <el-switch v-model="form.delivery"/>
</el-form-item> </el-form-item>
<el-form-item label="Activity type"> <el-form-item label="Activity type">
<el-checkbox-group v-model="form.type"> <el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type"></el-checkbox> <el-checkbox label="Online activities" name="type"/>
<el-checkbox label="Promotion activities" name="type"></el-checkbox> <el-checkbox label="Promotion activities" name="type"/>
<el-checkbox label="Offline activities" name="type"></el-checkbox> <el-checkbox label="Offline activities" name="type"/>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox> <el-checkbox label="Simple brand exposure" name="type"/>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="Resources"> <el-form-item label="Resources">
<el-radio-group v-model="form.resource"> <el-radio-group v-model="form.resource">
<el-radio label="Sponsor"></el-radio> <el-radio label="Sponsor"/>
<el-radio label="Venue"></el-radio> <el-radio label="Venue"/>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="Activity form"> <el-form-item label="Activity form">
<el-input type="textarea" v-model="form.desc"></el-input> <el-input v-model="form.desc" type="textarea"/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button> <el-button type="primary" @click="onSubmit">Create</el-button>
......
src/views/layout/Layout.vue
View file @ 5d769533
<template> <template>
<div class="app-wrapper" :class="classObj"> <div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar class="sidebar-container"></sidebar> <sidebar class="sidebar-container"/>
<div class="main-container"> <div class="main-container">
<navbar></navbar> <navbar/>
<app-main></app-main> <app-main/>
</div> </div>
</div> </div>
</template> </template>
...@@ -14,7 +14,7 @@ import { Navbar, Sidebar, AppMain } from './components' ...@@ -14,7 +14,7 @@ import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
export default { export default {
name: 'layout', name: 'Layout',
components: { components: {
Navbar, Navbar,
Sidebar, Sidebar,
......
src/views/layout/components/AppMain.vue
View file @ 5d769533
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="app-main"> <section class="app-main">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<!-- <router-view :key="key"></router-view> --> <!-- <router-view :key="key"></router-view> -->
<router-view></router-view> <router-view/>
</transition> </transition>
</section> </section>
</template> </template>
......
src/views/layout/components/Navbar.vue
View file @ 5d769533
<template> <template>
<el-menu class="navbar" mode="horizontal"> <el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger> <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<breadcrumb></breadcrumb> <breadcrumb />
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'"> <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"/>
</div> </div>
<el-dropdown-menu class="user-dropdown" slot="dropdown"> <el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link class="inlineBlock" to="/"> <router-link class="inlineBlock" to="/">
<el-dropdown-item> <el-dropdown-item>
Home Home
</el-dropdown-item> </el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item divided> <el-dropdown-item divided>
<span @click="logout" style="display:block;">LogOut</span> <span style="display:block;" @click="logout">LogOut</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
......
src/views/layout/components/Sidebar/SidebarItem.vue
View file @ 5d769533
...@@ -3,24 +3,30 @@ ...@@ -3,24 +3,30 @@
<router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)"> <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon> <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
<span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{onlyOneChild.meta.title}}</span> <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ onlyOneChild.meta.title }}</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<el-submenu v-else :index="item.name||item.path"> <el-submenu v-else :index="item.name||item.path">
<template slot="title"> <template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon> <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span> <span v-if="item.meta&&item.meta.title" slot="title">{{ item.meta.title }}</span>
</template> </template>
<template v-for="child in item.children" v-if="!child.hidden"> <template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item> <sidebar-item
v-if="child.children&&child.children.length>0"
:is-nest="true"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
class="nest-menu"/>
<router-link v-else :to="resolvePath(child.path)" :key="child.name"> <router-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)"> <el-menu-item :index="resolvePath(child.path)">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon> <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span> <span v-if="child.meta&&child.meta.title" slot="title">{{ child.meta.title }}</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
</template> </template>
......
src/views/layout/components/Sidebar/index.vue
View file @ 5d769533
<template> <template>
<el-scrollbar wrapClass="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
mode="vertical"
:show-timeout="200" :show-timeout="200"
:default-active="$route.path" :default-active="$route.path"
:collapse="isCollapse" :collapse="isCollapse"
mode="vertical"
background-color="#304156" background-color="#304156"
text-color="#bfcbd9" text-color="#bfcbd9"
active-text-color="#409EFF" active-text-color="#409EFF"
> >
<sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item> <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"/>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</template> </template>
......
src/views/login/index.vue
View file @ 5d769533
<template> <template>
<div class="login-container"> <div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<h3 class="title">vue-element-admin</h3> <h3 class="title">vue-element-admin</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<span class="svg-container svg-container_login"> <span class="svg-container svg-container_login">
<svg-icon icon-class="user" /> <svg-icon icon-class="user" />
</span> </span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" /> <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password"></svg-icon> <svg-icon icon-class="password" />
</span>
<el-input
:type="pwdType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="password"
@keyup.enter.native="handleLogin" />
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span> </span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="password"></el-input>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
Sign in Sign in
</el-button> </el-button>
</el-form-item> </el-form-item>
...@@ -33,7 +40,7 @@ ...@@ -33,7 +40,7 @@
import { isvalidUsername } from '@/utils/validate' import { isvalidUsername } from '@/utils/validate'
export default { export default {
name: 'login', name: 'Login',
data() { data() {
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) { if (!isvalidUsername(value)) {
......
src/views/nested/menu1/index.vue
View file @ 5d769533
<template > <template >
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 1" :closable="false"> <el-alert :closable="false" title="menu 1">
<router-view /> <router-view />
</el-alert> </el-alert>
</div> </div>
......
src/views/nested/menu1/menu1-1/index.vue
View file @ 5d769533
<template > <template >
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 1-1" type="success" :closable="false"> <el-alert :closable="false" title="menu 1-1" type="success">
<router-view /> <router-view />
</el-alert> </el-alert>
</div> </div>
......
src/views/nested/menu1/menu1-2/index.vue
View file @ 5d769533
<template> <template>
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 1-2" type="success" :closable="false"> <el-alert :closable="false" title="menu 1-2" type="success">
<router-view /> <router-view />
</el-alert> </el-alert>
</div> </div>
......
src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
View file @ 5d769533
<template functional> <template functional>
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 1-2-1" type="warning" :closable="false" /> <el-alert :closable="false" title="menu 1-2-1" type="warning" />
</div> </div>
</template> </template>
src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
View file @ 5d769533
<template functional> <template functional>
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 1-2-2" type="warning" :closable="false" /> <el-alert :closable="false" title="menu 1-2-2" type="warning" />
</div> </div>
</template> </template>
src/views/nested/menu1/menu1-3/index.vue
View file @ 5d769533
<template functional> <template functional>
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 1-3" type="success" :closable="false" /> <el-alert :closable="false" title="menu 1-3" type="success" />
</div> </div>
</template> </template>
src/views/nested/menu2/index.vue
View file @ 5d769533
<template> <template>
<div style="padding:30px;"> <div style="padding:30px;">
<el-alert title="menu 2" :closable="false" /> <el-alert :closable="false" title="menu 2" />
</div> </div>
</template> </template>
src/views/table/index.vue
View file @ 5d769533
<template> <template>
<div class="app-container"> <div class="app-container">
<el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row> <el-table
<el-table-column align="center" label='ID' width="95"> v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
fit
highlight-current-row>
<el-table-column align="center" label="ID" width="95">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.$index}} {{ scope.$index }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Title"> <el-table-column label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.title}} {{ scope.row.title }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Author" width="110" align="center"> <el-table-column label="Author" width="110" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.author}}</span> <span>{{ scope.row.author }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Pageviews" width="110" align="center"> <el-table-column label="Pageviews" width="110" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.pageviews}} {{ scope.row.pageviews }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="Status" width="110" align="center"> <el-table-column class-name="status-col" label="Status" width="110" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="created_at" label="Display_time" width="200"> <el-table-column align="center" prop="created_at" label="Display_time" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<i class="el-icon-time"></i> <i class="el-icon-time"/>
<span>{{scope.row.display_time}}</span> <span>{{ scope.row.display_time }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -40,12 +46,6 @@ ...@@ -40,12 +46,6 @@
import { getList } from '@/api/table' import { getList } from '@/api/table'
export default { export default {
data() {
return {
list: null,
listLoading: true
}
},
filters: { filters: {
statusFilter(status) { statusFilter(status) {
const statusMap = { const statusMap = {
...@@ -56,6 +56,12 @@ export default { ...@@ -56,6 +56,12 @@ export default {
return statusMap[status] return statusMap[status]
} }
}, },
data() {
return {
list: null,
listLoading: true
}
},
created() { created() {
this.fetchData() this.fetchData()
}, },
......
src/views/tree/index.vue
View file @ 5d769533
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;"></el-input> <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2"></el-tree> <el-tree
ref="tree2"
:data="data2"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
default-expand-all
/>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
watch: {
filterText(val) {
this.$refs.tree2.filter(val)
}
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
},
data() { data() {
return { return {
...@@ -65,6 +60,18 @@ export default { ...@@ -65,6 +60,18 @@ export default {
label: 'label' label: 'label'
} }
} }
},
watch: {
filterText(val) {
this.$refs.tree2.filter(val)
}
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
} }
} }
</script> </script>
......
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