n-design-readonly-plugin

n-design-readonly-plugin

一个 Vue 3 高阶组件（HOC），用于将 n-designv3 表单组件一键切换为只读模式。

在业务系统中，经常需要在「编辑态」和「详情态」之间切换。本插件通过 :readonly="true" 全局控制或组件级控制，自动将 <NkInput>、<NkSelect> 等组件渲染为不可编辑的静态文本，无需重复编写展示逻辑。

✨ 特性

• ✅ 支持 n-designv3 所有表单组件（Input, Select, DatePicker 等）
• ✅ 全局控制：通过 <NkForm :readonly="true"> 一键禁用整个表单
• ✅ 组件级控制：单个组件设置 :readonly="true"
• ✅ 自动提取显示文本（支持 label / value 映射）
• ✅ 完整 TypeScript 类型支持
• ✅ 零运行时依赖（仅依赖 vue 和 n-designv3）
• ✅ 全局控制：通过 <NkForm :copyable="false"> 一键禁用所有复制图标，默认开启
• ✅ 组件级控制：单个组件设置 :copyable="false" 子组件配置优先级高于 <NkForm>

📦 安装

npm install n-design-readonly-plugin

1.全局注册插件

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

// 引入 n-designv3（必须）
import NDesignV3 from 'n-designv3';
import 'n-designv3/dist/nancal.variable.min.css';

// 引入本插件
import NDesignReadolyPlugin from 'n-design-readonly-plugin';

const app = createApp(App);
app.use(NDesignV3);
app.use(NDesignReadolyPlugin); // 注册后自动提供 NkInput, NkSelect 等组件
app.mount('#app');

2.在模板中使用

全局只读（推荐）

<template>
  <nk-form :readonly="isReadonly" :model="form">
    <nk-form-item label="用户名">
      <nk-input v-model:value="form.name" />
    </nk-form-item>
    <nk-form-item label="城市">
      <nk-select
        v-model:value="form.city"
        :options="cityOptions"
      />
    </nk-form-item>
  </nk-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isReadonly = ref(true);
const form = reactive({ name: '张三', city: 'bj' });
const cityOptions = [
  { label: '北京', value: 'bj' },
  { label: '上海', value: 'sh' }
];
</script>

3.组件映射

所有 n-* 表单组件均自动映射为 nk-*，命名规则一致。

4.工作原理

插件内部使用 provide/inject 传递 readonly 上下文 每个 nk-* 组件是 withReadonly(WrappedComponent) 的高阶封装 当 readonly === true 时，不再渲染原始组件，而是渲染一个带样式的 显示文本 文本内容通过智能解析 value + options 自动获取（如 Select 的 label）