vitepress-theme-mist

Appearance

2025-08-19
1088
4.8m

简介 ​

MtButton 是一个按钮组件，提供了基础的样式和交互效果。组件支持多种主题类型和不同尺寸，满足基本的按钮需求。

基本用法 ​

在 Markdown 文档中可以直接使用 <MtButton> 标签来创建按钮。

基础示例 ​

下面是一个使用 MtButton 组件的简单示例：

点击次数：0

不同类型的按钮 ​

使用 type 属性来定义按钮的类型，支持 default、primary、success、warning、danger、info、text 七种类型。

点击次数：0

不同尺寸的按钮 ​

使用 size 属性来设置按钮的尺寸，支持 large、default、small 三种尺寸。

点击次数：0

API ​

Props ​

属性名类型默认值说明
typestring'default'按钮类型，可选值：'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
sizestring'default'按钮尺寸，可选值：'large' | 'default' | 'small'
iconstring-图标类名
autofocusbooleanfalse是否自动聚焦
nativeTypestring'button'原生按钮类型，可选值：'button' | 'submit' | 'reset'

Events ​

事件名说明参数
click当按钮被点击时触发MouseEvent 对象

Methods ​

方法名说明参数
focus聚焦按钮-
blur失焦按钮-

样式定制 ​

CSS 变量 ​

组件使用以下 CSS 变量进行样式定制：

css
:root {
  --mist-button-default-color: #606266;          /* 默认按钮文字颜色 */
  --mist-button-default-bg-color: #ffffff;       /* 默认按钮背景颜色 */
  --mist-button-default-border-color: #dcdfe6;   /* 默认按钮边框颜色 */
  
  --mist-button-primary-color: #ffffff;          /* 主要按钮文字颜色 */
  --mist-button-primary-bg-color: #409eff;       /* 主要按钮背景颜色 */
  --mist-button-primary-border-color: #409eff;   /* 主要按钮边框颜色 */
  
  --mist-button-success-color: #ffffff;          /* 成功按钮文字颜色 */
  --mist-button-success-bg-color: #67c23a;       /* 成功按钮背景颜色 */
  --mist-button-success-border-color: #67c23a;   /* 成功按钮边框颜色 */
  
  --mist-button-warning-color: #ffffff;          /* 警告按钮文字颜色 */
  --mist-button-warning-bg-color: #e6a23c;       /* 警告按钮背景颜色 */
  --mist-button-warning-border-color: #e6a23c;   /* 警告按钮边框颜色 */
  
  --mist-button-danger-color: #ffffff;           /* 危险按钮文字颜色 */
  --mist-button-danger-bg-color: #f56c6c;        /* 危险按钮背景颜色 */
  --mist-button-danger-border-color: #f56c6c;    /* 危险按钮边框颜色 */
  
  --mist-button-info-color: #ffffff;             /* 信息按钮文字颜色 */
  --mist-button-info-bg-color: #909399;          /* 信息按钮背景颜色 */
  --mist-button-info-border-color: #909399;      /* 信息按钮边框颜色 */
  
  
  --mist-button-font-size: 14px;                 /* 按钮字体大小 */
  --mist-button-font-weight: 500;                /* 按钮字体粗细 */
  --mist-button-border-radius: 4px;              /* 按钮圆角大小 */
  --mist-button-padding-vertical: 12px;          /* 按钮垂直内边距 */
  --mist-button-padding-horizontal: 20px;        /* 按钮水平内边距 */
}

暗色主题 ​

组件自动支持暗色主题，在暗色模式下会自动调整颜色：

css
:root.dark {
  --mist-button-default-color: #d1d5db;          /* 暗色模式默认按钮文字颜色 */
  --mist-button-default-bg-color: #1f2937;       /* 暗色模式默认按钮背景颜色 */
  --mist-button-default-border-color: #4b5563;   /* 暗色模式默认按钮边框颜色 */
  
}

注意事项 ​

  1. 按钮类型：type 属性支持 7 种预设类型（包括 text 类型），每种类型都有对应的配色方案。
  2. 按钮尺寸：size 属性支持 3 种尺寸，会自动调整按钮的高度、内边距和字体大小。
  3. 样式继承：组件会继承父元素的部分样式属性，如字体系列等。
  4. 图标支持：通过 icon 属性可以设置按钮图标，图标会在文字左侧显示。
  5. 原生类型：nativeType 属性支持设置按钮的原生类型，用于表单提交等场景。