uni-app之使用vantweapp中的tree-select组件

uni-app之使用vantweapp中的tree-select组件

今天想用一个类似级联框的组件,找了一下,决定用vantweapp的tree-select,然后就遇到巨大的坑。导航框能点击,但是右边子框里的item,一个都不能点。如图:
在这里插入图片描述

网上的方法,类似于修改index.js中的点击事件名称:
在这里插入图片描述
修改过后,发现根本没用。
来来回回,折腾了半天,突然想到,会不会是子框的点击事件名称,与系统名称重名了,果断修改了一下:
在这里插入图片描述
果然,就可以点了。真的是揪心。
在这里插入图片描述

### 安装 uni-tree-select 组件 要在 HBuilderX 中为 uni-app 项目安装 `uni-ui` 的 `uni-tree-select` 组件,可以按照以下方法操作: #### 方法一:通过 npm 安装 如果您的项目支持 npm,则可以通过命令行工具完成组件的安装。 1. 打开终端并进入项目的根目录。 2. 使用以下命令安装 `uni-ui` 库: ```bash npm install @dcloudio/uni-ui --save ``` 3. 在 `main.js` 文件中引入 `uni-ui` 并注册全局组件: ```javascript import uView from '@dcloudio/uni-ui'; Vue.use(uView); ``` 4. 配置 `pages.json` 文件以启用按需加载功能(可选)。如果您只需要使用部分组件,可以在配置文件中指定所需的组件路径[^1]。 5. 在页面模板中直接调用 `<uni-tree-select>` 即可。例如: ```html <template> <view> <uni-tree-select :list="treeData"></uni-tree-select> </view> </template> <script> export default { data() { return { treeData: [ { text: 'Node 1', value: 'node1' }, { text: 'Node 2', value: 'node2' } ] }; } }; </script> ``` #### 方法二:手动复制组件到本地 如果不希望通过 npm 进行管理,也可以手动下载所需组件至项目中。 1. 访问官方仓库地址或文档链接获取最新版本的 `uni-tree-select.vue` 文件以及其依赖资源[^2]。 2. 将这些文件放入您项目的自定义组件目录下,默认位置通常位于 `/components` 路径内。 3. 修改该组件名称以便区分其他同名插件;比如命名为 `myTreeSelect`. 4. 更新当前使用的视图层代码来匹配新的命名空间规则。 注意:无论采用哪种方式都需要确保网络环境良好并且能够正常访问外部源服务器或者镜像站点。 ---
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值