打印/下载
使用
案例

Button 按钮

import wmButton from '@/components/form/button'
<wm-button type="primary" :disabled="false">确定</wm-button>
  • type: (String) //类型: primary、info、warning、danger
  • size: (String) //尺寸: default、medium、mini
  • effect: (String) //样式: plain、dark
  • disabled: (Boolean) //是否禁用

Input 输入框

import wmInput from '@/components/form/input'
<wm-input :value="form.name" @update:value="form.name=$event" maxlength="8" placeholder="填写姓名" />
  • value: (String) //值
  • type: (String) //类型: input属性
  • maxlength: (String) //最大字符: 默认
  • placeholder: (String) //提示: 无
  • width: (String) //宽度: '100%'
  • height: (String) //高度: '40px'
  • lineHeight: (String) //行高: '20px'
  • padding: (String) //间距: '10px 16px'
  • align: (String) //文本对齐方式: 'left'
  • update:value (Event) //更新值

Radio 单选框

import wmRadio from '@/components/form/radio'
<wm-radio :data="gender" :value="form.gender" @update:value="form.gender=$event"></wm-radio>
  • data: (String) //数据: [{name:'男',val:'男'},{name:'女',val:'女'}]
  • value: (String) //默认值: val

Checkbox 多选框

import wmCheckbox from '@/components/form/checkbox'
<wm-checkbox value="1" label="名称" :checked="true"></wm-checkbox>
  • value: (String) //值
  • label: (String) //名称
  • checked: (Boolean) //是否选中

Data 期日选择器

import wmDate from '@/components/form/date'
<wm-date :value="form.birthday" @update:value="form.birthday=$event"></wm-date>
  • value: (String) //值
  • update:value: (Event) //更新值

Title 标题栏

import wmFormTitle from '@/components/form/title'
<wm-form-title fontSize="15px">标题名称</wm-form-title>
  • fontSize: (String) //字体大小

Item 表单列

import wmFormItem from '@/components/form/item'
<wm-form-item label="昵称"></wm-form-item>
  • label: (String) //名称
  • type: (String) //类型: label、botton

Form 表单

import wmForm from '@/components/form/form'
<wm-form></wm-form>

Form 表单

import wmMain from '@/components/main'
import wmForm from '@/components/form'
import wmFormItem from '@/components/form/item'
import wmInput from '@/components/form/input'
import wmRadio from '@/components/form/radio'
import wmDate from '@/components/form/date'
import wmButton from '@/components/form/button'
import wmImg from '@/components/img'
import wmImgUpload from '@/components/img/upload'

export default {
  components: {wmMain,wmForm,wmFormItem,wmInput,wmRadio,wmDate,wmButton,wmImg,wmImgUpload},
  data(){
    return {
      form: {img:'',nickname:'',name:'',gender:'男',birthday:'',position:''},
      gender: [{name:'男',val:'男'},{name:'女',val:'女'}],
      upload: {
        url:'Userinfo/upImg',
        param:{token:Storage.getItem('token')}
      },
    }
  },
}

Html

<template>
  <wm-main>
    <wm-form class="max_width">
      <wm-form-item label="头像">
        <wm-img-upload :url="upload.url" :param="upload.param" @upload="upImg">
          <wm-img width="80px" height="80px" radius="50%" :url="form.img"></wm-img>
        </wm-img-upload>
      </wm-form-item>
      <wm-form-item label="昵称">
        <wm-input :value="form.nickname" @update:value="form.nickname=$event" maxlength="12" placeholder="用户昵称" />
      </wm-form-item>
      <wm-form-item label="姓名">
        <wm-input :value="form.name" @update:value="form.name=$event" maxlength="8" placeholder="填写姓名" />
      </wm-form-item>
      <wm-form-item label="性别">
        <wm-radio :data="gender" :value="form.gender" @update:value="form.gender=$event"></wm-radio>
      </wm-form-item>
      <wm-form-item label="生日">
        <wm-date :value="form.birthday" @update:value="form.birthday=$event"></wm-date>
      </wm-form-item>
      <wm-form-item label="职务">
        <wm-input :value="form.position" @update:value="form.position=$event" maxlength="8" placeholder="职务、职称" />
      </wm-form-item>
      <wm-form-item type="botton">
        <wm-button @click="onSubmit()">保存设置</wm-button>
      </wm-form-item>
    </wm-form>
  </wm-main>
</template>

<style scoped>
.max_width{max-width: 400px;}
</style>
{{copy}}