Xyz-vue-esim-theme NPM

组件列表

esim-theme 主题包支持个性化的 xyz-vue 组件列表：

组件类型	组件名称	是否支持
公共样式	xyz-vue-style-manage	✅
表单	xyz-vue-form-group	✅
单选	xyz-vue-select2	✅
多选	xyz-vue-multiselect	✅
树形下拉	xyz-vue-treeselect	✅
开关	xyz-vue-bootstrap-switch	✅
输入框	xyz-vue-input	✅
金额输入框	xyz-vue-amount xyz-vue-amount-range	✅ ✅
标签输入框	xyz-vue-tags-edit	✅
日期选择器	xyz-vue-datepicker	✅
日期范围选择器	xyz-vue-datepicker-range	✅
穿梭框	xyz-vue-search-shuttle-box	✅
TAB	xyz-vue-tab xyz-vue-top-select-tab	✅ ❌
表格	xyz-vue-simple-datatables xyz-vue-dynamic-table	✅ ✅
提示框	xyz-vue-alert	✅
左侧导航	xyz-vue-left-navigation	✅
加载中	xyz-vue-loading-modal	✅
折叠表单	xyz-vue-fold-form	✅

esim-theme 新增 7.0 组件列表：

组件类型	组件名称	是否支持
信息提示	EsimTip	✅
缺省	EsimEmpty	✅

使用方式

在 vite 配置文件中搜索 injectOptions，添加以下 tags 内容脚本

function getEntryPages(mode) {
    return entries.pages.map((page) => ({
        // ...
        injectOptions: {
            // ...
            // 为每个页面注入 xyz-vue-esim-theme 标签
            tags: [
                {
                    tag: "script",
                    children: `import 'xyz-vue-esim-theme/style'`,
                    attrs: {
                        type: "module"
                    },
                    injectTo: "head"
                }
            ]
        }
    }));
}

代码中使用 esim-theme 组件示例：

import { EsimTip } from "xyz-vue-esim-theme";

<template>
    <EsimTip tipInfo="esim tip 提示信息" />
</template>

EsimTip

参数说明

{
    tipInfo: "" // 提示信息
}