Antd-Vue组件开发指南：如何提升网站用户体验

四、Antd-Vue 的样式定制

1.安装 less-loader：使用 less-loader 编译 less 样式。

npm install less-loader less --save-dev

2.配置 webpack：在 webpack.config.js 中进行 less-loader 配置。

module.exports = {
  module: {
    rules: [
      // sass资源文件解析并转换为css模块
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      }
    ]
  }
}

3.修改变量：在 less 变量文件（如 var.less）中修改 Antd-Vue 组件的变量。

@import '~ant-design-vue/es/style/themes/default.less';
@import '~ant-design-vue/es/style/themes/dark.less';

// 全局变量
@primary-color: #e60012;
// 按钮组件变量
@btn-default-bg: #f1f1f1;
@btn-default-border: #d9d9d9;
@btn-primary-bg: #e60012;
@btn-primary-color: #fff;
@btn-info-color: #2db7f5;
@btn-success-color: #87d068;
@btn-waring-color: #f50;
@btn-error-color: #f50;

4.应用自定义主题：在入口文件（如 main.js）中引入 less 全局变量文件。

import 'ant-design-vue/dist/antd.less';
import './styles/var.less';

五、Antd-Vue 的组件扩展

1.新建扩展组件文件：创建自定义组件文件并在文件中定义组件，如 MyButton.vue。

   

<script>
import { Button } from 'ant-design-vue'
export default {
  name: 'my-button',
  components: {
    'a-button': Button
  },
  props: {
    myButtonText: String,
    myButtonClass: String,
    myButtonLoading: Boolean,
    myButtonDisabled: Boolean,
    myButtonOnClick: Function,
  },
  methods: {
    myButtonClick () {
      this.myButtonOnClick && this.myButtonOnClick()
    },
  }
}
</script>

2.注册自定义组件：在应用入口或需要使用的页面中引入并注册自定义组件。

   

<script>
import MyButton from '@/components/MyButton.vue'
export default {
  components: {
    'my-button': MyButton
  },
  data () {
    return {
      myButtonLoading: false,
      myButtonDisabled: false,
    }
  },
  methods: {
    myButtonClick () {
      console.log('MyButton Clicked')
    }
  }
}
</script>

六、总结