使用方式

<link rel="stylesheet" href="/components/style/forms.css" type="text/css" />
<script defer src="/components/js/forms.js" type="text/javascript"></script>

<div class="st_form" id="form1" width="80">
  <div class="st_form_item is_required" prop="dialogFormName" validate="validateAccount">
    <label class="st_form_item_label">活动名称</label>
    <div class="st_form_item_content">
      <div class="st_input" st-model="dialogFormName">
        <input
          type="text"
          autocomplete="off"
          placeholder="请输入内容"
          size="small"
          class="st_input_inner"
        />
      </div>
    </div>
  </div>
  <div class="st_form_item" prop="dialogFormRegion">
    <label class="st_form_item_label">活动区域</label>
    <div class="st_form_item_content">
      <div class="st_input" st-model="dialogFormRegion">
        <input
          type="text"
          autocomplete="off"
          placeholder="请输入内容"
          size="small"
          class="st_input_inner"
        />
      </div>
    </div>
  </div>
  <div class="st_form_item" prop="dialogFormType">
    <label class="st_form_item_label">活动类型</label>
    <div class="st_form_item_content">
      <div class="st_select" st-model="dialogFormType">
        <div class="st_input st_input_suffix">
          <input
            type="text"
            autocomplete="off"
            readonly="readonly"
            placeholder="请选择"
            size="small"
            class="st_input_inner"
          />
          <span class="st_input_down"><i class="stIconFont icon-xiala-down"></i></span>
        </div>
        <div class="st_select_dropdown">
          <div class="st_select_dropdown_wrap">
            <ul class="st_select_dropdown_list">
              <li class="st_select_dropdown_item" value="1" label="选项一">选项一</li>
              <li class="st_select_dropdown_item" value="2" label="选项二">选项二</li>
              <li class="st_select_dropdown_item" value="3" label="选项三">选项三</li>
              <li class="st_select_dropdown_item" value="4" label="选项四">选项四</li>
              <li class="st_select_dropdown_item" value="5" label="选项五">选项五</li>
            </ul>
          </div>
          <div class="popper_arrow"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="st_form_item is_required" prop="dialogFormPerson">
    <label class="st_form_item_label">活动人员</label>
    <div class="st_form_item_content">
      <div class="st_select" type="multiple" st-model="dialogFormPerson">
        <div class="st_input st_input_suffix">
          <input
            type="text"
            autocomplete="off"
            readonly="readonly"
            placeholder="请选择"
            size="small"
            class="st_input_inner"
          />
          <span class="st_input_down"><i class="stIconFont icon-xiala-down"></i></span>
        </div>
        <div class="st_select_dropdown">
          <div class="st_select_dropdown_wrap">
            <ul class="st_select_dropdown_list">
              <li class="st_select_dropdown_item" value="1" label="选项一">选项一</li>
              <li class="st_select_dropdown_item" value="2" label="选项二">选项二</li>
              <li class="st_select_dropdown_item" value="3" label="选项三">选项三</li>
              <li class="st_select_dropdown_item" value="4" label="选项四">选项四</li>
              <li class="st_select_dropdown_item" value="5" label="选项五">选项五</li>
            </ul>
          </div>
          <div class="popper_arrow"></div>
        </div>
      </div>
    </div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
class	是否必填	string	is_required	-
validate	自定义校验方法	function	-	-
prop	校验参数名	string	-	-