• antd-design-vue ui框架基本使用


    antd-design-vue 部分组建参考文档

     1.组件
     1.1 radio 赋值 取值 传值 校验
     1.2 checkbox 赋值 取值 传值 校验
     1.3 select 赋值 取值 传值 校验
     1.4 日期组件 赋值 取值 传值 默认值 格式 
     1.5  组件必填标志
     1.6 图片上传组件 ,格式限制 大小限制 查看大图 多图上传 多图展示 图片组件增删改查
     1.7 附件上传组件 
     1.8 查询区域组件
     1.9 组件与组件文案的排列(表单区,查询区等等)
     1.10 提示组件
     1.11 弹框组件以及如何配置(例如弹出位置 大小 传参 回调 等等)
    

    1. radio

    基本使用

    <a-radio value="apple" checked defaultChecked >Apple</a-radio>
    

    value 选中参数值

    checked 是否选中

    defaultChecked 是否默认选中

    通过配合 a-radio-group 组建获取和赋值

    <a-radio-group :defaultValue="fdata" name="fruits" @change="userChange" value="currentValue">
    ...
    </a-radio-group>
    

    a-radio-group 的change事件获取event事件
    e.target

    { 
        prefixCls: "ant-radio"
        name: "fruits"
        type: "radio"
        defaultChecked: false
        checked: true
        disabled: false
        autoFocus: false
        value: "orange"
    }
    

    如果a-radio-group的子元素是a-radio-button
    可以设置 buttonStylesize 属性

    2.checkbox

    基本使用

    <a-checkbox @change="userChange">checkbox</a-checkbox>
    

    checkbox 通过change属性获取event事件

    {
        prefixCls: "ant-checkbox"
        type: "checkbox"
        defaultChecked: false
        autoFocus: false
        checked: true
    }
    

    通过checked值判断是否选中

    defaultChecked 初始状态

    disabled 选中失效

    change回调函数

    配合 a-checkbox-group 进行使用时,进行一组选框渲染

    options 选框数组

    Array<{ label: string value: string disabled?: boolean, onChange?: function }>

    onChange事件会返回数组中 选中的元素的value值数组,直接返回的是value值组成的数组,按选中顺序

    3.select

    基本使用

    <a-select style=" 120px" defaultValue="orange" @change="handleChange">
        <a-select-option v-for="f in fruits" :value="f">{{f}}</a-select-option>
    </a-select>
    

    options 用来传入select下拉的数据,数据以数组形式传入,数组结构,当传入的数据过大,要进行截取渲染,不然会卡顿

    array<{value, label, [disabled, key, title]}> //必须存在value和label字段

    其中组建的宽度必须要设定,不然组建不能被撑开

    defaultValue 组建显示的默认值

    onChange 组建操作回调函数, 返回操作选择的value,当labelInValue为true时,同时返回节点文本信息

    { key: string, value: string }

    a-select-option 组建的子组建,表示子选项

    mode 设置select选择模式,可选值 'default' | 'multiple' | 'tags' | 'combobox'

    disabled 是否禁用

    dropdownClassName 下拉菜单的类名,方便自定义下拉菜单

    open 是否展开下拉菜单

    defaultOpen 是否默认展开下拉菜单

    labelInValue boolean 获取节点文本信息,必要情况下需要取得的数据,需注意

    4.DatePicker

    基本使用

    <a-date-picker></a-date-picker>
    

    onChange 操作回调函数,返回一个moment对象和日期字符串 返回‘2019-05-06’

    function(date: moment, dateString: string)

    Moment {
        _isAMomentObject: true
        _isUTC: false
        _pf: Object
        _locale: Locale
        _d: Mon May 06 2019 13:52:26 GMT+0800 (中国标准时间)
        _isValid: true
    }
    2019-05-06" 
    

    disabled 禁用选择

    月份选择

    <a-month-picker @change="onChange" placeholder="Select month" />
    

    onChange 回调函数 返回string 例2019-05

    日期范围选择

    <a-range-picker @change="onChange" />
    

    回调函数 返回数组 ["2019-05-18", "2019-05-21"]

    周范围选择

    <a-week-picker @change="onChange" placeholder="Select week" />
    

    回调函数 返回数组 2019-20周

    placeholder 输入框提示的文字

    suffixIcon 选择框后缀图标 例<a-icon slot="suffixIcon" type="smile" />

    defaultValue 用户初始化选择器,配合moment.js 一起使用, 默认是YYYY-MM-DD

    format 用于格式化前端显示,配合moment.js一起使用

    showtime 日期选择器和周选择器显示出时间选择按钮

    size 选择器大小,默认default

    DatePicker

    disabledTime 返回一个moment对象来阻止选择

    disabledDate(e) {
       console.log(e);
       return e && e > moment().endOf("day");
    }
    

    showToday 增加选择今天按钮

    图片上传

    基本使用

    <a-upload></a-upload>
    

    multiple 多文件上传

    name 文件类型

    action 上传地址

    name 上传字段名称

    headers 请求头部,加密参数

    directory 上传文件夹

    beforeUpload 上传之前的钩子,返回Promise对象, 通过在钩子函数里进行图片大小筛选, 图片尺寸限制

    (file, fileList) => boolean | Promise

    uid: "vc-upload-1557388351914-40"
    lastModified: 1544012461171
    lastModifiedDate: Wed Dec 05 2018 20:21:01 GMT+0800 (中国标准时间)
    name: "lance-asper-346206-unsplash.jpg"
    size: 2573755
    type: "image/jpeg"
    percent: 12.094049635580973
    originFileObj: File
    status: "removed"
    

    preview 预览回调函数,listType为picture-card时有效果,通过thumburl赋值img进行预览

    uid: "vc-upload-1557388351914-68"
    lastModified: 1557386813743
    lastModifiedDate: Thu May 09 2019 15:26:53 GMT+0800 (中国标准时间)
    name: "aa7904066853ecb2!400x400_big.jpg"
    size: 20496
    type: "image/jpeg"
    percent: 100
    originFileObj: File
    status: "done"
    thumbUrl: ...
    

    withCredentials boolean 请求带cookie

    remove 移除回调

    弹窗Modal

    基本使用

    <a-modal
        title="title"
        :confirmLoading="confirmLoading"
        :visible="modal1_Visiable"
        @ok="ok_handle_1"
        @cancel="cancelHandle1"
        :afterClose="afterClose"
    >
        <p>ddd</p>
    </a-modal>
    

    title string 弹窗标题

    afterClose 弹窗完全关闭后的回调

    cancelText 取消文本文字

    closable 是否显示右上角关闭按钮

    getContainer 指定挂载html节点

    mask 是否显示遮罩

    okText 按钮确定文字

    okType 确认按钮类型

    destoryOnClose 关闭时销毁弹窗里的子元素

    visible 弹窗是否可见

    zIndex 弹窗层级

    ok function 弹窗确认回调

    cancel function 弹窗取消回调

    通知提醒Notification

    Notification 挂载在全局对象上,通过函数内调用

    this.$notification.open({
        key,
        message: 'Notification Title',
        description: 'description.',
    });
    

    description string|vNode 描述 可以是组件

    message string|vNode 描述 可以是组件

    placement string 4个位置可选 topLeft topRight bottomLeft bottomRight

    icon 自定义图标

    onClose 关闭通知时的回调函数

    onClick 点击通知时的回调函数

    key 当前通知的唯一标示

    duration 默认4.5秒关闭,设置为null为不关闭

    主要方法:

    success

    error

    info

    warning

    warn

    open

    close

    destory

    config参数

    btn vNode|function(h)

    class 自定义ClassName

    descrition string|vNode

    duration number

    icon vNode|function

    key string

    message string|vNode

    placement string topLeft topRight bottomLeft bottomRight

    style 自定义样式

    onClose 自定义关闭按钮

    onClick 点击通知时触发回调函数

    MessageBox

    使用方法和api和notification大同小异

    Breadcrumb

    基本使用

    <a-breadcrumb separator="##">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>
            <a href>Application Center</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
            <a href>Application List</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
    

    separator 用作自定义分隔符

    itemRender 自定义链接函数,配合vue-Router一起使用

    routes 路由参数

    Form 表单

    基本使用

    <a-form>
        <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" label="Note">
            ...
        </a-form-item>
    </a-from>
    

    a-form api

    layout 布局 horizontal | vertical | inline

    submit 提交回调函数

    在beforeCreated生命周期里注册表单

    this.form = this.$form.createForm(this, options)
    

    以便后续在函数中进行调用

    this.form api

    getFieldsValue(string[]) 获取表单注册组件的输入值

    getFieldValue(string) 获取单个控件的输入值

    isFieldsTouched 判断任意控件是否经历过数据收集

    resetFields(string[]) 重置控件的值

    setFields({ [filedName]: { value: any, errors: [Error] }}) 设置控件和错误状态

    setFieldsValue({fieldName: value}) 设置某一控件的值

    validateFields([fieldNames: string[]], [options: object], callback: Function(errors)) 校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件

    validateFieldsAndScroll 函数校验,不通过则滚动到不通过菜单

    CAUTION!!!

    经过 getFieldDecorator或v-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

    你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。

    你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。

    你不应该用 v-model,可以使用 this.form.setFieldsValue 来动态改变表单值。

    options参数

    {
        intialValue: string // 设置初始值
        preserve: boolean // 即便字段不再使用,也保留该字段的值
        trigger: 'change' // 收集子节点的值的时机
        validateFirst: boolean //当某一规则校验不通过时,是否停止剩下的规则的校验
        validateTrigger: 'change' // 校验子节点值的时机
        valuePropName: string // 子节点的值的属性,如 Switch 的是 'checked'
        rules: object[]
    }
    

    a-form-item

    label input对应的名称

    label-col label对应的宽度

    wrapper-col input输入框对应的宽度

    validateStatus 验证状态 可选 'success', 'warning', 'error', 'validating'

    help 输入栏的验证提示

    has-feedback 输入框反馈提示

    extra string|slot 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。

    required boolean 是否必填,如不设置,则会根据校验规则自动生成

    colon boolean 配合 label 属性使用,表示是否显示 label 后面的冒号

    a-input

    placeholder 输入框填充

    v-decorator 输入框对应的验证规则



    作者:rub1cky

  • 相关阅读:
    Network (poj1144)
    C. Hongcow Builds A Nation
    ZYB loves Xor I(hud5269)
    D. Chloe and pleasant prizes
    Game(hdu5218)
    约瑟夫环的递推方法
    Misaki's Kiss again(hdu5175)
    Exploration(hdu5222)
    B. Arpa's weak amphitheater and Mehrdad's valuable Hoses
    C. Arpa's loud Owf and Mehrdad's evil plan
  • 原文地址:https://www.cnblogs.com/zs521/p/14470079.html
Copyright © 2020-2023  润新知