浪潮行舟 2019-12-07 16:08 采纳率: 50%
浏览 714

想要实现样式的条件编译,用的vue+element ui

js的条件编译

  • 安装

    npm i -D js-conditional-compile-loader
    
  • 配置webpack

webpack.base.conf.js文件中在rules配置编译条件如下

module: {
    rules: [
        {
            test: /\.js$/,
            include: [resolve('src'), resolve('test')],
            use: [
                //step-2
                'babel-loader?cacheDirectory',
                //step-1
                {
                    loader: 'js-conditional-compile-loader',
                    options: {
                        isDebug: process.env.NODE_ENV === 'development', // optional, this is default
                        isHK: process.env.npm_config_hk, // any name, used for /* IFTRUE_isHK ...js code... FITRUE_isHK */
                    }
                },
            ]
        },
        //other rules
    ]
}
  • 项目中使用

插件支持IFDEBUG和IFTRUE两个条件编译指令。用法是:在js代码的任意地方以/*IFDEBUG或/*IFTRUE_xxx开头,以FIDEBUG*/或FITRUE_xxx*/结尾,中间是被包裹的js代码。xxx是在webpack中指定的条件属性名,如上面的isHK。
在项目代码中设置如下

{ name: '用户部门', value: 'usrDepartId' },
   /* IFTRUE_isHK */
  { name: '舱门管理', value: 'id' },
  /* FITRUE_isHK */
  { name: '手机号', value: 'telphone' },
  • 编译执行

在终端输入**npm run dev –hk**
可以看到舱门管理

在终端输入**npm run dev**
可以看到舱门管理被隐藏

样式的条件编译

问题来了,样式的条件编译我想用以下两个方式实现,都遇到了问题,请大神指点:
对vue接触时间较短,框架底层不了解,不知道怎么进行设置,在线等

1. 类似js条件编译,在webpack中进行配置

进行如下设置后,样式的条件编译无法实现

{
        test: /\.(css|html|vue)(\?.*)?$/,
        // loader: 'style-loader!css-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        use: [
          //step-2
          'babel-loader?cacheDirectory',
          //step-1
          {
            loader: 'css-loader',
            options: {
              isDebug: process.env.NODE_ENV === 'development', // optional, this is default
              envTest: process.env.ENV_CONFIG === 'test',
              isHK: process.env.npm_config_hk,
              isNT: process.env.npm_config_nt, // any name, used for /* IFTRUE_ntFlag ...js code... FITRUE_ntFlag */ npm run build-demo --nt
            }
          },
        ]
      },

2. 设置全局变量,通过条件渲染以实现不同效果

比如设置全局变量 versionType为1或2
执行 npm run dev --hk 时versionType为1
执行 npm run dev --nt 时versionType为2

问题来了,在终端执行 npm run dev –hk 时,在哪设置全局变量versionType=1(执行不同分支代码,实现1hk、2nt)

以下代码为全局变量,需要在哪设置:

   /* IFTRUE_isHK */
  Var versionType=1,
  /* FITRUE_isHK */
  /* IFTRUE_isNT */
  Var versionType=2,
  /* FITRUE_isNT */

想要实现样式的条件编译,用的vue+element ui
比如同一套代码,有个列表显示数据不一致,修改内容的时候文本框内容不一致


更新,找了一些资料,最终解决方案是设置 全局变量,然后通过条件渲染实现样式的条件编译

  • 写回答

1条回答 默认 最新

  • wusp1994 2023-04-06 14:45
    关注

    要实现样式的条件编译,您可以使用Vue的计算属性和三元表达式,根据不同的条件返回不同的样式。具体步骤如下:

    1. 创建一个计算属性,该属性根据条件返回需要的样式。
    <template>
      <div :class="computedClass"></div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isActive: true // 条件
        }
      },
      computed: {
        computedClass() {
          return this.isActive ? 'active-class' : 'inactive-class'
        }
      }
    }
    </script>
    
    <style>
      .active-class {
        background-color: red;
      }
      .inactive-class {
        background-color: blue;
      }
    </style>
    

    在这个例子中,我们创建了一个名为computedClass的计算属性,该属性根据isActive的值返回不同的类名。如果isActivetrue,返回active-class,否则返回inactive-class

    1. 借助Element UI提供的样式变量来实现动态样式。在这种情况下,您可以在计算属性中设置组合样式。
    <template>
      <div :class="computedClass" :style="{ color: textColor }"></div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isActive: true,
          textColor: '#000' // 条件
        }
      },
      computed: {
        computedClass() {
          return [
            this.isActive ? 'active-class' : 'inactive-class',
            this.textColor === '#000' ? 'black-text' : 'white-text',
          ]
        }
      }
    }
    </script>
    
    <style>
      .active-class {
        background-color: red;
      }
      .inactive-class {
        background-color: blue;
      }
      .black-text {
        color: #000;
      }
      .white-text {
        color: #fff;
      }
    </style>
    

    在这个例子中,我们使用了computedClass这个计算属性,并在这个计算属性中返回一个数组,数组中包含了需要动态添加的类名。我们还使用了:style指令,并在其中使用了一个变量textColor来指定文本颜色。如果textColor#000,则返回black-text类名,表示文本为黑色,否则返回white-text类名,表示文本为白色。

    综上所述,以上是在Vue和Element UI中实现样式的条件编译的基本步骤。您可以根据具体需求进行调整,并尝试使用其他样式变量和特性来实现更高级的功能。

    评论

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面