vue引入iview 组件按需加载并修改组件原先样式方法

因为要做一个移动端需求，有一个页面是排行榜。点击下拉框是选择不同的组别渲染不同组别的排行榜那，因为项目紧张加上兼容性的要求所以打算找一个现在比较流行的框架来用。再三选择后选择了 iview 组件！

先看一下组件库本身的样式还有页面的效果吧

其实中间的过程无比艰辛。。。开始吧

第一步：引入iview组件或者其中的部分组件，我只是用了一个Select 所以我只是引入了一个贴上代码

import { Select, Option, OptionGroup } from 'iview';
import 'iview/dist/styles/iview.css';

Vue.config.productionTip = false;
Vue.component('Select', Select);
Vue.component('Option', Option);
Vue.component('OptionGroup', OptionGroup);
Vue.use(plugin);

// 移除移动端点击延迟
const FastClick = require('fastclick');

FastClick.attach(document.body);

if (config.vconsole) {
  new Vconsole();
}

Vue.use(Select, {
  transfer: true,
  size: 'large',
  select: {
    arrow: 'md-arrow-dropdown',
    arrowSize: 20
  }
});

然后在需要的组件中引入：

      <Select v-model="model1" @on-change="perChange" style="width:100%" :label-in-value="true">
        <Option v-for="item in classList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>

这里面有一个地方，我单独引入Select 组件的时候发现我自己的样式有一部分没了。。。然后我去看了源码

holly shit !!!简直不要太坑。。。所以我又引入了其他两个组件

第二步因为本身组件的样式与UI给的样式不匹配所以需要修改组件本身的样式

无论你用的是css 还是 less 还是 scss 记住了 /deep/ 修改不支持嵌套！！！

    /deep/ .ivu-select {
      width: 100%;
      height: 84px;
      line-height: 84px;
      text-align: center;
      margin-top: 85px;
    }
    /deep/ .ivu-select-selection {
      width: 400px !important;
      height: 84px;
      background: rgba(255, 141, 26, 1);
      border-radius: 10px;
      position: absolute;
      margin-left: 50%;
      left: -216px;
      font-size: 28px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 84px;
      border-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
    }
    /deep/ .ivu-select-selection {
      width: 400px !important;
      height: 84px;
      background: rgba(255, 141, 26, 1);
      border-radius: 10px;
      position: absolute;
      margin-left: 50%;
      left: -216px;
      font-size: 28px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 84px;
      border-color: none !important;
      box-shadow: none !important;
      outline: none !important;
    }

第三步样式已经生效了然后就是babel 配置根目录下面 .babelrc 文件【TODO: IOS8 没有报错,但是一直空白页面。。。。】

{
    "presets": [
        "@vue/app",
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
        [
            "import",
            {
                "libraryName": "iview",
                 "libraryDirectory": "src/components"
            }
        ],
        "@babel/plugin-transform-runtime"
    ]
}

vue引入iview 组件按需加载并修改组件原先样式方法

猜你喜欢