ckplayer

在vue项目中应用ckplayer插件

• ckplayer 监听回调函数是加 loaded:'loadedHandler' 在vue中需要将方法放到window里

window.loadedHandler = function() {
  debugger;
  // @ts-ignore
  window.play.addListener('time', timeHandler); // 监听元数据
  // @ts-ignore
  window.play.addListener('error', errorHandler); // 监听元数据
};
function timeHandler(t: any) {
  console.log('当前播放的时间：' + t);
}
function errorHandler(log: any) {
  console.log('测试信息', log);
}

• loaded的回调，如果video地址是流媒体地址则监听不到

js防抖和节流

减少调用频率，同时又不影响实际效果。

ts

render的写法

h(
  'dms-editor-cell',
  {
    props: { 'column-key': 'alarm_flag', 'row-key': `${row.$index}` },
  },
  [
    h(
      'el-select',
      {
        props: { placeholder: '请选择', value: this.dealStatus[row.alarm_id] },
        on: {
          change: (v: number) => {
            this.$set(this.dealStatus, row.alarm_id, v);
          },
        },
      },
      this.options1.map((o) =>
        h('el-option', { props: { value: o.value, label: o.label } })
      )
      // [

      //   h('el-option', {
      //     props: {
      //       value: 1,
      //       label: '已处理',
      //     },
      //   }),
      //   h('el-option', {
      //     props: {
      //       value: 0,
      //       label: '未处理',
      //     },
      //   }),
      // ]
    ),
  ]
),

tsx 写法

value与onInput

v-mode就是value和onInput的语法糖的 value和onInput 一起的时候 下拉框可以显示初始选择，在onInput里 可以改变值，渲染到界面

 .custom('处理状态', (h: CreateElement, row: AlarmTable) => (
  <dms-editor-cell column-key='alarm_flag' row-key={row.$index}>
    <el-select
      placeholder='请选择'
      value={row.alarm_flag}
      disabled={row.alarm_flag === 1}
      onInput={(v: number) => {
        row.alarm_flag = v;
      }}
      onChange={(v: number) => {
        this.handleDataStatus(row, v);
      }}
    >
      {alarmStatusArr.map((o: ValueArr) => (
        <el-option value={o.value} label={o.label}></el-option>
      ))}
    </el-select>
  </dms-editor-cell>
))

v-model

<dms-editor-cell column-key='alarm_flag' row-key={row.$index}>
  <el-select
    placeholder='请选择'
    v-model={row.alarm_flag}
    disabled={row.alarm_flag === 1}
    onChange={(v: number) => {
      this.handleDataStatus(row, v);
    }}
  >
    {alarmStatusArr.map((o: ValueArr) => (
      <el-option value={o.value} label={o.label}></el-option>
    ))}
  </el-select>
</dms-editor-cell>

return 调用带参的事件

onclick={()=> xxx(params)}

处理表格渲染数据

<el-table-column
  label="分区名称"
  prop="name"
  show-overflow-tooltip
>
  <template slot-scope="scope">
    <span v-if="divisionTypes.some((k) => k.value === scope.row.name)">
      <span v-for="(i, index) of divisionTypes" :key="index">
        <span v-if="i.value === scope.row.name">
          {{ i.label }}
        </span>
      </span>
    </span>
    <span v-else>{{ scope.row.name }}</span>
  </template>
</el-table-column>

正则

form表单正则

rules: object = {
    elevation: [
      { required: true, message: '标高必填', trigger: 'blur' },
      { min: 1, max: 20, message: `标高名称的长度是1-20`, trigger: 'blur' },
      { pattern: /^-?([1-9][0-9]?)+((\.\d+)?)+[mM]{1}$/, message: '格式为：2.0m|M | -2.0m|M | 2m|M | -2m|M' }
    ],
  };

计算

const getComponentsList = computed(() => {
      componentsList.forEach((k: any) => {
        let res = [];
        for (let i = 0, len = k.components.length; i < len;) {
          res.push(k.components.slice(i, i + 3));
          i = i + 3
        }
        k.comDataList = res
      });
      return componentsList;
    });

jsx 动态组件

export default {
 methods: {
    $_handleChangeUser(value) {
      this.formInline.user = value
    }
  },
  render(h) {
    return h(
      'ElForm',
      {
        props: {
          inline: true,
          model: this.formInline
        },
        staticClass: 'demo-form-inline'
      },
      [
        h(
          'ElFormItem',
          {
            props: {
              label: '用户名'
            }
          },
          [
            h('ElInput', {
              props: {
                value: this.formInline.user
              },
              attrs: {
                placeholder: '请输入用户名'
              },
              on: {
                input: this.$_handleChangeUser
              }
            })
          ]
        )
      ]
    )
  }
}

