7月学习记录【杂】

7-5

①链接打印机

win + r 输入\\ + 你的打印机局域网IP

双击

到这里就完成了连接打印机的操作了

7-10

①获取选中文本

HTML5标准

window.getSelection即可获得选中的文本

但是，如果直接打印getSelection会是一个Collection集合

所以需要用到toString()转换为字符串格式

完整代码

getSlected() {
      if (window.getSelection) { // 适用于HTML5标准
          
        let temp = window.getSelection().toString();
        console.log(temp);            

      }

适配IE浏览器

• doucument.selectionIE获取选中内容

完整代码：

if (document.selection) { // 适配IE
    alert(document.selection.createRange().text);
}

②设置属性

setAttribute("需要设置的id或者其他","需要设置的值")

tagP.setAttribute("id", "right");

设置id 属性为 right，即可将id设置成right

③打开控制面板快捷键

win + r — 输入 control即可打开控制面板

7-11

①vue + js实现数字时钟

vue + js实现数字时钟

②win + 数字 打开对应固定在任务栏的软件

这里，我按win + 2 即可快速打开谷歌浏览器

win + 4 打开记事本

7-12

①获取table的当前行

直接在table中增加属性id，获取scope中的row后，可直接获取id属性，id属性 -1 即可拿到正常数据

样例代码

<template>
<media-table :tableHeader="tableHeader" :tableData="tableData">
      <el-table-column
        slot="operation"
        label="操作"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button @click.native.prevent="clock(scope.row)"> 打卡 </el-button>
        </template>
      </el-table-column>
    </media-table>
</template>

<script>
import mediaTable from "@/components/authority/public/mediaTable";
export default {
  components: {
    mediaTable,
  },
    

 methods: {
    clock(row) {
      console.log(row);
      row.id --; // 获取当前行的-1 ， 对应上tableData

    },

②修改 cell-style 一定要注意 column

<template>
  <div>
    <el-table :data="tableData" border :cell-style="cellStyle">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="用户真实姓名" prop="userName"></el-table-column>
      <el-table-column label="第一次打卡时间" prop="clockDate1"></el-table-column>
      <el-table-column label="第二次打卡时间" prop="clockDate2"></el-table-column>
      <el-table-column label="第三次打卡时间" prop="clockDate3"></el-table-column>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {

  data() {
    return {
      todayDate: "",
      
      tableData: [
        {
          id: 1,
          userName: "张三",
          clockDate1: "",
          clockDate2: "13:30:19 - 18:00:24",
          clockDate3: "19:30:57 - 23:00:01",
        },
        {
          id: 2,
          userName: "李四",
          clockDate1: "",
          clockDate2: "12:46:25 - 17:40:19",
          clockDate3: "18:10:37 - 23:56:59",
        },
        {
          id: 3,
          userName: "王五",
          clockDate1: "",
          clockDate2: "13:56:43 - 18:56:00",
          clockDate3: "19:30:38 - ",
        },
      ],
    };
  },
  methods: {
   
    cellStyle(row , col , rowIndex , colIndex){
      if(row.col.label === "第二次打卡时间" && row.row.clockDate2 == "12:46:25 - 17:40:19" ){
        return 'background:red';
      }
    }

  },
 
};

如果cellStyle函数中是col，将会报错！！！

因为，该函数是拿到行的列，而在table中 行是row，列则是column，如果变成了col，将会找不到

正确代码

cellStyle(row , column , rowIndex , colIndex){
      if(row.column.label === "第二次打卡时间" && row.row.clockDate2 == "12:46:25 - 17:40:19" ){
        return 'background:red';
      }
    }

③v-show 控制显示

<template>
  <div>
    <el-table :data="tableData" border :cell-style="cellStyle">
      <el-table-column label="序号" prop="id" width="70%"></el-table-column>
      <el-table-column
        label="用户真实姓名"
        prop="userName"
        width="110%"
      ></el-table-column>
      <el-table-column
        label="第一次打卡时间"
        prop="clockDate1"
      ></el-table-column>
      <el-table-column
        label="第二次打卡时间"
        prop="clockDate2"
      ></el-table-column>
      <el-table-column
        label="第三次打卡时间"
        prop="clockDate3"
      ></el-table-column>

      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="95%"
      >
        <template slot-scope="scope">
          <el-button v-show="scope.row.id == userId" type="success" @click.native.prevent="clock(scope.row)">
            打卡
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import mediaTable from "@/components/authority/public/mediaTable";
export default {
  components: {
    mediaTable,
  },
  data() {
    return {
      userId:3,
      todayDate: "",
      tableHeader: [
        {
          label: "序号",
          property: "id",
        },

        {
          label: "用户真实姓名",
          property: "userName",
        },
        {
          label: "第一次打卡时间",
          property: "clockDate1",
        },
        {
          label: "第二次打卡时间",
          property: "clockDate2",
        },
        {
          label: "第三次打卡时间",
          property: "clockDate3",
        },
      ],
      tableData: [
        {
          id: 1,
          userName: "张三",
          clockDate1: "07:52:32 - ",
          clockDate2: "13:30:19 - ",
          clockDate3: "",
        },
        {
          id: 2,
          userName: "李四",
          clockDate1: "08:00:45 - ",
          clockDate2: "12:46:25 - ",
          clockDate3: "",
        },
        {
          id: 3,
          userName: "王五",
          clockDate1: "08:13:10 - ",
          clockDate2: "13:56:43 - ",
          clockDate3: "",
        },
      ],
    };
  },

};
</script>

v-show="scope.row.id == userId"这样即可显示，当前行的id 与 userId 相等时，显示

7-13

① vue中的 js 显示 年月日 + 星期

/// 获取当前日期（年月日）+ 日期
    getNowDate(){
      let d = new Date();
      this.date = d.getFullYear() + " 年 ";
      this.date += d.getMonth()+1 + " 月 ";
      this.date += d.getDate() + " 日 ";
      let weekDay = new Array(7);
      weekDay[0] = "星期日",
      weekDay[1] = "星期一",
      weekDay[2] = "星期二",
      weekDay[3] = "星期三",
      weekDay[4] = "星期四",
      weekDay[5] = "星期五",
      weekDay[6] = "星期六",
      // 日期
      this.date += weekDay[d.getDay()];
        // 这里一定要使用 getDay,否则会超越数组边界
    },

②复制粘贴的另一种方式

• 灵感来自于Linux中的粘贴赋值，发现在Windows系统下也适用

ctrl + insert复制

shift + insert粘贴

7-14

①ReferenceError 和 TypeError

• ReferenceError— 作用域问题（找不到变量）
• TypeError — 你操作了它不能操作的事（找到了，发生了不是他想要的值–类型不匹配）

7-16

①methods 中获取通过props 传递的值

在data中加上

例如：

props: ['topicNum'],
data() {
    return {
      topicTotalNum: this.topicNum, // 题目总数
    }
}

这样我们就可以获取到传过来的值了！

当时，我百度到的方法是用 watch去监听传过来的值，结果好像并不能做到

在computed中加上

computed:{
    sortByTime(){
      console.log(this.topicNum);
    }
  },

• 直接将方法写入computed中，但是这样可能会出现问题

虽然，我们还是拿到了值，但是却会报错！

需要注意

如果页面发生变化，第一种通过data直接赋值的将不会被改变，但第二

不过，笔者还是推荐前者 ，因为这样将更方便，不论是对数据的进一步操作，还是前端编写原则（尽可能的让控制台清爽，不报错，因为报错将可能存在隐藏bug，尽管可以使用）

理论来源

7-21

①导入jQuery库

导入jQuery库

②将字符串转化为html（input输入框）

第一种方法：$(id/class选择器).html(字符串)

实例如下

  <template>
  <div>
    <p id="test" @click="replace">{{ this.testFillBlank }}</p>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
       testFillBlank: "我想在#输入",
    };
  },

  methods: {

    replace() {
      var str = "<input id='blank' type='text'>";

      $("#test").html(str);

      console.log("一直在调用？");

    },
  },
};
</script>

