打印
当我们点击打印的时候可以调用window对象的print()方法.
<button class="button" @click="print">打印</button>
print(){
window.print()
}
打印的时候不能将侧边栏和多余信息也打印. 所以要将它们设置为none.
.page > aside {
display: none;
}
.page {
padding: 20px;
}
.skills .remove,
.skills .add,
.projects .remove,
.projects .add {
display: none;
}
换肤
当我们点击换肤时, 跳出一个弹出框, 框内有主体选项供我们选择. 根据我们的点击目标进行换肤处理. 这个弹出框我们使用skinPickerVisible来控制显示, 点击换肤按钮来控制显示.
<button class="button" @click="skinPickerVisible= !skinPickerVisible">换肤</button>
<div v-show="skinPickerVisible" class="skinPicker">
<button @click="setTheme('default')">默认</button>
<button @click="setTheme('dark')">黑色</button>
</div>
setTheme用来设置主体
setTheme(name) {
document.body.className = name
}
在body元素上使用类来进行控制.
我们的皮肤颜色主体有两个文件与之对应, 分别为default.css, 和dark.css. 它们都放在css/theme文件夹中, 注意要在index.html中引用它们.
这两个css文件内容太多, 就省略不写了.