简单封装button按钮

最新推荐文章于 2024-07-19 12:58:53 发布

·巫山不是云·

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量133

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_73910597/article/details/131979654

版权

自己实现这种效果,确实报刊…

在这里插入图片描述

1.安装bootStrap

网址（https://v5.bootcss.com/docs/getting-started/introduction/）

npm install bootstrap --save

//main.js内导入
import 'bootstrap/dist/css/bootstrap.min.css'

2.创建组件并在页面引入

<template>
<h3>基础按钮</h3>
<CsButton type="primary">新增</CsButton>
&nbsp;<CsButton type="success">修改</CsButton>
&nbsp;<CsButton type="danger">删除</CsButton>
&nbsp;<CsButton type="warning">警告</CsButton>
&nbsp;<CsButton type="light">light</CsButton>
&nbsp;<CsButton type="link">link</CsButton>
<hr>
<h3>带轮廓线</h3>
&nbsp;<CsButton type="success" plain>修改</CsButton>
&nbsp;<CsButton type="danger" plain>删除</CsButton>
&nbsp;<CsButton type="warning" plain>警告</CsButton>
<hr>
<h3>自定义大小</h3>
&nbsp;<CsButton type="success" size="large">修改</CsButton>
&nbsp;<CsButton type="danger" size="small">删除</CsButton>


</template>

组件内

<script setup lang='ts'>


defineProps({
  type:{
    type:String,
    default:''
  },
  plain:{
    type:Boolean
  },
  size:{
    type:String
  }
})

const sizeMap = {
  large:'btn-lg',
  small:'btn-sm'
}
</script>

<template>
<button type="button" class="btn" :class="['btn-'+ (plain?'outline-':'') + type,sizeMap[size]]"><slot></slot></button>
</template>

<style scoped>
</style>