tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
16.02k stars 1.67k forks source link

Modal 加了draggable属性,会出现可拖拽的效果,但无法正常拖拽和选中Modal中的内容 #5792

Open zuihou opened 6 months ago

zuihou commented 6 months ago

Describe the bug

 <NModal v-model:show="NModelRel" :draggable="true">
      <NCard style="width: 600px" title="模态框" :bordered="false" size="huge" role="dialog" aria-modal="true">
        <template #header-extra>噢!</template>
        内容
        <template #footer>尾部</template>
      </NCard>
    </NModal>

    <NModal v-model:show="NModelRel" preset="dialog" :draggable="true">
      <template #header>
        <div>标题</div>
      </template>
      <div>内容</div>
      <template #action>
        <div>操作</div>
      </template>
    </NModal>

Steps to reproduce

在文档中没有看到 draggable 参数的介绍,我就理解为Modal组件不支持 :draggable="true" 属性,但我给Modal加上 :draggable="true" 后,弹框就支持拖拽了

Link to minimal reproduction

1

System Info

"dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "@better-scroll/core": "2.5.1",
    "@fast-crud/fast-crud": "^1.20.1",
    "@fast-crud/fast-extends": "^1.20.1",
    "@fast-crud/ui-interface": "^1.20.1",
    "@fast-crud/ui-naive": "^1.20.1",
    "@iconify/vue": "4.1.1",
    "@sa/axios": "workspace:*",
    "@sa/color-palette": "workspace:*",
    "@sa/hooks": "workspace:*",
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
    "@vueuse/core": "10.9.0",
    "clipboard": "2.0.11",
    "dayjs": "1.11.10",
    "echarts": "5.5.0",
    "js-base64": "^3.7.2",
    "lodash-es": "4.17.21",
    "naive-ui": "2.38.1",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
    "vue": "3.4.21",
    "vue-draggable-plus": "0.3.5",
    "vue-i18n": "9.10.1",
    "vue-router": "4.3.0"
  },
  "devDependencies": {
    "@elegant-router/vue": "0.3.6",
    "@iconify/json": "2.2.191",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
    "@soybeanjs/eslint-config": "1.2.4",
    "@types/lodash-es": "4.17.12",
    "@types/node": "20.11.26",
    "@types/nprogress": "0.2.3",
    "@unocss/eslint-config": "0.58.5",
    "@unocss/preset-icons": "0.58.5",
    "@unocss/preset-uno": "0.58.5",
    "@unocss/transformer-directives": "0.58.5",
    "@unocss/transformer-variant-group": "0.58.5",
    "@unocss/vite": "0.58.5",
    "@vben/http": "workspace:*",
    "@vitejs/plugin-vue": "5.0.4",
    "@vitejs/plugin-vue-jsx": "3.1.0",
    "eslint": "8.57.0",
    "eslint-plugin-vue": "9.23.0",
    "lint-staged": "15.2.2",
    "sass": "1.71.1",
    "simple-git-hooks": "2.10.0",
    "tsx": "4.7.1",
    "typescript": "5.4.2",
    "unplugin-icons": "0.18.5",
    "unplugin-vue-components": "0.26.0",
    "vite": "5.1.6",
    "vite-plugin-progress": "0.0.7",
    "vite-plugin-svg-icons": "2.0.1",
    "vite-plugin-vue-devtools": "7.0.17",
    "vue-eslint-parser": "9.4.2",
    "vue-tsc": "2.0.6"
  },


### Used Package Manager

pnpm

### Validations

- [X] Read the [Contributing Guidelines](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://www.naiveui.com/en-US/).
- [X] Check that there isn't [already an issue](https://github.com/tusen-ai/naive-ui/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/tusen-ai/naive-ui/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
zuihou commented 6 months ago
image

官方社区精选 里面的这3个框架我都测试了,只要加了 : draggable="true" 都有这个问题。

image
2383155523 commented 6 months ago

有没有可能这个属性是HTML5自带支持的效果 https://www.w3school.com.cn/html5/att_global_draggable.asp

zuihou commented 6 months ago

有没有可能这个属性是HTML5自带支持的效果 https://www.w3school.com.cn/html5/att_global_draggable.asp

有可能,但作为navie-ui的封装,应该能屏蔽一些不必要的属性吧。

例如,ant-design-vue 等框架的Modal组件,加了 :draggable="true" 就不会有任何效果

pinecone-squirrel commented 6 months ago

官方是不自持拖拽的