y9plugin-components-auto v0.0.4

版本更新说明

y9组件介绍

y9组件是基于element-plus进行二次封装的组件插件。 组件效果以及组件使用说明请访问：组件说明文档链接

y9组件 注册组件的方式

1、全局注册（语言默认是中文）

在 ./src/mian.ts 文件中进行全局注册

import y9pluginComponentsAuto from "y9plugin-components-auto";
import "y9plugin-components-auto/dist/style.css";

app.use(y9pluginComponentsAuto);

2、手动按需引入 （语言默认是英文）

在 【./src/mian.ts】 文件中全局引入样式 使用组件时再手动引入组件，例如 xxx.vue

<script setup lang="ts">
 import { y9Card } from "fuyu-comp";
</script>
<template>
   <y9Card title="标题" showFooter>666</y9Card>
</template>

3、使用插件 unplugin-vue-components 按需引入（语言默认是英文）

安装解析组件的插件：

npm i unplugin-vue-components -D

在 【vite.config.ts】 文件中配置

import Components from "unplugin-vue-components/vite";
import Y9pluginComponentsAutoResolver from "y9plugin-components-auto/resolver";

export default defineConfig({
  plugins: [
         Components({
             resolvers: [Y9pluginComponentsAutoResolver()],
         }),
 ],
})

语言配置的方式

全局注册默认是中文 按需引入默认是英文

1、通过 app.use() 来进行配置：例如在【main.ts】文件里全局注册组件时，配置语言

//1-引入有生云公共组件库
import y9pluginComponentsAuto from "y9plugin-components-auto";
import "y9plugin-components-auto/dist/style.css";
//2-有生云公共组件库语言包
import y9_zhCn from "y9plugin-components-auto/dist/locale/zh-cn.mjs";
import y9_en from "y9plugin-components-auto/dist/locale/en.mjs";
//3-切换语言
let opts = reactive({
    locale: y9_zhCn,
});
setTimeout(() => {
    opts.locale = y9_en;
}, 2000);

//4-注册组件
app.use(y9pluginComponentsAuto,opts);

2、通过 ：y9-config-provider组件 来进行配置：例如在使用组件的【xxx.vue】文件里 配置语言

<script setup lang="ts">
    import { ref } from "vue";
    import { y9Card, y9ConfigProvider } from "y9plugin-components-auto";
    
    //有生云公共组件库语言包
    import y9_zhCn from "y9plugin-components-auto/dist/locale/zh-cn.mjs";
    import y9_en from "y9plugin-components-auto/dist/locale/en.mjs";
    
    //初始化语言
    const y9_locale = ref(y9_zhCn);
    
    //切换语言
    const onchange = () => {
        if (y9_locale.value.name == "en") {
            y9_locale.value = y9_zhCn;
        } else {
            y9_locale.value = y9_en;
        }
    };
</script>
<template>
    <button @click="onchange">切换</button>
    <y9-config-provider :locale="y9_locale">
        <y9Card title="标题" showFooter>666</y9Card>
    </y9-config-provider>
</template>