zoukankan      html  css  js  c++  java
  • 【前端技术分享】组件设计

    button按钮

    属性 描述
    autofocus autofocus 规定当页面加载时按钮应当自动地获得焦点。
    disabled disabled 规定应该禁用该按钮。
    form form_name 规定按钮属于一个或多个表单。
    formaction url 覆盖 form 元素的 action 属性。注释:该属性与 type=“submit” 配合使用。
    formenctype application/x-www-form-urlencoded; multipart/form-data; text/plain 覆盖 form 元素的 enctype 属性。注释:该属性与 type=“submit” 配合使用。
    formmethod get; post 覆盖 form 元素的 method 属性。注释:该属性与 type=“submit” 配合使用。
    formnovalidate formnovalidate 覆盖 form 元素的 novalidate 属性。注释:该属性与 type=“submit” 配合使用。
    formtarget _blank; _self; _parent; _top; framename 覆盖 form 元素的 target 属性。注释:该属性与 type=“submit” 配合使用。
    name button_name 规定按钮的名称。
    type button; reset; submit 规定按钮的类型。
    value text 规定按钮的初始值。可由脚本进行修改。

    场景

    对话框
    模态窗口
    表单
    卡片
    工具栏

    状态

    默认状态
    初始状态
    信息状态
    警告状态
    危险状态

    形态

    实心按钮
    文本按钮
    描边按钮
    图标按钮
    圆角按钮
    直角按钮

    尺寸

    small
    medium
    large

    操作性

    回车键点击
    鼠标点击
    触摸点击
    禁止点击

    事件

    click事件
    回车键keydown事件
    tap事件

    综合所述,建议暴露属性

    type:按钮状态
    size:按钮尺寸
    color:按钮颜色
    text:按钮内的文本
    icon:按钮内的图标
    htmlType:原生按钮支持的type属性
    attrs:其他的原生属性
    variant:按钮形态
    click:鼠标点击事件
    tap:触摸屏点击事件
    keydown:回车键按下事件

    input 输入框

    待更新。。。

  • 相关阅读:
    使用webpack + momentjs
    关于vue3的proxy代理的简单实现
    电脑网卡重置
    Cookie加密处理
    浅谈 JS 防抖和节流
    WebSocket 与 Socket.IO
    React中useState,useEffect的使用
    react中Context的使用
    React中匿名插槽与具名插槽的使用
    React中PureComponent的使用
  • 原文地址:https://www.cnblogs.com/izhaong/p/12154257.html
Copyright © 2011-2022 走看看