switch

一、形态和场景

类苹果设计风格的开关按钮。

演示UI效果

下面这个开关，是由axue-switch组件渲染

演示代码如下：

<!--在vitepress中的.md文件中直接引入下面的代码-->
<div id="container"></div>

<script setup>
    import { showTip } from 'axue'
	import { onMounted } from 'vue'
    //onMounted控制在DOM渲染完成之后在执行插入
    onMounted(() => {
      const componentName = 'axue-switch'
      const el = document.createElement(componentName)
      el.addEventListener('toggle-switch', (event) => {
        const switchNode = event.detail
        if (switchNode.checked) {
          showTip.info("开关已打开")
        } else {
          showTip.info("开关已关闭")
        }
      })
      document.getElementById('container')?.appendChild(el)
    })
</script>

更简单的使用

<!--由于已经在主题enhanApp做了全局导入和初始化，这里直接使用即可-->
<axue-switch></axue-switch>

二、使用方式

使用组件

<axue-switch @toggle-switch=${(switchNode)=>{_toggleSwitch(switchNode)}></axue-switch>

但是注意，虽然vue也有@声明事件监听的方式，但跟原生组件是两条线，vue默认不支持直接使用@来声明

处理事件回调

function _toggleSwitch(switchNode){
    if (switchNode.checked) {
      // 执行选中状态的操作
      console.log("开关已打开");
    } else {
      // 执行未选中状态的操作
      console.log("开关已关闭");
    }
}

事件监听器

内联属性	说明	类型	默认值
@toggle-switch	开关切换回调	function	null