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 @@
<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 type="text/javascript">
var vConsole = new VConsole();
</script>
</head>
<body>
<noscript>
......
......@@ -2,7 +2,7 @@
<div id="app">
<mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
<mu-list>
<mu-list-item v-for="(v, k) in side_menu" :key="k" button>
<mu-list-item v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button>
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
<!-- <mu-list-item @click="close" button>
......@@ -35,7 +35,7 @@
<router-view/>
</mu-col>
</mu-row> -->
<div style="left: 256px; top: 100px; position: relative; width: calc(100% - 256px)">
<div :class="['main-contain', {'is-open': side_show}]">
<router-view/>
</div>
</div>
......@@ -50,24 +50,11 @@ export default {
},
mounted () {
// 屏幕宽度小于600隐藏侧边栏
if ($('body').width() <= 600) {
this.side_show = false;
this.docked = false;
} else {
this.side_show = true;
this.docked = true;
}
this.resize($('body').width());
// 键盘屏幕宽度
$(window).resize(() => {
this.screen_width = $('body').width();
// 屏幕宽度小于600隐藏侧边栏
if (this.screen_width <= 600) {
this.side_show = false;
this.docked = false;
} else {
this.side_show = true;
this.docked = true;
}
this.resize($('body').width());
});
},
data () {
......@@ -77,17 +64,32 @@ export default {
docked: false,
position: 'left',
side_menu: [{
title: 'Menu Item 1'
title: 'Menu Item 1',
url: '/'
}, {
title: 'Menu Item 2'
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());
}
}
}
......@@ -119,4 +121,14 @@ export default {
margin-left: 16px
}
.main-contain {
top: 100px;
position: relative;
}
.main-contain.is-open {
left: 256px;
width: calc(100% - 256px)
}
</style>
......
......@@ -31,17 +31,17 @@ export default {
order: 'asc'
},
columns: [
{ title: 'Dessert (100g serving)', name: 'name' },
{ title: 'Calories', name: 'calories', align: 'center', sortable: true },
{ title: 'Fat (g)', name: 'fat', align: 'center', sortable: true },
{ title: 'Carbs (g)', name: 'carbs', align: 'center', sortable: true },
{ title: 'Protein (g)', name: 'protein', align: 'center', sortable: true },
{ title: '操作', name: 'iron', align: 'center', sortable: true }
{ title: '我是测试表头', name: 'name', width: '150' },
{ title: '我是测试表头123', name: 'calories', sortable: true, width: '150', align: 'center' },
{ title: '我是测试表头', name: 'fat', sortable: true, width: '150' },
{ title: '我是测试表头', name: 'carbs', sortable: true, width: '150' },
{ title: '我是测试表头', name: 'protein', sortable: true, width: '150' },
{ title: '操作', name: 'iron', width: '150', align: 'center' }
],
list: [
{
name: 'Frozen Yogurt',
calories: 159,
calories: 15999999999999,
fat: 6.0,
carbs: 24,
protein: 4.0,
......@@ -130,8 +130,28 @@ export default {
}
</script>
<style lang="css" scoped>
<style lang="less" scoped>
.demo-button {
margin: 6px 8px;
}
/deep/.mu-table th {
border-right: 1px solid #ffffff;
word-wrap: break-word;
vertical-align: middle;
white-space: normal;
overflow: hidden;
user-select: none;
min-width: 0;
box-sizing: border-box;
vertical-align: middle;
position: relative;
}
// /deep/.mu-table th.is-sortable {
// color: rgba(0,0,0,.87);
// }
/deep/.mu-table th.is-sortable .mu-table-sort-icon {
opacity: .6;
}
</style>
......