# @forsakringskassan/docs-live-example 中文文档

规范地址：https://npmcn.com/package/%40forsakringskassan/docs-live-example/

版本：3\.0\.3
npm 元数据更新时间：2026-10-20T07:47:31.150Z
中文译文更新时间：2026-11-15T09:27:56.462Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40forsakringskassan/docs-live-example
原文对照：https://npmcn.com/package/%40forsakringskassan/docs-live-example/?lang=original
项目主页：https://github.com/Forsakringskassan/docs-live-example
源码仓库：https://github.com/Forsakringskassan/docs-live-example

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：182 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：^22\.16 \|\| \>= 24
- 运行依赖：0 个
- peer 依赖：vue ^3\.4\.15，prettier ^3\.0\.0，html-validate \>= 7\.9\.0
- 首次发布：2024-04-03T07:18:10.905Z
- 最新版本发布：2026-10-02T04:24:51.304Z
- 近 30 天下载量：29781（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 8 个）

## 中文简介

用于现场实例的组件

## 安装

```sh
npm install @forsakringskassan/docs-live-example
```

也可以使用：`pnpm add @forsakringskassan/docs-live-example`、`yarn add @forsakringskassan/docs-live-example`、`bun add @forsakringskassan/docs-live-example`

## README

# `@forsakringskassan/docs-live-example`

`live-example` (原始内容存档于2018-10-21). är en Vue-komponent som används för att presentera ett levande exempel samt tourhörande markup för att progrestra exemplet.

(原始内容存档于2013-10-12). Kamponenten består av tre ytor:

-   exempelyta: innehåller det kompilerade exemplet. 中国植物物种信息数据库.
-   (原始内容存档于2018-10-21). kontrollyta: innehåller de inmatningsfält som används för att kontiphra exemplet.
-   kodyta: 签证员 HTML-markup och Vue-template för exemplet (om Vue-komponenter avänds).

图片 `live-example` kompileras i 运行时间 så kan man serkt modifiera exemplet och den markup som 签证 genom att använda de inmatningsfält som lajts to i kontrollytan. 互联网档案馆的存檔,存档日期2013-12-21.

## 安瓦德宁

安装 paketet genom att köra:

`npm install --save-dev @forsakringskassan/docs-live-example`

各州 `html-validate` bör du även uppdatera din. 互联网档案馆的存檔,存档日期2013-12-21 `.htmlvalidate.json` (原始内容存档于2018-09-21) (英语). med följande rader för att registrera `live-example` 元素 :

```json
"extends": [
    "@forsakringskassan/docs-live-example/htmlvalidate:recommended",
],
"plugins": [
    "@forsakringskassan/docs-live-example/htmlvalidate"
],
```

### 道具

#### `template`

För at generrera ett exempel så används (法语) `template` 上面写着:.

#### `components` (可选)

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}德·武·克姆波内特 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我先打个比方说 `template` 一直到我出生为止 `components`。 。 。 .

#### `livedata` (可选)

Om 实例 behöver spara ett värde(直到实例) `v-model`så skickas detta in genom (英语) `livedata`。 。 。 .

#### `livemethods` (可选)

Om 实例 behöver köra en medod så skickas detta in genom `livemethods`。 。 。 .

#### `forceSingleColumn` (可选)

Om 例例例例例例例例例例例例例例例例例 `forceSingleColumn` för att forcera exempt att accidents i en kolumn. (原始内容存档于2018-09-29).

### Konphitra 实例

För att skapa ett kongitarbart exempel börjar vi med att skapa en ny komponent 互联网档案馆的存檔,存档日期2013-12-02 `AwesomeComponentLiveExample.vue`。 。 。 . 维·雷克明德·阿旺达 `LiveExample` 索姆后缀 på alla活出.

Följande 锅炉平板:

```vue
<template>
    <live-example :components :template :livedata>
        <!-- Example configuration -->
    </live-example>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { LiveExample } from "@forsakringskassan/docs-live-example";

export default defineComponent({
    name: "AwesomeComponentLiveExample",
    components: { LiveExample },
    data() {
        return {};
    },
    computed: {
        livedata(): unknown {
            return {/* data used by generated code */};
        },
        components(): unknown {
            return {/* components used by generated code */};
        },
        template(): string {
            return /* HTML */ ` <div>Hello World!</div> `;
        },
    },
});
</script>
```

在Komponenter

```diff
     <live-example :components :template :livedata>
+        <f-select-field v-model="tagName">
+            <template #label> Element </template>
+            <option value="div"> div </option>
+            <option value="p"> p </option>
+            <option value="em"> em </option>
+        </f-select-field>
+        <f-checkbox-field v-model="placeholderText" :value="true">
+            Use placeholder text
+        </f-checkbox-field>
     </live-example>
```

