import "./index.less"; import ThemeColor from "./ThemeColor"; import BlockChecbox from "./BlockChecbox"; import Vue from 'vue'; import { Drawer, Modal, Divider, Switch, Radio, message } from "ant-design-vue"; import { mapGetters } from "vuex"; const Body = { props: ["title"], render: function render() { var h = arguments[0]; const { $slots, title } = this; return h("div", { style: { marginBottom: 24 } }, [ h("h3", { class: "title" }, title), $slots["default"], ]); }, }; Vue.use(Drawer) Vue.use(Modal) Vue.use(Switch) Vue.use(Radio) const SettingDrawer = { // data: () => ({ // primaryColor: "#42b983", // blockChecbox: "sidemenu" // }), props: ["collapse"], computed: { ...mapGetters({ settings: "global/settings", }), }, methods: { changeSetting(key, value) { const nextState = this.settings; nextState[key] = value; if (key === "layout") { nextState.contentWidth = value === "topmenu" ? "Fixed" : "Fluid"; } else if (key === 'fixedHeader' && !value) { nextState.autoHideHeader = false; } // console.log(this.settings); // console.log(nextState); nextState.config = true; this.$store.commit('global/UpdateDefaultSettings', this.settings); this.$store.commit('global/UpdateDefaultSettings', nextState); message.loading("正在编译主题！", 1.5); this.$store.dispatch("global/defaultSettings", true); }, onChange(checked) { console.log(`a-switch to ${checked}`); }, togglerContent() { this.$parent.collapse = !this.collapse; }, }, render() { const { collapse } = this; const { primaryColor, layout, navTheme, contentWidth, fixedHeader, fixSiderbar, autoHideHeader } = this.settings; return (
{ this.changeSetting("navTheme", e); }} /> { this.changeSetting("primaryColor", e); }} /> { this.changeSetting("layout", e); }} />

其它设置

内容区域宽度

{ this.changeSetting("contentWidth", e.target.value); }}> 流式 固定

固定HEADER

{ this.changeSetting("fixedHeader", e); }} />

自动隐藏HEADER

{ this.changeSetting("autoHideHeader", e); }} />

固定侧边栏

{ this.changeSetting("fixSiderbar", e); }} />
); }, }; export default SettingDrawer;