Url

概述

Url网址输入组件，继承自Input，底层input type固定为url，默认显示globe前缀图标，用于输入网站地址。配合Input的前后缀能力，可以快速实现协议选择与打开方式切换。

示例

声明一个网址字段只需要指定widget: 'url'：

const form = document.querySelector('#form');
form.state = {
    homepage: configurable('', {
        label: '官网地址',
        widget: 'url',
        placeholder: '请输入网址',
    }),
};

loading

指南

前后缀

prefix提供协议候选下拉（单选项时显示为按钮），suffix提供打开方式等附加取值。所选前后缀会成为状态值的一部分，在toState/toInput时自动双向拼接与剥离：

form.state = {
    homepage: configurable('http://www.voerkai18n.com', {
        label: '官网',
        widget: 'url',
        filled: true,
        prefix: ['http://', 'https://'], 
        suffix: [ 
            { label: '在新窗口打开', value: '?_blank' }, 
            { label: '在当前窗口打开', value: '?_self' }, 
            '-', // 分割线
            { label: '空白', value: '' }, 
        ], 
    }),
};

属性

继承Input全部属性，无自有属性。

注意事项

• type=url的原生校验要求输入包含协议（如http://），只输入www.xxx.com不会通过；实际业务中常配合prefix自动补协议或用validate放宽校验。
• prefix/suffix是值的一部分：配置后状态值会自动包含所选前后缀，见Input。
• 完整属性见Input。