组件.Form表单和控件

12003

使用Vuetify.js的表单组件, 了解更多Vuetify.js V2

表单组件

v-text-field：单行文本输入框

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">学生名</span>
        <v-text-field v-model="studentName" class="jh-v-input" dense single-line filled></v-text-field>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            studentName: '小明',
        }),
    })
</script>

v-form：表单校验

<jh-toast />
<jh-mask />
<jh-confirm-dialog />
<v-app>
    <v-form ref="createForm" lazy-validation>
        <v-row no-gutters>
            <span class="text-h7 font-weight-bold pa-4 pl-0">表单组件</span>
        </v-row>
        <v-divider class="jh-divider"></v-divider>
        <v-row>
            <v-col cols="12" sm="12" md="4">
                <span class="jh-input-label">学生名</span>
                <v-text-field v-model="studentName" :rules="validationRules.studentName" class="jh-v-input" dense single-line filled></v-text-field>
            </v-col>
        </v-row>
        <v-row class="justify-end mx-0 my-8 px-4">
            <v-btn color="success" small @click="doUiAction('createStudent')">保存</v-btn>
        </v-row>
    </v-form>
</v-app>
<script type="module">
  new Vue({
    el: '#app',
    template: '#app-template',
    vuetify: new Vuetify(),
    data: () => ({
      validationRules: {
        studentName: [
            v => !!v || '学生名字是必填项',
            v => (v && v.length >= 2) || '学生名字至少需要2个字符',
        ],
      },
      studentName: '张',
    }),
    async created() {
    },
    mounted() {
    },
    methods: {
      async doUiAction(uiActionId, uiActionData) {
        switch (uiActionId) {
          case 'createStudent':
            await this.prepareCreateValidate();
            await this.confirmCreateItemDialog();
            await this.doCreateStudent();
            break;
          default:
            console.error("[doUiAction] uiActionId not find", { uiActionId });
            break;
        }
      },
      async prepareCreateValidate() {
        if (await this.$refs.createForm.validate()) {
          return true;
        }
        throw new Error("请完善表单信息")
      },
      async confirmCreateItemDialog() {
        if (await window.confirmDialog({title: "新增", content: "确定新增吗？"}) === false) {
          throw new Error("[confirmCreateFormDialog] 否");
        }
      },
      async doCreateStudent() {
        window.vtoast.success("保存")
      },
    }
  })
</script>

v-textarea：多行文本输入框

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">评论</span>
        <v-textarea v-model="comment" rows="3" class="jh-v-input" dense single-line filled></v-textarea>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            comment: '评论内容...',
        }),
    })
</script>

v-select：下拉选择框

<v-app>
     <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">选择省</span>
        <v-select v-model="selectedState" :items="provinceList" class="jh-v-input" dense single-line filled></v-select>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            selectedState: '四川省',
            provinceList: ['四川省', '湖北省', '湖南省', '云南省', '山东省', '浙江省', '江苏省']
        }),
    })
</script>

v-autocomplete：自动完成输入框

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">水果搜索</span>
        <v-autocomplete v-model="selectedItem" :items="items" hint="开始打字..." persistent-hint class="jh-v-input" dense single-line filled></v-autocomplete>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            selectedItem: null,
            items: ['苹果', '香蕉', '橙子', '草莓', '葡萄'],
        }),
    })
</script>

v-checkbox：复选框

<v-app>
    <v-col cols="12" sm="12" md="4">
        <v-checkbox v-model="termsAccepted" label="同意条款" class="jh-v-input" dense single-line filled></v-checkbox>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            termsAccepted: false,
        }),
    })
</script>

v-radio-group：单选按钮组

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">选择季节</span>
        <v-radio-group v-model="favSeason" class="jh-v-input" dense single-line filled>
            <v-radio value="春季" label="春季" class="jh-v-input"/>
            <v-radio value="夏季" label="夏季" class="jh-v-input"/>
            <v-radio value="秋季" label="秋季" class="jh-v-input"/>
            <v-radio value="冬季" label="冬季" class="jh-v-input"/>
        </v-radio-group>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            favSeason: '夏季',
        }),
    })
</script>

v-switch：开关组件

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">开关</span>
        <v-switch v-model="switchEnable" class="jh-v-input" dense single-line filled></v-switch>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            switchEnable: true,
        }),
    })
</script>

v-slider：滑块

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">音量</span>
        <v-slider v-model="volume" max="100" thumb-label class="jh-v-input" dense single-line filled></v-slider>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            volume: 50,
        }),
    })
</script>

v-range-slider：范围滑块

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">价格范围</span>
        <v-range-slider v-model="rangeValues" min="0" max="100" class="jh-v-input" dense single-line filled></v-range-slider>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            rangeValues: [0, 100],
        }),
    })
</script>

v-rating：评分组件

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">评分</span>
        <v-rating v-model="rating" :readonly="false" color="yellow darken-3" background-color="grey darken-1" class="jh-v-input" dense single-line filled></v-rating>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            rating: 3,
        }),
    })
</script>

v-file-input：文件选择

<v-app>
    <v-col cols="12" sm="12" md="4">
        <span class="jh-input-label">上传文件</span>
        <v-file-input v-model="file" class="jh-v-input" dense filled single-line chips label="请选择文件" ></v-file-input>
    </v-col>
</v-app>
<script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data: () => ({
            file: null,
        }),
    })
</script>