Eight this year Https://www.barben.cn We have been there all the time. Fri, 29 May 2020 06:11:49 +0000 Zh-CN Hourly One Https://wordpress.org/? V=5.0.9 Https://www.barben.cn/wp-content/uploads/2019/03/2019030513473896-150x150.png Eight this year Https://www.barben.cn Thirty-two Thirty-two Vue modularized data, such as element form validation. Https://www.barben.cn/code/836.html Https://www.barben.cn/code/836.html#respond Fri, 29 May 2020 06:08:26 +0000 Https://www.barben.cn/? P=836 Why modularity of data?

When you use the form component of element today, you see that the form checking rule is so untidy that piles of piles are written under the data of the page.
So, I think, can you put all the rules of form checking together for easy management? So I did these things...

Create a new JS file

You can place this JS file in any location you want to place in the project.

Then, in this JS file, write your data and use export default to expose the data, like this:

 Export default your data

Import this JS file

Use import.
You can introduce it on the page you need. Or you can also Main.js Introduce it and mount it to the global level.

 Import rules from'./assets/js/rules'
 Vue.prototype .$rules = rules;

Use these data

You can directly call this.$rules to read the content that you exposed in the JS file before.

 Console.log (this.$ Rules.loginRules );

summary

Whether you want to unify management data or methods, you can implement this method to facilitate later search and modification.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Vue modularized data, such as element form validation. Https://www.barben.cn/code/836.html
> >
Https://www.barben.cn/code/836.html/feed Zero
Element UI custom tabs style Https://www.barben.cn/code/832.html Https://www.barben.cn/code/832.html#respond Fri, 29 May 2020 02:18:14 +0000 Https://www.barben.cn/? P=832

 <style>
/* to modify the style of tab, we must delete the scoped */
.el-tabs__ after the style tag. Item {
font-size: 18px! Important; 
padding: 10px 0 50px! Important; 
width: 120px! Important; important Active-bar {
width: 120px! Important; 
}
</style>

 


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Element UI custom tabs style - Https://www.barben.cn/code/832.html
> >
Https://www.barben.cn/code/832.html/feed Zero
The CSS effect of the mouse extending through the lines and extending to the periphery. Https://www.barben.cn/code/829.html Https://www.barben.cn/code/829.html#respond Thu, 28 May 2020 14:51:37 +0000 Https://www.barben.cn/? P=829 The effect is shown in the figure:

 <div class= "tab" > Hey! Eight this year, ~
<div class= "tab-class-fir" ></div>
<div class= "tab-class-sec" ></div>
</div>
 .tab{
display: inline-block; 
padding: 0 15px; 
line-height: 35px; 
cursor: pointer; 
transition: all 0.23s; 
transition:; Tab:before , Tab:after 
.tab-class-fir, 
.tab-class-sec {
content: '; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
box-sizing: border-box; 
transition: all 0.23s; Tab:hover {
color: #fff; 
background-color: #a29bfe; Tab:before {
border-top: 1px solid #000; Tab:after {
border-bottom: 1px solid #000; 
}

.tab-class-fir {
border-left: 1px solid #000; 
}

.tab-class-sec {
border-right: 
}

.tab-class-sec; It is very important. Tab:hover Before {
width: Calc (100% + 10px); 
left: -10px; t / * * left: -5px; * /}} Tab:hover After {
width: Calc (100% + 10px); 
left: 0; Calc / left: -5px; * /}} Tab:hover >.Tab-class-fir {
height: Calc (100% + 10px); 
top: 0; Calc / top: -5px; * /}} Tab:hover >.Tab-class-sec {
height: Calc (100% + 10px); 
top: -10px; t / * * top: -5px; * /}}

The above CSS code has four sentences hover, replacing their top or left into the annotated sentence.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
The CSS effect of a mouse extending through lines and extending to the surrounding area. Https://www.barben.cn/code/829.html
> >
Https://www.barben.cn/code/829.html/feed Zero
Vue uses sass in uni-app. Https://www.barben.cn/code/822.html Https://www.barben.cn/code/822.html#respond Wed, 13 May 2020 10:19:42 +0000 Https://www.barben.cn/? P=822 1, first of all, you need to install node-sass, because sass-loader depends on it.

 NPM install node-sass --save-dev

2, install sass-loader

 NPM install sass-loader --save-dev

