iView 桌面端组件库

一套基于 Vue.js 的高质量 UI 组件库

更多精彩

• 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线

相关网址

1. iView-doc
2. GitHub - iview/iview: A high quality UI Toolkit built on Vue.js 2.0

使用指南

激活kebab-case命名风格

1. iView默认使用的组件命名风格是 PascalCase ，也就是组件名称首字母大写，形如 <MyComponent>
2. 还使用这篇文章 模板中的组件名大小写-强烈推荐 来介绍这种风格的好处
3. 但我个人对这种风格的感观实在难以接受，还是比较喜欢 kebab-case ，形如 <my-component>
4. iView在 iView Loader 中介绍了如何开启kebab-case命名风格，已经描述的比较详细
5. 这里提一点，改写vue-loader配置风格的文件是 webpack.base.conf.js
6. 要开启kebab-case的风格即 options.prefix: true ，具体如下

module: {
  rules: [
    ...(config.dev.useEslint ? [createLintingRule()] : []),
    // {
    //   test: /\.vue$/,
    //   loader: 'vue-loader',
    //   options: vueLoaderConfig
    // },
    {
      test: /\.vue$/,
      use: [
        {
          loader: 'vue-loader',
          options: {}
        },
        {
          loader: 'iview-loader',
          options: {
            prefix: true
          }
        }
      ]
    }
  ]
}

单独调用Message组件

1. 虽然Message组件有提供 this.$Message 相关的全局函数，但如果调用的文件没有被提前注册，依旧会抛出异常
2. 如果想在某个文件中单独调用Message组件，只需要按照如下方式引入组件并调用即可

import { Message } from 'iview'

Message.error(result.data)

组件扩展

单选框多彩效果

效果

代码

1. 核心思路是通过外部传入颜色代码，修改 i-radio 内部样式
2. document.styleSheets[0].insertRule 用于修改伪元素样式，因为 i-radio 通过 .ivu-radio-inner::after 控制按钮选中后的颜色效果
   • 参考 利用javascript获取并修改伪元素的值 - 我很好奇 - SegmentFault 思否
   • insertRule 支持非IE浏览器
   • addRule 支持IE浏览器

<template>
  <i-radio ref="asRadio" :label="label" :data-color="color">
    <slot></slot>
  </i-radio>
</template>

<script>
  export default {
    name: 'asRadio',
    props: {
      label: {
        type: String,
        default: ''
      },
      text: {
        type: String
      },
      color: {
        type: String,
        default: null
      }
    },
    created () {
      this._initRadioColor()
    },
    methods: {
      _initRadioColor () {
        if (!this.color) return

        this.$nextTick(() => {
          // 单选框
          let $asRadio = this.$refs.asRadio.$el
          // 单选框圆点
          let $asRadioBtn = $asRadio.getElementsByClassName('ivu-radio-inner')[0]

          // 设置文本颜色
          $asRadio.style.color = this.color
          // 设置圆点边框色
          $asRadioBtn.style.borderColor = this.color

          // 获取单选框唯一标记，由vue-scope生成，ex:data-v-7fc10533
          let radioMark1 = $asRadio.attributes[0].name
          // 获取颜色标记
          let radioMark2 = $asRadio.getAttribute('data-color')
          // 完整标记拼接，遵循CSS3样式匹配规则
          let fullRadioMark = `[${radioMark1}][data-color="${radioMark2}"]`

          // 修改::after样式，从而实现改变圆点颜色
          document.styleSheets[0].insertRule(`.ivu-radio-wrapper${fullRadioMark} .ivu-radio-inner::after {background-color: ${this.color}`)
        })
      }
    }
  }
</script>