Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to encapsulate and use el-message in vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Realization method

There are many ways to implement it, and you can decide which one to use according to your actual project.

Method one

Direct css inside to give this style, simple and easy, but there is a problem that all the message are overlapped together, simple animation effect is not good, not very recommended.

. el-message {top: 20px! important;}

Method two

Using el-message 's closeAll method directly, it's also easy to turn off all messages before popping them, but there's an obvious jitter, so it's not recommended (you can write this if you don't mind).

This.$message.closeAll (); this.$message.error ("error tip 3")

Method 3 (there are incomplete methods, you can look at method 4 with problems)

Modify message, rewrite the message method, create a new message.js, define a class class, and assign success,error,info,warning4 methods to the class. According to the usage of el-message, it can be divided into two cases: this.$message.success ('test success message') and this.$message ({type:'success',message:' test success message'}). Therefore, you need to make a judgment based on whether the passed value is a string or an object.

Import {Message} from "element-ui"; class ZMessage {constructor () {["success", "error", "info", "warning"]. ForEach ((type) = > {this [type] = function (options) {if (isObject (options)) {const {type='info',... rest} = options Message ({type,... rest,}); return;} Message ({type: type, message: options,});};}) }} / / determine whether the input is Objectfunction isObject (content) {return (Object.prototype.toString.call (content) = "[object Object]" & &!! content.message);} export default new ZMessage

And then introduce a method in main.js that overrides el-message.

Import ZMessage from "@ / utils/message"; Vue.prototype.$message = ZMessage

So message rewrite the first step is completed, the second step needs to determine the current number of message, if less than 1, then play the message, carefully observe message, we can through document.getElementsByClassName ("el-message") .length to get the number of the current pop-up box, if greater than or equal to 1 no longer bounce box, if less than 1 on the bounce box.

Class ZMessage {constructor () {["success", "error", "info", "warning"] .forEach ((type) = > {this [type] = function (options) {/ / add a judgment if (document.getElementsByClassName ("el-message"). Length = = 0) {if (isConfig (options)) {const {type = "info",... rest} = options Message ({type,... rest,}); return;} Message ({type: type, message: options,});}};});}}

In this way, even if the message is triggered many times, only one message will pop up. Just when I thought I was done, I found that there was a new problem:

Problem 1:this.$message ({type:'error',message:' test message'}) reported an error

Question 2: the message of the play will not be updated, and a new one will not appear until the last message disappears.

Method 4

For the two problems existing in method 3, we need to modify method 3, the same file message.js, where class is not needed, because the external export method is new ZMessage (), and the value of message cannot be passed directly, so we don't need class because we haven't figured out how to pass it, so we don't need class.

Const ZMessage = function (options) {if (isObject (options)) {const {type = "info",... rest} = options; showMessage ({type,... rest,}) return;} showMessage ({type: options.type | | "info", message: options,})} ["success", "error", "info", "warning"] .forEach ((type) = > {ZMessage [type] = function (options) {if (isObject (options)) {ZMessage ({type: type,... options,}); return;} ZMessage ({type, message: options,});};}) Function isObject (content) {return (Object.prototype.toString.call (content) = = "[object Object]" & &!! content.message);} function showMessage (options) {Message ({... options});} export default ZMessage

In this way, the first problem, this.$message ({type:'error',message:' test message'}) will not be reported wrong. Next, to solve the second problem, the value will not be updated. You can define a msgInstance variable. If a new value comes, close the last message.

Var msgInstance = null;const ZMessage = function (options) {if (msgInstance) {/ / update pop-up box msgInstance.close ();} if (isObject (options)) {const {type = "info",... rest} = options; showMessage ({type,... rest,}) return } showMessage ({type: options.type | | "info", message: options,})}; ["success", "error", "info", "warning"] .forEach ((type) = > {ZMessage [type] = function (options) {if (isObject (options)) {ZMessage ({type: type,... options,}); return } ZMessage ({type, message: options,});};}); function isObject (content) {return (Object.prototype.toString.call (content) = "[object Object]" & &!! content.message);} function showMessage (options) {msgInstance=Message ({... options});} export default ZMessage

In this way, the two problems above have been solved perfectly, and the goal has been basically achieved here; however, I also think of what to do if there is more than one message, I want to have only two or more, so on the basis of method 4, I transform method 5, refer to ant-design-vue, and can deploy the maximum number.

Method five

Defining a maxCount parameter requires the global definition of message. Before calling the message method, set the maximum number of message. Each time you click the pop-up box, insert a current message instance into the messageList, delete this data when close, add a new config method to the message, and pass the maxCount to the config method, which is configured in this.

Import {Message} from "element-ui"; / / define the current quantity of message var messageList = []; / / define the initial maximum quantity var messageMaxCount = 0; const ZMessage = function (options) {if (messageMaxCount & & messageList.length > = messageMaxCount) {/ / update pop-up box messageList [0] .close ();} if (isObject (options)) {const {type = "info",. Rest} = options MessageList.push (showMessage ({type,... rest,}); return;} messageList.push (showMessage ({type: options.type | | "info", message: options,});} ["success", "error", "info", "warning"] .forEach ((type) = > {ZMessage [type] = function (options) {if (isObject (options)) {ZMessage ({type: type,... options,}); return;} ZMessage ({type, message: options,});};}) ZMessage.config = function (options) {const {maxCount} = options; if (maxCount) {if (typeof maxCount! = = "number") {return console.error ("Parameter type error: maxCount should be number type");} messageMaxCount = maxCount;}}; function isObject (content) {return (Object.prototype.toString.call (content) = "[object Object]" & &!! content.message) } function showMessage (options) {const {onClose:close,... rest} = options; return Message ({... rest, / / when closing, onClose: (val) = > {if (close) {close ()} messageList = messageList.filter ((item) = > item.id! = val.id);},}) } export default ZMessage

Use:

This.$message.config ({maxCount:3})

This is the end of this article on "how to encapsulate and use el-message in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.