Function use collection:

I. How to obtain two different items using URl link with parameter transmission value? The following values, the use method is as follows — Sichuan PLM project example: can be found in folder 1; : 1. Example: http://47.111.119.83:10000? MachineMode =PT70&machineNO= cigarette machine &machine_Code=0311056

// Get the value of a parameter from the Url – using regex

function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r ! = null) return decodeURI(r[2]); return null; }Copy the code

// get parameters and parameter values in the Url or get localStorage localstorage.getite (‘ key ‘)

const machine_Code = getQuery('machine_Code') || localStorage.getIte('machine_Code');
const machine_NO = getQuery('machineNO') || localStorage.getItem('machineNO');
const machine_Mode = getQuery('machineMode') || localStorage.getItem('machineMode');
Copy the code

// Store localstorage. setItem(‘ key ‘, value);

localStorage.setItem('machine_Code', machine_Code)
localStorage.setItem('machineNO', machine_NO)
localStorage.setItem('machineMode', machine_Mode)
Copy the code

Local storage: 1. If you want to store objects, convert them to strings. Using JSON. Stringify (); Example: var person = {vanida name: “”,” sex “, “girl”, “age” : 25}; LocalStorage. SetItem (” person “, JSON. Stringify (person)); / / print: localStorage. Person = “{” name” : “vanida”, “sex”, “girl”, “age” : 25}”

Parse (); parse(); The person = JSON. Parse (localStorage. The getItem (” person “));

Three. Style dressing

1.width: calc(100% – 20px);

Css3’s calc() function. This means setting the width 20px less than the 100% width.

The frame time table shows the initial date of the month and the current date of today — Sichuan PLM Project:

GetCurrentMonthFirst () {var date = new date (); date.setDate(1); var month = parseInt(date.getMonth() + 1); var day = date.getDate(); if (month < 10) month = "0" + month; if (day < 10) day = "0" + day; This.starttime = date.getFullYear() + "-" + month + "-" + day; }, // end time getNowTime() {var now = new Date(); var year = now.getFullYear(); Var month = now.getMonth(); Var date = now.getDate(); // Get the date month = month + 1; month = month.toString().padStart(2, "0"); date = date.toString().padStart(2, "0"); Modify here can: enclosing endTime = ` ${year} - ${month} - ${date} `; // Add () {// add ();Copy the code

5. Display current year month day + current time — Sichuan PLM project 1. Create a new file named index.vue under the components component. Create a new file named index.vue under the components component. Import TimeInfo from ‘@/components/TimeInfo’, 2. Import TimeInfo from ‘@/components/TimeInfo’. Examples can be placed under Vue prototypes :Vue.component(‘TimeInfo’, TimeInfo); 4. The last step is to display the need in the page at any time:

1. Create a new file named index.vue under components. Example: Find it in folder 6. SVG can be stored under assets to create a new file loading. SVG example: Import TimeInfo from ‘@/components/TimeInfo’, 2. Import TimeInfo from ‘@/components/TimeInfo’. Examples can be placed under Vue prototypes :Vue.component(‘TimeInfo’, TimeInfo); 4. The last step is to display the need in the page at any time:

7. Inline styles can be written dynamically, acting on clicks or other events

  1. 1.  :style="{width: pw + px, right: PLHT + 'px'}"

2. In data return: {pw:305;

​    right:305;

   }


Copy the code

8. Vue code block simple use – can be found in folder 8;

9. Table switch native writing method is easy to use

! [] (C: \ Users \ Public \ Pictures \ Sample Pictures \. PNG)

 <ul class="timeList">

​                    <li

​                        v-for="(item, index) in timeTabs"

​                        :key="index"

​                        :class="{'active':item.value==currentTime}"

​                        @click="switchTime(item)"

​                    \>{{item.name}}</li>

