脚本宝典收集整理的这篇文章主要介绍了

用vue/react写一个全局提示弹框

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">vue的实现方法</h2> <h4>1、写一个Toast组件</h4> <p><em>Toast.vue</em></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;toast&quot; v-if=&quot;show&quot;> <div class=&quot;box&quot;> <div class=&quot;title&quot;>{{title}}</div> <div class=&quot;content&quot;>{{content}}</div> <div class=&quot;btn&quot; @click=&quot;callback()&quot;>{{btn}}</div> </p></div> </p></div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: &quot;Toast&quot;, data() { return { show: true }; } }; </script></p> <style scoped> .toast { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; font-size: 14px; } .box { height: 130px; width: 240px; border: 1px solid #ccc; border-radius: 4px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .title, .content { line-height: 30px; padding: 0 10px; } .title { color: #666; border-bottom: 1px solid #ccc; } .btn { display: inline-block; padding: 4px 10px; color: gray; border: 1px solid #ccc; border-radius: 2px; position: absolute; bottom: 10px; left: 50%; transform: translate(-50%); cursor: pointer; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"show"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>&gt;</span>{{title}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>&gt;</span>{{content}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"callback()"</span>&gt;</span>{{btn}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"Toast"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> }; } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.toast</span> { <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">z-index</span>: <span class="hljs-number">99</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>; } <span class="hljs-selector-class">.box</span> { <span class="hljs-attribute">height</span>: <span class="hljs-number">130px</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">240px</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-50%, -50%); } <span class="hljs-selector-class">.title</span>, <span class="hljs-selector-class">.content</span> { <span class="hljs-attribute">line-height</span>: <span class="hljs-number">30px</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; } <span class="hljs-selector-class">.title</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#666</span>; <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>; } <span class="hljs-selector-class">.btn</span> { <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">padding</span>: <span class="hljs-number">4px</span> <span class="hljs-number">10px</span>; <span class="hljs-attribute">color</span>: gray; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">2px</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">bottom</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-50%); <span class="hljs-attribute">cursor</span>: pointer; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>组件中除了拥有是否展现自身的show属性以外其他属性都没有被定义,这些属性将在下面的toast.js中通过<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend出来的实例构造器的实例化对象传入。</p> <blockquote><p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend 返回的是一个“扩展实例构造器”,也就是一个预设了部分选项的 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 实例构造器</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var myVue = Vue.extend({ // 预设选项 -- 等下我们会把Toast组件作为预设传入 }) // 返回一个“扩展实例构造器” // 然后就可以这样来使用 var vm = new myVue({ // 其他选项 })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">var</span> myVue = <span class="hljs-type">Vue</span>.extend({ <span class="hljs-comment">// 预设选项 -- 等下我们会把Toast组件作为预设传入</span> }) <span class="hljs-comment">// 返回一个“扩展实例构造器”</span> <span class="hljs-comment">// 然后就可以这样来使用</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> myVue({ <span class="hljs-comment">// 其他选项</span> })</code></pre> <h4>2、 写一个toast.js</h4> <p><em>toast.js</em></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Toast from './Toast.vue' import Vue from 'vue' let ToastCmp = Vue.extend(Toast) function toast(options) { let div = document.createElement('div') document.body.appendChild(div) let { title, content, btn, callback } = options || {} new ToastCmp({ data() { return { title: title || &quot;Tips&quot;, content: content || &quot;contents here&quot;, btn: btn || &quot;confirm&quot;, callback: () => {<br /> callback &amp;&amp; callback instanceof Function &amp;&amp; callback()<br /> this.show = false<br /> }<br /> }<br /> }<br /> }).$mount(div)<br /> }</p> <p>export default {<br /> install: (Vue) => {<br /> Vue.prototype.$toast = toast<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'./Toast.vue'</span> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> ToastCmp = Vue.extend(Toast) <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toast</span>(<span class="hljs-params">options</span>) </span>{ <span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>) <span class="hljs-built_in">document</span>.body.appendChild(div) <span class="hljs-keyword">let</span> { title, content, btn, callback } = options || {} <span class="hljs-keyword">new</span> ToastCmp({ data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">title</span>: title || <span class="hljs-string">"Tips"</span>, <span class="hljs-attr">content</span>: content || <span class="hljs-string">"contents here"</span>, <span class="hljs-attr">btn</span>: btn || <span class="hljs-string">"confirm"</span>, <span class="hljs-attr">callback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { callback &amp;&amp; callback <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Function</span> &amp;&amp; callback() <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.show = <span class="hljs-literal">false</span> } } } }).$mount(div) } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">install</span>: <span class="hljs-function">(<span class="hljs-params">Vue</span>) =&gt;</span> { Vue.prototype.$toast = toast } }</code></pre> <h4>3、将toast方法挂载上Vue的原型然后调用即可</h4> <h2 id="articleHeader1">react的实现方法</h2> <h4>1、写一个toast.js</h4> <p>样式与vue的一样,此处省略</p> <p><em>toast.js</em></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>, { Component } from 'react'<br /> import <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> from 'react-dom'</p> <p>class Toast extends Component {<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor(props) {<br /> super(props)<br /> }<br /> render() {<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> { title, content, btn, callback } = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props<br /> return (</p> <div className=&quot;toast&quot;> <div className=&quot;box&quot;> <div className=&quot;title&quot;>{title}</div> <div className=&quot;content&quot;>{content}</div> <div className=&quot;btn&quot; onClick={callback}>{btn}</div> </p></div> </p></div> <p> )<br /> }<br /> }</p> <p>export default options => {<br /> let { title, content, btn, callback } = options || {}<br /> let div = document.createElement('div')<br /> document.body.appendChild(div)<br /> ReactDOM.render(React.createElement(Toast, {<br /> title: title || &quot;Tips&quot;,<br /> content: content || &quot;contents here&quot;,<br /> btn: btn || &quot;confirm&quot;,<br /> callback: () => {<br /> callback &amp;&amp; callback instanceof Function &amp;&amp; callback()<br /> document.body.removeChild(div)<br /> }<br /> }), div)<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Toast</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>ructor</span>(props) { <span class="hljs-keyword">super</span>(props) } render() { <span class="hljs-keyword">const</span> { title, content, btn, callback } = <span class="hljs-keyword">this</span>.props <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"toast"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"box"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"title"</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"content"</span>&gt;</span>{content}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{callback}</span>&gt;</span>{btn}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> options =&gt; { <span class="hljs-keyword">let</span> { title, content, btn, callback } = options || {} <span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>) <span class="hljs-built_in">document</span>.body.appendChild(div) ReactDOM.render(React.createElement(Toast, { <span class="hljs-attr">title</span>: title || <span class="hljs-string">"Tips"</span>, <span class="hljs-attr">content</span>: content || <span class="hljs-string">"contents here"</span>, <span class="hljs-attr">btn</span>: btn || <span class="hljs-string">"confirm"</span>, <span class="hljs-attr">callback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { callback &amp;&amp; callback <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Function</span> &amp;&amp; callback() <span class="hljs-built_in">document</span>.body.removeChild(div) } }), div) }</code></pre> <h4>2、引入调用即可</h4> <p></code></p>

总结

以上是脚本宝典为你收集整理的

用vue/react写一个全局提示弹框

全部内容,希望文章能够帮你解决

用vue/react写一个全局提示弹框

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过