Scheme兼容组件库名称

Aaron
1 parent d811faa3
Showing 2 changed files with 26 additions and 18 deletions Show diff stats
packages/index.js
packages/scheme/index.vue
@@ -42,18 +42,21 @@ const components = {
 const install = function (Vue, opts = {}) {
   Object.values(components).forEach(component => {
     // 组件前缀
-    const prefix = opts.name || 'eagle'
+    const prefix = opts.name || 'eagle';
     // 配置组件名称
     const name = prefix + component.name
     component.name = name
     const defaultI18n = () => undefined;
-    // if (opts.i18n) {
-      if (component.methods) {
-        component.methods.i18n = opts.i18n || defaultI18n;
-      } else {
-        component.methods = { i18n: opts.i18n || defaultI18n }
-      }
-    // }
+    if (component.computed) {
+      component.computed.prefix = () => { return prefix };
+    } else {
+      component.computed = { prefix: () => { return prefix } }
+    }
+    if (component.methods) {
+      component.methods.i18n = opts.i18n || defaultI18n;
+    } else {
+      component.methods = { i18n: opts.i18n || defaultI18n }
+    }
     // 给每个子组件配置install方法
     component.install = function (Vue) {
       Vue.component(name, component)
@@ -57,12 +57,12 @@
   <div class="eagle-scheme">
     <div v-if="option.showSearch !== false" class="eagle-scheme__card">
       <!-- 搜索表单 -->
-      <eagle-search :list="_searchList" v-model="searchModel" :span="searchProps.span || 6" :formProps="searchProps" @search="handleSearch" :searching="tableLoading">
+      <component :is="_searchComponent" :list="_searchList" v-model="searchModel" :span="searchProps.span || 6" :formProps="searchProps" @search="handleSearch" :searching="tableLoading">
         <!-- 搜索表单项具名插槽 -->
         <template v-for="item in _searchList">
           <slot v-if="$scopedSlots[`search-${item.key}`] || $slots[`search-${item.key}`]" :name="`search-${item.key}`" :slot="item.key" :model="searchModel"></slot>
         </template>
-      </eagle-search>
+      </component>
     </div>
     <!-- 操作按钮栏 -->
     <div v-if="option.showActionBar !== false" class="eagle-scheme__action" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)">
@@ -83,7 +83,7 @@
         }"
       ></slot>
       <!-- 表格 -->
-      <eagle-table v-else ref="eagle-table" :list="_tableList" :value="tableData"
+      <component v-else :is="_tableComponent" ref="eagle-table" :list="_tableList" :value="tableData"
         v-loading="tableLoading"
         element-loading-background="rgba(255, 255, 255, 0.6)"
         :tableProps="{ border: true, 'row-key': 'id', ...tableProps }"
@@ -113,14 +113,14 @@
             <el-button v-if="option.showViewBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-view" :title="i18n('eagle.scheme.detail') || '详情'" @click="handleView(slotScope)"></el-button>
             <slot v-if="$scopedSlots['table-operation-btn-edit'] || $slots['table-operation-btn-edit']" name="table-operation-btn-edit" :slotScope="slotScope" v-bind="slotMethod"></slot>
             <el-button v-else-if="option.showEditBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" :title="i18n('eagle.scheme.edit') || '编辑'" @click="handleEdit(slotScope)"></el-button>
-            <eagle-confirm v-if="option.showDeleteBtn !== false" class="eagle-scheme__table-btn" :title="i18n('eagle.scheme.deleteConfirm') || '是否删除？'" @confirm="handleDelete('one', slotScope)">
+            <component v-if="option.showDeleteBtn !== false" :is="_confirmComponent" class="eagle-scheme__table-btn" :title="i18n('eagle.scheme.deleteConfirm') || '是否删除？'" @confirm="handleDelete('one', slotScope)">
               <el-button type="text" icon="el-icon-delete" :title="i18n('eagle.scheme.delete') || '删除'"></el-button>
-            </eagle-confirm>
+            </component>
             <!-- 表格操作栏插槽 - 后置插槽 -->
             <slot v-if="$scopedSlots['table-operation-btn-append'] || $slots['table-operation-btn-append']" name="table-operation-btn-append" :slotScope="slotScope" v-bind="slotMethod"></slot>
           </div>
         </el-table-column>
-      </eagle-table>
+      </component>
       <!-- 分页器 -->
       <div v-if="option.showPagination !== false" class="eagle-scheme__pagination" :style="{ 'text-align': paginationProps.textAlign || 'right' }">
         <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)"
@@ -128,7 +128,7 @@
       </div>
     </div>
     <el-dialog v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)" :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }">
-      <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel">
+      <component :is="_formComponent" v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" ref="eagle-form" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel">
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
@@ -138,8 +138,8 @@
           <slot v-if="$scopedSlots[`form-item-${item.key}`] || $slots[`form-item-${item.key}`]" :name="`form-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
           <slot v-if="$scopedSlots[`form-label-${item.key}`] || $slots[`form-label-${item.key}`]" :name="`form-label-${item.key}`" :slot="`label-${item.key}`" :model="formModel" v-bind="item"></slot>
         </template>
-      </eagle-form>
-      <eagle-detail v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || 8" :formProps="detailProps">
+      </component>
+      <component :is="_detailComponent" v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || 8" :formProps="detailProps">
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`view-${key}`] || $slots[`view-${key}`]" :name="`view-${key}`" :slot="key" :model="formModel"></slot>
@@ -148,7 +148,7 @@
         <template v-for="item in _formList">
           <slot v-if="$scopedSlots[`view-item-${item.key}`] || $slots[`view-item-${item.key}`]" :name="`view-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
         </template>
-      </eagle-detail>
+      </component>
       <!-- 自定义弹出框内容插槽 -->
       <slot v-else :name="dialogType" :row="tableCurrentRow" :hideDialog="hideDialog"></slot>
     </el-dialog>
@@ -277,6 +277,11 @@ export default {
     }
   },
   computed: {
+    _searchComponent() { return `${this.prefix}-search` },
+    _tableComponent() { return `${this.prefix}-table` },
+    _formComponent() { return `${this.prefix}-form` },
+    _detailComponent() { return `${this.prefix}-detail` },
+    _confirmComponent() { return `${this.prefix}-confirm` },
     // 解析表单组件分组具名插槽名称
     formGroupSlotsKeys() {
       const keys = [...new Set([...Object.keys(this.$scopedSlots), ...Object.keys(this.$slots)])];