❝
I don’t want to regret, don’t want to regret
Why didn’t you do it then?
❞
preface
“Notice: No homework today!“
- Xiao Ming, the king
- Xiao Hong, the king
- Yu, the king
- Every day, the king
Didi da, didi da…
Doodle –
You have a new message, please note check
I knew today was not a holiday
1 Notification
Width layout
Code snippet
.el-notification {
display: flex;
width: 330px;
padding: 14px 26px 14px 13px;
border-radius: 8px;
box-sizing: border-box;
border: 1px solid #ebeef5;
position: fixed;
background-color: #fff;
.
}
Copy the codeSkills parsing
❝
Div, a typical block element, a fluid box, defaults to the same width as its parent. Span, a typical inline element, an inline box, varies with text. H2. title and div.content are not the same width as their parent, but vary with text. What’s going on? How do block elements behave like inline elements? Display: inline-block, inline block, inline block, inline block, inline block, inline block Like the box’s gonna stretch? Good, is the expansion box! Display: Flex Learn CSS Layout Portal Flex layout tutorial portal
❞
The location information
Find a friend, find a good friend…
Where is your best friend now?
Code snippet
methods: {
open1() {
this.$notify({
title: 'Custom Location'.
message: 'Pop-up message in the upper right corner'
});
},
open2() {
this.$notify({
title: 'Custom Location'.
message: 'Message pops up in the lower right corner'.
position: 'bottom-right'
});
},
open3() {
this.$notify({
title: 'Custom Location'.
message: 'Message pops up in the lower left corner'.
position: 'bottom-left'
});
},
open4() {
this.$notify({
title: 'Custom Location'.
message: 'Top left pop-up message'.
position: 'top-left'
});
}
}
Copy the codedata() {
return {
.
position: 'top-right'
};
},
computed: {
horizontalClass() {
return this.position.indexOf('right') > 1?'right' : 'left';
},
verticalProperty() {
return /^top-/.test(this.position) ? 'top' : 'bottom';
},
positionStyle() {
return {
[this.verticalProperty]: `${ this.verticalOffset }px`
};
}
},
Copy the code.
let verticalOffset = options.offset || 0;
instances.filter(item => item.position === position).forEach(item => {
verticalOffset += item.$el.offsetHeight + 16;
});
verticalOffset += 16;
instance.verticalOffset = verticalOffset;
.
Copy the codeSkills parsing
❝
Horizontal and vertical each vertical distance increases successively verticalOffset += 16
❞
Methods to expand
You think stupid methods are the brainchild of stupid kids?
In fact, the most stupid method, but also smart to come out
After all, being lazy is good for development
['success'.'warning'.'info'.'error'].forEach(type= > {
Notification[type] = options => {
if (typeof options === 'string' || isVNode(options)) {
options = {
message: options
};
}
options.type = type;
return Notification(options);
};
});
Copy the code/ / optionstypeattribute
this.$notify({
title: 'success'.
message: 'This is a success message'.
type: 'success'
});
// Extend type attributes on methods, essentially the same as above
this.$notify.error({
title: 'wrong'.
message: 'This is an error message.'
});
Copy the codeSkills parsing
❝
Please call the method Notification, mount the method on the instance, and add the type property inside. Where’s my fish
❞
“What speed should I use“ 
Refer to the link
- The element’s official website
- Element repository
- Vue website
- ES6 Tutorial
Review past
- Follow Element to learn Vue tips (1) – Layout
- Learn Vue tips with Element (2) — Container
- Learn Vue tips with Element (7) – Button
- Learn Vue tips with Element (8) — Link
- Learn Vue tips with Element (9) — Radio
- Learn Vue tips with Element (10) — Checkbox
- Learn Vue tips with Element (11) — Input
- Learn Vue tips with Element (12) — InputNumber
- Learn Vue tips with Element (13) — Select
- Learn Vue tips with Element (14) — Cascader
- Learn Vue tips with Element (15) — Switch
- Learn Vue tips with Element (16) – Slider
- Learn Vue tips with Element (17) — TimePicker
- Learn Vue tips with Element (18) — DatePicker
- Learn Vue tips from Element (20) — Upload
- Learn Vue tips with Element (21) — Rate
- Follow Element to learn Vue tips (23) – Transfer
- Learn Vue tips with Element (24) — Form
- Learn Vue tips with Element (25) — Table
- Learn Vue tips with Element (26) – Tag
- Follow Element to learn Vue tips (27) — Progress
- Learn Vue tips from Element (28) — Tree
- Learn Vue tips with Element (29) — Pagination
- Follow Element to learn Vue tips (31) — Avatar
- Follow Element to learn Vue tips (33) — Loading
- Learn Vue tips with Element (34) — Message