搜索到
1
篇与
VH-Toast
的结果
-
VH-Toast - 一款简约的基于原生Javascript的消息提示插件（原创） 一款简约的基于原生 Javascript 的消息提示插件{message type="info" content="一款简约的基于原生 Javascript 的消息提示插件 VH-Toast。比如，$vh.default，$vh.info 等，默认为default。此时正文内容以message的值传入。同时，我们可传入 vhHtml 来支持 HTML标签 的显示。"/}Github项目地址{cloud title="VH-Toast" type="github" url="https://github.com/uxiaohan/VH-Toast" password=""/}演示地址{anote icon="fa-link" href="https://www.vvhan.com/other/vh-toast/index.html" type="secondary" content="点击查看演示效果"/}Demo调用<script src="https://cache.4ce.cn/gh/uxiaohan/VH-Toast/lib/vh.toast.min.js"></script>代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VH-Toast - 一款简约的基于原生Javascript的消息提示插件（原创）</title> <style> body { margin: 0; padding: 0; box-sizing: border-box; background-color: darkslategray; text-align: center; } input { margin:36px auto 0; width: 86%; height: 40px; font-size: 16px; padding: 4px 10px; outline: none; } .btns { margin-top: 36px; display: flex; justify-content: space-between; } .btns button { outline: none; flex: 1; height: 40px; margin: 0 10px; } </style> <script src="https://cache.4ce.cn/gh/uxiaohan/VH-Toast/lib/vh.toast.min.js"></script> </head> <body> <input placeholder="请输入内容" type="text"> <div class="btns"> <button onclick="defalt()">默认消息</button> <button onclick="success()">成功消息</button> <button onclick="info()">信息消息</button> <button onclick="warning()">警告消息</button> <button onclick="error()">危险消息</button> </div> <script> function defalt() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试！'; $vh.default(msg); } function success() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试！'; $vh.success(msg); } function info() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试！'; $vh.info(msg); } function warning() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试！'; $vh.warning(msg); } function error() { const msg = document.querySelector('input').value || '你可以在输入框内输入内容来测试！'; $vh.error(msg); } </script> </body> </html>使用文档默认样式$vh.default("这是一条默认消息提示"); $vh.default({ message: "这是一条默认消息提示", }); $vh.default({ message: "这是一条支持 HTML标签 的默认消息提示", vhHtml: true, });成功样式$vh.success("这是一条成功消息提示"); $vh.success({ message: "这是一条成功消息提示", }); $vh.success({ message: "这是一条支持 HTML标签 的成功消息提示", vhHtml: true, });消息样式$vh.info("这是一条消息提示"); $vh.info({ message: "这是一条消息提示", }); $vh.info({ message: "这是一条支持 HTML标签 的消息提示", vhHtml: true, });警告样式$vh.warning("这是一条警告消息提示"); $vh.warning({ message: "这是一条警告消息提示", }); $vh.warning({ message: "这是一条支持 HTML标签 的警告消息提示", vhHtml: true, });错误样式$vh.error("这是一条错误消息提示"); $vh.error({ message: "这是一条错误消息提示", }); $vh.error({ message: "这是一条支持 HTML标签 的错误消息提示", vhHtml: true, });