Element UI： 复制功能

2022-01-14

文档地址

基础用法

1. 设置按钮样式：使用type（默认）、plain（朴素）、round（圆角）和circle（圆形）属性来定义 Button 的样式。

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

2. 按钮中添加icon

<el-button type="primary" icon="el-icon-edit" ></el-button>

3. 尺寸
   额外尺寸：medium、small、mini，通过设置size属性来配置它们。

4. 禁用状态
   你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。

5. 文字按钮
   没有边框和背景色的按钮。

<el-button type="text">文字按钮</el-button>

6. 按钮组
   使用<el-button-group>标签来嵌套你的按钮。

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

7. 加载状态
   点击按钮后进行数据加载操作，在按钮上显示加载状态。

<el-button type="primary" :loading="true">加载中</el-button>

复制功能

    <el-button
              type="primary"
              v-clipboard:copy="userInfo"
              v-clipboard:success="onCopySuccess"
              v-clipboard:error="onCopyError"
    >复用户信息</el-button

    onCopySuccess() {
      this.$message.success("复制成功");
    },
    onCopyError() {
      this.$message.error("复制失败");
    },