ph-loading v0.1.0-beta.0

vue-template

Project setup

npm install ph-loading

usage

//全局使用
import PhLoading from 'ph-loading'
PhLoading
    .show(opt?:{
        alpha?:boolean, //透明
        closable?:boolean, //是否可关闭
        title?:string //文本提示
    })
    .hide()

//局部使用
<template>
<div style="position:relative">
    <PhLoading ref="loading">
</div>
</template>
<script lang="ts" setup>
import { PhLoading } from 'ph-loading'
const loading = ref() as Ref<InstanceType<typeof PhLoading>>
const onclick = ()=>{
    loading.value?.show()
}
</script>

##code

<template>
  <div class="home">
    <button @click="onClick"> open </button>
    <button @click="onClick({closable:true})"> open 可关闭 </button>
    <button @click="onClick({alpha:true})"> open alpha </button>
    <button @click="onClick({title:'客官，请稍后'})"> open title </button>
    <button @click="onClick1"> open 局部 </button>
    <div class="local-zone">
      <PhLoading ref="loading"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Ref, ref } from 'vue';
import Loading,{PhLoadingState,PhLoading} from '@/components'
const loading = ref() as Ref<InstanceType<typeof PhLoading>>
const onClick = (opt?:PhLoadingState)=>{
  Loading.show(opt)
}
const onClick1 = ()=>{
  loading.value?.show()
}
</script>
<style scoped>
.local-zone{
  position: relative;
  width: 600px;
  height: 400px;
  border: 1px solid red;
}
</style>

在线案例

See phoeon.