@sanpjs/runtime/dist/ClientOnly.js

San Pro Runtime

"use strict";
/**
 * @file San Pro 基础组件类 ClientOnly
 * 支持：
 * 1. ssr渲染时显示占位placeholder
 * 2. 客户端渲染时显示内部组件
 * 3. 若需要反转显示，既ssr渲染时显示内部组件，客户端渲染时显示占位placeholder，则可传入reverse属性为true（默认false）
 * 占位符的使用:
 * 1. 传入placeholder属性，string类型：
 * <client-only placeholder="占位文字">
 *     <my-content></my-content>
 * </client-only>
 * 2. 传入slot 名为 placeholder：
 * <client-only>
 *     <div slot="placeholder">占位文字</div>
 *     <my-content></my-content>
 * </client-only>
 */
Object.defineProperty(exports, "__esModule", { value: true });
const san_1 = require("san");
class ClientOnly extends san_1.Component {
    static template = `
        <div>
            <slot s-if="show"></slot>
            <template s-else-if="placeholder">
                {{placeholder}}
            </template>
            <slot s-else name="placeholder"></slot>
        </div>`;
    initData() {
        return {
            reverse: false,
            show: false
        };
    }
    inited() {
        this.data.set('show', !!this.data.get('reverse'));
    }
    attached() {
        this.data.set('show', !this.data.get('show'));
    }
}
exports.default = ClientOnly;
//# sourceMappingURL=ClientOnly.js.map