Rabbitzzc

const bubbleIframeEvents = (iframe, document) => {
  const iframeWindow = iframe.contentWindow

  iframeWindow.addEventListener(
    'mousemove',
    (event) => {
      const boundingClientRect = iframe.getBoundingClientRect()
      const fakeEvent = new CustomEvent(
        'mousemove',
        {

Rabbitzzc

如何给开源项目贡献代码

分两种情况：

• 代码仓库管理者给你添加该仓库的写入权限，这样的话可以直接push
• 如果不能直接push（大多数情况），采用经典的fork & pull request来提交代码，下面讲述这种情况

fork & pull request

例如有个仓库https://github.com/ecomfe/esui.git，其采用了经典的分支开发模型，稳定后的代码提交到master分支，其余特性则在dev分支上进行开发，待成熟后合并回master分支。

Rabbitzzc

<template>
  <div class="search-dialog">
    <!-- 移动端单组件展示 -->
    <div
      class="search-dialog-trigger"
      :class="loaded == true ? 'hidden' : ''"
      @click="showDialog"
    >
      <div
        ref="thumb"

Rabbitzzc

<template>
  <div>
    <pre>{{ valueString }}</pre>
  </div>
</template>
<script>
const props = {
  name: 'raw-displayer',
  value: {
    required: true,

Rabbitzzc

const exec = require('child_process').exec

exec('git config --get user.name && git config --get user.email', (error, stdout, stderr) => {
    if (stdout) {
        console.log('\x1b[36m%s\x1b[0m', 'start checking user!(∩_∩)O~\n')
        const arr = stdout.split('\n')
        const user = {
            name: arr[0],
            email: arr[1]
        }

Rabbitzzc

module.exports = {
	extends: ['@commitlint/config-conventional'],
	// rules 中的内容可自定义，当前与 @commitlint/config-conventional 一致
	// 用于查看可自定义项
	rules: {
		// body 以空行开头
		'body-leading-blank': [1, 'always'],
		// footer 以空行开头
		'footer-leading-blank': [1, 'always'],
		// header 最大长度 72 个字符

Rabbitzzc

{
  "presets": [
    # 表示使用 @babel/preset-env 提供的预设环境，兼容当前已经发布为标准规范的 es 版本（比如 2019 年底之前已经发布的 es2017、es2018），不包括提案内的语法
    "@babel/env"
  ],
  "plugins": [
    # https://zhuanlan.zhihu.com/p/147083132
    #  解决污染原型链问题 | helper 从统一模块中引入，解决重复移动打包
    "@babel/plugin-transform-runtime"
  ]

Rabbitzzc

# Browsers that we support

last 1 version # 即支持各类浏览器最近的一个版本，当然这里的 1 是可变的数字。
> 1% # 支持市场份额大于 1% 的浏览器
maintained node versions # 主流 node 版本
# 最新的两个版本中发现其市场份额已经低于 0.5% 并且 24 个月内没有任务官方支持和更新了。
# 没有 dead
not dead 

Rabbitzzc

module.exports = {
    parser: 'babel-eslint',
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module',
        ecmaFeatures: {
            experimentalObjectRestSpread: true,
            jsx: true
        }
    },

Rabbitzzc

# editor 是提供编辑器去约束配置，prettier 是给开发者的代码进行风格约束的，可以使用命令格式化代码，如果需要约束，则需要使用 eslint 强约束
# tps://prettier.io/docs/en/options.html#html-whitespace-sensitivity
module.exports = {
    printWidth: 120, // 单行最长，超过设置，将自动换行
    tabWidth: 4, // tab 间隔 -- 与 editorconfig 相似
    useTabs: false,// space / tabs
    singleQuote: true, // 单引号还是双引号
    semi: true, // 是否需要分号
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象