出处：(www.cnblogs.com/ainyi/p/133…)

原生html

table

table1

    <table class="table table-hover" id="tablebox">
        <tr>
            <td class="active">用户名</td>
            <td class="warning">编辑</td>
        </tr>
    </table>
    <script language="javascript">
        var data = [{"id": 1, "name": "张三"},{"id": 14, "name": "张三"},{"id": 1, "name": "张三"},{"id": 1, "name": "张三"}];
        window.onload = function () {
            var tdArr = document.getElementById('tablebox').firstElementChild;
            for (var i = 0; i < data.length; i++) {
                var tr = document.createElement("tr");
                tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
                tdArr.appendChild(tr)
            }
        };
        function clickPerson(id) {
            console.log(id)
        }
    </script>

出处：(blog.csdn.net/qq_35790269…)

table 2

 function setHtmlContent(dataArr, htmlID) {
     //自定义字符串,用于拼接标签
    let pinkStr = "";
    for (let i = 0; i < dataArr.length; i++) {
        pinkStr += '<tr class="enter-pressure"><td class="type-name">'+dataArr[i].name+'</td>   <td class="type-value">'+dataArr[i].value+'</td></tr>';
            }
    //拼接完字符串数组后用innerHTML把它渲染到页面中
    document.getElementById(htmlID).innerHTML = pinkStr;
};

扁平数据转tree

1

let data = toTree(tmp, null)
function toTree (data, parent_id, label_name) {
  let tree = []
  let temp
  if (!label_name) {
    label_name = 'name'
  }
  for (let i = 0; i < data.length; i++) {
    if (data[i].parent_id == parent_id) {
      let obj = data[i]
      obj.label = data[i][label_name]
      temp = toTree(data, data[i].id)
      if (temp.length > 0) {
        obj.children = temp
      }
      tree.push(obj)
    }
  }
  return tree
}

element

el-table

行点击事件多次触发问题--- 需要加延时 并在el-table中加随机key

 <el-table :key="Math.random()" :data="tableData" border style="width: 100%" height="100%" @row-click="onRowClick"></el-table>
 
let timer = 0;
const onRowClick = (row: DangerZoneModel) => {
  timer = setTimeout(async() => {
    clearTimeout(timer);
    draw(row);
  },300);
}      

事件输入

@keydown.stop.native @keyup.stop.native
@submit.native.prevent 阻止默认事件

vue-draggable-resizable

<base-ui-draggable-resizable
  :draggable="true"
  :resizable="false"
  :w="620"
  :x="350"
  :y="100"
  v-show="licenseInfo.id"
  :id="licenseInfo.id"
  class="jobTicket-css"
  @drag.stop
  :z="10000"
  :parent="true"  
  ref="dragResizeRef"
>
</base-ui-draggable-resizable>

parent=".cloud-render" 可以指定父元素class
当窗口变化 父元素改变 拖拽组件也需改变 (dragResizeRef.value! as any).checkParentSize();

nvm

nvm安装

下载地址：github.com/coreybutler…
windows用户选择 nvm-setup.zip 下载安装 注意：如果本地已经安装了node，要先卸载node再安装nvm

$ nvm -h //查看nvm的指令
$ nvm list //查看本地已经安装的node版本列表
$ nvm list available //查看可以安装的node版本
$ nvm install latest //安装最新版本的node
$ nvm install [version][arch] //安装指定版本的node 例如：nvm install 10.16.3 安装node v10.16.3 arch表示电脑的位数 如果电脑需要安装32位的， 则运行：nvm install 10.16.3 32
$ nvm use [version] //使用node 例如：nvm use 10.16.3
$ nvm uninstall [version] //卸载node

原文地址：使用nvm安装管理node版本 - 简书 (jianshu.com)

promise

promise.all

const [res1, res2] = await Promise.all([
axios.post(
  `/api/xxxx?projectId=${viewCode}&type=1`,
  {},
  {
    cancelToken: new axios.CancelToken((c) => {
      this.cancels.add(c);
    }),
  }
),
axios.post(
  `/api/xxx?projectId=${viewCode}&type=2`,
  {},
  {
    cancelToken: new axios.CancelToken((c) => {
      this.cancels.add(c);
    }),
  }
),
]);
console.log(res1)

关于键盘监听问题

1. 加了按键阻止冒泡，不能阻止浏览器默认问题 （比如ctrl+s)的原因 以及假如写了全屏组件，获取接收 preventEvent 传递过来的事件 用了 stop 导致 按键事件 没有传递到 全屏组件这边来

 <el-input v-model="searchName" placeholder="请输入名称" class="have-search"
    @keydown.stop.native="preventEvent" @keyup.stop.native></el-input>
    
     const preventEvent = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.keyCode === 83) {
        e.preventDefault();
      }
    };