为什么ant-design-vue的select的dropdownRender不能正常显示?

cdn形式使用ant-design-vue,select的dropdownRender不能正常显示,github demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 with Ant Design Vue Custom Dropdown</title>
  <!-- 引入样式 -->

    <!-- 引入vue -->
    <!-- <script src="https://unpkg.com/vue"></script> -->
     <script src="./vue@3.4.37_vue.global.js"></script>

    <!-- 引入ant-design-vue -->
     <link rel="stylesheet" href="./lib/ant-vue@4.2.3/dist/reset.min.css"></link>
     <script  src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12dayjs.min.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12customParseFormat.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12weekday.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12localeData.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12weekOfYear.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12weekYear.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12advancedFormat.js"></script>
     <script src="./lib/ant-vue@4.2.3/dependence/dayjs/dayjs@1.11.12quarterOfYear.js"></script>
     <script src="./lib/ant-vue@4.2.3/dist/antd.js"></script>
     <script src="./lib/ant-vue@4.2.3/dist/antd-with-locales.min.js"></script>
     <script src="./lib/dayjs/locale/zh-cn.js"></script>
  <style>
    .my-custom-component {
      border: 1px solid #ccc;
      padding: 16px;
      margin: 16px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <a-select
      v-model:value="value"
      placeholder="custom dropdown render"
      style="width: 300px"
      :options="items.map(item => ({ value: item }))"
    >
      <template #dropdownRender="{ menuNode: menu }">
        <v-nodes :vnodes="menu" />
        <a-divider style="margin: 4px 0" />
        <a-space style="padding: 4px 8px">
          <a-input ref="inputRef" v-model:value="name" placeholder="Please enter item" />
          <a-button type="text" @click="addItem">
            Add item
          </a-button>
        </a-space>
      </template>
    </a-select>
  </div>

  <script>
    // 定义 VNodes 组件
    const VNodes = Vue.defineComponent({
      props: {
        vnodes: {
          type: Object,
          required: true,
        },
      },
      render() {
        return this.vnodes;
      },
    });

    // 创建 Vue 应用实例
    const app = Vue.createApp({
      components: {
        VNodes,
      },
      data() {
        return {
          items: ['jack', 'lucy'],
          value: null,
          name: '',
        };
      },
      methods: {
        addItem(e) {
          e.preventDefault();
          console.log('addItem');
          this.items.push(this.name || `New item ${this.items.length + 1}`);
          this.name = '';
          setTimeout(() => {
            this.$refs.inputRef.focus();
          }, 0);
        },
      },
    });

    // 挂载到 DOM 元素
    app.use(antd).mount('#app');
  </script>
</body>
</html>

运行截图:
image.png
官网给的demo是正常显示的,我的为什么不能正常显示?
image.png

vue提供的工具链,单页面形式进行开发,也可以正常显示
image.png

只不过单页面形式进行开发不适合我,我是在dotnet的cshtml页面进行开发的,所以需要使用cdn形式引入开发。

阅读 858
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