[vuejs] loading-spinner

Edward Hyun·2022년 1월 12일
1

app&web-dev

목록 보기
56/178
post-custom-banner

출처 :: https://www.npmjs.com/package/vue-loading-overlay
데모 :: https://ankurk91.github.io/vue-loading-overlay/
설치 :: npm install vue-loading-overlay@^5.0

  • As plugin
    Install the plugin in your app
import {createApp} from 'vue';
import VueLoading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
// Your app initialization logic goes here
const app = createApp({});
app.use(VueLoading);
app.mount('#app');
  • with Composition API

    setup() {
           const $loading = useLoading()
           // or use inject without importing useLoading
           // const $loading =  inject('$loading')
    
           const fullPage = ref(false)
    
           const submit = () => {
               const loader = $loading.show({
                   // Optional parameters
               });
               // simulate AJAX
               setTimeout(() => {
                   loader.hide()
               }, 5000)
           }
    
           const onCancel = () => console.log('User cancelled the loader.')
    
           return {
               fullPage,
               submit,
               onCancel
           }
       }
profile
앱&웹개발(flutter, vuejs, typescript, react), 인공지능(nlp, asr, rl), 백엔드(nodejs, flask, golang, grpc, webrtc, aws, msa, nft, spring cloud, nest.js), 함수형 프로그래밍(scala, erlang)을 공부하며 정리합니다.
post-custom-banner

0개의 댓글