mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add options for message & add warning style for message

Browse Source
This commit is contained in:
07akioni 2019-07-02 13:47:23 +08:00
parent 5883de5c54
commit 56e39407c8
5 changed files with 124 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
demo/components/messageDemo.vue
View File

@ -20,6 +20,9 @@
<n-button @click="emitMessage2">
Blowing in the Wind
</n-button>
<n-button @click="emitMessage3">
No Reply
</n-button>
</div>
<div class="n-doc-section__source">
<textarea><n-button @click="emitMessage1">
@ -28,14 +31,45 @@
<n-button @click="emitMessage2">
Blowing in the Wind
</n-button>
<n-button @click="emitMessage3">
No Reply
</n-button>
<script>
export default {
methods: {
emitMessage1 () {
this.$NMessage.error('Once upon a time you dressed so fine')
this.$NMessage.error('Once upon a time you dressed so fine', { duration: 1000 })
},
emitMessage2 () {
this.$NMessage.success('How many roads must a man walk down')
this.$NMessage.warning('How many roads must a man walk down')
},
emitMessage3 () {
this.$NMessage.success('\'Cause you walked hand in hand With another man in my place')
}
}
}
</script></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Custom Icon
</div>
<div class="n-doc-section__view">
<n-button @click="emitMessage4">
Help!
</n-button>
</div>
<div class="n-doc-section__source">
<textarea>
<n-button @click="emitMessage4">
Help!
</n-button>
<script>
export default {
methods: {
emitMessage4 () {
this.$NMessage.warning('I never needed anybody\'s help in any way', { icon: 'ios-alert' })
}
}
}
@ -57,10 +91,16 @@ export default {
},
methods: {
emitMessage1 () {
this.$NMessage.error('Once upon a time you dressed so fine')
this.$NMessage.error('Once upon a time you dressed so fine', { duration: 1000 })
},
emitMessage2 () {
this.$NMessage.success('How many roads must a man walk down')
this.$NMessage.warning('How many roads must a man walk down')
},
emitMessage3 () {
this.$NMessage.success('\'Cause you walked hand in hand With another man in my place')
},
emitMessage4 () {
this.$NMessage.warning('I never needed anybody\'s help in any way', { icon: 'ios-hourglass' })
}
}
}

28
packages/common/Message/src/MessageCell.vue
View File

@ -7,13 +7,25 @@
>
<div class="n-message-cell__icon">
<n-icon
v-if="type === 'success'"
v-if="icon"
size="20"
:type="icon"
/>
<n-icon
v-else-if="type === 'success'"
size="20"
type="md-checkmark-circle"
/>
<n-icon
v-else-if="type === 'error'"
size="20"
type="md-close-circle"
/>
<n-icon
v-else-if="type === 'warning'"
size="20"
type="md-alert"
/>
</div>
<div class="n-message-cell__content">
{{ content }}
@ -29,14 +41,22 @@ export default {
NIcon
},
props: {
type: {
type: String,
default: 'success'
option: {
type: Object,
required: true
},
content: {
type: String,
default: ''
}
},
computed: {
type () {
return this.option.type
},
icon () {
return this.option.icon
}
}
}
</script>

57
packages/common/Message/src/main.js
View File

@ -25,12 +25,6 @@ function attachMessageContainer () {
return messageContainer
}
const defaultOptions = {
timeout: 5000,
emergeTransitionTimeout: 300,
vanishTransitionTimeout: 300
}
function registerMessageEl (container, el, option) {
el.classList.add('is-going-to-emerge')
container.appendChild(el)
@ -42,21 +36,56 @@ function registerMessageEl (container, el, option) {
container.removeChild(el)
}, option.vanishTransitionTimeout)
el.classList.add('is-vanishing')
}, option.timeout)
}, option.duration)
}, option.emergeTransitionTimeout)
}
/**
* Create options for message
* @param {Object} option
* @param {string} option.type
* @param {number} option.duration by millisecond
* @param {string} option.color
* @param {string} option.icon
* @param {string} option.iconColor
*/
function mixinOption (option) {
const defaultOptions = {
duration: 3000,
emergeTransitionTimeout: 300,
vanishTransitionTimeout: 300,
type: 'success',
color: null,
icon: null,
iconColor: null
}
if (option) {
return { ...defaultOptions, ...option }
} else {
return defaultOptions
}
}
const NMessage = {
notice (content, type = 'success', option = defaultOptions) {
notice (content, option) {
const messageContainer = attachMessageContainer()
const messageCell = (new Vue({ ...NMessageCell, propsData: { type, content } })).$mount()
registerMessageEl(messageContainer, messageCell.$el, option)
const messageCell = (new Vue({ ...NMessageCell, propsData: { option, content } })).$mount()
registerMessageEl(messageContainer, messageCell.$el, mixinOption(option))
},
success (content) {
this.notice(content, 'success')
success (content, option) {
option = mixinOption(option)
option.type = 'success'
this.notice(content, option)
},
error (content) {
this.notice(content, 'error')
warning (content, option) {
option = mixinOption(option)
option.type = 'warning'
this.notice(content, option)
},
error (content, option) {
option = mixinOption(option)
option.type = 'error'
this.notice(content, (option))
}
}

5
styles/Alert.scss
View File

@ -2,5 +2,8 @@
@import './theme/default.scss';
@include b(alert) {
display: block;
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
}

10
styles/Message.scss
View File

@ -24,7 +24,7 @@
line-height: 40px;
}
.n-message-cell__icon {
margin-right: 11px;
margin-right: 10px;
display: inline-flex;
height: 40px;
line-height: 40px;
@ -49,6 +49,14 @@
}
}
}
&.n-message__cell--warning {
background-color: rgba(255, 138, 0, 1);
.n-message-cell__icon {
i::before {
color: rgba(255, 255, 255, .65);
}
}
}
&.is-going-to-emerge {
opacity: 0;
transform: translateY(-12px);