Hooke / muse-ui-test

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a952f79d 1 parent f78ebe04

test

Inline Side-by-side
Showing 3 changed files with 63 additions and 27 deletions
...@@ -8,6 +8,10 @@ ...@@ -8,6 +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>
12 + <script type="text/javascript">
13 + var vConsole = new VConsole();
14 + </script>
11 </head> 15 </head>
12 <body> 16 <body>
13 <noscript> 17 <noscript>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div id="app"> 2 <div id="app">
3 <mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1"> 3 <mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
4 <mu-list> 4 <mu-list>
5 - <mu-list-item v-for="(v, k) in side_menu" :key="k" button> 5 + <mu-list-item v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button>
6 <mu-list-item-title>{{ v.title }}</mu-list-item-title> 6 <mu-list-item-title>{{ v.title }}</mu-list-item-title>
7 </mu-list-item> 7 </mu-list-item>
8 <!-- <mu-list-item @click="close" button> 8 <!-- <mu-list-item @click="close" button>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 <router-view/> 35 <router-view/>
36 </mu-col> 36 </mu-col>
37 </mu-row> --> 37 </mu-row> -->
38 - <div style="left: 256px; top: 100px; position: relative; width: calc(100% - 256px)"> 38 + <div :class="['main-contain', {'is-open': side_show}]">
39 <router-view/> 39 <router-view/>
40 </div> 40 </div>
41 </div> 41 </div>
...@@ -50,24 +50,11 @@ export default { ...@@ -50,24 +50,11 @@ export default {
50 }, 50 },
51 mounted () { 51 mounted () {
52 // 屏幕宽度小于600隐藏侧边栏 52 // 屏幕宽度小于600隐藏侧边栏
53 - if ($('body').width() <= 600) { 53 + this.resize($('body').width());
54 - this.side_show = false;
55 - this.docked = false;
56 - } else {
57 - this.side_show = true;
58 - this.docked = true;
59 - }
60 // 键盘屏幕宽度 54 // 键盘屏幕宽度
61 $(window).resize(() => { 55 $(window).resize(() => {
62 - this.screen_width = $('body').width();
63 // 屏幕宽度小于600隐藏侧边栏 56 // 屏幕宽度小于600隐藏侧边栏
64 - if (this.screen_width <= 600) { 57 + this.resize($('body').width());
65 - this.side_show = false;
66 - this.docked = false;
67 - } else {
68 - this.side_show = true;
69 - this.docked = true;
70 - }
71 }); 58 });
72 }, 59 },
73 data () { 60 data () {
...@@ -77,17 +64,32 @@ export default { ...@@ -77,17 +64,32 @@ export default {
77 docked: false, 64 docked: false,
78 position: 'left', 65 position: 'left',
79 side_menu: [{ 66 side_menu: [{
80 - title: 'Menu Item 1' 67 + title: 'Menu Item 1',
68 + url: '/'
81 }, { 69 }, {
82 - title: 'Menu Item 2' 70 + title: 'Menu Item 2',
71 + url: '/test'
83 }] 72 }]
84 } 73 }
85 }, 74 },
86 methods: { 75 methods: {
76 + resize (v) {
77 + // 屏幕宽度小于600隐藏侧边栏
78 + if (v <= 600) {
79 + this.side_show = false;
80 + this.docked = false;
81 + } else {
82 + this.side_show = true;
83 + this.docked = true;
84 + }
85 + },
87 close () { 86 close () {
88 // 关闭侧边栏 87 // 关闭侧边栏
89 this.side_show = false; 88 this.side_show = false;
90 $(window).resize() 89 $(window).resize()
90 + },
91 + goTo (v) {
92 + this.resize($('body').width());
91 } 93 }
92 } 94 }
93 } 95 }
...@@ -119,4 +121,14 @@ export default { ...@@ -119,4 +121,14 @@ export default {
119 margin-left: 16px 121 margin-left: 16px
120 } 122 }
121 123
124 +.main-contain {
125 + top: 100px;
126 + position: relative;
127 +}
128 +
129 +.main-contain.is-open {
130 + left: 256px;
131 + width: calc(100% - 256px)
132 +}
133 +
122 </style> 134 </style>
......
...@@ -31,17 +31,17 @@ export default { ...@@ -31,17 +31,17 @@ export default {
31 order: 'asc' 31 order: 'asc'
32 }, 32 },
33 columns: [ 33 columns: [
34 - { title: 'Dessert (100g serving)', name: 'name' }, 34 + { title: '我是测试表头', name: 'name', width: '150' },
35 - { title: 'Calories', name: 'calories', align: 'center', sortable: true }, 35 + { title: '我是测试表头123', name: 'calories', sortable: true, width: '150', align: 'center' },
36 - { title: 'Fat (g)', name: 'fat', align: 'center', sortable: true }, 36 + { title: '我是测试表头', name: 'fat', sortable: true, width: '150' },
37 - { title: 'Carbs (g)', name: 'carbs', align: 'center', sortable: true }, 37 + { title: '我是测试表头', name: 'carbs', sortable: true, width: '150' },
38 - { title: 'Protein (g)', name: 'protein', align: 'center', sortable: true }, 38 + { title: '我是测试表头', name: 'protein', sortable: true, width: '150' },
39 - { title: '操作', name: 'iron', align: 'center', sortable: true } 39 + { title: '操作', name: 'iron', width: '150', align: 'center' }
40 ], 40 ],
41 list: [ 41 list: [
42 { 42 {
43 name: 'Frozen Yogurt', 43 name: 'Frozen Yogurt',
44 - calories: 159, 44 + calories: 15999999999999,
45 fat: 6.0, 45 fat: 6.0,
46 carbs: 24, 46 carbs: 24,
47 protein: 4.0, 47 protein: 4.0,
...@@ -130,8 +130,28 @@ export default { ...@@ -130,8 +130,28 @@ export default {
130 } 130 }
131 </script> 131 </script>
132 132
133 -<style lang="css" scoped> 133 +<style lang="less" scoped>
134 .demo-button { 134 .demo-button {
135 margin: 6px 8px; 135 margin: 6px 8px;
136 } 136 }
137 +
138 + /deep/.mu-table th {
139 + border-right: 1px solid #ffffff;
140 + word-wrap: break-word;
141 + vertical-align: middle;
142 + white-space: normal;
143 + overflow: hidden;
144 + user-select: none;
145 + min-width: 0;
146 + box-sizing: border-box;
147 + vertical-align: middle;
148 + position: relative;
149 + }
150 +
151 + // /deep/.mu-table th.is-sortable {
152 + // color: rgba(0,0,0,.87);
153 + // }
154 + /deep/.mu-table th.is-sortable .mu-table-sort-icon {
155 + opacity: .6;
156 + }
137 </style> 157 </style>
......