Skip to content

【功能请求】按需引入 #136

@ydq

Description

@ydq

现在的 lew-ui 对比其他的如 antdv 等其实算得上很轻巧了,但是有的时候 就是有洁癖,希望能更小巧一点

目前 整合 unplugin-vue-components 在大多数情况下 都能完美运行

import Components from 'unplugin-vue-components/vite'
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers:[
        name => {
          if (name.startsWith('Lew'))
            return { name, from: 'lew-ui' }
        },
      ]
    })
  ],
})

只是目前发现了两个问题:

  1. css 是一整个大文件,没办法按需引入
  2. 部分组件,如 inputTable(虽然是 dev 状态,但是用起来真的好爽)里面强依赖了如 LewMessage,导致 unplugin-vue-components 按需导入的时候 提示报错,找不到 LewMessage

说到 inputTable 组件,虽然目前在 dev 状态,但是在我们的小业务中使用已经很稳定了,提个小需求不知道能否满足,就是希望能暴露一下 对应的编辑、删除的 事件,让用户自己返回一个 Promise,成功则处理UI,失败则不处理,这样可以满足用户更加灵活的自定义处理,毕竟现在的

比如 当前UI上 删除、编辑 的提示,其实并不一定会操作到真实的接口,而我暂时没办法定制这一块,UI默认提示【此操作会立即生效,请谨慎操作】,其实我自己的做法是 保存了一份完整的 table 原始数据拷贝,然后额外提供了一个 恢复按钮 和一个 提交保存 按钮,当原始数据拷贝数据不等于当前绑定的对象时 则 恢复按钮 和 提交保存 按钮 可用,点击恢复的时候,重新将备份的对象 拷贝回去,点击提交的时候,进行接口操作然后再重新设置一下拷贝备份对象等于当前编辑的对象

<script setup>
import { reactive } from 'vue'
import { cloneDeep, isEqual } from 'es-toolkit'

const columns = [/*....*/]

const origin = {/*....*/}

const data = reactive({ ...origin })

const reset = () => {
    Object.assign(data, cloneDeep(origin))
}

const submit = async () => {
    await callApi(data)
    Object.assign(origin, cloneDeep(data))
}

</script>
<template>
    <lew-input-table uniqueField="columnName"
                     :batch-deletable="false"
                     :sortable="false"
                     :autoUniqueId="false"
                     :addable="true"
                     :columns="columns"
                     v-model="data.columnsList"></lew-input-table>
    <lew-button text="恢复默认"
                type="ghost"
                @click="reset"
                :disabled="isEqual(origin, data)" />
    <lew-button text="确定提交"
                type="fill"
                @click="submit"
                :disabled="isEqual(origin, data)" />
</template>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions