当前位置：首页 > wzjs >正文

怎么做网站卖东西互联网产品运营

wzjs 2025/8/13 21:37:04

怎么做网站卖东西,互联网产品运营,软件开发行业市场分析,高新区网站建设今天要新增一个页面要根据不同公司切换不同页面主题色，一点一点来，怎么快速更改 el-pagination 分页组件主题色。 <el-pagination :page-size"pageSize" :pager-count"pageCount"layout"sizes, prev, pager, next, jumper,…

今天要新增一个页面要根据不同公司切换不同页面主题色，一点一点来，怎么快速更改 el-pagination 分页组件主题色。

<el-pagination :page-size="pageSize" :pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total">
</el-pagination>

默认样式是这样的

现在变成红色主题

<style lang="scss">
.el-pagination {.el-pager li.active {color: #de194d;cursor: default;}.el-pager li:not(.disabled):hover {color: #de194d;}button.btn-next:not(:disabled) .el-icon-arrow-right:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled) .el-icon-arrow-left:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled):hover {color: #de194d;}button.btn-next:not(:disabled):hover {color: #de194d;}.el-input__inner:hover {border-color: #de194d !important;}.el-input__inner:focus {border-color: #de194d !important;}.el-select .el-input.is-focus .el-input__inner {border-color: var(--theme-color);}
}.el-select-dropdown__item.selected {color: #de194d;
}
</style>

当然 style 不能加 scoped ,可以当独加一个不带 scoped 的 style。

如果加 scoped 用下面这种方式

<style lang="scss" scoped>
::v-deep.el-pagination {.el-pager li.active {color: #de194d;cursor: default;}.el-pager li:not(.disabled):hover {color: #de194d;}button.btn-next:not(:disabled) .el-icon-arrow-right:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled) .el-icon-arrow-left:not(.disabled):hover {color: #de194d;}button.btn-prev:not(:disabled):hover {color: #de194d;}button.btn-next:not(:disabled):hover {color: #de194d;}.el-input__inner:hover {border-color: #de194d !important;}.el-input__inner:focus {border-color: #de194d !important;}.el-select .el-input.is-focus .el-input__inner {border-color: var(--theme-color);}
}::v-deep.el-select-dropdown__item.selected.hover {color: #de194d !important;font-size: 50px
}
</style>
<style>
.el-select-dropdown__item.selected {color: #de194d !important;
}
</style>

自己写太麻烦，element-ui 提供更换主题方法

建一个 theme.scss 文件

/* 改变主题色变量 */
$--color-primary: #f0a70b;/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";

更改 main.js 注释 element-ui 样式的导入，改为 theme.scss。因为样式都是一样的，没有必要引入两次

// import 'element-ui/lib/theme-chalk/index.css';
import './theme.scss'

这是 element 组件可以简单设置更改，那么我自己写的组件怎么简单实现更改主题色呢？

vue2 可以 scss 的全局变量

在 src 目录新建全局变量文件 theme.scss

/* 改变主题色变量 */
$--theme-color: #e61111;

vue.config.js

module.exports = defineConfig({css: {loaderOptions: {scss: {additionalData: `@import "@/theme.scss";`}}}
})

路径一定要配置正确

然后页面就可以用 color: $--theme-color; 方式引用了。

另一种方式是使用 :root，:root 是一个伪类选择器，它用来匹配文档的根元素。在HTML文档中，:root 实际上总是指向 <html> 元素。:root 的主要用途是定义一个全局的CSS变量。

但是 :root 比设置 html 元素更好用，:root 是伪类选择器。html 是标签选择器。所以:root 的优先级大于 html。

theme.scss

/* 改变主题色变量 */
:root {--theme-color: #e61111;
}

引用

color: var(--theme-color);

更改主题色，在任一页面都可以，但不能设置 scoped 不然不好使

<style lang="scss">
:root {--theme-color: rgb(164, 240, 11);
}
</style>

但这有个问题，他会把全站的样式都变更了，后加载的 :root 会把父组件或是先设置的组件样式覆盖了，如果只想在当前页面变更主题色可能不行。

解决办法，可以在子组件根元素中重新设置全局变量值，这样就只会在子组件生效不会影响用 :root 的其它父组件和兄弟组件了。

.hello {
--theme-color: rgb(164, 240, 11);
--font-size: 25px;
}

<template><div class="hello" style="margin-top: 50px; width: 850px"><el-pagination:page-size="pageSize":pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot":total="total"></el-pagination></div>
</template><script>
export default {name: "About",data() {return {currentPage: 1,pageSize: 10,pageCount: 9,total: 1000,};},
};
</script><style lang="scss" scoped>
.hello {--theme-color: rgb(164, 240, 11);--font-size: 25px;
}::v-deep.el-pagination {.el-pager li.active {color: var(--theme-color);cursor: default;}.el-pager li:not(.disabled):hover {color: var(--theme-color);}button.btn-next:not(:disabled) .el-icon-arrow-right:not(.disabled):hover {color: var(--theme-color);}button.btn-prev:not(:disabled) .el-icon-arrow-left:not(.disabled):hover {color: var(--theme-color);}button.btn-prev:not(:disabled):hover {color: var(--theme-color);}button.btn-next:not(:disabled):hover {color: var(--theme-color);}.el-input__inner:hover {border-color: var(--theme-color);}.el-input__inner:focus {border-color: var(--theme-color);}.el-select .el-input.is-focus .el-input__inner {border-color: var(--theme-color);}
}::v-deep.el-select-dropdown__item.selected.hover {color: var(--theme-color);font-size: 50px;
}
</style>
<style lang="scss">
.el-select-dropdown__item.selected {color: var(--theme-color);
}
</style>

那么现在假设根据不同公司进入这个子组件画面，怎么根据 props 值运用不同样式。

  mounted() {const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector(".hello").classList.add("company1");} else if (companyId == 2) {document.querySelector(".hello").classList.add("company2");}}<style lang="scss" scoped>.company1 {--theme-color: rgb(164, 240, 11);--font-size: 25px;}.company2 {--theme-color: rgb(240, 11, 11);--font-size: 25px;}
</style>

也可用下面这种方法直接设置 style

  mounted() {const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector(".hello").style.setProperty("--theme-color", "rgb(164, 240, 11)");document.querySelector(".hello").style.setProperty("-font-size", "25px");} else if (companyId == 2) {document.querySelector(".hello").style.setProperty("--theme-color", "rgb(240, 11, 11)");document.querySelector(".hello").style.setProperty("-font-size", "25px");}},<style lang="scss" scoped>.company1 {--theme-color: rgb(164, 240, 11);--font-size: 25px;}.company2 {--theme-color: rgb(240, 11, 11);--font-size: 25px;}
