spz-render 数据渲染

获取数据并渲染。

布局

container

何时使用

需要通过单个/多个接口获取数据并渲染。
需要通过脚本数据来渲染。

代码演示

基本用法

最基本用法，通过接口获取数据。

<spz-render layout="container" src="/api/customers/login_settings">
  <template>
    <div>
      <!-- ... -->
    </div>
  </template>
</spz-render>

通过脚本获取数据

<script id="render-data" type="application/json">
  {
    "name": "John von Neumann",
    "brief": "He was a Hungarian-American mathematician, physicist, computer scientist, engineer and polymath.",
    "imageSrc": "https://img.staticdj.com/5da228ddd934fd6ffecb3f95e985ee5a.gif"
  }
</script>

<spz-render layout="container" src="script:render-data">
  <template>
    <div class="introduction-wrapper">
      <spz-img layout="fixed" width="80" height="80" src="${data.imageSrc}" alt="${data.name}" object-fit="cover"></spz-img>
      <div class="introduction-content">
        <p>${data.name}</p>
        <div>${data.brief}</div>
      </div>
    </div>
  </template>
</spz-render>

属性

属性名	说明	类型	默认值	是否必需
src	获取数据的路径	string	-	是
manual	如果该属性存在，组件挂载时不立即渲染（或不立即请求数据）	-	-	-

src 数据来源方式

src属性值可以用 ; 分隔来配置多个数据来源，有三种获取数据的方式：

通过接口api获取数据
script:<scriptId>：通过 script 脚本获取数据
spz-script:<spzScriptId>：通过 spz-script 获取数据

方法

render

重新请求数据渲染。

参数名	说明	类型	是否必需
src	更新原src	string	否
redo	渲染前是否卸载上一次的内容	boolean	否

rerender

通过传递的新数据来渲染。

参数名	说明	类型	是否必需
data	可用来渲染的数据	Object \| Array	是
once	如果为`true`，元素渲染一次后，不再渲染，且会自动触发 `afterOnceFinish` 事件	boolean	否
redo	渲染前是否卸载上一次的内容	boolean	否

事件

finish

当渲染结束时该事件会自动触发。当使用了 rerender 方法带有 once 参数值为 true 时且当前不是首次渲染时，该事件不会被触发。

afterOnceFinish

当调用 rerender 方法带有 once 参数值为 true 且当前不是首次渲染时该事件会自动触发。