​                </ul>
Copy the code
Data () {return {timeTabs: [{name: 'this month, the value:' 1 '}, {name: 'this quarter, value:' 2 '}, {name: ' 'for the whole year, value:' 3 '}], currentTime: '1', } methods:{ switchTime(item){ this.currentTime = item.value } }Copy the code

10. Echarts is easy to use

! [](C:\Users\Public\Pictures\Sample Pictures\1.png)

<html> <template> <! <div class="xChart" ref="chart"></div> </template> // import import ECharts from '@ / utils/echarts' at the bottom is you need to import the data structure () {return {myChart: null, lArr: [' consumption'], xArr: [' December ', 'November', 'October', 'December', 'November,' in October, November 'December', ' ', 'October', 'December', 'in November,' October '], planArr: [50, 42, 60, 50, 42, 60, 50, 42, 60, 50, 42, 60]}}, mounted(){ this.initChart() }, methods:{ initChart(){ try { <! -- Based on the prepared DOM, $refs.chart) window.addeventListener ('resize', this.mychart.resize) <! SetOption (this.getoption ())} Catch (error) {console.log(error)}}, getOption(){ let self = this let option = { grid:{ top:20, left:60, right:10, bottom:45 }, tooltip:{ trigger:'axis', axisPointer:{ type:'shadow' } }, xAxis:[ { type:'category', data:this.xArr, axisTick:{show:false}, axisLabel:{ color:'#a0a0a0', fontSize:14 }, axisLine:{ lineStyle:{ type:'dashed', color:['#e5e5e5'] } } } ], yAxis:[ { type:'value', min:0, max:100, axisTick:{show:false}, axisLine:{ show:false, symbol:['none','arrow'], lineStyle:{ color:'#e5e5e5' } }, axisLabel:{ color:'#a0a0a0', fontSize:12 }, splitLine:{ lineStyle:{ type:'dashed', color:['#e5e5e5'] } } } ], series:[ { name:this.lArr[0], barMaxWidth:25, type:'bar', itemStyle:{ color:{ x: 0, y: 0, x2: 0, y2: 1, type:'linear', colorStops:[{offset:1,color:'rgba(92, 165, 255, 0.05)'}, {offset:0,color:'rgba(92, 165, 255, gba), 1)'} ] } }, data:this.planArr } ] } return option } }Copy the code

NPM install echarts –save

import echarts from ‘echarts/lib/echarts’

import ‘echarts/lib/chart/bar’ import ‘echarts/lib/chart/pie’ import ‘echarts/lib/chart/line’ // import ‘echarts/extension/bmap/bmap’ // import ‘echarts/extension/dataTool/index’

import ‘echarts/lib/component/legend’ // import ‘echarts/lib/component/legendScroll’ import ‘echarts/lib/component/title’ import ‘echarts/lib/component/tooltip’

export default echarts;

Element-ui’s hidden scrollbar component, el-scrollbar

{{ index + 1 }}
Xiangmei Road Team
876 

Vue -countTo- a simple and easy to use digital scroll plugin <! NPM install vue-countto-npm install vue-countto-npm install vue-countto-nPM install vue-countto-nPM https://www.npmjs.com/package/vue-count-to <template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> </template> <script> import countTo from 'vue-count-to'; export default { components: { countTo }, data () { return { startVal: 0, endVal: 2017}}} </script> 1.startVal= start value, 2.. EndVal = end value, 3. Duration = duration in milliseconds, 4. Autoplay = autoplayCopy the code

Xii. Field color modification

! [](C:\Users\Public\Pictures\Sample Pictures\Snipaste_2020-05-14_09-46-14.png)

<template> <! <div :class="['nodeName', nodeName['s' + pitch]['class']]"> {{ nodeName["s" + pitch]["name"] }} </div> </template> <script> export default { If (props: ["pitch"], data() {return {name: "finish ", class: "s1"}, s: {name:" finish ", class: "s1"}, "S1"}, s diagnosis: {name: "diagnosis", class: "s1"}, s factory inspection: {name: "delivery inspection," class: "s1"}, s settlement: {name: "clearing", the class: "s2}, s connect a car: Class: "s2"},},}; }}; </script> <style scoped lang=" SCSS "> // circle.nodename {display: inline-block; font-size: 12px; font-weight: 600; padding: 0px 6px; border: 1px solid transparent; border-radius: 15px; &.s1 { color: $orange; border-color: $orange; } &.s2 { color: $green; border-color: $green; } &.s3 { color: $red; border-color: $red; } } </style>Copy the code

Download the file

 async download(index, row) {
      let formdata = this.getFormData({ resourcesUrl: row.url }); // Pass in the file address information
      await downloadFile(formdata)
        .then((res) = > {
          let rUrl = row.url;
          const fileName = rUrl.substring(rUrl.lastIndexOf("\ \") + 1); // Intercepts the name of the downloaded file
          var filetype;
          if (rUrl.indexOf(".doc") > -1 || rUrl.indexOf(".docx") > -1) {
            filetype = "application/msword";
          } else if (rUrl.indexOf(".txt") > -1) {
            filetype = "text/plain";
          }
          const blob = new Blob([res], { type: filetype }); // text/plain: TXT application/msword: doc
          const elink = document.createElement("a");// Create a download link
           // const fileName = "download fileName ";
          elink.download = fileName;
          elink.style.display = "none"; // Hide the A tag
          elink.href = URL.createObjectURL(blob); // Add a download link to the a TAB
          document.body.appendChild(elink);
          elink.click(); // Execute the a tag
          URL.revokeObjectURL(elink.href); // Release the URL object
          document.body.removeChild(elink);
          this.info("Download successful"."success");
        })
        .catch((e) = > console.log(e));
    },

Copy the code

Success or failure popup

  // Global reference success or failure popup
   info(str = "Operation successful", type = "info") {
            this.$message({
                type: type,
                message: str,
                customClass: 'custom-message'})},// Use it locally
       this.info("Download successful"."success");

Copy the code

15. Interview questions

Function deepCopy(obj) {let objClone = array.isarray (obj)? [] : {}; for (var k in obj) { let item = obj[k]; If (item instanceof Array) {objClone[k] = deepCopy(item); } else if (item instanceof Object) {objClone[k] = deepCopy(item); } else {// If not, simply clone [k] = item; } } return objClone; } let obj = [1, 2, 3, 4, 5]; // let data1 = deepCopy(obj); const data1 = JSON.parse(JSON.stringify(obj)); obj[0] = 15; Console. log(data1, "deep copy - do not change value "); Console. log(obj, "shallow copy - change value "); Deep copy: b does not change as a changes, so that the copy value does not affect the other object. Copying multiple layers usually uses recursion. Shallow copy: b will change as a changes, copy will affect the value of another object overwrite; ReversalStript = "Hellow woild"; let reversalFinish = reversalStript.split("").reverse().join(""); console.log(reversalFinish); Let isEven = (num) => num % 2 === = 0; isEven(2) === true ? Console. log(" even ") : console.log(" cardinality "); Const toFixed = (n, fixed) =>~~(math.pow (10, fixed) * n)/math.pow (10, fixed); The console. The log (toFixed (25.123456789, 2)); Const Average = (... args) => args.reduce((a, b) => a + b) / args.length; console.log(average(1, 2, 3, 4)); Let object1 = {}; object1.property1 = 77; Object.defineProperty(object1, "property1", { value: 42, }); console.log(object1.property1, "gai"); //42 wave one four times. When the client sends a packet segment to the server, the client enters the waiting state, indicating that the client has no data to send to the server and requests to close the connection. 2. After receiving the packet from the client, the server sends an acknowledgement packet to the client. After receiving the acknowledgement packet from the server, the client enters the waiting state. The server checks whether there is any data that has not been sent to the client. If there is any data, the server sends the data to the client first and then closes the connection to the client. If not, send the client to close the connection to the server to enter the confirm closed state. 4. After receiving the connection closure confirmation message from the server, the client sends the acknowledgement to the server, and the server closes the connection. After receiving no reply from the client, the client also closes the connection.Copy the code