Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zuihou opened this issue Mar 18, 2024 · 4 comments · May be fixed by #6583
Labels
untriaged need to sort

Comments

@zuihou
Copy link

zuihou commented Mar 18, 2024

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 zuihou added the untriaged need to sort label Mar 18, 2024
@zuihou
Copy link
Author

zuihou commented Mar 19, 2024

image

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

image

@2383155523
Copy link

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

@zuihou
Copy link
Author

zuihou commented Mar 22, 2024

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

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

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

@pinecone-squirrel
Copy link

官方是不自持拖拽的

@Zheng-Changfu Zheng-Changfu linked a pull request Nov 30, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
untriaged need to sort
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants