elementui type=

elementui type 属性

在 Element UI 中，type 属性用于指定组件的样式或行为类型，不同组件的 type 属性可能有不同的取值和效果。以下是常见组件中 type 属性的用法：

按钮（Button）组件

type 属性用于定义按钮的样式，可选值包括：

• primary：主要按钮，蓝色背景
• success：成功按钮，绿色背景
• warning：警告按钮，黄色背景
• danger：危险按钮，红色背景
• info：信息按钮，灰色背景
• text：文字按钮，无背景

示例代码：

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>

消息提示（Message）组件

type 属性用于指定消息的类型，可选值包括：

• success：成功消息
• warning：警告消息
• info：信息消息
• error：错误消息

示例代码：

this.$message({
  message: '这是一条成功消息',
  type: 'success'
});

通知（Notification）组件

type 属性用于指定通知的类型，可选值与 Message 组件相同：

• success
• warning
• info
• error

示例代码：

this.$notify({
  title: '成功',
  message: '这是一条成功的提示消息',
  type: 'success'
});

标签（Tag）组件

type 属性用于定义标签的样式，可选值包括：

• success：绿色标签
• info：蓝色标签
• warning：黄色标签
• danger：红色标签

示例代码：

<el-tag type="success">成功标签</el-tag>
<el-tag type="danger">危险标签</el-tag>

进度条（Progress）组件

type 属性用于指定进度条的样式，可选值包括：

• line：直线型进度条（默认）
• circle：环形进度条
• dashboard：仪表盘型进度条

示例代码：

<el-progress :percentage="50" type="circle"></el-progress>

输入框（Input）组件

type 属性用于指定输入框的类型，可选值包括：

• text：文本输入框（默认）
• textarea：多行文本输入框
• password：密码输入框
• number：数字输入框
• email：邮箱输入框
• url：URL 输入框

示例代码：

<el-input type="password" v-model="password"></el-input>

注意事项

• 不同组件的 type 属性可能有不同的取值和效果，使用时需参考具体组件的文档。
• 某些组件的 type 属性是必需的，而另一些则是可选的。
• 在 Vue 的单文件组件中，type 属性通常需要通过 v-bind 或简写 : 来动态绑定值。