代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>消息测试</title>
<link rel="stylesheet" href="message.css">
</head>
<body>
<div id="app">
<h3>一个好看的消息提示插件 基于Vue</h3>
<p>点击下方按钮进行测试</p>
<button @click="Alert">默认</button>
<button @click="Alert('操作成功 啦啦啦','success',2000)">成功</button>
<button @click="Alert('请稍后 ...','info',2000)">提示</button>
<button @click="Alert('网络异常?','warning',2000)">警告</button>
<button @click="Alert('操作失败!','error',2000)">失败</button>
<div class="c-message" :class="message.status" v-show="message.show">
<div class="c-message--main">
<i class="c-message--icon" :class="message.type"></i>
<div class="c-message--tip">{{message.text}}</div>
</div>
</div>
<p>
并非纯原创,是基于这个jQuery例子,只是将其改写成了Vue
<br>
<a href="http://www.jq22.com/jquery-info16308" target="_blank">jquery消息提示插件:类vue element message组件功能</a>
</p>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
message: {
show: false,
type: 'c-message--success',
status: 'messageFadeInDown',
text: '操作成功',
time: 2000,
timeout: null
}
},
methods: {
Alert: function (text, type, time) {
vm.message.status = '';
clearTimeout(vm.timeout)
vm.message.text = (typeof text == 'string') && text ? text : '我是默认';
vm.message.time = time ? time : 2000;
vm.message.type = 'c-message--' + (type ? type : 'info');
vm.message.show = true;
vm.message.status = 'messageFadeInDown';
vm.timeout = setTimeout(function () {
vm.message.status = 'messageFadeOutUp'
}, vm.message.time)
}
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。