ijijin-view(Vue)

全局组件

即默认注册的组件，在各模块中可直接引用。考虑到各组件的使用频率，本UI库采用了以下最常用的四个组件（弹窗、通知、按钮、图标）作为全局组件。

弹窗

1.调用方式

1.1 js调用

最常用。


	// Vue实例中...
	computed () {
		/*
		 * 展示
		 */
		// 普通
		this.$alert.show({  // this指向Vue实例
			title: '标题',
			content: '内容'
		});

		// 简单
		this.$alert.show('内容');

		/*
		 * 隐藏
		 */
		this.$alert.hide();
	}
    // ...

1.2 组件内调用

此类形式常用于弹窗内容复杂的情况下，可利用<slot>插槽插入复杂节点。

    <div>
		<!-- demo 1 -->
        <v-alert title="标题" content="内容" :show="true"/>
		
		<!-- demo 2 -->
		<v-alert title="标题" :show="true">
			<v-icon type="right">
			<p>弹窗内容</p>
		</v-alert>
    </div>

1.3 *特殊调用

非特殊情况建议不要使用此种方式。

    // 字段同js调用
    Vue.prototype.$alert.show('内容');

2.API

参数 类型 默认值 说明
title String '' 弹窗标题（可选）
content String '' 弹窗内容，可填入HTML字符串（必填）
className String '' 弹窗添加class，多用于特殊弹窗展示（可选）
noBtn Boolean false 是否隐藏弹窗按钮（可选）
btns Array [{ text: '确定' }] 弹窗点击按钮（可选）
maskStyle Object null 弹窗背景蒙板样式（可选）
maskClick Function null 弹窗背景蒙板点击事件（可选）

其中btns

参数 类型 默认值 说明
text String '' 按钮文案（必填）
className String '' 弹窗添加class，多用于文字颜色展示（可选）
callback Function $alert.hide() 弹窗按钮点击回调（可选）

通知

1.调用方式

1.1 js调用

    /*
     * 展示
     */
    // 普通
    this.$toast.show({  // this指向Vue实例
        type: 'middle',
        message: '内容'
    });

    // 简单
    this.$toast.show('内容');

    // 隐藏
    this.$toast.hide();

1.2 组件内调用

    <div>
        <v-toast type="middle" duration="内容" show="true"/>
    </div>

1.3 *特殊调用

    // 字段同js调用
    Vue.prototype.$toast.show('内容');

2.API

参数 类型 默认值 说明
message String '' 通知内容（必填）
duration Number 1500 通知显示时间，单位ms（可选）
className String '' 通知添加class，多用于特殊通知展示（可选）
color String '#fff' 通知文字颜色（可选）
backgroundColor String 'rgba(0, 0, 0, 0.8)' 通知背景颜色（可选）
type String 'bottom' 通知展示位置，top页面顶部，middle页面中心，bottom页面底部（可选）
icon String '' 展示图标，具体字段间下文图标模块（可选）

按钮

1.调用方式

    <div>
        <h4>这是一个按钮</h4>

        <v-button>按钮</v-button>
    </div>

2.API

参数 类型 默认值 说明
type String 'default' 按钮类型（可选）
inline Boolean true 是否为行内元素（可选）
link String '' 是否有跳转地址（可选）
disabled Boolean false 是否为禁用样式（可选）
className String/Array '' 按钮添加class，多用于特殊按钮展示（可选）

其中type默认包含：

  • 'red'红色按钮(#fe5d4e)、'red_bd'红色边框按钮（'bd'指边框型）；
  • 'blue'蓝色按钮(#01a2fc)、'blue_bd'蓝色边框按钮；
  • 'gray_bd'灰色边框按钮(#ccc)；
  • 'white'白色按钮(#fff)；

如需添加新类型可以新建样式表，如下

    .btn-yellow {
        color: #fff;
        background-color: yellow;
    }

使用

    <div>
        <v-button type="yellow">黄色按钮</v-button>
    </div>

图标

鸣谢：@阿里通信，@蚂蚁antd

1.调用方式

    <div>
        <h4>这是一个图标</h4>

        <v-icon type="heart"/>
    </div>

2.API

参数 类型 默认值 说明
type String '' 图标类型（必填）
className String '' 图标添加class，多用于图标大小或颜色展示（可选）

3.全量图标

考虑到请求资源，默认引入的图标库为轻量库（首次显示时加载），4.8k；如需使用较全的图标库则需手动引入全量图标组件（/Icon），10k；

    <template>
        <div>
            <h4>这是一个全量图标</h4>

            <v-icon-full type="lock"/>
        </div>
    </template>

    <script>
        import Icon from 'ijijin-view/vue/Icon'
        
        export default {
            data () {
                return {}
            },
            components: {
                'v-icon-full': Icon
            }
        }
    </sctipt>

具体样例见右示例

← 导航组件 →