打印和换肤(vue简历编辑器)

打印

当我们点击打印的时候可以调用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文件内容太多, 就省略不写了.