@zonxt/vant-x v0.1.1

@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>