mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
66 lines
2.5 KiB
Vue
66 lines
2.5 KiB
Vue
<template>
|
||
<div>
|
||
<h3>Theme 主题</h3>
|
||
<p>Case 1.使用默认的主题样式</p>
|
||
<pre>
|
||
<code class="scss">
|
||
@import 'vxe-table/lib/index.css';
|
||
</code>
|
||
</pre>
|
||
<p>Case 2.修改主题颜色，并引入所有样式（<a class="link" href="https://github.com/xuliangzhan/vxe-table/blob/master/styles/variable.scss" target="_blank">查看所有变量</a>）</p>
|
||
<pre>
|
||
<code class="scss">
|
||
@import 'vxe-table/styles/variable.scss';
|
||
$vxe-font-color: #666; // 主题颜色
|
||
$vxe-zindex: 3000; // 对于在某些场景中，由于堆叠被覆盖时可能会用到
|
||
@import 'vxe-table/styles/default.scss';
|
||
</code>
|
||
</pre>
|
||
<p>Case 3.修改主题颜色，并按需引入样式（<a class="link" href="https://github.com/xuliangzhan/vxe-table/blob/master/styles/variable.scss" target="_blank">查看所有变量</a>）</p>
|
||
<pre>
|
||
<code class="scss">
|
||
@import 'vxe-table/styles/variable.scss';
|
||
$vxe-font-color: #666; // 主题颜色
|
||
$vxe-zindex: 3000; // 对于在某些场景中，由于堆叠被覆盖时可能会用到
|
||
@import 'vxe-table/styles/table.scss';
|
||
@import 'vxe-table/styles/column.scss';
|
||
@import 'vxe-table/styles/header.scss';
|
||
@import 'vxe-table/styles/body.scss';
|
||
@import 'vxe-table/styles/footer.scss';
|
||
@import 'vxe-table/styles/icon.scss';
|
||
@import 'vxe-table/styles/filter.scss';
|
||
@import 'vxe-table/styles/loading.scss';
|
||
@import 'vxe-table/styles/grid.scss';
|
||
@import 'vxe-table/styles/excel.scss';
|
||
@import 'vxe-table/styles/menu.scss';
|
||
@import 'vxe-table/styles/toolbar.scss';
|
||
@import 'vxe-table/styles/pager.scss';
|
||
@import 'vxe-table/styles/checkbox.scss';
|
||
@import 'vxe-table/styles/radio.scss';
|
||
@import 'vxe-table/styles/input.scss';
|
||
@import 'vxe-table/styles/button.scss';
|
||
@import 'vxe-table/styles/message.scss';
|
||
@import 'vxe-table/styles/tooltip.scss';
|
||
</code>
|
||
</pre>
|
||
<p>Case 4.如果需要完全重写主题样式，把 vxe-table/styles/** 目录全部复制到项目中自行修改（例如 /assets/styles/xtable 目录下）</p>
|
||
<pre>
|
||
<code class="scss">
|
||
@import './assets/styles/xtable/index.scss';
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import hljs from 'highlight.js'
|
||
|
||
export default {
|
||
mounted () {
|
||
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
|
||
hljs.highlightBlock(block)
|
||
})
|
||
}
|
||
}
|
||
</script>
|