naive-ui/vue3.md

9.5 KiB

Migrate from V1

General Breaking Changes

  • css
    • css index naive-ui/lib|es/styles/index.css has been removed, do not import it any more!
  • fonts
    • naive-ui/lib|es/styles/fonts/* has been removed, use vfonts
  • icons
    • naive-ui/lib|es/icons/* is deprecated, use vicons instead.
  • n-nimbus-form-card is removed
  • n-nimbus-icon is removed

Components

  • form

    • form-item
      • new
        • show-feedback prop
  • affix

    • deprecate
      • target => listen-to
  • alert

  • anchor

    • deprecate
      • target => listen-to
  • auto-complete

    • break
      • v-model => v-model:value
    • deprecate
      • on-input => on-update:value
    • new
      • on-blur
      • on-focus
  • avatar

  • back-top

    • new
      • show controlled show
      • on-update:show
      • to teleport target
    • deprecate
      • on-show => on-update:show
      • on-hide => on-update:show
      • target => listen-to
  • badge

  • breadcrumb

  • button

  • button-group

  • card

  • cascader

    • break
      • v-model => v-model:value
      • on-load has different usage
      • leaf-only has different meaning
    • new
      • cascade prop
      • show-path prop
    • deprecated
      • on-change => on-update:value
  • checkbox

    • checkbox
      • break
        • value only supports string
      • deprecate
        • on-change => on-update:checked
      • new
        • default-checked prop
    • checkbox-group
      • break
        • value only supports string or null
      • deprecate
        • on-change => on-update:value
  • code

  • collapse

    • deprecate
      • on-expanded-names-change => on-update:expanded-names
    • removed
      • v-model => v-model:expanded-names
  • config-consumer

  • config-provider

    • break
      • $NOs.theme => useOsTheme
    • deprecate
      • as => tag
      • styleScheme won't working in next version
    • new
      • provide useOsTheme hook
  • confirm => dialog

    • break
      • rename confirm to dialog
    • remove
      • $NConfirm, $NModal => inject.dialog
  • data-table

    • deprecate
      • on-filters-change => on-update:filters
      • on-sorter-change => on-update:sorter
      • on-checked-row-keys-change => on-update:checked-row-keys
      • on-page-change => on-update:page
      • on-page-size-change => on-update:page-size
  • date-picker

    • break
      • v-model => v-model:value
    • deprecate
      • on-change => on-update:value
  • descriptions

  • divider

  • drawer

    • break
      • v-model
    • deprecate
      • on-show => on-update:show
      • on-hide => on-update:show
      • target => to
      • drawer-class => body-class & body-wrapper-class
      • drawer-style => body-style & body-wrapper-style
    • new
      • display-directive prop
  • dropdown

    • break
      • option.value => option.key
      • item must have unique key
      • submenu must have unique key
    • remove
      • submenu-width
      • submenu-min-width
      • submenu-max-width
    • new
      • option.icon
  • dynamic-input

    • break
      • v-model => v-model:value
      • on-clear is removed
    • deprecate
      • on-input => on-update:value
    • new
      • min
  • dynamic-tags

    • break
      • v-model => v-model:value
  • element

  • empty

  • gradient-text

  • grid

  • icon

  • input

    • break
      • v-model => v-model:value
    • new
      • on-update:value
  • input-group

  • input-group-label

  • input-number

    • deprecate
      • on-change => on-update:value
  • layout

    • layout-content, layout
      • breaking use-native-scrollbar => native-scrollbar
    • layout-sider
      • breaking use-native-scrollbar => native-scrollbar
      • deprecate
        • on-expand => on-update:collapsed
        • on-collapse => on-update:collapsed
  • list

  • loading-bar

    • remove
      • $NLoadingBar
    • new
      • n-loading-bar-provider
  • log

    • deprecate
      • scrollToTop => scrollTo
      • scrollToBottom => scrollTo
  • menu

    • new
      • popover-body-style
    • deprecate
      • on-expanded-names-change => on-update:expanded-keys
      • on-select => on-update:value
      • expanded-names => expanded-keys
      • default-expanded-names => default-expanded-keys
      • item.name => item.key
      • item.titleExtra => item.extra
    • remove
      • overlay-width
      • overlay-min-width
  • message

    • rewrite message using n-message-provider
    • deprecate
      • onHide => onLeave
      • onAfterHide => onAfterLeave
    • remove
      • message.hide => message.destroy
  • modal

    • rewrite with teleport
    • new
      • display-directive
    • deprecate
      • v-model
      • on-show => on-update:show
      • on-hide => on-update:show
      • overlay-style => body-style
    • remove
      • default hide behavior for preset
    • BUG:
      • dialog preset slot (below vue 3.0.2)
  • notification

    • deprecate
      • open => create
      • onHide => onLeave
      • onAfterShow => onAfterEnter
      • onAfterHide => onAfterHide
  • pagination

    • deprecate
      • on-change => on-update:page
      • on-page-size-change => on-update:page-size
  • popconfirm

  • popover

    • new
      • default-show
    • deprecate
      • v-slot:activator => v-slot:trigger
      • overlay-xxx => body-xxx
    • remove
      • controller
      • max-width
      • width
      • min-width
      • manual trigger is removed, use null instead
    • other
      • set default trigger to null
  • popselect

    • break
      • v-model => v-model:value
    • deprecate
      • on-change => on-update:value
  • progress

  • radio

    • radio-group
      • break
        • default size 'small' => 'medium'
        • value only supports string or null
      • deprecate
        • on-change => on-update:value
    • radio & radio-button
      • break
        • value only supports string
        • checked-value => checked
          • It is change to conform html standard usage
        • on-change => on-update:checked
          • on-change is now a native event
  • result

  • scrollbar

  • select

    • break
      • v-model => v-model:value
      • on-scroll(event, container, content) => on-scroll(event)
      • option.render(h, data) => option.render(data)
    • deprecated
      • on-change => on-update:value
  • slider

  • space

  • spin

    • breaking
      • 'in-small', 'in-medium' and 'in-large' size are removed
    • deprecate
      • spinning => show
  • statistic

  • steps

  • switch

    • remove
      • value => value
      • change => on-update:value
  • table

  • tabs

    • deprecate
      • active-name => value
      • on-active-name-change => on-update:value
  • tag

    • break
      • v-model => v-model:value
    • deprecate
      • on-checked-change => on-update:checked
  • thing

  • time

  • time-picker

    • break
      • v-model => v-model:value
  • timeline

  • tooltip

    • ref
  • transfer

    • break
      • v-model => v-model:value
    • deprecate
      • on-change => on-update:value
  • tree

    • break
      • v-model => v-model:selected-keys
    • deprecate
      • on-selected-keys-change => on-update:selected-keys
      • on-checked-keys-change => on-update:checked-keys
      • on-expanded-keys-change => on-update:expanded-keys
  • typography

    • breaking
      • text, p
        • depth from primary ... tertiary => 1, 2, 3
    • deprecate
      • text
        • as => tag
  • upload

  • nimbus-service-layout

    • breaking
      • v-model => v-model:value
  • TODO

    • vooks
    • icons from vicons
    • fonts from vfonts
    • vite-build
    • rollup-build
    • tusimple theme
    • clean delegate
    • site production tag (bug)
    • demo scrollbar 的问题
    • table x scroll 右侧阴影不消失
    • log scrollTo 有点问题
    • remove hollowoutable
    • styleScheme, css variables 组件
      • 文档之后再说
    • use-global-style ? 感觉效果不会特别好而且还是很无谓的性能开销 这个问题可以之后再思考,现阶段 vue 的写法还是全局 install
    • dynamic-input, no value
    • button, input 的 css 变量名需要修改一下
    • test rollup treeshaking
    • test webpack treeshaking
    • menu utils render
    • dialog bug
    • data-table css vars
    • typography css vars
    • spin css vars
    • radio css vars
    • checkbox css vars
    • avatar css vars
    • landing page icon
    • switch styles
    • slider styles
    • drawer api
    • chrome date-picker overflow (focus({ preventScroll }))
    • slider 键盘好像会激活不该激活的 tooltip...
    • transfer 打包之后有问题
    • side effects = false 好像会影响 rollup 的打包(这让我很不安,要是生效 css 怎么办?要是不生效 JS 怎么办?)(事实上确实会影响网站对于 fonts 的打包,只能先靠脚本凑活一下) https://github.com/rollup/plugins/issues/692
    • vue 在 $attrs 的处理上 dev 和 prod 还是有差别 https://github.com/vuejs/vue-next/issues/2741

Info

https://github.com/vuejs/vue-next/issues/2549 last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a