分类 默认分类 下的文章

vue.ls.on 监听不生效
在vue-ls.js 中修改即可实现数据监听
在vue-ls.js 文件中搜索key: "set" 定位到插件的set方法 进行重写覆盖

{
      key: "set",
      value: function set(name, value) {
        var expire = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
        var stringifyValue = JSON.stringify({
          value: value,
          expire: expire !== null ? new Date().getTime() + expire : null
        });

        let oldValue=JSON.parse(this.storage.getItem(this.options.namespace + name)).value;
        
        this.storage.setItem(this.options.namespace + name, stringifyValue);

        listeners[this.options.namespace + name].forEach(e=>{
          e(value,oldValue)
        })

      }

不知什么原因导致绑定的storage事件监听不触发,所以进行手动触发

在使用table组件时 遇到了一个问题
需求时点击行元素时 为当前行添加一个激活状态
此时 需要用到自定义行customRow

官方文档

customRow 用法 #
适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。

<Table
customRow={(record) => {
return {
  props: {
    xxx... //属性
  },
  on: { // 事件
    click: (event) => {},       // 点击行
    dblclick: (event) => {},
    contextmenu: (event) => {},
    mouseenter: (event) => {},  // 鼠标移入行
    mouseleave: (event) => {}
  },

};
)}
customHeaderRow={(column) => {
return {
  on: {
    click: () => {},        // 点击表头行
  }
};
)}
/>

介绍的相对来说 太过于笼统
以下是我的代码

<template>
  <div class="outer">
      <a-table :customRow="row" :rowClassName="choose" :columns="columns" :dataSource="data">
        <a slot="name" slot-scope="text">{{text}}</a>
      </a-table>
    </div>
</template>

<script>
import Table from "ant-design-vue/lib/table";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
];
export default {
  name: "Test",
  components: {
    aTable: Table
  },
  data() {
    return {
      data,
      columns,
      key: data[0].key
    };
  },

  methods: {
    row(record){
      const that=this;
      return {
        on:{
          click(){
            that.key=record.key;
          }
        }
      };
    },
    choose(record) {
      if (record.key === this.key) {
        return "current";
      } else {
        return "";
      }
    }
  }
};
</script>
<style>
.outer {
  width: 600px;
  margin: 0 auto;
}
.current {
  background: pink;
}
</style>

customRow用来自定义行,使用rowClassName配合 即可实现table组件行动态添加类名 从而实现行激活/选中的效果

1.防抖

所谓防抖,就是执行回调推迟一段时间再执行,如果这段时间没有再次触发这个函数,那就执行,否则就重新计算时间。

所谓节流,一段时间内连续多次调用,只执行一次。

Web­Assembly 1.0版本已经被FireFox,Chrome,Safari,Edge这四款主流的浏览器所支持

WebAssembly(简称Wasm)是基于堆栈虚拟机的二进制格式的指令。Wasm被设计为一种可移植的,旨在将高级语言(如C/C++ + RUST),编译成为可以在Web上部署的客户端和服务器应用程序。

mongod --dbpath=/data/db --logpath=/var/log/mongodb/mongodb.log --bind_ip=0.0.0.0 --fork

--dbpath:db文件存放路径 --logpath 日志文件存放路径 --bind_id 绑定IP,0.0.0.0即不限制 --fork 以fork方式运行

mongod --config=/etc/mongod/mongod.conf

--config:配置文件存放路径 指定配置文件启动MongoDB服务