iView 桌面端组件库

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

更多精彩

相关网址

  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 ,具体如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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组件,只需要按照如下方式引入组件并调用即可
1
2
3
import { Message } from 'iview'

Message.error(result.data)

组件扩展

单选框多彩效果

效果

代码

  1. 核心思路是通过外部传入颜色代码,修改 i-radio 内部样式
  2. document.styleSheets[0].insertRule 用于修改伪元素样式,因为 i-radio 通过 .ivu-radio-inner::after 控制按钮选中后的颜色效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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>