文本按钮

<div class="demo-line">
    <feng-button text="普通按钮" @click="output('点击了普通按钮')"></feng-button>
    <feng-button text="禁用按钮" :disabled="true"></feng-button>
</div>

图标按钮

<div class="demo-line">
    <feng-button @click="output('点击了图标按钮')">
        <feng-icon name="cut" style="height: 1.2em;margin: 2px;"></feng-icon>
    </feng-button>
    <feng-button @click="output('点击了剪切图标按钮')">
        <div style="display: flex;align-items: center;gap: 5px;margin: 2px;">
            <feng-icon name="cut" style="height: 1.2em;"></feng-icon>
            <span style="line-height: 1.2em;">剪切</span>
        </div>
    </feng-button>
    <feng-button :disabled="true">
        <feng-icon style="height: 1.2em;margin: 2px;" name="cut"></feng-icon>
    </feng-button>
    <feng-button :disabled="true">
        <div style="display: flex;align-items: center;gap: 5px;margin: 2px;">
            <feng-icon style="height: 1.2em;" name="cut"></feng-icon>
            <span style="line-height: 1.2em;">剪切</span>
        </div>
    </feng-button>
</div>

注意

具体的图标需要引入feng-icon组件，并设置合适的图标大小。

属性

属性名	说明	默认值
text	内容文本	''
disabled	是否禁用	false

插槽

插槽名	说明
default	自定义内容（设置为图标即可）

事件

属性名	说明
click	点击事件

标签按钮

<div class="demo-line">
    <feng-tag text="标签" v-model:select="select" @change="output(`点击了标签${select}`);">
        <feng-icon style="margin: 2px;" name="tag"></feng-icon>
    </feng-tag>
</div>

属性

属性名	说明	默认值
text	内容文本	''
v-model:select	是否选中	false

插槽

插槽名	说明
default	自定义内容（位于文本前）

事件

属性名	说明
change	select改变事件