npm i -S @superqjq/message
In main.js
of a Vue Project:
import message from '@superqjq/toast';
Vue.use(message);
In any Vue component, you can simply use this.$message()
to popup a tip:
<script>
export default {
mounted() {
this.$message({
type: 'info',
title: '提示',
message: '三国演义'
});
// or
this.$message.error('重生')
}
}
</script>
string
Default value is success
.
Type of message, could be one of these values: success
| warning
| error
| info
.
string
The info you want to show on the message title. (should be short)
string The info you want to show on the message.
number
Default value is 3
.
How many seconds he message should be shown, after that it could disapear automaticly.
Specially, you can set a value of -1
, which means showing the message forever.
Boolean
Default value is false
.
Whether to display asynchronous execution buttons
string
Text prompt
Boolean
Default value is false
Button color
this.$message({
type: 'info',
title: '提示',
message: '三国演义',
showFooter: true,
confirmText: '取消',
cancelText: '确定',
confirmStyle: true,
cancelStyle: true
}).then(() => {
console.log(1111)
/* dosomething */
}, () => {
console.log(2222)
/* dosomething */
})