@zonxt/vant-x
v0.1.1
Published
ui component library base on vant
Downloads
5
Readme
@zonxt/vant-x
ui component library base on vant
Install
npm install @zonxt/vant-x --save
# or
yarn add @zonxt/vant-x
vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { createStyleImportPlugin } from "vite-plugin-style-import";
import { resolveVantXStyle } from "@zonxt/vant-x";
export default defineConfig({
plugins: [
vue(),
createStyleImportPlugin({
libs: [
{
libraryName: "@zonxt/vant-x",
esModule: true,
resolveStyle: resolveVantXStyle,
},
],
}),
],
css: {
preprocessorOptions: {
less: {
modifyVars: {},
javascriptEnabled: true,
},
},
},
});
Usage
useVLoadingX
app.vue
<template>
<div>
<VLoadingX :show="isLoaingShow" />
</div>
</template>
<script lang="ts">
export default { name: "Name" };
</script>
<script lang="ts" setup>
import { useVLoadingX } from "@zonxt/vant-x";
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const isLoaingShow = ref(false);
const showLoading = (value: boolean) => {
isLoaingShow.value = value;
};
useVLoadingX().init(showLoading);
</script>
use in other components
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useVLoadingX } from "@zonxt/vant-x";
defineProps<{ msg: string }>();
const count = ref(0);
onMounted(() => {
useVLoadingX().show();
setTimeout(() => {
useVLoadingX().hide();
}, 3000);
});
</script>
<template>
<div>useVLoadingX demo</div>
</template>