<script>
import iMessage from 'iview-mpvue/dist/components/message/message'
export default {
components: {
'i-message': iMessage
}
}
</script>
import 'iview-mpvue/dist/components/message/style/css'
<div style="margin-top: 100px">
<i-button type="ghost" @click="handleDefault">默认提醒</i-button>
<i-button type="ghost" @click="handleSuccess">成功提醒</i-button>
<i-button type="ghost" @click="handleWarning">警告提醒</i-button>
<i-button type="ghost" @click="handleError">错误提醒</i-button>
<i-button type="ghost" @click="handleDuration">自定义持续时间</i-button>
</div>
<i-message ref="message" />
<script>
import { $Message } from 'iview-mpvue/dist/components/base/index'
export default {
...
methods: {
handleDefault() {
$Message(this, {
content: '这是一条普通提醒'
})
},
handleSuccess () {
$Message(this, {
content: '这是一条成功提醒',
type: 'success'
})
},
handleWarning () {
$Message(this, {
content: '这是一条警告提醒',
type: 'warning'
})
},
handleError () {
$Message(this, {
content: '这是一条错误提醒',
type: 'error'
})
},
handleDuration () {
$Message(this, {
content: '我将在 5 秒后消失',
duration: 5
})
}
}
}
</script>