1.2.7 • Published 1 year ago

@ams-team/field-tag v1.2.7

Weekly downloads
8
License
-
Repository
-
Last release
1 year ago

field-tag AMS标签

预览图

field-tag

使用

在AMS的resourc配置使用:

// 输入创建标签
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        'allow-create': true
    }
}

// 选择标签(接口数据)
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        placeholder: '请输入标签',
        action: 'https://www.easy-mock.com/mock/5a0023effbbb09615044cb82/tag',
        successCode: 200
    }
}

// 选择标签(静态数据)
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        placeholder: '请选择标签',
        options: [
            {
                'id': 2001,
                'name': '电商',
            },
            {
                'id': 2002,
                'name': '游戏',
            },
            {
                'id': 2003,
                'name': '效率',
            },
            {
                'id': 2004,
                'name': '资讯',
            },
            {
                'id': 2005,
                'name': '社区',
            }
        ]
    }
}

// 创建或选择标签(静态数据,也支持接口数据)
testTag: {
    type: 'tag',
    label: '标签',
    props: {
        'allow-create': true,
        options: ['唯品会', '天猫', '淘宝', '京东', '拼多多']
    }
}

接口数据结构:

// 输入创建标签
{
    "code": 200,
    "data": {
        "list":["aaaa.bbb.name", "aaaa.ccc.name"]
    },
    "msg": "success"
}

// 从接口选择已有标签添加模式
{
    "code": 200,
    "data": {
        "list":[
            {
                "id": 2001,
                "name": "aaaa.bbb.name",
                "subName": "分类一" //【可选】显示在下拉选择的次标题,如果没有subName,下拉次标题显示id
            }
            ...
        ]
    },
    "msg": "success"
}

其中上面每个标签包含idnamesubName三个字段,建议接口统一输出同名的字段。如果有旧接口无法兼容,可以通过props.idKeyprops.nameKeyprops.subNameKey来配置和接口对应的字段名。

传值

Array

// 自由输入添加标签模式
["aaaa.bbb.name", "aaaa.ccc.name"]

// 选择标签
[
    {
        "id":2001,
        "name":"aaaa.bbb.name",
        "subName": "分类一" // //【可选】显示在下拉选择的次标题,如果没有subName,下拉次标题显示id
    },
    ...
]

深入:get、set与view配置

如果业务的数据结构千奇百怪,上面配置无法实现,可以通过更自由的getsetview 来配置

testTag: {
    type: 'tag',
    label: '选择标签',
    props: {
        placeholder: '请输入标签',
        action: 'https://www.easy-mock.com/mock/5a0023effbbb09615044cb82/tag',
        successCode: 200
    },
    get(value) { // 编辑状态下有效(ctx 为 edit)
        console.log(value)
        return value.map(item => {
            return (item.name || item) + '-get';
        });
    },
    set(value) { // 编辑状态下有效(ctx 为 edit)
        console.log(value)
        return value.map(item => {
            return (item.name || item) + '-set';
        });
    },
    view(value) { // 显示状态下有效(ctx 为 view)
        console.log(value)
        return value.map(item => {
            return item.name + '-view';
        });
    }
},

配置

参数类型必填说明默认值
typestring文本类型固定值为tag
labelstring标签文本-
hiddenboolean是否隐藏fieldfalse
rulesarray校验规则,详见async-validator-
collapseLimitnumber展示状态下,最多显示的标签个数,超出隐藏-
onobject-事件绑定-
on.clickfunction点击 Tag 时触发的事件-
on.closefunction关闭 Tag 时触发的事件-
propsobject-补充属性-
props.actionstring标签数据接口地址(优先级高于options-
props.optionsarray标签静态数据接口地址-
props.methodstring接口请求方法,GET
props.successCodenumber接口请求成功code和resource的全局配置里的api successCode 一致
props.withCredentialsboolean接口请求是否携带cookie和resource的全局配置里的api withCredentials 一致
props.placeholderstring输入框的placeholder配置请输入...
props.buttonstring 或者 boolean如果是string类型,代表添加按钮的文案配置;如果是boolean类型,值为false代表隐藏该按钮+ 添加
props.sizestring尺寸,可取值:medium / small / mini-
props.closableboolean编辑状态下,标签是否可关闭false
props.templatestring标签显示的内容模板,语法和vue的模板语法类似,比如 {{ name }} - {{ subName }} - {{ id }} (其中namesubNameid是数据结构里的字段)默认只展示name字段
props'multiple-limit'number用户最多可以选择的项目数,为 0 则不限制0
props'allow-create'boolean输入文字来创建新的标签(注意:允许输入创建,数据结构统一使用元素为字符串的数组格式 ["aaaa.bbb.name", "aaaa.ccc.name"]false
props.idKeystring表示id这个字段keyid
props.nameKeystring表示name这个字段keyname
props.subNameKeystring表示subName这个字段keysubName

更多的props配置请查看:

1.2.7

1 year ago

1.2.3

3 years ago

1.2.2

3 years ago