[컴][웹] vue3 Naive ui 에서 Message component 사용

vuejs 3 / naive ui framwork / options api

vue3 Naive ui 에서 Message component 사용

여기서는 Options API 를 사용하는 예시를 보여주려 한다. Naive UI 에는 Composite API 의 형태로 나와있다.

useMessage 는 message box 를 호출할 수 있도록 해준다. 이것은 다음 처럼 사용하면 된다.

• NMessageProvider 는 최상단 parent 즉, root 에 있어야 한다.

  • https://stackoverflow.com/a/72752232: NMessageProvider 등, provider 는 upper layer에 있어야 한다.

• createDiscreteApi 를 사용하는 경우, useMessage 와는 동작이 다르다. 특히 provider 에 props 를 변경하는 경우, props 가 적용되지 않는다. doc 에 다음과 같은 이야기가 그것을 이야기 하는 듯 하다.

  from: https://www.naiveui.com/en-US/os-theme/components/discrete

  …
  share config 가 필요하다면, 수동으로 해줘야 한다.
  …

<template>
  <div>
    <div @click="onClickLogOut">
  </div>
</template>

<script>
import { useMessage } from 'naive-ui'

import api from '@/utils/api'

const _ = {
  name: 'LoginWidget',
  components: {
    NIcon,
    ExitIcon
  },
  data: function () {
    return {
      activeKey: null
    }
  },
  created: function(){
    this.message = useMessage();
  },
  methods: {
    async onClickLogOut() {
      this.message.warning(e.stack)
    }
  }
}

export default _
</script>
<style></style>

<template>
  <NMessageProvider placement="bottom">
    <LoginWidget>
    </LoginWidget>
  </NMessageProvider>
</template>

<script>
import LoginWidget from './LoginWidget'
import { NMessageProvider } from 'naive-ui'

const _ = {
  name: 'App',
  components: {
    LoginWidget,
    NMessageProvider
  },
  data: function () {
    return {}
  },
  methods: {}
}

export default _
</script>
<style></style>