Button 按钮

基本用法

点击查看代码

<template>
  <s-button @click="handleClick">按钮</s-button>
</template>

<script setup lang="ts">
  const handleClick = (e: Event) => {
    alert("click");
    console.log("click", e.target);
  };
</script>

图标按钮

el-icon 图标

自定义 图标

PS：自定义图标时图标名称必须携带前缀，如：icon-smile，详情参考 icon 组件文档

点击查看代码

<template>
  <div style="margin-bottom: 10px;">
    <h6><code>el-icon</code> 图标</h6>
    <s-button :icon="Edit" iconOnly></s-button>
  </div>

  <div>
    <h6>自定义 图标</h6>
    <el-text tag="div" style="margin-bottom: 10px;">
      PS：<i>自定义图标时图标名称必须携带前缀，如：<code>icon-smile</code>，详情参考 <code>icon</code> 组件文档</i>
    </el-text>

    <s-button icon="icon-smile" iconOnly></s-button>
  </div>
</template>

<script setup lang="ts">
  import { Edit } from "@element-plus/icons-vue";
</script>

高亮按钮

点击切换按钮高亮状态

PS：高亮状态仅对文字按钮 (text) 、图标按钮 (iconOnly) 生效

点击查看代码

<template>
  <div style="margin-bottom: 20px;">
    <h6>点击切换按钮高亮状态</h6>
    <el-text tag="div">
      PS：<i>高亮状态仅对文字按钮 (<code>text</code>) 、图标按钮 (<code>iconOnly</code>) 生效</i>
    </el-text>
  </div>

  <div style="margin-bottom: 10px;">
    <s-button text :lighted="lighted" @click="lighted = !lighted">文字按钮</s-button>
    <s-button type="primary" text :lighted="lighted" @click="lighted = !lighted">文字按钮</s-button>
    <s-button type="warning" text :lighted="lighted" @click="lighted = !lighted">文字按钮</s-button>
    <s-button type="danger"  text :lighted="lighted" @click="lighted = !lighted">文字按钮</s-button>
  </div>

  <div style="margin-bottom: 10px;">
    <s-button :icon="Edit" iconOnly :lighted="lighted" @click="lighted = !lighted"></s-button>
    <s-button type="primary" :icon="Edit" iconOnly :lighted="lighted" @click="lighted = !lighted"></s-button>
    <s-button type="warning" :icon="Edit" iconOnly :lighted="lighted" @click="lighted = !lighted"></s-button>
    <s-button type="danger" :icon="Edit" iconOnly :lighted="lighted" @click="lighted = !lighted"></s-button>
  </div>

  <div>
    <s-button :icon="Edit" iconOnly bg :lighted="lighted" @click="lighted = !lighted"></s-button>
    <s-button type="primary" :icon="Edit" iconOnly bg :lighted="lighted" @click="lighted = !lighted"></s-button>
    <s-button type="warning" :icon="Edit" iconOnly bg :lighted="lighted" @click="lighted = !lighted"></s-button>
    <s-button type="danger" :icon="Edit" iconOnly bg :lighted="lighted" @click="lighted = !lighted"></s-button>
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import { Edit } from "@element-plus/icons-vue";

  const lighted = ref(false);
</script>

Button Props

Button Emits