代码节选自：yis-demo/src/pages/components/view/index.js

import { View, Page } from "@qnpm/yis/components";
import { registerPage, PageCore } from "@qnpm/yis";
import styles from "./main.css";

export default class Viewdemo extends PageCore {
    tapInner = () => {
        console.log('inner');
    }
    tapOuter = () => {
        console.log('outer');
    }
    render(){
        return (
            <Page>
                <View className={styles.outer} onTouchTap={this.tapOuter}>
                    <View className={styles.inner} onTouchTap={this.tapInner} ripple >
                        <span>嵌套父子组件</span>
                        <span>子组件使用 ripple 属性</span>
                    </View>
                    <View className={styles.inner} onTouchTap={this.tapInner} ripple rippleCenter={true} rippleSpread={2} >
                        <span>子组件使用 rippleCenter 属性 true</span>
                    </View>
                </View>
                <View className={styles.outer} onTouchTap={this.tapOuter} selfTargetOnly>
                    <View className={styles.inner} onTouchTap={this.tapInner} tag='ul'>
                        <li>父组件不处理子组件冒泡而来的事件</li>
                        <li>子组件使用 ul 元素渲染</li>
                    </View>
                </View>
                <View className={styles.outer} onTouchTap={this.tapOuter}>
                    <View className={styles.inner} onTouchTap={this.tapInner} stopPropagation activeClassName={styles.on}>
                        <span>子组件阻止冒泡</span>
                    </View>
                </View>
            </Page>
        )
    }
}

样式变量

    /* 激活状态背景色 */
    --view-active-background-color: var(--palette-grey-200);
    /* 激活状态文字颜色 */
    --view-active-color: var(--palette-cyan-600);

参数

参数名	类型	必选	默认值	描述
className	string	×	无	根节点类名
onTouchTap	function	×	无	tap 事件处理函数
tag	string	×	div	渲染元素名称 默认为 div
ripple	boolean	×	false	是否需要 ripple 效果
rippleSpread	boolean	×	1	相对于目标元素宽度的扩散倍数
rippleCenter	boolean	×	false	是否从目标元素中间扩散
selfTargetOnly	boolean	×	false	只在当前元素为 target 时触发事件
stopPropagation	boolean	×	false	阻止事件冒泡
activeClassName	string	×	yis-view-on	点击时高亮的类名