基于vant-ui的vant-picker二次封装
发布日期:2021-05-14 08:28:41 浏览次数:19 分类:精选文章

本文共 3885 字,大约阅读时间需要 12 分钟。

Vant Picker ������������������������������

������������������������������������������������������������������������������Vant UI ������������������ ������ select ������������������������������������������ Field���Popup ��� Picker ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ Vant fzPicker ������������������������������������������������������������������

������Vant ���COMPONENT���������������

���������������������������������������������������VantPicker ������������������������������

������������������

������������������

  • van-field ������������������������������������������������������������ <input type="text"> ������������������������������ native ������������������������
  • van-popup ������������������������������������ v-model ��� truthy ���������������������������������������������
  • van-picker ���������������������������������������������������������
  • ���������������������
    • @click������������������������������������
    • @cancel���������������������������������
    • @confirm��������������������������������������������������� text ��� key���
  • ������������������������

    ���������������������������������������������������������������������������������������������������������������������������������������

    export default {
    dictionary: {
    idType: [
    { text: '���������', keyId: '0' },
    { text: '������', keyId: '2' },
    { text: '���������', keyId: '3' },
    { text: '���������������������������������', keyId: '5' },
    { text: '������', keyId: '10' }
    ]
    }
    }

    ������������������

    ������������������������������������������������VantPicker ������������������������

    ������������

  • ���������������������������������������������������������������������������������������������
  • ���������������
    • ������������������������������������������
    • ������������������������
    • ���������������������������������
    • ������������������ text ��� keyId
  • ���������������
    • ������������������������������
    • ������������������������������
    • ���������������������
    • ������������������������������������
  • ������������

    ������������������������������������������������

    ������������������

  • ���������������������
    • columns���������������������������������������������������
    • selectValue������������������������������������������������ text ���������
    • name������������������������������������������������
    1. ���������������
      • @getMessage������������������������ text ��� keyId ���������������������������
      1. ������������������������������
        • ������ watch ��� selectValue ��� result ������������������������������������������

        ������������������

        ������������

        ���������������������������������������������������������

        ������������

        import VantFieldSelect from '@/components/VantFieldSelect'
        import dictionary from '@/utils/dictionary'
        export default {
        name: 'ValidFormExample',
        components: {
        VantFieldSelect
        },
        data() {
        return {
        formData: {
        ������������: ''
        },
        idTypeColumn: dictionary.idType
        }
        },
        methods: {
        setSelectValue(name, value) {
        this.formData[name] = value
        },
        onSubmit(values) {
        console.log('Form submitted:', values)
        }
        }
        }

        ������

        ��������� VantPicker ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

    上一篇:Vue跨域解决方案
    下一篇:基于vant-ui的时间选择器二次封装

    发表评论

    最新留言

    留言是一种美德,欢迎回访!
    [***.207.175.100]2025年04月27日 23时38分13秒