精华内容
下载资源
问答
  • Vue Theme主题样式整理

    千次阅读 2018-10-19 10:45:00
    : vscode 中的 vue 格式化(一) Vue element表格分页数据加载示例 Vue element 表格获取选中项操作 转载于:https://my.oschina.net/tianma3798/blog/2249247

    一、ElementUI官方主题在线生成预览

    https://elementui.github.io/theme-chalk-preview/#/zh-CN

    使用步骤:

    1.选择主题颜色,下载主题 包,然后解压

    2.找到node_modules下的element-ui下的主题文件,覆盖

    修改覆盖后,页面自动刷新:

     

    二、第三方开发者主题

    源代码:

    https://github.com/taylorchen709/vue-admin

    在线预览:

    https://taylorchen709.github.io/vue-admin/#/login

     

    更多:

    vscode 中的 vue 格式化(一)

    Vue element表格分页数据加载示例

    Vue element 表格获取选中项操作

    转载于:https://my.oschina.net/tianma3798/blog/2249247

    展开全文
  • 附加:可以通过创建引导程序自定义主题或变体并使用上述方法来调用它来创建更选项。 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint ...
  • vuecli3 版本vant主题样式

    千次阅读 2020-04-13 16:18:57
    1、给项目配置主题颜色 2、覆盖vant本身的主题 这里用到的var.less默认是vant的主题颜色,根据需要修改 const path = require('path') ... const types = ['vue-modules', 'vue', 'normal-modules'...

    1、给项目配置主题颜色

    2、覆盖vant本身的主题

    这里用到的var.less默认是vant的主题颜色,根据需要修改

    const path = require('path')
    
    module.exports = {
      chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
      },
      css: {
        loaderOptions: {
          less: {
            javascriptEnabled: true,
            modifyVars: {
              // less 文件覆盖(文件路径为绝对路径)
              // 这里千万要写对,不然就会报错,或者直接没有效果,也找不到原因
              hack: `true; @import "${path.resolve(__dirname, 'src/assets/less/var.less')}";`
            }
          }
        }
      }
    }
    
    function addStyleResource(rule) {
      rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns: [
            path.resolve(__dirname, 'src/assets/less/var.less'), // 需要全局导入的less
          ],
        })
    }
    

    还有很关键的一步

    在babel.config.js里面,把style: true删掉

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          // style: true
        }, 'vant']
      ]
    }

     

    展开全文
  • 需求是 做一个深色主题和浅色主题切换的效果方法一 套css这个方法也是最简单,也是最无聊的。动态获取父级class名称,进行一个父级class的次定义{{ className == "box" ? "开灯" : "关灯" }}export default {...

    需求是 做一个深色主题和浅色主题切换的效果

    方法一 多套css

    这个方法也是最简单,也是最无聊的。

    动态获取父级class名称,进行一个父级class的多次定义

    {{ className == "box" ? "开灯" : "关灯" }}

    export default {

    name: "Centre",

    data() {

    return {

    className: "box"

    };

    },

    methods: {

    // 改变class

    chang() {

    this.className === "box"

    ? (this.className = "boxs")

    : (this.className = "box");

    }

    },

    };

    当class为box 使用witch的css

    @import "./style/witch.scss";

    当class为boxs 使用black的css

    @import "./style/black.scss";

    .switch {

    position: fixed;

    top: 4px;

    right: 10px;

    z-index: 50;

    width: 60px;

    height: 60px;

    background: #fff;

    line-height: 60px;

    border-radius: 20%;

    }

    每个css文件样式大致相同,只是最外层的父级不一样,分别为.box 和.boxs

    方法二 scss动态切换变量

    我自己是分为了2个主要文件来做的

    _variable.scss 变量管理文件

    var()为css3中提出的声明样式变量的方法

    var(属性名,属性值)注意属性值不能是字符串

    // 主题切换

    $bgColor:var(--backgroundColor,rgb(255,255,255));

    $fontColor:var(--fonntColor,rgb(0,0,0));

    $bgmColor:var(--backgroundMColor,rgb(238,238,238));

    $tableColor:var(--tableColor,rgb(218,218,218));

    $borderColor:var(--borderColor,rgb(238,238,238));

    $tablesColor:var(--tablesColor,rgb(255,255,255));

    $inputColor:var(--inputColor,rgb(255,255,255))

    创建的_variable.scss 文件我在vue.config.js进行了一个全局的配置,没有在组件中引入

    css: {

    loaderOptions: {

    // 此文件为主题切换文件

    sass: {

    prependData: `@import "./src/styles/_variable.scss";`,

    },

    },

    },

    2.publicStyle.js

    这个方法可以去修改var定义的变量

    document.getElementsByTagName("body")[0].style.setProperty("属性名", "替换的属性值f");

    // 主题切换

    const cut = (cutcheack) => {

    document.getElementsByTagName("body")[0].style.setProperty("--backgroundColor", cutcheack ? "#121212" : "#fff");

    document.getElementsByTagName("body")[0].style.setProperty("--fonntColor", cutcheack ? "#cecece" : "#333");

    document.getElementsByTagName("body")[0].style.setProperty("--backgroundMColor", cutcheack ? "#333" : "#eee");

    document.getElementsByTagName("body")[0].style.setProperty("--tableColor", cutcheack ? "#000" : "#d8d8d8");

    document.getElementsByTagName("body")[0].style.setProperty("--tablesColor", cutcheack ? "#222" : "#fff");

    document.getElementsByTagName("body")[0].style.setProperty("--inputColor", cutcheack ? "#666" : "#fff");

    document.getElementsByTagName("body")[0].style.setProperty("--borderColor", cutcheack ? "#666" : "#fff");

    };

    export default cut;

    组件中使用

    import cut from "../../utils/publicStyle.js";

    export default {

    name: "Home",

    data() {

    return {

    cutcheack: false, //主题切换

    };

    },

    methods: {

    // 左侧导航隐藏或显示

    // 切换主题

    switchs() {

    cut(this.cutcheack);

    },

    },

    };

    .home {

    height: 100%;

    width: 100%;

    background:$bgColor;

    .el-container {

    height: 100%;

    color:$fontColor;

    }

    }

    到此这篇关于VUE项目实现主题切换的文章就介绍到这了,更多相关VUE 实现主题切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

    展开全文
  • vuepress 使用与主题自定义样式修改

    万次阅读 2019-07-16 16:18:45
    1.VuePress是什么?(直接上效果图) vuepress中文网:http://caibaojian.com/vuepress/guide/ 2.安装vuepress # 初始化 npm npm init -y # 安装 yarn global add vuepress # 或者:npm install -g vue...

    1.VuePress是什么?(直接上效果图)

    vuepress中文网:http://caibaojian.com/vuepress/guide/

     

    2.安装vuepress

    # 初始化 npm
    npm init -y
    
    # 安装
    yarn global add vuepress # 或者:npm install -g vuepress
    
    # 新建一个 docs 文件夹
    mkdir docs
    
    # 新建一个 markdown 文件
    echo '# Hello VuePress!' > docs/README.md
    
    

     3.创建相关文件目录直接上图

     

    我创建的比较简单可以自行根据文档配置

    4.vuepress主题自定义(颜色,样式)这也是这篇文章的重点!!!

    vuepress默认两个版本分别为0x和1.x这个主题色修改样式修改可谓是个大坑!!我找了半天也没找到百度也百度不到,现在解决了,分享给大家省的走弯路!

    1.首先确认自己的vuepress版本,默认安装最新版本1.0x所以我就直接介绍1.0x样式修改

    2.在.vuepress下面创建styles/palette.styl(如图)

    3.palette.styl文件内容

    $accentColor =blue//默认主题颜色
    $textColor = red//默认字体颜色
    $borderColor = #eaecef//默认边框颜色
    $codeBgColor = #282c34//默认背景颜色
    
    //示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了
    .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
      opacity :1
    }

    效果展示

    成功修改!!!!

    最后附上源码github地址:https://github.com/zhangao0605/vuepress

    希望对大家有帮助,大家记得给点个赞哦 !

    展开全文
  • 主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件webpack/themePlugin.js const ThemeColorReplacer = ...
  • 主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • <head> <!-- 动态主题 -->...app.vue created() { // 根据手机类型(ios || android)更改主题颜色 let theme = navigator.userAgent.match(/iPhone|iPad|iPod/i) ? 'ios' : 'android'; this
  • export {methods: {样式更新updateStyle(stylecon,oldCulster,newCluster) {let newStyleCon=stylecon;oldCulster.forEach((color,index)=>{let regexp= '';if (color.split(',').length > 1) {const rgbArr= ...
  • 主题保持@vuepress/theme-default的样式,并添加了许多功能和优化: 页面增强 向Markdown添加了更语法,从而丰富了文档和博客撰写 特克斯支持 自定义对齐 流程图 标记 Subsript和Supercript 代码演示 介绍 图片...
  • 重置样式 normalize.css 保留有用的默认值,与许多 CSS 重置不同。 标准化各种元素的样式。 纠正错误和常见的浏览器不一致问题。 通过细微的修改提高可用性。 使用详细注释解释代码的作用。 下载包 npm i...
  • vue 一键换肤(切换主题样式

    千次阅读 2021-01-04 15:42:08
    方法二:切换主题CSS文件 方法三:切换顶级CSS类名 方法一:动态修改全局CSS变量 1. 在全局css文件或 app.vue中定义全局CSS变量 <style> :root{ --theme_bg_color:red } </style> 2. 使用全局...
  • vue更换主题设置主题

    千次阅读 2020-04-01 10:17:48
    将scss文件引入main.js中(如果引入报错可以网上搜一下,很!) :root { --bg_white_color: #fff; --bg_pink_color:pink; --bg_black_color:#373737; --bg_huiSe_color:#ccc; --bg_HongSe_...
  • vue布局样式

    2020-07-26 17:05:51
    <div class="media align-items-center border"> <span class="border-right px-3 py-4 bg-light">昨日销量</span> <div class="media-body" style="font-size:14px;...div class="border-..
  • 2、webpack创建的vue项目 配置流程: 1、必须先安装sacc依赖 如何安装可以去度娘 2、找到配置文件 utils.js 文件位于 根目录下 /build/utils.js 3、找到配置项:scss: generateLoaders('sass') 把它替换成如下...
  • Antd中有很直接挂载到body上的组件,自定义样式覆盖不到组件上去,这时可以用“overlayClassName”属性来完成局部修改样式。 以popover为例 <a-popover overlayClassName="reset-popover"></a-popover&...
  • vuepress 主题 u (Yuu) A VuePress theme that supports multiple color themes and some other useful features.... 一个VuePress主题,它支持个颜色主题和一些其他有用的功能。 很大程度上基于默认的V...
  •     公司移动端项目需要设置主题色,后端配置使用哪套移动端显示对应主题色,实现思路为:写对应套数的样式文件,根据接口返回的设置值选用对应样式主题。 1、App文件中进行判断引入主题文件,App.vue: <...
  • VuePress的Ant设计风格主题。 特征 配备了Ant Design风格,您可以直接使用UI库的各种组件。 优化样式的一部分。 更功能正在等待您发现... 快速开始 安装主题 npm i vuepress-theme-antdocs 或者 yarn add vuepress...
  • vant 自定义主题样式 总共分为两步 步骤一 引入样式源文件 定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。 按需引入样式(推荐) 在 babel.config.js 中配置按需引入样式源文件,...
  • typora-vue-theme:这是受Vue文档样式启发的typora主题。一个某种Vue文档风格的Typora Markdown编辑器主题
  • 1)可以在vue中用v-html 解析html 其他项目则用其他方法 ,此处用的是v-html="articalObj.content" 解析内容 <div class="articalContent" v-html="articalObj.content"> {{ articalObj.content }} </...
  • 基于Vue + Vuetify实现的后台管理系统模板,使用Material Design风格,支持响应式移动端,支持颜色主题修改,语言切换,黑白模式切换 目录结构 ├─ public ├─ tests ├─ src │ ├─ assets │ ├─ mixins ...
  • App.vue: <style> /* 定义全局的css变量 */ :root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen; } </style> demo.vue(css): <style scoped&...
  • vue动态更改元素样式

    2021-11-29 08:53:40
    vue项目开发中,好多地方需要动态去改变元素的样式,例如:更改元素class名去更换元素的样式,或更改元素的style去更改元素样式。元素的显示、隐藏、大小、颜色等,也可以配合vuex使用实现类似主题话的更改。 一...
  • Ant Design Vue 样式自定义覆盖

    千次阅读 2021-05-21 15:55:31
    在使用Ant Design Vue时发现很多样式想要修改却修改不了,有的组件虽然提供了样式修改的接口,但是不起作用啊; 想要自己覆盖样式也覆盖不了,各种方法试到你怀疑人生. 这种框架用起来简单, 但在具体需求方面也很磨人. ...
  • vue-cli4覆盖antd样式

    2020-12-09 15:57:57
    vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 2.深度作用选择器 如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响...
  • 文章目录一、插件说明二、使用插件Step1 安装Step2 webpack配置Step3 添加...样式不同2 不同主题间同一组件长得完全不一样3 不同主题同一组件有不同行为4 页面内的部分组件做多主题5 通过组件参数实现不同主题五、与Vue...
  • 在组件内修改elementui样式需要...中要修改个elementui的样式时,只需要将其作为::v-deep的子类就可以了 <style lang="scss" scoped> ::v-deep { .el-table {} .el-input {} .el-button {} } </st..
  • ElementUI静态主题样式包,包含light-theme.css和dark-theme.css,还有对应的字符集,下载后放到static目录下,在index.html中引用即可,可在项目中动态修改此路径,实现换肤

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,374
精华内容 3,349
关键字:

vue多主题样式

vue 订阅