</style>

这样 url 参数 companyId 传不同的值，页面就会显示不同颜色。但是有些弹出层什么的直接放到 body 或 app 下面的。如果设置到 body 或 app 上会怎么样

放到 app 都不好使（注意这里是加了 scoped 不好使，如果加 scoped，跳转会影响其它页面）

    const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector("#app").classList.add("company1");} else if (companyId == 2) {document.querySelector("#app").classList.add("company2");}

下拉框样式没改过来

看源码发现下拉框和 app 在同一级了，company2 设到 app 所以不好使

改为 body 下也不好使，组件切换时因为只是组件的显示或隐藏所以 body 和 app 的样式还在

解决方案一：可以在路由守卫里做处理，如果是当前子组件跳出那么就移除添加的样式。

router/index.js 路由文件

router.afterEach((to, from) => {if (from.path == '/about') {document.querySelector("body").classList.remove("company1");document.querySelector("body").classList.remove("company2");}
})

解决方案二：使用 .has 选择器

<template><div class="hello" style="margin-top: 50px; width: 850px"><el-pagination:page-size="pageSize":pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot":total="total"></el-pagination></div>
</template>mounted() {const companyId = this.$route.query.companyId;if (companyId == 1) {document.querySelector("body").classList.add("company1");} else if (companyId == 2) {document.querySelector("body").classList.add("company2");}},<style lang="scss">
.company1:has(.hello) {--theme-color: rgb(164, 240, 11);--font-size: 25px;
}
.company2:has(.hello) {--theme-color: rgb(240, 11, 11);--font-size: 25px;
}
</style>

给 body 添加样式，用 .has(.hello) 使这个样式只有在有 class="hello" 的页面生效，.has(.hello) 意思是存在 .hello 的子组件生效，即使下拉框不是 .hello 的子元素也会生效。.hello 是当前子组件唯一拥有的。

解决方案二：根据不同 companyId 给组件绑定 class

<template class="childHas"><div :class="themeClass" style="margin-top: 50px; width: 850px"><el-pagination:popper-class="themeClass":page-size="pageSize":pager-count="pageCount"layout="sizes, prev, pager, next, jumper, ->, total, slot":total="total"></el-pagination></div>
</template>computed: {themeClass() {const companyId = this.$route.query.companyId;let child = "";if (companyId == 1) {child = "childHas1";} else if (companyId == 2) {child = "childHas2";}return child;},},<style lang="scss">
.childHas1 {--theme-color: rgb(164, 240, 11);--font-size: 25px;
}
.childHas2 {--theme-color: rgb(240, 11, 11);--font-size: 25px;
}
</style>

完美解决