label-select

label系列组件之一，遵循一致的样式、边距、宽度体验，用于构建统一的风格

一、场景和形态

构建页面的信息条，左侧是label、右侧是选项框。

现场演示

下面这行选项，是由axue-label-select组件渲染

演示代码如下：

<!--在vitepress中的.md文件中直接引入下面的代码-->
<div id="container"></div>
<script setup>
  import('axue').then(({showTip}) => {
    const componentName ='axue-label-select'
    const el = document.createElement(componentName);
    el.args = {
        labelText:"姓名：",
        isShowFieldRequired:true,   //显示字段必填，但不做逻辑校验
        options:[
            {
                key:"xxxx-name",
                value:"傲雪",
            },
            {
                key:"yyyy-name",
                value:"青松",
            }
        ]
    };
    document.getElementById('container')?.appendChild(el);
  });
</script>

二、使用方式

定义属性参数

let args={
    labelText:"姓名：",
    isShowFieldRequired:true,   //显示字段必填，但不做逻辑校验
    options:[
        {
            key:"xxxx-name",
            value:"傲雪",
        },
        {
            key:"yyyy-name",
            value:"青松",
        }
    ]
}

定义事件属性

function _change(e){
    console.log(e.detail)
}

使用组件

<axue-label-select .args=${args} @change=${_change}></axue-label-select>

属性项

内联属性	说明	类型	默认值
label	图标url	string	内置图标
isShowFieldRequired	显示字段必填，但不做逻辑校验	string	true
options	选项对象集	Object	{}
key	遵循data-key规范，挂载在option上	string	null
value	输入框的值，业务上必须要有的	string	""
disabled	是否禁用，一般用作选项标题	bool	false
@change	选项变化回调	function	null