注意：本方法无法输入值，因为一直在调用replace方法

第二种方法：v-html（input）

  <template>
  <div>
    <div id="vhtml" v-html="buttonContent">
      <div>
        {{ buttonContent }}
      </div>
    </div>
    
    <el-button type="primary" @click="hello()">查询当前输入的内容</el-button>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      buttonContent: "<input id='blank' type="text"></input>",
       这里的 type 一定要是text，当然不填也没关系，因为input的默认是text，如果你改成了其他的，那么结果将会是 undefined

    };
  },

  methods: {
    hello() {
      console.log($("input:text").val());
      这里就是jQuery的函数，相关链接见下
    },

};
</script>

• 所用到的知识 v-html、val

③jQuery获取所有class内容

var arr =[],
$('.blank').each(function(){
    let res = $(this).val();
    // 获取当前的属性值（each循环，每次this将不同）
    arr.push(res);
   // 将其放入数组
})
alert(arr);

7-25

错误综合

①Module build failed: TypeError: this.getOptions is not a function

原因：版本不适配（版本过高）

解决方法：

1.卸载 sass-loader/less-loader

npm uninstall sass-loader

对应less的版本

npm uninstall less-loader

2.安装低版本

npm install sass-loader@6.0.0

对应less的版本

npm install sass-loader@4.1.0

注意：这里后面卸载和安装的loader 要根据你的实际情况而定

因为之前我刚刚安装sass-loader所以这里就是sass-loader了

②vscode中关闭侧边栏ctrl + B

ctrl + b关闭/开启侧边栏

③实现手机端富文本编辑器—QuillEditors实现

富文本编辑器：

可支持图文混排
查看详情

④Module not found: Error: Can’t resolve ‘less-loader’

原因：没有less-loader

解决方法：

第一种方法：安装less-loader即可

npm install --save-dev less-loader less

第二种方法：在style lang =less删除less 慎用

删去lang ="less"即可解决

7-27

①下拉框在遮盖层后

下拉框在遮盖层后

7-28

①cnpm 无法加载文件 （错误集合）

错误记录

②仅查看请求

选择DevTool中的Fetch/XHR

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYN1I54S-1627550950056)(C:\Users\Uuuu\AppData\Roaming\Typora\typora-user-images\image-20210728174702675.png)]

点击即可仅查看请求！！

7-31

①修改element中input样式

我们无法直接使用css样式进行修改，因为el-input属于子组件

需要穿透进去，修改

.el-input >>> input.el-input__inner{

}

在这中间输入即可进行修改el-input样式

②使输入框透明

background:transparent

即可做到输入框透明

③输入框点击，将提示文字删除

关键方法onfocus

<el-input
          v-model="password"
          placeholder="请输入密码"
          type="password"
          οnfοcus="this.placeholder=''"
        ></el-input>

即可实现，点击输入框，文字删除

④css背景图片100%铺满，不重复

开始的原始图

最终效果图

实现代码

  background-size:100% 100% ;