ant-design-vue 全局提示(message)及定制主题色(theme-color)的使用

一个成熟的项目，为了更好的用户体验，必然会存在请求成功或失败的提示。这里就来说下我在项目中遇到的一些坑及解决的办法 项目在线地址 (有用的话，记得给个start哦)

一： 全局提示

全局提示设置在utils目录下的request.js文件中

// 首先引入需要的antd message组件，因为还涉及到登录超时提示框，所以需要引入Modal
import {
      message, Modal } from 'ant-design-vue'
// message的基础配置
message.config({
     
  duration: 2, // 提示时常单位为s
  top: '40px', // 距离顶部的位置
  maxCount: 3 // 最多显示提示信息条数(后面的会替换前面的提示)
})
// 在必要的地方(这里是请求失败，返回code !== 200)添加提示信息
message.error(res.message ? res.message : 'Error')
// 当token失效/非法/在其它地方登陆时弹出Modal框
Modal.warning({
     
  title: '你已退出登录，请重新登录',
  okText: '确认', // 设置按钮内容，默认为 OK
  onOk: () => {
      // 点击确认后的回调
    store.dispatch('user/resetToken').then(() => {
     
      location.reload()
    })
  }
})

全局提示相对来说比较简单，按照官方文档来操作必然能够成功。但是全局提示还是有一些坑的(应该不是我一个遇到吧？)，提示框的宽度是根据提示内容的长度来决定的，也是由此，一些文字提示较短的提示框在那么大个屏幕上显示出来就没那么理想了，如下图

在度海中经过一番艰苦的奋战后，仍没能够找到解决的办法，亦或者说是根本就没有类似的问题(可能是因为我比较菜？)。最后突发灵感，之前使用element-ui的时候用过样式覆盖来修改element官方的样式(后知后觉)。动手操作之后，问题很轻松的解决了…

// 我将其写在一个单独的less文件里面，便于之后还会用到样式覆盖，可以直接在这里添加样式
// 覆盖antd库中的样式
// 提示信息class
.ant-message-notice-content {
     
  min-width: 380px;
  text-align: left;
}
// 之后只需要在main.js中引入官方less文件之后引入即可
import 'ant-design-vue/dist/antd.less'(这里还会遇到一个坑，会在后面说明)
import './styles/antd-vue.less'

二：使用主题色

根据官方文档，使用主题色的方法有两种：1.在配置文件vue.config.js添加配置代码， 2.配置less文件变量

1.在配置文件vue.config.js添加配置代码

// vue.config.js for [email protected]
module.exports = {
     
  css: {
     
    loaderOptions: {
     
      less: {
     
        lessOptions: {
     
          modifyVars: {
     
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

这样做虽然可以实现，但是不易于维护，如果遇到需要大量修改的还是颇有些麻烦的(最主要的是能不动配置文件就不动)。在前端组件化的时代，这家伙不给它单独抽离出来心里就不舒服，于是有了第二种方法。

2.配置less文件变量

该方式是建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量。

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量

然而这里会存在问题，之前按照官方文档引入的是import 'ant-design-vue/dist/antd.css’文件，按理说将.css转换成.less应该不存在问题的，但是事与愿违，它真就给报错了

这里还是花费了我好长一段时间的，网上好些人说需要将less的版本降到2.x，抱歉，不可能(手动滑稽)；还有人说需要配置babel.config.js啥的,这个方法倒是试过，然而没啥用提示我需要安装babel-plugin-import依赖，安装之后依旧是用不了。最终的解决办法是: 将官方给出的两种方式结合起来。

// 在vue.config.js中添加这段代码
css: {
     
  loaderOptions: {
     
      less: {
     
          // modifyVars: {
     
          //    'primary-color': '#7c6dc5',
          // },
          javascriptEnabled: true
      }
  }
}

// 然后就可以使用了，这里我也将其抽成单独的文件styles/antd-variables.less
// 主题色
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@primary-color: #4cd480; // 全局主色
/* @link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影 */


// 之后在入口文件main.js中引入即可
import './styles/antd-variables.less'
import './styles/antd-vue.less'