Использование библиотеки Vant и некоторые примечания о компоненте даты

внешний интерфейс Vue.js

Библиотека Vant действительно хороша для разработки проектов торгового центра, и вы не можете не влюбиться в нее. Библиотека Vant поддерживает загрузку по запросу и стили, разработанные для мобильных торговых центров, которые идеально подходят. Однако в реальной разработке я также столкнулся с некоторыми небольшими проблемами, и спустя долгое время я, наконец, решил их. Расскажем о процессе использования библиотеки Vant в vue и некоторых мерах предосторожности, а также о встречающихся ямах и решениях.

Сначала отправьте его на официальный сайт портала:Youzanyun.com/We UI/van T#…, с конкретным API можно ознакомиться и использовать самостоятельно.

Первый шаг, установка:

cnpm i vant -S

Второй шаг – введение компонентов:

Что касается того, как внедрять компоненты Vant, есть два способа: глобальное внедрение (крайне не рекомендуется) и внедрение по запросу.

Вот демонстрация того, как вводить по требованию, потому что официальный сайт немного сложен, и это может вызвать некоторые недоразумения для некоторых новых друзей (PS: я сидел на корточках в двух ямах, когда впервые начал контактировать, и я просто хотел плакать, без слез~). Просто скажите мне, как его использовать:

  • Чтобы облегчить нам внедрение компонентов по запросу, нам также необходимо установить здесь плагин.

cnpm i babel-plugin-import -D

  • После установки плагина вам также необходимо выполнить простую настройку плагинов в файле .babelrc.Полная часть плагинов прилагается здесь. Здесь мы вставляем массив импорта в массив плагинов, а остальное содержимое уже там.

"plugins": [    
    "transform-vue-jsx",     
    "transform-runtime",    
    ["import", {      
        "libraryName": "vant",      
        "libraryDirectory": "es",      
        "style": true    
    }]
]

  • После завершения настройки импортируйте нужные вам компоненты в main.js по мере необходимости. Например, компонент кнопки Vant представлен здесь:

import { Button } from 'vant'; // 在mian.js中通过import导入组件，多个组件直接在{，，，}加入即可
Vue.use(Button); //让vue加载该组件如果还需要用其他组件，可以这样写Vue.use(Button).use().user();

<van-button type="default">默认按钮</van-button> // 在template中使用组件
  • Вот момент, если это такой компонент, как Toast, его нужно только ввести в main.js:
import { Toast } from 'vant';

// 然后在你需要的页面直接这样使用就好
// 只要引入后，vant就会自动把Toast组件挂在vue的原型上Vue.prototype.$Toast = Toast;
this.$Toast('message');


Как видите, здесь используется компонент кнопки и обычный импорт. В Ванте больше компонентов с более богатым функционалом, подходящим для реальной разработки.Друзья, для использования обращайтесь к официальной документации. Прикреплен к официальному сайту портала документов API:Youzanyun.com/We UI/van T#…


Наконец, давайте поговорим о большой яме, возникшей при использовании компонента даты Ванта.

Официальный сайт api компонента даты Vant не дает демо об использовании функции события, в то время редактор случайно наступил на большую яму при ее использовании. В случае изменения или подтверждения параметры обратного вызова вообще не могут быть получены, то есть при нажатии ОК вы не можете вернуться к возвращенному времени выбора, и он всегда предлагает undefined или null. Ниже находится редакторошибкаСпособ написания, не наступи на яму:

<!--这是html部门-->
<van-datetime-picker      
    v-model="currentDate"      
    type="datetime"      
    @confirm="confirm()"      
    @change="change()" />

// 这是对应的方法
methods: {
    confirm(val) {
       console.log(val)
    },
    change(e) {
       console.log(e.getValues())
    }
}

На первый взгляд, он используется, как сказано в документе, но не только подтверждает, что не возвращает выбранную дату и время, но и не может использовать различные методы обратного вызова события изменения. Но если вы хотите напечатать 1, вы можете напечатать его снова, указав, что интерфейс воспользовался этим методом. Что происходит, почему выбранное время не выходит? Редактор почти задался вопросом, не было ли что-то не так с этим компонентом Vant!

Говоря о главном: позже редактор наконец нашел решение:

Оказывается, здесь есть проблема,@confirm="confirm()" @change="change()" 

Здесь есть лишняя пара скобок, правильный способ написать это

<!--这是html部分-->
<van-datetime-picker      
    v-model="currentDate"      
    type="datetime"      
    @confirm="confirm"      
    @change="change" 
/>

// 这是对应的方法
methods: {
    confirm(val) {
       console.log(val) // 打印出了时间
    },
    change(e) {
       console.log(e.getValues()) // 打印出了选中的时间，是个数组
    }
}

На данный момент проблема успешно решена! Надеюсь, это поможет вам, ребята


Категории