DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/component/form.vue

<template>
  <view>
    <l-title>输入框：</l-title>
    <view class="bg-white">
      <l-input title="标题" placeholder="请输入内容" left />
      <l-input title="右对齐" placeholder="文字右对齐版" left />
      <l-input title="禁用" placeholder="请输入内容(禁用)" disabled left />
      <l-input title="标题" placeholder="请输入内容(带后缀图标)" left>
        <l-icon slot="suffix" type="copy" color="red" />
      </l-input>
      <l-input title="标题" placeholder="请输入内容(带后缀按钮)" left>
        <l-button slot="suffix" color="green" shadow>按钮</l-button>
      </l-input>
      <l-input title="标题" placeholder="请输入内容(带后缀标签)" left>
        <l-tag slot="suffix" color="blue" capsule radius>
          <text slot="icon">中国大陆</text>
          +86
        </l-tag>
      </l-input>
      <l-input v-model="text" title="请输入" placeholder="双向绑定测试" />
      <view class="text-center">当前输入内容: {{ text }}</view>
    </view>
    <l-demo-description>
      输入框使用 l-input 标签；添加 title属性可以设置左侧的标题文字；添加 placeholder 属性可以设置无内容的占位文本；
      标签内的 slot="suffix" 插槽可以放置后缀按钮、标签等
    </l-demo-description>

    <l-title>选择器：</l-title>
    <view class="bg-white">
      <l-select v-model="select1" :range="['男生', '女生']" title="选择器" placeholder="请选择性别..." />
      <view class="text-center">当前选择: {{ select1 }}</view>

      <!-- #ifndef MP-ALIPAY -->
      <l-select
        v-model="select2"
        :range="[['安卓', 'iOS', 'WP'], ['QQ登录', '微信登录']]"
        title="双列选择器"
        multiple
      />
      <view class="text-center">当前选择: {{ select2.join('，') }}</view>

      <l-select
        v-model="select3"
        :range="[['红色', '绿色', '蓝色'], ['纯棉', '化纤', '混纺'], ['M', 'L', 'XL']]"
        title="三列选择器"
        multiple
      />
      <view class="text-center">当前选择: {{ select3.join('，') }}</view>
      <!-- #endif -->
    </view>
    <l-demo-description>
      选择器使用 l-select 标签；可选项请绑定为 range 属性，当前选定的值通过 v-model 绑定；
      <!-- #ifndef MP-ALIPAY -->
      如果是两列、三列选择器，还需要额外添加 multiple 属性；title 属性是标题文字； 注意多列选择器的 range
      是一个双层嵌套数组，而 v-model 是一个数组
      <!-- #endif -->
    </l-demo-description>

    <l-title>日期/时间选择：</l-title>
    <view class="bg-white">
      <l-date-picker v-model="datePicker" title="日期" placeholder="请选择日期..." />
      <view class="text-center">当前已选日期: {{ datePicker }}</view>

      <l-time-picker v-model="timePicker" title="时间" placeholder="请选择时间..." />
      <view class="text-center">当前已选时间: {{ timePicker }}</view>
    </view>
    <l-demo-description>
      日期选择器使用 l-date-picker 标签；时间选择器使用 l-time-picker 标签； 两者都可以使用 title、placeholder
      属性来设置标题、占位文字； 两者都有 start、end 属性来设置选择的起点和终点，注意是字符串格式
    </l-demo-description>

    <!-- #ifdef MP-WEIXIN -->
    <l-title>地区选择：</l-title>
    <view class="bg-white">
      <l-region-picker v-model="regionPicker" title="家乡" placeholder="请选择地区..." />
      <view class="text-center">当前已选地区: {{ regionPicker.join('，') }}</view>
    </view>
    <l-demo-description>地区选择器使用 l-region-picker 标签；当前仅微信小程序支持</l-demo-description>
    <!-- #endif -->

    <l-title>开关：</l-title>
    <view class="bg-white">
      <l-switch title="普通开关" />
      <!-- #ifndef MP-ALIPAY -->
      <l-switch title="自定义颜色" color="red" />
      <l-switch title="自定义图标" icon="sex" />
      <l-switch title="方形开关" radius />
      <!-- #endif -->
      <l-switch v-model="switchValue" title="双向绑定" />
      <view class="text-center">当前开关状态: {{ switchValue }}</view>
    </view>
    <l-demo-description>
      开关使用 l-switch 标签；添加 title 属性可以设置标题文本；
      <!-- #ifndef MP-ALIPAY -->
      添加 color 属性可以设置颜色； 添加 radius 属性将变成圆角方形开关；添加 icon="sex" 属性将变为性别选择开关
      <!-- #endif -->
    </l-demo-description>

    <l-title>单选框：</l-title>
    <view class="bg-white">
      <radio-group>
        <l-radio v-model="radioValue" title="单选框1" radioValue="1" />
        <l-radio v-model="radioValue" title="单选框2" radioValue="2" />
        <!-- #ifndef MP-ALIPAY -->
        <l-radio v-model="radioValue" title="点状单选框3" radioValue="3" point />
        <l-radio v-model="radioValue" title="自定义颜色单选框4" radioValue="4" color="blue" />
        <!-- #endif -->
        <view class="text-center">当前单选框状态: {{ radioValue }}</view>
      </radio-group>
    </view>
    <l-demo-description>
      单选框使用 l-radio 标签，通过 title 属性绑定标题文字，通过 radioValue 属性绑定值；
      同一组单选框，请绑定同一个变量作为它们的 v-model，因此无需使用 radio-group；
      <!-- #ifndef MP-ALIPAY -->
      使用 color 属性设置颜色；添加 point 属性将单选框转为点状风格
      <!-- #endif -->
    </l-demo-description>

    <l-title>复选框：</l-title>
    <view class="bg-white">
      <checkbox-group>
        <l-checkbox v-model="checkboxValue" title="复选框1" checkboxValue="A" />
        <l-checkbox v-model="checkboxValue" title="复选框2" checkboxValue="B" />
        <l-checkbox v-model="checkboxValue" title="圆形复选框3" checkboxValue="C" round />
        <!-- #ifndef MP-ALIPAY -->
        <l-checkbox v-model="checkboxValue" title="自定义颜色复选框3" checkboxValue="D" color="blue" />
        <!-- #endif -->
        <view class="text-center">当前复选框状态: [{{ checkboxValue.join(',') }}]</view>
      </checkbox-group>
    </view>
    <l-demo-description>
      复选框使用 l-checkbox 标签，它使用 checkboxValue 属性绑定选项的值； 请将同一组复选框绑定相同的变量作为
      v-model，无需使用 checkbox-group； 使用 title 属性来设置标题文本；添加 round 属性转为圆形复选框；
      <!-- #ifndef MP-ALIPAY -->
      使用 color 属性设置复选框颜色；
      <!-- #endif -->
    </l-demo-description>

    <l-title>图片上传：</l-title>
    <view class="bg-white">
      <l-upload v-model="imgList" number="3" />
      <view class="text-center">当前图片数量: {{ imgList.length }}</view>
    </view>
    <l-demo-description>图片上传使用 l-upload 标签；属性 number 表示图片张数上限</l-demo-description>

    <l-title>多行文本：</l-title>
    <view class="bg-white">
      <l-textarea v-model="textareaValue" placeholder="输入点什么..." />
      <view class="text-center">当前输入内容: {{ textareaValue }}</view>
    </view>
    <l-demo-description>多行文本使用 l-textarea 标签；使用 placeholder 属性来设置占位文本</l-demo-description>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      select1: '男生',
      select2: ['安卓', 'QQ登录'],
      select3: ['红色', '纯棉', 'M'],

      datePicker: null,
      timePicker: null,
      regionPicker: [],

      switchValue: false,

      radioValue: '1',
      checkboxValue: [],
      imgList: [],
      textareaValue: 'xxx'
    }
  }
}
</script>