BIconButton 对话框

封装优化

• 封装Icon和Button组合的组件；
• 设置图标类型和是否可用处理；

安装注册

import { BIconButton } from '@bdp/ui-vue';
Vue.use(BIconButton);

基本使用

代码演示

默认IconButton图标

图标点击事件
编辑 不可编辑

<template>
    默认IconButton图标<br/>
    <BIconButton type="step-backward"/> 
    <BIconButton type="step-forward" title="前进"/>
    <BIconButton type="step-forward"/>
    <br/>图标点击事件<br/>
    <BIconButton type="edit" @click="edit">编辑</BIconButton>
    <BIconButton type="edit" @click="edit" disabled>不可编辑</BIconButton>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        }
    },
    methods: {
        edit () {
            console.log("点击了编辑")
        },
    }
}
</script>

API

差异

参数	说明	类型	默认值	版本
title	提示标题	stirng	''
type	图标类型	stirng		必填
disabled	是否可点击	boolean	false

封装优化

安装注册

基本使用

API