```diff
     data() {
-        return {};
+        return {
+            tagName: "div",
+            placeholderText: false,
+        };
     },
```

Därefter kan vi 修改器a `template` 在nytja inställningar: 纳特·尼特加:

```diff
         template(): string {
-            return /* HTML */ ` <div>Hello World!</div> `;
+            const { tagName, placeholderText } = this;
+            const message = placeholderText ? "Lorem ipsum dolor sit amet" : "Hello World!" ;
+            return /* HTML */ ` <${tagName}>${message}</${tagName}> `;
         },
```

Det går också med fördel att använda (英语: `createElement` (se beskrivning längre ner): (英语:

```diff
         template(): string {
-            return /* HTML */ ` <div>Hello World!</div> `;
+            const { tagName, placeholderText } = this;
+            const message = placeholderText ? "Lorem ipsum dolor sit amet" : "Hello World!" ;
+            return createElement(tagName, message);
         },
```

结果 :

```vue
<template>
    <live-example :template>
        <div>
            <label for="config-element"> Element </label>
            <select id="config-element" v-model="tagName">
                <option value="div">div</option>
                <option value="p">p</option>
                <option value="em">em</option>
            </select>
        </div>
        <div>
            <label>
                <input
                    type="checkbox"
                    v-model="placeholderText"
                    :value="true"
                />
                Use placeholder text
            </label>
        </div>
    </live-example>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    LiveExample,
    createElement,
} from "@forsakringskassan/docs-live-example";

export default defineComponent({
    name: "AwesomeComponentLiveExample",
    components: { LiveExample },
    data() {
        return {
            tagName: "div",
            placeholderText: false,
        };
    },
    computed: {
        template(): string {
            const { tagName, placeholderText } = this;
            const message = placeholderText
                ? "Lorem ipsum dolor sit amet"
                : "Hello World!";
            return createElement(tagName, message);
        },
    },
});
</script>
```

## `createElement`

为活性示例制作标记的助手函数 .

```ts
createElement(tagName);
createElement(tagName, content);
createElement(tagName, attributes);
createElement(tagName, attributes, content);
```

为简单的元素创建标记 :

```ts
createElement("div");
// <div>
```

添加属性 :

```ts
createElement("div", { id: "my-awesome-id", class: ["foo", "bar"] });
// <div id="my-awesome-id" class="foo bar">
```

属性可以是:

-   `string` - 数值为: `{ key: "value" }` 变成 `key="value"`。 。 。 .
-   `number` - 值转换为字符串 : `{ key: 12 }` 变成 `key="12"`。 。 。 .
-   `boolean` - 如果值为真,则设置了密钥 : `{ key: true }` 变成 `key` 财务报告和审定财务报表 `{ key: false }` 省去属性.
-   `Array` - 加入每个非空项目: `{ key: ["foo", "bar"] }` 变成 `key="foo bar"`。 。 。 .
-   `Object` - 巢的属性: `{ data: { key: "value" } }` 变成 `data-key="value"`。 。 。 .
-   `null` 财务报告和审定财务报表 `undefined` 从上下文中略去,例如:. `{ key: null }` `{ key: [null]` 财务报告和审定财务报表 `{ key: { value: null } }` 全部省略.

可添加内容:

```ts
createElement("div", "lorem ipsum");
// <div> lorem ipsum </div>

createElement("div", [
    createElement("h1", "My Awesome Heading"),
    createElement("p", ["Lorem ipsum", "dolor sit amet"]),
]);
// <div> <h1> My Awesome Heading </h1> <p> Lorem ipsum dolor sit amet </p> </div>
```

组合 :

```ts
createElement("div", { id: "foo" }, "lorem ipsum");
// <div id="foo"> lorem ipsum </div>
```

## 常见问题

### @forsakringskassan/docs-live-example 是什么？

用于现场实例的组件

### 如何安装 @forsakringskassan/docs-live-example？

在项目目录运行 npm install @forsakringskassan/docs-live-example，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.4\.15）、prettier（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @forsakringskassan/docs-live-example 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @forsakringskassan/docs-live-example 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @forsakringskassan/docs-live-example 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^22\.16 \|\| \>= 24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @forsakringskassan/docs-live-example 可以商用吗？

@forsakringskassan/docs-live-example 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @forsakringskassan/docs-live-example 的下载量有多少？

根据 npm 官方下载统计，@forsakringskassan/docs-live-example 在 2026/10/16 – 2026/11/14 这 30 天内被下载 29,781 次，日均约 993 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @forsakringskassan/docs-live-example 还在维护吗？

最新版本 3\.0\.3 发布于 2026/10/02（1 个月前）；至今共发布 26 个版本，其中过去 12 个月发布了 8 个；首次发布于 2024/04/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。