如何在Svelte中使用SurveyJS自定义项模板？

方案1：将Svelte组件编译为Web Component使用 #

Svelte原生支持编译为标准Web Component，能直接在SurveyJS中注册使用，步骤如下：

• 1. 编写自定义Svelte组件（例如CustomRankingItem.svelte），接收SurveyJS传递的数据源：

<script>
  export let item; // 接收SurveyJS的item数据
</script>

<div class="custom-rank-item">
  <h3>{item.text}</h3>
  <p>{item.description || ''}</p>
  <!-- 自定义交互逻辑，比如拖拽排序的UI -->
</div>

<style>
  .custom-rank-item {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 8px;
  }
</style>

• 2. 配置Svelte编译为Web Component：
     如果使用Vite，修改svelte.config.js：

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
  compilerOptions: {
    customElement: true,
    tag: 'custom-rank-item' // 定义Web Component的标签名
  }
};

• 3. 在SurveyJS中注册该Web Component：

import './CustomRankingItem.svelte'; // 导入编译后的组件

Survey.ComponentRegistry.add({
  name: 'custom-rank-item',
  component: 'custom-rank-item', // 对应Web Component标签名
  title: '自定义排名项',
  category: '自定义组件'
});

方案2：通过SurveyJS钩子手动渲染Svelte组件 #

无需编译为Web Component，直接利用Svelte客户端API在SurveyJS的渲染钩子中挂载组件：

• 1. 注册SurveyJS自定义Widget：

import CustomRankingItem from './CustomRankingItem.svelte';

Survey.CustomWidgetCollection.Instance.add({
  name: 'svelte-rank-item',
  isDefaultRender: false,
  htmlTemplate: '<div class="svelte-rank-container"></div>',
  afterRender: (widget) => {
    // 获取容器并渲染Svelte组件
    const container = widget.element.querySelector('.svelte-rank-container');
    new CustomRankingItem({
      target: container,
      props: {
        item: widget.data
      }
    });
  },
  willUnmount: (widget) => {
    // 可选：清理组件实例，避免内存泄漏
    const container = widget.element.querySelector('.svelte-rank-container');
    container.innerHTML = '';
  }
});

• 2. 在问卷配置中指定使用该自定义组件：

const surveyConfig = {
  elements: [
    {
      type: 'ranking',
      name: 'preferred-tools',
      choices: [
        { value: 'svelte', text: 'Svelte', description: '轻量前端框架' },
        { value: 'vue', text: 'Vue', description: '渐进式框架' }
      ],
      itemComponent: 'svelte-rank-item' // 指定自定义Widget
    }
  ]
};

关键注意事项 #

• 确保Svelte组件的props能正确接收SurveyJS传递的item数据，包括文本、状态等属性。
• 使用Web Component时，注意Svelte会自动将驼峰式props转换为短横线命名（例如itemText对应item-text）。
• 处理组件销毁逻辑，尤其是在问卷页面切换时，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Corrl