3, modify the style label, declaring the use of SASS

 <style lang= "SCSS" scoped></style>

 


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Vue uses sass in uni-app - Https://www.barben.cn/code/822.html
> >
Https://www.barben.cn/code/822.html/feed Zero
Small program components cannot access nodes with selectAll. Https://www.barben.cn/code/814.html Https://www.barben.cn/code/814.html#respond Wed, 06 May 2020 10:10:37 +0000 Https://www.barben.cn/? P=814 Shocked! Encapsulates a component and uses it. Wx.createSelectorQuery ().SelectAll ().BoundingClientRect () is actually an empty array!

The solution is unexpected. It makes people feel sad. Xiaobian learned that after he took a breath of cool air, he could not speak on the spot.

Add attention to components. .in (this) that will do

 Const query = Wx.createSelectorQuery (.In) (this); Query.selectAll (".Area-item").BoundingClientRect ((rect) = { Console.log (rect);.Exec};


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Small program components cannot access nodes by selectAll. Https://www.barben.cn/code/814.html
> >
Https://www.barben.cn/code/814.html/feed Zero
WeChat applet encapsulates request requests Https://www.barben.cn/code/800.html Https://www.barben.cn/code/800.html#respond Wed, 22 Apr 2020 06:11:30 +0000 Https://www.barben.cn/? P=800 Recently, in the process of making small programs, I want to encapsulate a convenient management interface address. After a long time, Baidu found that many of the wheels provided by predecessors were not suitable for me.

So, to create this wheel, you only need to declare the request mode and the request address in the file. It will be very convenient to manage the interface and use it later.

1. Create Api.js File encapsulation Wx.request request

 / / import apiList from'./apiList'/ / import is introduced to report false Unexpected identifier, so instead of require
const host = require ('./apiList') require; / / the introduction of the address address = = (()); / / the introduction of the interface list. Header) = {/ / apiRequest method received Wx.request If you need the parameters, if you are not enough, you can add 
let promise = new Promise (function (resolve, reject)) Wx.request ({
url: host + URL, 
data: data null, 
method: method, 
header: header {'content-type':'content-type'}, 
success: function (RES) {s / / interface invocation 
resolve (RES); / / / according to business needs, resolve interface returns JSON data {}}, 
fail: function (RES) {} / interface call failure 
reject ({function 'network error, please try again later,}}; / / note that here is the promise object 
}

var list = {}; 
for (item in apiList) {
list[item] = {
index: item, 
http ({
index:), the ratio of ({}) = {}. This.index ][1], apiList[ This.index ][0], data)) Export default export will report wrong Unexpected token export, so use it instead. Module.exports
 / / export default {} / / login, register
//} Module.exports = list; / / finally, export this object to other pages.

 

2. Create ApiList.js File used to manage request address

 / / set the API interface's IP address and port 
let host = ' Http://192.168.0.122 83/'

//: all interface lists are 
let apiList = {
login: ['post','user/login'], 
register: ['get','user/register']
}

// host and apiList are exported. Module.exports = {
host, apiList
}

 

3, calling requests in the page

 Var API = require ('../../utils/) Api.js / / / first, we need to introduce encapsulation file 

Page ({
onLoad ()) { Api.login.http ({username: "Barben", password: "23333333"}).Then (RES = {}. Console.log (RES); Api.register.http ().Then (RES = { Console.log (RES);

Request effect

With success, you can now use your own packaged request to replace the request of the applet.

Although it can perfectly achieve the effect I expect, but the writing of this wheel is not very crisp, the code used a for cycle, and I think it is the biggest failure.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
WeChat applet encapsulates request requests - Https://www.barben.cn/code/800.html
> >
Https://www.barben.cn/code/800.html/feed Zero
Record a big guy's Vue request encapsulation method. Https://www.barben.cn/code/791.html Https://www.barben.cn/code/791.html#respond Wed, 22 Apr 2020 01:37:06 +0000 Https://www.barben.cn/? P=791 Keywords: Automatic Export
"There is no need for each import, only export default is required to export JSON, and then automatically import in main".




Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Record a big guy's Vue request encapsulation method - Https://www.barben.cn/code/791.html
> >
Https://www.barben.cn/code/791.html/feed Zero
Vernacular understanding the life cycle of WeChat applet Https://www.barben.cn/code/787.html Https://www.barben.cn/code/787.html#respond Tue, 14 Apr 2020 19:05:01 +0000 Https://www.barben.cn/? P=787 The life cycle of WeChat applet is divided into: Application life cycle (App) and Page life cycle (Page)

Small program life cycle

The life cycle function of applet application App.js   Call in file.
The App () function is used to register a small program and receive an object as a parameter, which specifies the callback of the minor program's lifecycle.

The calling sequence of the applet life cycle: OnLaunch (small program initialization is completed, and the global trigger is only one time). > OnShow (applet startup, or from background to foreground display) > OnHide (applet enters the background from the front desk)

The first time you enter a small program, the WeChat client initializes the running environment of the small program. After initialization, the WeChat client will distribute the logical layer APP instance. OnLaunch Event, which is called.

When the applet is displayed, it will be executed. OnShow Method. If you go back to the applet from the background, you will. Perform this method again.

If you click the capsule close button on the upper right corner or leave the applet directly by pressing the HOME key of the mobile phone, the applet will go into the background state, and then trigger. OnHide Method.

Two, page life cycle

Page lifecycle function under every page directory Page name.Js Call in file.
The Page () function is used to register a page. Receive an object as a parameter, which specifies the initial data of the page, the callback of the life cycle, and the event handling function.
When you enter or switch to a new page, you call the life cycle function.

The calling sequence of page life cycle: OnLoad (the page is first loaded and will only be called once the page is not destroyed). > OnShow (after the page is displayed) > OnReady (the first rendering of the page is finished, similarly, it will only be called once the page is not destroyed). > OnHide (page is hidden or cut into background) / onUnload (page uninstall)

When you load the page for the first time, the logical layer will be allocated by the configuration instance. OnLoad Event, which is called.

When the page is displayed, it will be executed. OnShow Method. If you go back to the applet from the background, or leave this page, and then return to this page from another page, you will Perform this method again.

When the page is first rendered, OnReady The method will be triggered. After this method is triggered, the representative page is ready, and the logical layer can interact with the view layer.

On the basis of keeping the current page, jump to the new page, or switch from the bottom tab column to other pages, or the small program cuts into the background, triggering. OnHide Method.

If you close the current page or close it and return to the previous page, the current page will be triggered. OnUnload Method.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Vernacular understanding the life cycle of WeChat applet - Https://www.barben.cn/code/787.html
> >
Https://www.barben.cn/code/787.html/feed Zero
CSS web page grey effect Https://www.barben.cn/live/769.html Https://www.barben.cn/live/769.html#respond Fri, 03 Apr 2020 17:16:54 +0000 Https://www.barben.cn/? P=769  In order to deeply mourn the sacrifice martyrs and compatriots who died in the fight against the outbreak of the new crown pneumonia, eight blogs were put on the website in April 4, 2020.

In order to deeply mourn the sacrifice martyrs and compatriots who died in the fight against the outbreak of the new crown pneumonia, the eight blog of this year put the website on the same day on April 4, 2020.
Salute the hero and mourn the dead. May the dead rest in peace and may the living be prosperous.

 Html{
filter: grayscale (100%); 
-webkit-filter: grayscale (100%); 
-moz-filter: grayscale (100%); 
-ms-filter: grayscale (100%); 
-o-filter: grayscale (100%); 
filter: URL (" Data:image/svg+xml; utf8 <svg xmlns=\ " Http://www.w3.org/2000/svg "><filter... .3333 0.3333 0.3333 0.3333000001 0\ "/></filter></svg>#grayscale"); / * Firefox 3.5+ */
filter: Progid:DXImageTransform.Microsoft.BasicImage (grayscale=1); * * IE 7-9 */
filter: gray; / * IE 7-9 * /}}

Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
CSS webpage ash effect - Https://www.barben.cn/live/769.html
> >
Https://www.barben.cn/live/769.html/feed Zero
ES6 uses Set to realize array weight removal. Https://www.barben.cn/code/759.html Https://www.barben.cn/code/759.html#respond Fri, 03 Apr 2020 06:39:19 +0000 Https://www.barben.cn/? P=759 Then, in the " Understanding the Set structure in ES6 In the article, we have said that the new Set structure in ES6 is similar to an array, but there is no duplicate value. So we can make use of his characteristic to realize the operation of array de emphasis.

Use Array.from Method

First, the array is converted to Set type to remove duplicate values, and then used. Array.from Turn it back into an array.

 Var arr = [1, 4, 3, 3, 2, 2, 3]; 

var newArr = Array.from (New Set (ARR)) Console.log (newArr); / / [1, 4, 3, 2]

Using the extension operator... Method

Similarly, we first convert the array to Set type to remove duplicate values, then use the extension operator "." Turn it into a comma separated parameter sequence and finally put it in an empty array.

 Var arr = [1, 4, 3, 3, 2, 2, 3]; 

var newArr = [... New Set (ARR)] Console.log (newArr); / / [1, 4, 3, 2]


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
ES6 uses Set to realize array weight removal. Https://www.barben.cn/code/759.html
> >
Https://www.barben.cn/code/759.html/feed Zero