Hooke / muse-ui-test

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
87ce2a85 1 parent 553fedbd

fix 功能

Inline Side-by-side
Showing 8 changed files with 314 additions and 134 deletions
......@@ -20,7 +20,8 @@
"muse-ui-toast": "^0.3.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
"vuex": "^3.0.1",
"zhihu-particle": "0.0.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
......
......@@ -8,10 +8,10 @@
<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<title>muse-test</title>
<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<!-- <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
</script>
</script> -->
</head>
<body>
<noscript>
......
<template>
<div id="app">
<mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
<mu-list :value="default_list_index" @change="listChange">
<mu-list-item :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button active-class="is-selected">
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
<!-- <mu-list-item @click="close" button>
<mu-list-item-title>Close</mu-list-item-title>
</mu-list-item> -->
</mu-list>
</mu-drawer>
<mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
<mu-button v-if="!side_show" @click="side_show = !side_show" icon slot="left">
<mu-icon value="menu"></mu-icon>
</mu-button>
<p style="text-align: left;">Title</p>
<mu-button flat slot="right">LOGIN</mu-button>
</mu-appbar>
<!-- <mu-row gutter>
<mu-col span="4" sm="0" md="3" lg="2" xl="2">
<side :show="show2"></side>
123
</mu-col>
<mu-col span="8" sm="12" md="9" lg="10" xl="10">
<mu-appbar style="width: 100%;" color="primary">
<mu-button icon slot="left">
<mu-icon value="menu"></mu-icon>
</mu-button>
Title
<mu-button flat slot="right">LOGIN</mu-button>
</mu-appbar>
<p>111</p>
<router-view/>
</mu-col>
</mu-row> -->
<div :class="['main-contain', {'is-open': side_show}]">
<router-view/>
</div>
<router-view/>
</div>
</template>
......@@ -49,53 +12,8 @@ export default {
// side
},
mounted () {
// 屏幕宽度小于600隐藏侧边栏
this.resize($('body').width());
// 键盘屏幕宽度
$(window).resize(() => {
// 屏幕宽度小于600隐藏侧边栏
this.resize($('body').width());
});
},
data () {
return {
default_list_index: 0,
side_show: false,
screen_width: '',
docked: false,
position: 'left',
side_menu: [{
title: 'Menu Item 1',
url: '/'
}, {
title: 'Menu Item 2',
url: '/test'
}]
}
},
methods: {
resize (v) {
// 屏幕宽度小于600隐藏侧边栏
if (v <= 600) {
this.side_show = false;
this.docked = false;
} else {
this.side_show = true;
this.docked = true;
}
},
close () {
// 关闭侧边栏
this.side_show = false;
$(window).resize()
},
goTo (v) {
this.resize($('body').width());
},
listChange (v) {
//
this.default_list_index = v
}
}
}
</script>
......@@ -105,39 +23,7 @@ export default {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
// text-align: center;
color: #2c3e50;
}
.mu-appbar-header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 101;
overflow: hidden
}
.mu-appbar-header.is-open {
left: 256px;
}
.mu-appbar-header.is-only-title .mu-appbar-title {
margin-left: 16px
}
.main-contain {
top: 100px;
position: relative;
}
.main-contain.is-open {
left: 256px;
width: calc(100% - 256px)
}
// .mu-item.is-selected {
// color: #2196f3;
// }
</style>
......
<template lang="html">
<div class="background"></div>
</template>
<script>
import Particle from 'zhihu-particle'
export default {
name: 'layout',
mounted () {
new Particle(this.$el, { atomColor: '#F9FAFC', interactive: true, density: 'low' })
$('body').css('background', '#1F2D3D')
}
}
</script>
<style scoped>
.background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
}
</style>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
......@@ -20,12 +14,21 @@ export default new Router({
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/test',
name: 'test',
path: '/login',
name: '登录页',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/test.vue')
component: () => import(/* webpackChunkName: "about" */ './views/login.vue')
},
{
path: '/',
component: () => import(/* webpackChunkName: "about" */ './views/Home.vue'),
name: '',
children: [{
path: '/table',
component: () => import(/* webpackChunkName: "about" */ './views/test.vue')
}]
}
]
})
......
<template>
<div class="home">
<div id="app">
<mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
<mu-list :value="default_list_index" @change="listChange">
<mu-list-item :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button active-class="is-selected">
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
</mu-list>
<mu-list :value="default_list_index" @change="listChange" toggle-nested>
<mu-list-item button :ripple="false" nested :open="open === 'send'" @toggle-nested="open = arguments[0] ? 'send' : ''">
<mu-list-item-action>
<mu-icon value="send"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>展开项</mu-list-item-title>
<mu-list-item-action>
<mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
</mu-list-item-action>
<mu-list-item button :ripple="false" slot="nested" :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" active-class="is-selected">
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
</mu-list-item>
</mu-list>
</mu-drawer>
<mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
<mu-button v-if="!side_show" @click="side_show = !side_show" icon slot="left">
<mu-icon value="menu"></mu-icon>
</mu-button>
<p style="text-align: left;">讲师管理系统</p>
<!-- <mu-button flat slot="right">登录</mu-button> -->
<mu-menu slot="right" :open.sync="menu_open">
<mu-button flat>
<mu-avatar :size="25" color="#FFFFFF">
<img src="../assets/logo.png">
</mu-avatar>
<p v-if="side_show" style="margin-left: 10px;">牛讲师</p>
</mu-button>
<mu-list slot="content">
<mu-list-item button @click="menuClick('exit')">
<mu-list-item-content>
<mu-list-item-title>退出</mu-list-item-title>
</mu-list-item-content>
</mu-list-item>
</mu-list>
</mu-menu>
</mu-appbar>
<div :class="['main-contain', {'is-open': side_show}]">
<div style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
{{side_menu[default_list_index]['title']}}
</div>
<router-view/>
</div>
</div>
</template>
<script>
// import side from 'components/side'
export default {
name: 'home'
components: {
// side
},
mounted () {
// 屏幕宽度小于600隐藏侧边栏
this.resize($('body').width());
// 键盘屏幕宽度
$(window).resize(() => {
// 屏幕宽度小于600隐藏侧边栏
this.resize($('body').width());
});
// 默认选中
this.default_list_index = localStorage.getItem('default_list_index') ? +localStorage.getItem('default_list_index') : 0;
//
$('body').css('background', '#FAFAFA')
},
data () {
return {
default_list_index: 0,
menu_open: false,
side_show: false,
screen_width: '',
docked: false,
position: 'left',
side_menu: [{
title: '课程管理',
auth: '',
url: '/'
}, {
title: '讲师管理',
auth: '',
url: '/table'
}],
open: 'send'
}
},
methods: {
resize (v) {
// 屏幕宽度小于600隐藏侧边栏
if (v <= 600) {
this.side_show = false;
this.docked = false;
} else {
this.side_show = true;
this.docked = true;
}
},
close () {
// 关闭侧边栏
this.side_show = false;
$(window).resize()
},
goTo (v) {
this.resize($('body').width());
},
listChange (v) {
//
if (!_.isUndefined(v)) {
this.default_list_index = v;
localStorage.setItem('default_list_index', v)
}
},
menuClick (v) {
// 下拉菜单项选中
this.menu_open = false;
if (v === 'exit') {
this.$router.push('/login')
}
}
}
}
</script>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// text-align: center;
color: #2c3e50;
}
.mu-appbar-header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 101;
overflow: hidden
}
.mu-appbar-header.is-open {
left: 256px;
}
.mu-appbar-header.is-only-title .mu-appbar-title {
margin-left: 16px
}
.main-contain {
top: 90px;
position: relative;
}
.main-contain.is-open {
left: 256px;
width: calc(100% - 256px)
}
// .mu-item.is-selected {
// color: #2196f3;
// }
</style>
......
<template lang="html">
<div class="">
<background></background>
<mu-container>
<mu-form ref="form" :model="validateForm" class="mu-demo-form">
<mu-form-item label="用户名" help-text="帮助文字" prop="username" :rules="usernameRules">
<mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
</mu-form-item>
<mu-form-item label="密码" prop="password" :rules="passwordRules">
<mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
</mu-form-item>
<mu-form-item prop="isAgree" :rules="argeeRules">
<mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
</mu-form-item>
<!-- <mu-form-item> -->
<!-- <mu-button color="primary" @click="submit">提交</mu-button> -->
<!-- <mu-button @click="clear">重置</mu-button> -->
<mu-flex class="flex-wrapper" justify-content="center">
<mu-flex class="flex-demo" justify-content="center" fill>
<mu-button color="primary" @click="submit">提交</mu-button>
</mu-flex>
<mu-flex class="flex-demo" justify-content="center" fill>
<mu-button @click="clear">重置</mu-button>
</mu-flex>
</mu-flex>
<!-- </mu-form-item> -->
</mu-form>
</mu-container>
</div>
</template>
<script>
import Background from '../components/background'
export default {
components: { Background },
data () {
return {
usernameRules: [
{ validate: (val) => !!val, message: '必须填写用户名' },
{ validate: (val) => val.length >= 3, message: '用户名长度大于3' }
],
passwordRules: [
{ validate: (val) => !!val, message: '必须填写密码' },
{ validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10' }
],
argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议' }],
validateForm: {
username: '',
password: '',
isAgree: false
}
}
},
methods: {
submit () {
this.$refs.form.validate().then((result) => {
console.warn('form valid: ', result)
});
},
clear () {
this.$refs.form.clear();
this.validateForm = {
username: '',
password: '',
isAgree: false
};
}
}
}
</script>
<style lang="less">
body {
background: #1F2D3D;
}
.mu-demo-form {
padding: 20px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin-bottom: 20px;
background-color: #F9FAFC;
margin: 120px auto;
padding: 35px 35px 15px 35px;
width: 400px;
border: 2px solid #FAFAFA;
}
</style>
<template lang="html">
<mu-container>
<!-- <div style="margin: 0.5rem;"> -->
<mu-paper :z-depth="1">
<mu-data-table :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list">
<template slot-scope="scope">
......@@ -10,14 +9,19 @@
<td class="is-center">{{scope.row.carbs}}</td>
<td class="is-center">{{scope.row.protein}}</td>
<td class="is-center">
jjj
<span @click="edit(scope.row)" style="margin-right: 8px;">编辑</span>
<span>删除</span>
</td>
</template>
</mu-data-table>
</mu-paper>
<!-- </div> -->
</mu-container>
<mu-dialog title="提示框" width="360" :open.sync="openSimple">
this is simple Dialog
<mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">确认</mu-button>
<mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
</mu-dialog>
</mu-container>
</template>
<script>
......@@ -30,6 +34,7 @@ export default {
name: '',
order: 'asc'
},
openSimple: false,
columns: [
{ title: '我是测试表头', name: 'name', width: '150' },
{ title: '我是测试表头123', name: 'calories', sortable: true, width: '150', align: 'center' },
......@@ -125,6 +130,13 @@ export default {
methods: {
handleSortChange ({ name, order }) {
this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
},
edit () {
//
this.openSimple = true;
},
closeSimpleDialog () {
this.openSimple = false;
}
}
}
......