Instance code of the Element-UI spring frame effect in the Vue project

Recently, I have to write a box, I found Element-UI The box pattern is OK, and then change it down. Detail of the direct code is also introduced in detail.

In the component directory Message

I posted something in the Message directory

vue项目中仿element-ui弹框效果的实例代码

SRC folder

index.js vue项目中仿element-ui弹框效果的实例代码

Import Message from ‘./src/main.js’;Export Default Message;

 mian.js   

Import Vue from ‘Vue’; import main from ‘./main.vue’; Let MessageConstructor = Vue.extend (Main); Let instance; let instances = [ ]; let seed = 1; const message = (options = {}) => {if (typeof option === ‘string’) {Options = {message: options}}}}}}} let usronclose = Options.onClose; let id = ‘message_’ + seed ++; options.onclose = function () {message.close (ID, UseroncloSE);}; instance = new messageconstructor; instance.id = id; instance.vm = instance. $ mount (); document.body.Appendchild (instance.vm. $ el); instance. VM.Visible = true; instance.dom = instance.vm. $ el; instance.dom.style.zindex = 999; instances.push (instance); return instance.vm;} [‘Success’,’ Warning ‘,’ Info ‘,’ error ‘]. foreach (type => {message [type] = Options => {= = {= {message: Options.type = type; / TYPE; Return Message (option);};}); message.close = function (id, useronclose) {for (let i = 0, len = instances.length; i
= 0; I -) {Instances [i ]. close ();}}; export default message;

mian.Vue

    


{{Message}}

  Const TYPEMAP = {Success: 'Success', Info:' Info ', Warning:' Warning ', Error:' Error '}; Export Default {Data () {Return {Visible: false, Message:', Duration: 1000, type: 'info', iconClass: '', customClass: '', onClose: null, showClose: false, closed: false, timer: null, dangerouslyUseHTMLString: false, center: false}}, computed: {typeClass () {return THISTYPE &&! this.iconclass? `Message-icon icon - $ {typemap [this.type]}`: '';}}, watch: {closed (newval) {if (newval) {this.visible = FALSE This. $ el.addeventlistener ('transition', this.destroyElement);}}}, methods: {design (DESTROYELEMENT){this. $ el.removeEventListener ('transition', this.destroyElement); this. $ destroy (true); this. $ el.parentnode.removechild (this. $ EL);}, close () {this.closed = True; if (TypeOf this.onclose === 'function') {this.onclose (this);}}, cleartimer () {cleArtimeout (this.timer);}, starttimer () {if (this.duration> 0) {this.timer = setTimeout (() => {if (! This.closed) {this.close ();}}, this.duration);}}, keydown (e) {if (e.Keycode = == 27) {// ESC Close Message if (! This.closed) {this.close ();}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} /}}}}}}}}} );}, beforeDestroy () {Document.removeEventListener ('keydown', this.keydown);}}   .Message {min-width: 200px; box-siziNg: Border-Box; Border-Radius: 3px; Border: 1px Solid # ebeef5; Position: fixed; Left: 50%; TOP: 20PX; Transform: TranslateX (-50%); Background-Color: # edf2f3; transition: TRANSITEN Opacity 0.3s, transform .4s; overflow: hidden; padding: 10px; Display: flex; align-items: center;}. measure-icon {width: 15px; height: 15px; border-radius: 100%; background: # FFF; Display: inline-block; margin-right: 10px; & .icon-surcess {background: URL ("../../ assets / image / icon-surcess.png") No-repeat center center Background-size: auto 100%;} & .icon-error {background: URL ("../../ assets / image / icon-error.png") no-repeat center center; Background-size : auto 100%;} & .icon-info {background: URL ("../../ asseserts / image / icon-info.png") No-repeat center CentEr; Background-Size: Auto 100%;} & .icon-warning {background: URL ("../../../ assets / image / icon-warning.png") no-repeat center center; background- SIZE: AUTO 100%;}} .message-surcess {background: # f2f8ec; border-color: # e4f2da; .message-content {color: # 7ebe50;}}. measureage-error {background: # fcf0f0; border-color : # f9e3e2; .Message-content {color: # e57470;}} .Message-warning {background: # fcf6ed; border-color: # f8ecda; .Message-content}}. measureage-info { Background: # EEF2FB; Border-Color: # ebeef4; .Message-content {Color: # 919398;}} .message-fade-enter, .Message-fade-leave-active {Opacity: 0; Transform: Translate (-50 %, -100%);} 
The above is the package of all code Next to see how references main.js introduced

Import Message from '@ / Components / Message / Index.js'

Vue.Prototype. $ Message = Message Call
In the page call this. $ Message: 'prompt message', Type: 'Error '// Type has four values. Error 2.suCcess 3.info 4.warning});


TYPE is SUCCESS

TYPE is warning

TYPE is INFO

TYPE is Errprprpr
Picture of Small Icon with its own picture
   Summary 
The above is the Vue item introduced to you. The instance code of the ELEMENT-UI bomb frame, I hope to help everyone. If you have any questions, please send me a message, the small package will reply to everyone!

vue项目中仿element-ui弹框效果的实例代码

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment