vue中javascript中引入less内置方法

目的：

改变alert组件的border和backgroundColor颜色，从做向右线性变色

问题：

1. 变色样式展示是有条件的，不能直接赋给class，这样会一直显示;
2. 使用:class赋值，alert组件不接收样式；
3. 使用:style赋值，可行；新问题，样式用有less内置函数tint,css无法简析；

实现思路；

javascript部分引入less文件，处理less变量；使用:style引入样式

注意；

代码实现

终极实现

• 实现开始---------------------

<u-alert
    :style="styles"
>
</alert>

import alertLessVar from './index.less';
const styles = computed(() => {
      const alertBgColor = {};
      // 展示条件控制
      if (checkApiCode.value && !checkCid.value) {
        alertBgColor.border = '1px solid';
        alertBgColor.borderImage = 'linear-gradient(to right,#ed3f14 0%, #4d9bee 100%) 1';
        alertBgColor.background = `linear-gradient(to right, ${alertLessVar.bgErrorColor} 0%, ${alertLessVar.bgInfoColor} 100%)`;
      }
      return alertBgColor;
});

// 导出变量
:export {
  bgErrorColor: tint(#ed3f14, 90%);
  bgInfoColor: tint(#4d9bee, 90%);
}

• 实现结束------------------------------ 优化：可将styles中css样式尽可能移到less文件中

import alertLessVar from './index.less';
const styles = computed(() => {
  if (checkApiCode.value && !checkCid.value) return alertLessVar;
  return {};
});

// 导出变量
:export {
  border: 1px solid;
  border-image: linear-gradient(to right, #ed3f14 0%, #4d9bee 100%) 1;
  background: linear-gradient(to right, tint(#ed3f14, 90%) 0%, tint(#4d9bee, 90%) 100%);
}

• less引入文件可直接使用，如下

<div className={styles.test}>

最初实现过程

第一版

通过class直接绑定，无法条件控制 class="uui-alert-error-info"

.uui-alert-error-info {
    border: 1px solid;
    border-image: linear-gradient(to right,#ed3f14 0%, #4d9bee 100%) 1;
    background: linear-gradient(to right, tint(#ed3f14, 90%) 0%, tint(#4d9bee, 90%) 100%);
}

第二版

通过:class绑定，alert不接收 :class="{'uui-alert-error-info': checkApiCode && !checkCid}"

第三版

通过:style引入，less内置函数无法简析

const styles = computed(() => {
  const alertBgColor = {};
  if (checkApiCode.value && !checkCid.value) {
    alertBgColor.border = '1px solid';
    alertBgColor.borderImage = 'linear-gradient(to right,#ed3f14 0%, #4d9bee 100%) 1';
    alertBgColor.background = `linear-gradient(to right, tint(#ed3f14, 90%) 0%, tint(#4d9bee, 90%) 100%)`;
  }
  return alertBgColor;
});