git地址：github.com/Xaw-xu/vue3…

给Button添加相关的props

type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' // type的类型
props: {
    type: {
      type: String as PropType<IButtonType>,
      default:'primary',
      vaildator:(val:string)=>{
        return ['primary','success','warning','danger','info','default'].includes(val)
      }
    },
    icon:{ //图标
      type:String,
      default:''
    },
    disabled:Boolean,
    loading:Boolean,
    round:Boolean,
  },

控制各种形态下button的类名，添加不同的样式

const classs = computed(()=> [
      'z-button',
      'z-button--'+props.type,
      {
        'is-disabled':props.disabled,
        'is-loading':props.loading,
        'is-round':props.round,
      }
    ])

这里就随便写了一些样式

在website中使用看一下效果，这里的loading我随便用了一个icon

点击事件控制

组件的点击事件有组件内部进行控制，emit出去

按钮组（ButtonGroup）

执行以下命令，创建按钮组组件
lerna create button-group
yarn
这个组件就是同时包裹多个按钮的时候改一下第一个及最后一个按钮的样式使用
1.继续在button的src目录下创建此组件的vue文件
2.在对应的包下改一下对应的index.ts文件
3.添加一些简单的样式
4.在z-ui的index.ts中导出

效果

到此button组件完结， 有兴趣可以继续编写其他组件。其他组件都是大同小异，就不在一一写了。