vue3+varlet实现material风格表单提交效果代码-html代码-BFW代码库

vue3+varlet实现material风格表单提交效果代码

代码语言：html

代码描述：vue3+varlet实现material风格表单提交效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

</head>

<body>
    <div id="app">

    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/varlet.js"></script>
    <script type="template" id="tempform">
<var-form ref="form" :disabled="disabled" :readonly="readonly">
  <var-input
    placeholder="请输入用户名"
    :rules="[v => !!v || '用户名不能为空']"
    v-model="formData.username"
  />
  <var-input
    type="password"
    placeholder="请输入密码"
    :rules="[v => !!v || '密码不能为空']"
    v-model="formData.password"
  />
  <var-select
    placeholder="请选择部门"
    :rules="[v => !!v || '必须选一个部门']"
    v-model="formData.department"
  >
    <var-option label="吃饭部"  />
    <var-option label="睡觉部"  />
    <var-option label="打游戏部" />
  </var-select>
  <var-select
    multiple
    placeholder="请选择组织"
    :rules="[v => v.length >= 1 || '至少选择一个组织']"
    v-model="formData.group"
  >
    <var-option label="吃饭组"  />
    <var-option label="睡觉组"  />
    <var-option label="打游戏组" />
  </var-select>
  <var-radio-group
    :rules="[v => !!v || '必须选择一个性别']"
    v-model="formData.gender"
  >
    <var-radio :checked-value="1">男</var-radio>
    <var-radio :checked-value="2">女</var-radio>
  </var-radio-group>
  <var-checkbox-group
    :rules="[v => v.length > 0 || '至少选择一个爱好']"
    v-model="formData.like"
  >
    <var-checkbox :checked-value="1">吃饭</var-checkbox>
.........完整代码请登录后点击上方下载按钮下载查看