❝
What’s going to happen in the future
It must mean something
❞
preface
When cousin goes to old man’s house for the first time, cousin accompany old man’s father plays cards, dou landlord
Cousin catch a card to see his hand card is not good, he asked to add code, lose a card one hundred dollars! Father-in-law happy straight nod! Result old father-in-law a round down to win more than 1000
The second bureau, cousin a look at his hands are big, he said, this bureau does not add a dollar a piece, sure enough, cousin won the father-in-law more than ten dollars!
So hit a few bureau dou landlord, originally see cousin not pleasing to the eye of the father-in-law, you guess how?
Do you have a cousin like that?
There is no
How about I give you one?
1 Table
Border border
A young man blew up the factory and was promptly arrested by the police
- Why would you blow up someone else’s factory?
- You do not know that the cloth I use to wipe the table is from their factory, the umbrella I take when I go out is from their factory, the paper towel I use to eat is from their factory, and the logo on the towel I wash my face when I go home is from their factory. I think even if I am Sun Wukong, I cannot escape from their hands
“Monopolies have never been accepted by the masses.” Break free and start by removing the borders!
Code snippet
Skills parsing
❝
el-tableThere is a border,cellThere’s a border, there’s a borderbeforeThe red line, oneafterIt’s a green line, so what’s the word “border”?
cellCome with lower border, right border
el-tableRemove the lower right border
Everything was perfect,beforeandafterTwo new lines are added to cover the lower right border
So? To remove a border, take three steps
1. Delete the border of the el-table
2. Remove the lower-right border of the cell
3. Remove the lines before and after
❞
If the throttle
Code snippet
// Switch repeatedly
store.toggleAllSelection = debounce(10, store._toggleAllSelection)
// Hover repeatedly
this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper());
// Multiple entries
handleMouseEnter: debounce(30, function(index) {
this.store.commit('setHoverRow', index);
})
// Leave several times
handleMouseLeave: debounce(30, function() {
this.store.commit('setHoverRow', null);
})
Copy the code// Live scroll
this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
// Reposition
syncPostion: throttle(20, function() {
.
})
Copy the codeSkills parsing
❝
In the face of crazy click, the anti-shake, the last hard hit, direct KO roll to roll over, also very tired, the throttling, once a period of time, hit you a anti-shake: repeat click, the last trigger throttling: real-time scrolling, at an interval of time to trigger the anti-shake and throttling portal
❞
2 watch
Component extensions
In the past, cell phones could only send text messages and make calls
Later, MP3 and MP4 were added to become smart phones
Later,, APP, small programs, let the mobile phone more and more powerful!
Finally, we can no longer live without our phones
Who robbed my phone, I with who urgent, ╭(╯^╰)╮
Code snippet
// Component extension
export default Vue.extend({
data() {
.
},
mixins: [expand, current, tree],
methods: {
.
}
});
Copy the code// Prototype extension
import Watcher from './watcher';
// Attribute extension
Watcher.prototype.mutations = {
.
};
// Method extension
Watcher.prototype.commit = function(name, ... args) {
const mutations = this.mutations;
if (mutations[name]) {
mutations[name].apply(this, [this.states].concat(args));
} else {
throw new Error(`Action not found: ${name}`);
}
};
Watcher.prototype.updateTableScrollY = function() {
Vue.nextTick(this.table.updateScrollY);
};
Copy the codeSkills parsing
❝
Extend (), pass in the function you want to extend, and return a constructor. Remember, function, not component. What is a constructor? So, constructors have stereotypes, they can be extended, they can be instantiated
❞
3 the toolkit
mapStates
/ *
@{file} helper.js
@ {function} get the corresponding state of store
@{example}
mapStates({
selection: 'selection'.
columns: 'columns'.
tableData: 'data'.
fixedColumns: 'fixedColumns'.
rightFixedColumns: 'rightFixedColumns'
})
= >
{
selection: () =>this.store.states.selection,
tableData: () =>this.store.states.data
.
}
Use deconstructed assignment in computed
The computed: {
// selection() {
// return this.store.states.selection
// }
. mapStates({
selection: 'selection'.
columns: 'columns'.
tableData: 'data'.
fixedColumns: 'fixedColumns'.
rightFixedColumns: 'rightFixedColumns'
})
}
* /
export function mapStates(mapper) {
const res = {};
Object.keys(mapper).forEach(key => {
const value = mapper[key];
let fn;
if (typeof value === 'string') {
fn = function() {
return this.store.states[value];
};
} else if (typeof value === 'function') {
fn = function() {
return value.call(this, this.store.states);
};
} else {
console.error('invalid value type');
}
if (fn) {
res[key] = fn;
}
});
return res;
};
Copy the code
“I only silently guard you“ 
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