The year of eight books https://www.barben.cn We've been there all the time Sat, 19 Sep 2020 18:19:03 +0000 zh-CN hourly one https://wordpress.org/?v=5.5.1 https://www.barben.cn/wp-content/uploads/2019/03/2019030513473896-150x150.png The year of eight books https://www.barben.cn thirty-two thirty-two Convert JS timestamp to normal digital time format https://www.barben.cn/code/897.html https://www.barben.cn/code/897.html#respond Sat, 19 Sep 2020 18:15:45 +0000 https://www.barben.cn/?p=897 In the middle of the night, I found the back end of the interface Bring good people The time field passed to me is actually a timestamp format???

 JS timestamp format to digital format
Originally, I wanted the backend to change this timestamp to a value that can be seen by a man in the sun, but when I look at the time .

2020-09-20 02:06:05

Excuse me, I'll do it myself!!!!

 function getdate(time) {
  var now = new Date(time),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
  return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
}
console.log(getdate(1600413432000)); // 2020-09-18 15:17:12

 


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
JS timestamp to normal digital time format - https://www.barben.cn/code/897.html
]]>
https://www.barben.cn/code/897.html/feed zero
Van re rendering updates picker view https://www.barben.cn/code/880.html https://www.barben.cn/code/880.html#respond Fri, 11 Sep 2020 09:14:36 +0000 https://www.barben.cn/?p=880 One requirement is to use van's picker selector component instead of the input box to set everyone's score.
However, the score of each item is different, some full score is 10, some full score is 30, so it is necessary to dynamically change the optional range for picker selector.

 The Vue van picker selector dynamically updates the view

 <! -- score selection pop-up window >
 Return return {data() {data() {return {showscore: false, ԡcorecolumns: [
 {values: [], / / needs to dynamically set the column of integer columns, 
 defaultindex: 0 𠃱
}, 
 
 
 defaultindex: 0 ԡ 
 
 
, 
 
 showscore: false,, 𠃱
 corecolumns:: [
 
 
 
 
 
 
 / / you need to dynamically set the column of integer columns of values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 
; defaultindex: 0 
}, {
values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 
 {defaultindex: 0 
} 
}, 
; methods: {showscorepopup() {
 / / code is for display only, some codes have been omitted. The following variable maxscore is the maximum value obtained dynamically, which may be 10 or 30 
 
 this. Scorecolumns [0]. Values = []; / / clear first and then assign 
 (let I = maxscore; I > = 0; I --) {
 / / add all scores to the first column of picker after traversing, for example: [30, 29, 28,..., 2, 1, 0] 
 
 this. Scorecolumns [0]. Values. Push (I); Showscore = true; / / select pop-up window for displaying score

Modifying picker's columns parameter does not update the view

At first, the values in scorecolumns [0] were directly modified (as shown above). The values were indeed changed to a new array, but the options in the selector did not change.
Therefore, the first reaction is to update the view pot, so the API, Vue. $set provided by Vue is used. The result is that the data is still modified, but the options are not updated.
Next, I looked at the van official documents and found that there was one picker.setColumnValues This picker obviously obtains the selector instance, but this picker is a parameter only available to the @ change event on the van picker component, and there is no such parameter in other events.
The setcolumnvalues method is to set the options of the column specified by the selector.

 Van official document for picker view update

When I couldn't get the selector, I suddenly found a sentence in the document that was ignored by me

 Instance method and ref acquisition of van picker

Use ref to get picker components

 <van-picker
  ref="scoreSelect"
/>
 console.log(this.$refs.scoreSelect);

As shown above, First add a ref attribute to the picker component, and then call it in the method using this. $refs.
But the output of this console is unrelenting???

Solve the problem of using ref in the pop-up to get picker components

The pop-up layer is not rendered to the page before it is opened (pop is not loaded when DOM is loaded), so ref cannot get picker selectors in it.
The solution is Add a lazy render parameter to the pop component so that you can use $refs to get it.

 <van-popup
  :lazy-render="false"
/>

So I changed the showscorepopup method at the beginning of the article to look like this

 //The instance method scoreselect receives two parameters (columnindex, values). The first parameter is the index of the column to be modified by the selector, and the second parameter is the value to be modified 
 
 
 showscorepop() {
 / / the code is only for display, and some codes have been omitted. The following variable maxscore is the maximum value dynamically obtained dynamically, which may be 10 or 30 
 / / this.scorecolumns [0], values = [];;; 
 letnumarr = []; 
 for (let I = maxscore; I > = 0; I > = 0; I --) {for (let I = maxscore; I > = 0; I > = I --) {
 / / this.scorecolumns [0], values.values.push (I); 
 numarr.push (I);;; 
;; 
;; 
 
 
 
 
 
 
 
 
for (let let I = maxscore; I > = I > = / / this. $refs. Scoreselect. Setcolumnvalues (0, this. Scorecolumns [0]. Values); this. $refs.scoreselect.setcolumnvalues (0, numarr); 
this.showscore = true; / / display score selection pop-up window 
}

 Lazy render ahead of time rendering of van pop pop


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Van re render update picker view - https://www.barben.cn/code/880.html
]]>
https://www.barben.cn/code/880.html/feed zero
How to remember JS data type in a short time? https://www.barben.cn/code/862.html https://www.barben.cn/code/862.html#respond Wed, 19 Aug 2020 10:56:26 +0000 https://www.barben.cn/?p=862  Panda head expression pack with a sentence to remember JS data type: you are really cattle
If you can remember the data type of JS in one sentence, then You're a real u so NB

U. I like to use it instead of you you

So, that means So, so, very, very, very

NB, I don't need to talk about it, of course Cattle batch Ah!!!

>What starts with u is undefined

>There are string And ES6 NEW symbol

>Objects that start with o object

>There are two that start with n, number and null

>The ones that start with B can be thought of boolean

No, no, no, no one really can't remember it?


Eight blogs that year, we've been there all the time
If the article and the author are not noted, please reprint it
How to remember JS data type in a short time? - https://www.barben.cn/code/862.html
]]>
https://www.barben.cn/code/862.html/feed zero
The home page of the browser has been tampered with as a security navigation system for new Duba? https://www.barben.cn/live/851.html https://www.barben.cn/live/851.html#respond Sat, 06 Jun 2020 17:22:49 +0000 https://www.barben.cn/?p=851 Today, the browser home page is inexplicably set up as a vicious drug bully safety navigation. The most troubling thing is that the protection of the homepage of the browser failed to intercept successfully, and the mentality exploded.

Type in the chrome address bar chrome://version/ (360 browser is se://version/ )You'll find it disgusting!

I have done the following useless work

1. First of all, check ie options, home page changed to Baidu also invalid, reset browser settings are invalid

2. Then go to other browser settings to find the home page, but still the original address

3. Then decisively search the registry, but still in vain

4. Forced by helpless, opened the anti-virus software in the lock browser home page

I can't think of any way to solve it!
I can't bear the word "drug bully" when I get here!
Those software related to the drug bully will disappear from my computer immediately!

The effective solution to the problem is to uninstall


To sum up, all the problems are caused by the driving spirit. When you want to unload it, it will solve the problem for you honestly.


Eight blogs that year, we've been there all the time
If the article and the author are not noted, please reprint it
The home page of the browser has been tampered with as a security navigation system for new Duba? - https://www.barben.cn/live/851.html
]]>
https://www.barben.cn/live/851.html/feed zero
Vue encapsulates Axios https://www.barben.cn/code/845.html https://www.barben.cn/code/845.html#respond Fri, 05 Jun 2020 10:12:57 +0000 https://www.barben.cn/?p=845 And the previous article《 Wechat applet encapsulates request request 》Very similar to the unique for loop writing
The advantage is really clean~

1. Two new files are created to encapsulate Axios and manage interfaces

I'm here src/assets/js/api Under the new one index.js and apiList.js


stay index.js To encapsulate Axios:

 Import Axios from 'Axios'; 
 import {message} from' element UI '; 
 import apilist from'. / apilist '; 
 import store from' @ / store '; 



axios. Defaults. Timeout = 5000; / / timeout termination request 
 Axios. Defaults. Baseurl ='http: / / 192.168.0.88:8080 /'; /// / set a request interceptor (axios.interceptors.request.use (
 config = > {
 / / const token = getcookie ('name '); / / note that you need to introduce cookie methods when using them, and recommend that js-cookie.config.data = json.stringify (config.data); 
, config.headers = {content-type':'application///content-type ':'application///application///content-type':'application / application / content-type ':'application / application / content-type':'application / application / content-type ':'application / application / content-type':'application / application / content-type ':'application / content-type':'application / application / application / content-type '':'application / application / type ''content-type''content-type JSON; charset = UTF-8 ', 
        // 'Content-Type':'application/x-www-form-urlencoded'
    }
    if(store.state.token) {
      config.headers['Authorization'] = store.state.token;
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
); / / set a response interceptor (axios.interceptors.response.use (
response = > {
 / / if (response.data.errcode = = 2) {use / / / / route.push ({path: "/ login", 
 / / query: {redirect: router.currentroute.fullpath.fullpath} / / / / jump from which page to jump from 
 / / / jump from which page 
 / / / jump from which page 
 / / / / jump from which page 
 / / / jump from which page 
 / / / jump from which page 
 / / / jump from which page 
 / / / jump from which page 
 / / / / jump from which page 
 / / / jump from which page 
 / / / / / / / / / / / /}) 
 / / return response; 
 / / let res = response. Data; //Get the data returned by the response 
 if (res.code = = 200) {return res.data; 
} else {
 / / if the status code is not 200, an error will be reported. An error message will pop up, and no data will be returned 
} error (res.msg); 
}, 
 
 error = > {message. Error (error. Message); Return promise. Reject (error) 
} 
) 
 / / the following is the encapsulation method: 
 / / in the get delete request mode, the first parameter is the URL address of the request, and the second parameter is some configuration items of the request. The parameters to be passed to the back end are included in the data or params properties of the configuration item, 
 / / Post put In the patch request, the first parameter is the URL address, the second parameter is the JSON data to be input, and the third parameter is other configuration items other than the input parameter. 

var list = {};

for(let item in apiList) {
  list[item] = function(params) {
    let [method, url] = apiList[item];
    let data = (method == 'get' || method == "delete") ? {params} : (method == 'post' || method == "put" || method == "patch") ? params : {}
    return new Promise((resolve, reject) => {
      axios[method](url, data)
    . then (RES = > {if (RES) {
 / / in the response interceptor, if the code is not 200, no data is returned, and res may be undefined. Therefore, if res has data, it can be sent out with resolve. 
          resolve(res);
        }
      })
      .catch(err => {
        reject(err);
      })
    })
  }
}

export default list;

stay apiList.js All interfaces are managed in a unified way

 Let apilist = {
login: ["post", "/ user / login"], / / the user logs in 
, getcaptcha: ["get", "/ user / captcha"], / / get the login image verification code 
 
 logout: ["get", "/ user / logout"], / / user logs out 
} export default apilist;

2. Introduce in main.js

 Import HTTP from '@ / assets / JS / API'; / / import the interface list 
 Vue. Prototype. $HTTP = http; / / mount the interface list to the global

3. Use encapsulated methods in pages

 let params = {
  username: "barben",
  password: "12345678"
}

this.$http.login(params)
.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
})

 


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Vue encapsulates Axios - https://www.barben.cn/code/845.html
]]>
https://www.barben.cn/code/845.html/feed zero
Vue modularizes data, such as element form verification 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 modularize data?

Today, when using the form component of element, I saw that the form verification rules were written under the data of the page, which was very messy.
So I wonder, can we put all the rules of form verification together for easy management? So I did these things

Create a JS file

You can put this JS file anywhere you want in the project.

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

 Export default your data

Import this JS file

Import.
You can introduce it on the page you need. Or you can introduce it in main. JS and mount it globally

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

Use this data

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

 console.log(this.$rules.loginRules);

summary

Whether you want to unify the management of data or methods, you can use this method to achieve, easy to find and modify later.


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Vue modularizes data, such as element form verification - 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 a tab, be sure to delete the scoped * / 
. El tabs after the style label__ item {
  font-size: 18px !important;
  padding: 10px 0 50px !important;
  width: 120px !important;
}

.el-tabs__ active-bar {
  width: 120px !important;
}
</style>

 


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
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 mouse lengthening and extending around the line 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 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;
    position: relative;
}

.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: 1px solid #000; 
}

.tab:hover:before {
    width: calc(100% + 10px);
    left: -10px;
    /* left: -5px; */
}

.tab:hover:after {
    width: calc(100% + 10px);
    left: 0;
    /* left: -5px; */
}

.tab:hover > .tab-class-fir {
    height: calc(100% + 10px);
    top: 0;
    /* top: -5px;  */
}

.tab:hover > .tab-class-sec {
    height: calc(100% + 10px);
    top: -10px;
    /* top: -5px; */
}

Change the top four sentences of "top" or "top" into "left" comments?


Eight blogs that year, we've been there all the time
If the article and the author are not noted, please reprint it
CSS effect of mouse lengthening and extending around the line - https://www.barben.cn/code/829.html
]]>
https://www.barben.cn/code/829.html/feed zero
The use of VUI in appvue 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, it depends on you to install sans

 npm install node-sass --save-dev

2. Install sass loader

 npm install sass-loader --save-dev

3. Modify the style tag to declare sass

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

 


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Vue uses sass in uni app - https://www.barben.cn/code/822.html
]]>
https://www.barben.cn/code/822.html/feed zero
The applet component cannot get the node using 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! Encapsulating a component, using Wx. Createselectorquery(). Selectall(). Boundingclientrect() to get an empty array!?

The solution is unexpected, which makes people feel sad. Xiaobian takes a breath of cold air after learning, and can't speak on the spot!

Add the .in(this) that will do

 const query = wx.createSelectorQuery().in(this);
  query.selectAll(".area-item").boundingClientRect((rect) => {
    console.log(rect);
}).exec();


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Applet component cannot get node using SelectAll - https://www.barben.cn/code/814.html
]]>
https://www.barben.cn/code/814.html/feed zero