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 @@ ...@@ -20,7 +20,8 @@
20 "muse-ui-toast": "^0.3.0", 20 "muse-ui-toast": "^0.3.0",
21 "vue": "^2.6.10", 21 "vue": "^2.6.10",
22 "vue-router": "^3.0.3", 22 "vue-router": "^3.0.3",
23 - "vuex": "^3.0.1" 23 + "vuex": "^3.0.1",
24 + "zhihu-particle": "0.0.9"
24 }, 25 },
25 "devDependencies": { 26 "devDependencies": {
26 "@vue/cli-plugin-babel": "^3.7.0", 27 "@vue/cli-plugin-babel": "^3.7.0",
......
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
8 <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"> 8 <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
10 <title>muse-test</title> 10 <title>muse-test</title>
11 - <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script> 11 + <!-- <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
12 <script type="text/javascript"> 12 <script type="text/javascript">
13 var vConsole = new VConsole(); 13 var vConsole = new VConsole();
14 - </script> 14 + </script> -->
15 </head> 15 </head>
16 <body> 16 <body>
17 <noscript> 17 <noscript>
......
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 - <mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1"> 3 + <router-view/>
4 - <mu-list :value="default_list_index" @change="listChange">
5 - <mu-list-item :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button active-class="is-selected">
6 - <mu-list-item-title>{{ v.title }}</mu-list-item-title>
7 - </mu-list-item>
8 - <!-- <mu-list-item @click="close" button>
9 - <mu-list-item-title>Close</mu-list-item-title>
10 - </mu-list-item> -->
11 - </mu-list>
12 - </mu-drawer>
13 - <mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
14 - <mu-button v-if="!side_show" @click="side_show = !side_show" icon slot="left">
15 - <mu-icon value="menu"></mu-icon>
16 - </mu-button>
17 - <p style="text-align: left;">Title</p>
18 - <mu-button flat slot="right">LOGIN</mu-button>
19 - </mu-appbar>
20 - <!-- <mu-row gutter>
21 - <mu-col span="4" sm="0" md="3" lg="2" xl="2">
22 - <side :show="show2"></side>
23 - 123
24 - </mu-col>
25 - <mu-col span="8" sm="12" md="9" lg="10" xl="10">
26 - <mu-appbar style="width: 100%;" color="primary">
27 - <mu-button icon slot="left">
28 - <mu-icon value="menu"></mu-icon>
29 - </mu-button>
30 - Title
31 -
32 - <mu-button flat slot="right">LOGIN</mu-button>
33 - </mu-appbar>
34 - <p>111</p>
35 - <router-view/>
36 - </mu-col>
37 - </mu-row> -->
38 - <div :class="['main-contain', {'is-open': side_show}]">
39 - <router-view/>
40 - </div>
41 </div> 4 </div>
42 </template> 5 </template>
43 6
...@@ -49,53 +12,8 @@ export default { ...@@ -49,53 +12,8 @@ export default {
49 // side 12 // side
50 }, 13 },
51 mounted () { 14 mounted () {
52 - // 屏幕宽度小于600隐藏侧边栏
53 - this.resize($('body').width());
54 - // 键盘屏幕宽度
55 - $(window).resize(() => {
56 - // 屏幕宽度小于600隐藏侧边栏
57 - this.resize($('body').width());
58 - });
59 - },
60 - data () {
61 - return {
62 - default_list_index: 0,
63 - side_show: false,
64 - screen_width: '',
65 - docked: false,
66 - position: 'left',
67 - side_menu: [{
68 - title: 'Menu Item 1',
69 - url: '/'
70 - }, {
71 - title: 'Menu Item 2',
72 - url: '/test'
73 - }]
74 - }
75 }, 15 },
76 methods: { 16 methods: {
77 - resize (v) {
78 - // 屏幕宽度小于600隐藏侧边栏
79 - if (v <= 600) {
80 - this.side_show = false;
81 - this.docked = false;
82 - } else {
83 - this.side_show = true;
84 - this.docked = true;
85 - }
86 - },
87 - close () {
88 - // 关闭侧边栏
89 - this.side_show = false;
90 - $(window).resize()
91 - },
92 - goTo (v) {
93 - this.resize($('body').width());
94 - },
95 - listChange (v) {
96 - //
97 - this.default_list_index = v
98 - }
99 } 17 }
100 } 18 }
101 </script> 19 </script>
...@@ -105,39 +23,7 @@ export default { ...@@ -105,39 +23,7 @@ export default {
105 font-family: 'Avenir', Helvetica, Arial, sans-serif; 23 font-family: 'Avenir', Helvetica, Arial, sans-serif;
106 -webkit-font-smoothing: antialiased; 24 -webkit-font-smoothing: antialiased;
107 -moz-osx-font-smoothing: grayscale; 25 -moz-osx-font-smoothing: grayscale;
108 - text-align: center; 26 + // text-align: center;
109 color: #2c3e50; 27 color: #2c3e50;
110 } 28 }
111 -
112 -.mu-appbar-header {
113 - position: fixed;
114 - left: 0;
115 - right: 0;
116 - top: 0;
117 - z-index: 101;
118 - overflow: hidden
119 -}
120 -
121 -.mu-appbar-header.is-open {
122 - left: 256px;
123 -}
124 -
125 -.mu-appbar-header.is-only-title .mu-appbar-title {
126 - margin-left: 16px
127 -}
128 -
129 -.main-contain {
130 - top: 100px;
131 - position: relative;
132 -}
133 -
134 -.main-contain.is-open {
135 - left: 256px;
136 - width: calc(100% - 256px)
137 -}
138 -
139 -// .mu-item.is-selected {
140 -// color: #2196f3;
141 -// }
142 -
143 </style> 29 </style>
......
1 +<template lang="html">
2 + <div class="background"></div>
3 +</template>
4 +
5 +<script>
6 +import Particle from 'zhihu-particle'
7 +
8 +export default {
9 + name: 'layout',
10 + mounted () {
11 + new Particle(this.$el, { atomColor: '#F9FAFC', interactive: true, density: 'low' })
12 + $('body').css('background', '#1F2D3D')
13 + }
14 +}
15 +</script>
16 +
17 +<style scoped>
18 + .background {
19 + position: absolute;
20 + top: 0;
21 + left: 0;
22 + right: 0;
23 + bottom: 0;
24 + z-index: 0;
25 + overflow: hidden;
26 + }
27 +</style>
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 -import Home from './views/Home.vue'
4 3
5 Vue.use(Router) 4 Vue.use(Router)
6 5
7 export default new Router({ 6 export default new Router({
8 routes: [ 7 routes: [
9 { 8 {
10 - path: '/',
11 - name: 'home',
12 - component: Home
13 - },
14 - {
15 path: '/about', 9 path: '/about',
16 name: 'about', 10 name: 'about',
17 // route level code-splitting 11 // route level code-splitting
...@@ -20,12 +14,21 @@ export default new Router({ ...@@ -20,12 +14,21 @@ export default new Router({
20 component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 14 component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
21 }, 15 },
22 { 16 {
23 - path: '/test', 17 + path: '/login',
24 - name: 'test', 18 + name: '登录页',
25 // route level code-splitting 19 // route level code-splitting
26 // this generates a separate chunk (about.[hash].js) for this route 20 // this generates a separate chunk (about.[hash].js) for this route
27 // which is lazy-loaded when the route is visited. 21 // which is lazy-loaded when the route is visited.
28 - component: () => import(/* webpackChunkName: "about" */ './views/test.vue') 22 + component: () => import(/* webpackChunkName: "about" */ './views/login.vue')
23 + },
24 + {
25 + path: '/',
26 + component: () => import(/* webpackChunkName: "about" */ './views/Home.vue'),
27 + name: '',
28 + children: [{
29 + path: '/table',
30 + component: () => import(/* webpackChunkName: "about" */ './views/test.vue')
31 + }]
29 } 32 }
30 ] 33 ]
31 }) 34 })
......
1 <template> 1 <template>
2 - <div class="home"> 2 + <div id="app">
3 + <mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
4 + <mu-list :value="default_list_index" @change="listChange">
5 + <mu-list-item :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button active-class="is-selected">
6 + <mu-list-item-title>{{ v.title }}</mu-list-item-title>
7 + </mu-list-item>
8 + </mu-list>
9 + <mu-list :value="default_list_index" @change="listChange" toggle-nested>
10 + <mu-list-item button :ripple="false" nested :open="open === 'send'" @toggle-nested="open = arguments[0] ? 'send' : ''">
11 + <mu-list-item-action>
12 + <mu-icon value="send"></mu-icon>
13 + </mu-list-item-action>
14 + <mu-list-item-title>展开项</mu-list-item-title>
15 + <mu-list-item-action>
16 + <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
17 + </mu-list-item-action>
18 + <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">
19 + <mu-list-item-title>{{ v.title }}</mu-list-item-title>
20 + </mu-list-item>
21 + </mu-list-item>
22 + </mu-list>
23 + </mu-drawer>
24 + <mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
25 + <mu-button v-if="!side_show" @click="side_show = !side_show" icon slot="left">
26 + <mu-icon value="menu"></mu-icon>
27 + </mu-button>
28 + <p style="text-align: left;">讲师管理系统</p>
29 + <!-- <mu-button flat slot="right">登录</mu-button> -->
30 + <mu-menu slot="right" :open.sync="menu_open">
31 + <mu-button flat>
32 + <mu-avatar :size="25" color="#FFFFFF">
33 + <img src="../assets/logo.png">
34 + </mu-avatar>
35 + <p v-if="side_show" style="margin-left: 10px;">牛讲师</p>
36 + </mu-button>
37 + <mu-list slot="content">
38 + <mu-list-item button @click="menuClick('exit')">
39 + <mu-list-item-content>
40 + <mu-list-item-title>退出</mu-list-item-title>
41 + </mu-list-item-content>
42 + </mu-list-item>
43 + </mu-list>
44 + </mu-menu>
45 + </mu-appbar>
46 + <div :class="['main-contain', {'is-open': side_show}]">
47 + <div style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
48 + {{side_menu[default_list_index]['title']}}
49 + </div>
50 + <router-view/>
51 + </div>
3 </div> 52 </div>
4 </template> 53 </template>
5 54
6 <script> 55 <script>
56 +// import side from 'components/side'
7 57
8 export default { 58 export default {
9 - name: 'home' 59 + components: {
60 + // side
61 + },
62 + mounted () {
63 + // 屏幕宽度小于600隐藏侧边栏
64 + this.resize($('body').width());
65 + // 键盘屏幕宽度
66 + $(window).resize(() => {
67 + // 屏幕宽度小于600隐藏侧边栏
68 + this.resize($('body').width());
69 + });
70 + // 默认选中
71 + this.default_list_index = localStorage.getItem('default_list_index') ? +localStorage.getItem('default_list_index') : 0;
72 + //
73 + $('body').css('background', '#FAFAFA')
74 + },
75 + data () {
76 + return {
77 + default_list_index: 0,
78 + menu_open: false,
79 + side_show: false,
80 + screen_width: '',
81 + docked: false,
82 + position: 'left',
83 + side_menu: [{
84 + title: '课程管理',
85 + auth: '',
86 + url: '/'
87 + }, {
88 + title: '讲师管理',
89 + auth: '',
90 + url: '/table'
91 + }],
92 + open: 'send'
93 + }
94 + },
95 + methods: {
96 + resize (v) {
97 + // 屏幕宽度小于600隐藏侧边栏
98 + if (v <= 600) {
99 + this.side_show = false;
100 + this.docked = false;
101 + } else {
102 + this.side_show = true;
103 + this.docked = true;
104 + }
105 + },
106 + close () {
107 + // 关闭侧边栏
108 + this.side_show = false;
109 + $(window).resize()
110 + },
111 + goTo (v) {
112 + this.resize($('body').width());
113 + },
114 + listChange (v) {
115 + //
116 + if (!_.isUndefined(v)) {
117 + this.default_list_index = v;
118 + localStorage.setItem('default_list_index', v)
119 + }
120 + },
121 + menuClick (v) {
122 + // 下拉菜单项选中
123 + this.menu_open = false;
124 + if (v === 'exit') {
125 + this.$router.push('/login')
126 + }
127 + }
128 + }
10 } 129 }
11 </script> 130 </script>
131 +
132 +<style lang="less">
133 +#app {
134 + font-family: 'Avenir', Helvetica, Arial, sans-serif;
135 + -webkit-font-smoothing: antialiased;
136 + -moz-osx-font-smoothing: grayscale;
137 + // text-align: center;
138 + color: #2c3e50;
139 +}
140 +
141 +.mu-appbar-header {
142 + position: fixed;
143 + left: 0;
144 + right: 0;
145 + top: 0;
146 + z-index: 101;
147 + overflow: hidden
148 +}
149 +
150 +.mu-appbar-header.is-open {
151 + left: 256px;
152 +}
153 +
154 +.mu-appbar-header.is-only-title .mu-appbar-title {
155 + margin-left: 16px
156 +}
157 +
158 +.main-contain {
159 + top: 90px;
160 + position: relative;
161 +}
162 +
163 +.main-contain.is-open {
164 + left: 256px;
165 + width: calc(100% - 256px)
166 +}
167 +
168 +// .mu-item.is-selected {
169 +// color: #2196f3;
170 +// }
171 +
172 +</style>
......
1 +<template lang="html">
2 + <div class="">
3 + <background></background>
4 + <mu-container>
5 + <mu-form ref="form" :model="validateForm" class="mu-demo-form">
6 + <mu-form-item label="用户名" help-text="帮助文字" prop="username" :rules="usernameRules">
7 + <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
8 + </mu-form-item>
9 + <mu-form-item label="密码" prop="password" :rules="passwordRules">
10 + <mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
11 + </mu-form-item>
12 + <mu-form-item prop="isAgree" :rules="argeeRules">
13 + <mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
14 + </mu-form-item>
15 + <!-- <mu-form-item> -->
16 + <!-- <mu-button color="primary" @click="submit">提交</mu-button> -->
17 + <!-- <mu-button @click="clear">重置</mu-button> -->
18 + <mu-flex class="flex-wrapper" justify-content="center">
19 + <mu-flex class="flex-demo" justify-content="center" fill>
20 + <mu-button color="primary" @click="submit">提交</mu-button>
21 + </mu-flex>
22 + <mu-flex class="flex-demo" justify-content="center" fill>
23 + <mu-button @click="clear">重置</mu-button>
24 + </mu-flex>
25 + </mu-flex>
26 + <!-- </mu-form-item> -->
27 + </mu-form>
28 + </mu-container>
29 + </div>
30 +</template>
31 +
32 +<script>
33 +import Background from '../components/background'
34 +
35 +export default {
36 + components: { Background },
37 + data () {
38 + return {
39 + usernameRules: [
40 + { validate: (val) => !!val, message: '必须填写用户名' },
41 + { validate: (val) => val.length >= 3, message: '用户名长度大于3' }
42 + ],
43 + passwordRules: [
44 + { validate: (val) => !!val, message: '必须填写密码' },
45 + { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10' }
46 + ],
47 + argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议' }],
48 + validateForm: {
49 + username: '',
50 + password: '',
51 + isAgree: false
52 + }
53 + }
54 + },
55 + methods: {
56 + submit () {
57 + this.$refs.form.validate().then((result) => {
58 + console.warn('form valid: ', result)
59 + });
60 + },
61 + clear () {
62 + this.$refs.form.clear();
63 + this.validateForm = {
64 + username: '',
65 + password: '',
66 + isAgree: false
67 + };
68 + }
69 + }
70 +}
71 +</script>
72 +
73 +<style lang="less">
74 + body {
75 + background: #1F2D3D;
76 + }
77 +.mu-demo-form {
78 + padding: 20px;
79 + -webkit-border-radius: 5px;
80 + border-radius: 5px;
81 + -moz-border-radius: 5px;
82 + background-clip: padding-box;
83 + margin-bottom: 20px;
84 + background-color: #F9FAFC;
85 + margin: 120px auto;
86 + padding: 35px 35px 15px 35px;
87 + width: 400px;
88 + border: 2px solid #FAFAFA;
89 +}
90 +</style>
1 <template lang="html"> 1 <template lang="html">
2 <mu-container> 2 <mu-container>
3 - <!-- <div style="margin: 0.5rem;"> -->
4 <mu-paper :z-depth="1"> 3 <mu-paper :z-depth="1">
5 <mu-data-table :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list"> 4 <mu-data-table :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list">
6 <template slot-scope="scope"> 5 <template slot-scope="scope">
...@@ -10,14 +9,19 @@ ...@@ -10,14 +9,19 @@
10 <td class="is-center">{{scope.row.carbs}}</td> 9 <td class="is-center">{{scope.row.carbs}}</td>
11 <td class="is-center">{{scope.row.protein}}</td> 10 <td class="is-center">{{scope.row.protein}}</td>
12 <td class="is-center"> 11 <td class="is-center">
13 - jjj 12 + <span @click="edit(scope.row)" style="margin-right: 8px;">编辑</span>
13 + <span>删除</span>
14 </td> 14 </td>
15 </template> 15 </template>
16 </mu-data-table> 16 </mu-data-table>
17 </mu-paper> 17 </mu-paper>
18 - <!-- </div> -->
19 18
20 -</mu-container> 19 + <mu-dialog title="提示框" width="360" :open.sync="openSimple">
20 + this is simple Dialog
21 + <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">确认</mu-button>
22 + <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
23 + </mu-dialog>
24 + </mu-container>
21 </template> 25 </template>
22 26
23 <script> 27 <script>
...@@ -30,6 +34,7 @@ export default { ...@@ -30,6 +34,7 @@ export default {
30 name: '', 34 name: '',
31 order: 'asc' 35 order: 'asc'
32 }, 36 },
37 + openSimple: false,
33 columns: [ 38 columns: [
34 { title: '我是测试表头', name: 'name', width: '150' }, 39 { title: '我是测试表头', name: 'name', width: '150' },
35 { title: '我是测试表头123', name: 'calories', sortable: true, width: '150', align: 'center' }, 40 { title: '我是测试表头123', name: 'calories', sortable: true, width: '150', align: 'center' },
...@@ -125,6 +130,13 @@ export default { ...@@ -125,6 +130,13 @@ export default {
125 methods: { 130 methods: {
126 handleSortChange ({ name, order }) { 131 handleSortChange ({ name, order }) {
127 this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]); 132 this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
133 + },
134 + edit () {
135 + //
136 + this.openSimple = true;
137 + },
138 + closeSimpleDialog () {
139 + this.openSimple = false;
128 } 140 }
129 } 141 }
130 } 142 }
......