Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: message style #144

Merged
merged 1 commit into from
Jan 5, 2024
Merged

feature: message style #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 78 additions & 5 deletions vue/src/components/message/SLMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,69 @@
<template>
<div class="px-3 h-10 border border-gray bg-default rounded">
<div class="flex items-center h-full">
<p>{{ message.text }}</p>
</div>
<div class="px-3 h-10 border rounded flex items-center gap-2" :class="message.type">
<!-- 成功图标 -->
<svg
t="1704430639499"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3306"
width="16"
height="16"
v-if="message.type === 'success'"
>
<path
d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z"
fill="#fff"
p-id="3307"
></path>
<path
d="M741.216 344a32 32 0 0 1 46.816 43.616l-315.296 338.208a32 32 0 0 1-43.968 2.688l-193.344-162.368a32 32 0 1 1 41.152-48.992l170.08 142.816 294.56-316z"
fill="#fff"
p-id="3308"
></path>
</svg>
<!-- 错误图标 -->
<svg
t="1704430752948"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4287"
width="16"
height="16"
v-if="message.type === 'error'"
>
<path
d="M512 1017.279c-279.061 0-505.282-226.223-505.282-505.282s226.221-505.279 505.282-505.279c279.059 0 505.282 226.223 505.282 505.282s-226.223 505.279-505.282 505.279zM512 69.878c-244.169 0-442.122 197.949-442.122 442.122s197.952 442.119 442.122 442.119c244.169 0 442.119-197.949 442.119-442.119s-197.949-442.122-442.119-442.122zM556.841 512.164l133.803 133.827c12.337 12.316 12.337 32.32 0 44.653-12.333 12.337-32.337 12.337-44.653 0l-133.827-133.803-134.708 134.708c-12.439 12.437-32.587 12.437-45.005 0-12.439-12.437-12.439-32.587 0-45.007l134.708-134.727-133.806-133.806c-12.335-12.335-12.335-32.32 0-44.657 12.337-12.333 32.32-12.333 44.657 0l133.806 133.806 135.716-135.716c12.437-12.419 32.587-12.419 45.007 0 12.437 12.437 12.437 32.587 0 45.026l-135.7 135.698z"
fill="#fff"
p-id="4288"
></path>
</svg>
<!-- 警告图标 -->
<svg
t="1704430898912"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5271"
width="20"
height="20"
v-if="message.type === 'warning'"
>
<path
d="M918.795922 356.854687c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092C635.727364 104.590046 579.236458 93.128123 520.903458 93.128123s-114.823906 11.461923-168.142315 33.976414c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058C100.496502 410.173096 89.034579 466.664002 89.034579 524.997002s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S941.310414 410.173096 918.795922 356.854687zM520.903458 911.836898c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S734.177094 911.836898 520.903458 911.836898z"
p-id="5272"
></path>
<path
d="M520.903458 637.364781c12.38297 0 22.514491-10.131521 22.514491-22.514491L543.417949 344.574056c0-12.38297-10.131521-22.514491-22.514491-22.514491s-22.514491 10.131521-22.514491 22.514491l0 270.378573C498.388967 627.23326 508.520488 637.364781 520.903458 637.364781z"
p-id="5273"
></path>
<path d="M520.903458 705.931641m-30.701579 0a30 30 0 1 0 61.403158 0 30 30 0 1 0-61.403158 0Z" p-id="5274"></path>
</svg>
<p>{{ message.text }}</p>
</div>
</template>

Expand Down Expand Up @@ -35,4 +96,16 @@ onUnmounted(() => {
})
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.success {
@apply bg-positive-default text-white-default;
}

.error {
@apply bg-negative-default text-white-default;
}

.warning {
@apply bg-warning-dimmer text-white-default;
}
</style>
9 changes: 9 additions & 0 deletions vue/src/components/message/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,15 @@ export const message = {
success: (text, delay, onClose) => {
message._ref.add(text, 'success', delay, onClose)
},
/**
* @description 显示警告消息
* @param {String} text 消息文本
* @param {Number} delay 延迟关闭时间
* @param {Function} onClose 关闭时的回调函数
*/
warning: (text, delay, onClose) => {
message._ref.add(text, 'warning', delay, onClose)
},
/**
* 清空所有消息
*/
Expand Down