hch-cascader v1.0.2

toc

1. @vue/cli 3.x

# 使用 @vue/cli 3.x  创建项目, 建议使用 yarn 安装依赖, 会快很多
# 升级 yarn, brew upgrade yarn
# 解决每次执行命令 Homebrew 自动更新, vim ~/.bash_profile, 新增一行 export HOMEBREW_NO_AUTO_UPDATE=true

# 使用命令行创建, 或者启动图形界面创建 vue ui
zouzhihuadeMacBook-Pro:vue wang$ vue create vue-cascader -m yarn

Vue CLI v3.4.1
┌────────────────────────────┐
│  Update available: 3.10.0  │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: vue-cascader


Vue CLI v3.4.1
✨  Creating project in /Users/zhiai/Documents/huocaihe/vue/vue-cascader.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.17.3
.....

# 创建项目的配置文件放在 ~/.vuerc, 可以手动去编辑
$ vim ~/.vuerc

{
  "useTaobaoRegistry": true,
  "packageManager": "npm",
  "latestVersion": "3.10.0",
  "lastChecked": 1565835827161,
  "presets": {
    "vue-cascader": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb",
          "lintOn": [
            "save",
            "commit"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "cssPreprocessor": "stylus"
    }
  }
}

2. 递归组件的实现

循环是有条件的执行同一段代码, 递归是有条件的在组件内部调用自己 递归组件典型的案例有 三级联动 Cascader 和 树形组件 TreeMenue

三级联动 Cascader Cascader = CascaderItem [CascaderItem CascaderItem ] 每一级都是一个 CascaderItem, 有自己独立的数据, 并且这三个 CascaderItem 是嵌套的父子关系 每一级的 CascaderItem 的数据受父级的影响

list() {
  // 子 CascaderItem 的 list 依赖于 父 CascaderItem 的 selected, 但是这样只能影响一级
  // return this.selected && this.selected.children

  // 让子 CascaderItem 的 list 依赖于 value, value 始终包含所有被点击的数据 [{菜单及其包含的子菜单}, ...]
  // 并且在击高 level 的 CascaderItem 时, 把 value 中的 把低 level 的 CascaderItem 数据全部清除
  return this.value[this.level] && this.value[this.level].children
}

loadsh yarn add loadsh lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库 cloneDeep 方法可以实现深拷贝

子组件 props 数据是只读的, 无法在子组件中直接修改 在子组件中修改克隆值, 把新值抛给父组件去更新

遍历树形数组

3. npm 发包

// 配置
"name": "hch-cascader",
"version": "1.0.0",
"private": false

# 打包命令
"dist": "vue-cli-service build --target lib --name Cascader  ./src/components/cascader.vue"

# 打包文件的引用入口
"main":"./dist/Cascader.umd.min.js"


// 打包 | 发包
zouzhihuadembp:vue-cascader wang$ yarn run dist
File                        Size                    Gzipped
dist/Cascader.umd.min.js    46.55 KiB               14.21 KiB
dist/Cascader.umd.js        160.88 KiB              36.45 KiB
dist/Cascader.common.js     160.50 KiB              36.34 KiB
dist/Cascader.css           0.43 KiB                0.23 KiB

zouzhihuadembp:vue-cascader wang$ nrm use npm
zouzhihuadembp:vue-cascader wang$ npm adduser
Username: 
Password: 
Email: (this IS public) 
zouzhihuadembp:vue-cascader wang$ npm publish
+ hch-cascader@1.0.2