前言：

        在很多时候，我们使用日期组件的时候，不希望每次都是点击弹出日期弹框，而是，点击日期弹框直接能展示在界面上，在这里我们介绍下 使用 acro 来更加轻松的实现他的效果。

实现效果：

实现步骤：

1、安装插件

npm install --save-dev @arco-design/web-vue

2、配置框架

// 全局 main.ts
import "@arco-design/web-vue/dist/arco.css";
import ArcoVue from '@arco-design/web-vue';  

const app = createApp(App);
app.use(ArcoVue);

// 按需引入 
1、main.ts
import "@arco-design/web-vue/dist/arco.css";

2、vite.config.ts  
unplugin-auto-import/vite   unplugin-vue-components/vite
...  安装完配置下
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ArcoResolver()],
    }),
    Components({
      resolvers: [
        ArcoResolver({
          sideEffect: true
        })
      ]
    })
  ]
});
...  完成


3、按需的弹框还需要单独引入
import { Message } from "@arco-design/web-vue";
Message.warning()

3、具体代码实现，

注意:  如果不带时间可以用@change ,但是显示时分秒以后不能用 @change方法，必须用@select

<a-range-picker
      class="customPicker"
      v-else-if="state.type == 'time'"
      :value-format="'YYYY-MM-DD HH:mm'"
      showTime
      v-model="state.timeValue"
      hide-trigger
      @select="onChange"
    />

官方地址：

Arco Design Vuehttps://arco.design/vue/component/date-picker