# vant-ui > vue mobile UI components



vant-ui

vue mobile UI components

​

[Calendar.name]: Calendar,// computed name === van-calendar

<template>
  <div>
    <van-cell title="选择单个日期" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" />
  </div>
</template>

<script>
  import {
    Calendar,
    Cell,
    // Button,
  } from 'vant';

  const log = console.log;

  export default {
    name: "CanlendarComponent",
    components: {
      // Calendar,
      // Cell,
      [Calendar.name]: Calendar,// computed name === van-calendar
      [Cell.name]: Cell,
    },
    data() {
      return {
        date: '',
        show: false
      };
    },
    methods: {
      formatDate(date) {
        return `${date.getMonth() + 1}/${date.getDate()}`;
      },
      onConfirm(date) {
        this.show = false;
        this.date = this.formatDate(date);
      }
    },
    mounted() {
      log(`Calendar.name`, Calendar.name);
    },
  };
</script>



vant-ui_vant-ui

vant-ui_vue_02

component name

computed name

vant-ui_vue_03

taro async callback

vant-ui_UI_04


​​https://youzan.github.io/vant-weapp​​

​​https://github.com/youzan/vant-weapp​​


xgqfrms