组件的重写

app直播商城源码开发多年，并且一直和UI、测试同学，针对组件库的事甩锅给组件的开发者。

虽然通可以暂时将app直播商城源码存在的问题压下去，但是这毕竟不是一个好的解决问题的方式。所以还是需要去解决。 针对样式问题，组件库的官方其实会给出一个解决解决方案。

iview组件库的样式覆盖

环境：vue@2.6.6 iview@3.2.2

error

使用vue.config.js修改lessloader的配置，才可以顺利覆盖less文件。

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 这里的选项会传递给 less-loader
        javascriptEnabled: true
      }
    }
  }
}

app直播商城源码只要修改less变量的值，就能够达到修改样式的目的，如下是部分变量

// Prefix
@css-prefix             : ivu-;
@css-prefix-iconfont    : ivu-icon;

// Color
@primary-color          : #2d8cf0;

...

element-ui组件库的样式覆盖

创建vue项目时记得选择scss就可以

做如下修改

/* 改变主题色变量 */
$--color-primary: teal;

$--button-font-size: 16px !default;

$--border-radius-base: 0px !default;
$--border-radius-small: 0px !default;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

覆盖变量可以参考 element 项目中定义的变量

/* Element Chalk Variables */
/* Colors
-------------------------- */
$--color-white: #fff !default;
$--color-black: #000 !default;

$--color-primary: #409EFF !default;
...

从修改上来看还是element-ui是个正经的组件库。

iview的组件逻辑调整

show you code!

<template>
  // template将iview源码的中的Table.vue的template复制过来就可以。
  // 当然如果你想自定义那么也可以做更改
</template>
<script>
import {Table} from 'iview'
export default {
  mixins:[Table],
    mounted () {
        console.log('do what you want to do in mounted!')
    },
}
</script>

element-ui的组件逻辑调整

app直播商城源码修改的方式和iview的组件类似，不过element-ui中，el-table-column暂时没有做修改。
声明：本文由云豹科技转发自程序猿小新博客，如有侵权请联系作者删除