How to use san - 10 common examples

<div class="${cx.getPartClassName('sub-title')} {{subTitleClass}}">
                    {{title}}
                </div>
            
        
    `,

    computed: {
        styleClass() {
            return cx(this).build();
        }
    },

    dataTypes: {
        title: DataTypes.string,
        subTitle: DataTypes.string,
        titleClass: DataTypes.string,
        subTitleClass: DataTypes.string
    },

    initData() {
        return {
            title: '', // 标题
            subTitle: '', // 副标题
            titleClass: '', // 标题样式
            subTitleClass: '' // 副标题样式
        };
    }
});

/* eslint-disable */
const template = `<div class="{{mainClass}}">
    <ul>
        <li class="{{item | itemClass(value)}}">
          <div class="${cx2('item-hover')}">{{item.tip}}<br></div>
          <div class="arrow-down"><i></i></div>
          {{item.text}}
        </li>
    </ul>
</div>`;
/* eslint-enable */

const RadioSelect = defineComponent({
    template,
    computed: {
        mainClass() {
            return cx.mainClass(this);
        }
    },
    filters: {
        itemClass(item, value) {
            const klass = [cx2('block')];

            if (item.disabled) {
                klass.push(cx2('disabled'));
            }

            if (item.value === value) {
                klass.push(cx2('selected'));

/**
 * @file Santd trigger popup file
 * @author mayihui@baidu.com
 **/

import san, {DataTypes} from 'san';
import Animate from '../../core/util/animate';
import PopupInner from './popupInner';

export default san.defineComponent({
    dataTypes: {
        visible: DataTypes.bool,
        getClassNameFromAlign: DataTypes.func,
        align: DataTypes.object,
        destroyPopupOnHide: DataTypes.bool,
        prefixCls: DataTypes.string,
        point: DataTypes.object
    },
    inited() {
        const destroyPopupOnHide = this.data.get('destroyPopupOnHide');
        this.data.set('destroy', true);
        this.watch('visible', val => {
            if (!val) {
                this.data.set('currentAlignClassName', '');
                // 这里先简单的设置一个timeout来保证动画结束后且destroyPopupOnHide为true时删除popup子节点
                window.setTimeout(() => {
                    this.data.set('destroy', !destroyPopupOnHide);
                }, 500);
            }
            else {

min: 0, // 最小值
            step: 1, // 最小步数
            value: 0, // 当前值

            // 内部状态数据
            dragRunning: false,
            dragging: false, // 正在拖拽
            active: 0, // 是否激活
            focus: 0, // 是否focus
            hover: 0 // 是否hover
        };
    },

    dataTypes: {
        max: DataTypes.oneOfType([DataTypes.number, DataTypes.string]), // 最大值
        min: DataTypes.oneOfType([DataTypes.number, DataTypes.string]), // 最小值
        step: DataTypes.oneOfType([DataTypes.number, DataTypes.string]), // 最小步数
        value: DataTypes.oneOfType([DataTypes.number, DataTypes.string]) // 当前值
    },

    computed: {
        percent() {
            let min = this.data.get('min');
            let max = this.data.get('max');
            let value = this.data.get('value');
            let range = max - min;
            let percentNum = range > 0
                ? (value - min) / range * 100
                : 0;

            return percentNum > 100
                ? 100

max: 100, // 最大值
            min: 0, // 最小值
            step: 1, // 最小步数
            value: 0, // 当前值

            // 内部状态数据
            dragRunning: false,
            dragging: false, // 正在拖拽
            active: 0, // 是否激活
            focus: 0, // 是否focus
            hover: 0 // 是否hover
        };
    },

    dataTypes: {
        max: DataTypes.oneOfType([DataTypes.number, DataTypes.string]), // 最大值
        min: DataTypes.oneOfType([DataTypes.number, DataTypes.string]), // 最小值
        step: DataTypes.oneOfType([DataTypes.number, DataTypes.string]), // 最小步数
        value: DataTypes.oneOfType([DataTypes.number, DataTypes.string]) // 当前值
    },

    computed: {
        percent() {
            let min = this.data.get('min');
            let max = this.data.get('max');
            let value = this.data.get('value');
            let range = max - min;
            let percentNum = range > 0
                ? (value - min) / range * 100
                : 0;

            return percentNum > 100

function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
    const points = align.points;
    for (const placement in builtinPlacements) {
        if (builtinPlacements.hasOwnProperty(placement)) {
            if (isPointsEq(builtinPlacements[placement].points, points, isAlignPoint)) {
                return `${prefixCls}-placement-${placement}`;
            }
        }
    }
    return '';
}

export default san.defineComponent({
    dataTypes: {
        action: DataTypes.oneOfType([DataTypes.string, DataTypes.array]),
        showAction: DataTypes.array,
        hideAction: DataTypes.array,
        getPopupClassNameFromAlign: DataTypes.func,
        popup: DataTypes.func, // 必须是san组件
        popupStyle: DataTypes.oneOfType([DataTypes.string, DataTypes.object]),
        prefixCls: DataTypes.string,
        popupClassName: DataTypes.string,
        className: DataTypes.string,
        popupPlacement: DataTypes.string,
        builtinPlacements: DataTypes.object,
        popupTransitionName: DataTypes.oneOfType([DataTypes.string, DataTypes.object]),
        popupAnimation: DataTypes.object,
        mouseEnterDelay: DataTypes.number,
        mouseLeaveDelay: DataTypes.number,
        zIndex: DataTypes.number,
        focusDelay: DataTypes.number,
        blurDelay: DataTypes.number,

*/
        disabled: DataTypes.bool,

        /**
         * MultiPicker 组件的数据源，不一定是完整的，可以通过 loader 逐步填充
         * <pre><code>{
         *   text: string,
         *   value: any,
         *   disabled?: bool, // 是否禁止选择当前项
         *   expandable?: bool, // 如果是 true，说明可以继续展开
         *   children?: any[] // 如果可以展开，那么子节点的内容（可以是 loader 动态返回的）
         * }
         * </code></pre>
         * @default []
         */
        datasource: DataTypes.array,

        /**
         * 如果需要异步的加载数据，那么就设置这个参数<br>
         * <code>function(values: any[]): Promise.&lt;DatasourceItem[], Error&gt;</code>
         */
        loader: DataTypes.func,

        /**
         * 浮层的宽度，例如 'auto', '100px', '100%', 300
         *
         * @default 'auto'
         */
        layerWidth: DataTypes.any
    },
    computed: {
        // datasource 是树形结构

tipPosition: 's', // 'n', 'e', 's', 'w'
            text: null
        };
    },
    dataTypes: {
        /**
         * Tip的文案
         * @default 复制到剪贴板
         */
        ariaLabel: DataTypes.string,

        /**
         * Tip展示的位置
         * @default s
         */
        tipPosition: DataTypes.oneOf(['n', 'e', 's', 'w']),

        /**
         * 需要复制的内容
         */
        text: DataTypes.string.isRequired
    },
    detached() {
        this.client.destroy();
    },
    attached() {
        this.client = new XClipboard(this.el, {
            action: () => 'copy',                   // eslint-disable-line
            text: () => this.data.get('text')       // eslint-disable-line
        });
        this.client.on('beforecopy', () => this.fire('beforecopy'));
        this.client.on('success', () => {

/**
* @file menuItemGroup component
* @author fuqiangqiang@baidu.com
*/

import san, {DataTypes} from 'san';
import {classCreator} from '../core/util';
const prefixCls = classCreator('menu')();

export default san.defineComponent({
    dataTypes: {
        title: DataTypes.any
    },

    computed: {
        // 因为menu有其他组件调用传入prefixCls，所以这里需要重新设置menu prefixCls
        groupPrefixCls() {
            const rootPrefixCls = this.data.get('prefixCls');

            return (rootPrefixCls ? rootPrefixCls : prefixCls) + '-item-group';
        }
    },

    initData() {
        return {
            inlineIndent: 24
        };
    },

* 是否完全展开所有节点，默认只展开根节点
         *
         * @default false
         */
        expandAll: DataTypes.bool,
        /**
         * 是否支持多选
         *
         * @default false
         */
        multi: DataTypes.bool,
        /**
         * 如果multi等于true，表示选中的节点集合
         * 如果multi等于false，则表示最近点击的叶子节点
         */
        value: DataTypes.any,
        /**
         * 是否支持编辑（增删改）
         *
         * @default false
         */
        edit: DataTypes.bool
    },
    deleteNode(node) {
        const datasource = this.data.get('datasource');
        if (node.level === 0) {
            // 整个树都删掉
            this.data.set('datasource', {});
        }
        else {
            let parentNodeKey = getParentKeyByNode(datasource, node);
            const tempNode = this.data.get(`${parentNodeKey}`);