element-plus的Tour 漫游式引导怎么去绑定Cascader 级联选择器或者它的内容 popper

已于 2024-06-18 16:04:25 修改
阅读量322 收藏
点赞数 4
文章标签： javascript 前端 vue.js
于 2024-06-17 10:36:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dlchgg/article/details/139736542
版权

首先官方例子是用的button

官方.$el这个log出来是：

知道是以元素为准就拿对应的元素就行

级联选择器.$el是这样的：

你可以移入这个元素部分去看看是哪个要用的（好像谷歌还是狐火直接放上去就可以看到元素表示，但是我有时用谷歌只能双击或者右键过去看，挺奇怪的）

这个时候你就不要用官方这种了，用myCascader?.$el.nextElementSibling这几个元素的东西

你用不用官方的ts写法都行


我找了下官网，直接用【myCascader是ref】 myCascader.togglePopperVisible() 。
element-ui应该也差不多

就这样，或者在切换open状态的时候改变，得提前让他内容可见

:teleported="false"。这个就看你是不是要突破引导流的遮罩层了

还有就是比如手机宽度不够的时候，用这个让能够左右滑动看到级联后面的内容

【具体不是很清楚，搜了一下就是用了vue3的内置组件Teleport将内容快丢到了body元素下，而不是组件内】

dlchgg
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-plus ui的使用说明
Java程序员专栏
06-10 447
一旦你安装了并引入了Element Plus，你就可以在你的Vue组件中使用它提供的各种组件了。首先，确保你的项目是基于Vue 3的。你可以使用npm或yarn来安装Element Plus。为了减小项目体积，你可以按需引入Element Plus的组件。为了获取更详细的信息和示例代码，建议查阅Element Plus的官方文档（以上是使用Element Plus UI的基本说明，希望对你有所帮助。来引入Element Plus的图标库。如果你需要使用图标，你可以通过安装。等，帮助你构建复杂的页面布局。
Element el-cascader 级联选择器详解
热门推荐
程序员大阳
09-01 3万+
本文目录1. 概述2. 数据绑定2.1 默认数据绑定 1. 概述 级联选择器用途比较广泛，例如选择人员所属的单位，可以从总公司-分公司-部门-子部门这样级联选择下来。 如果自己去实现一个级联选择器，实际上是难度较大的，Element提供了一个功能相当完善的级联选择器，本篇文章就进行一个详细的介绍。 2. 数据绑定 2.1 默认数据绑定 级联选择器默认会绑定一个数组，节点的显示文本和值分别对应label、value属性，节点的后代对应children属性。示例代码如下： 默认数据绑定,选中值{{value}
仿element-ui cascader级联选择器，layui cascader级联选择器
一夏coco的博客
09-09 4520
前言 由于项目中使用的不是vue的框架，但是又需要用到cascader组件，可惜找了很久都没有找到想要的效果，只好自己写组件了。为了力求和element-ui的级联效果一致，来自后端开发的我亲自操刀，哈哈哈！！ 使用示例 引入 <html> <head> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> <link r
更改element-plus 中的 el-cascader 级联选择器字体大小
FOTUO_YouAreMyFaith的博客
06-22 2193
更改 elementplus 中的 el-cascader 级联选择器字体大小
element-china-area-data：Element UI && antd Cascader级联选择器中国省市区三级，二级联动optiondata
02-06
Element UI中国省市区级联数据 安装 npm install element-china-area-data -S 在线示例 使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...
Element Cascader 级联选择器的使用示例
10-15
9. **级联选择器的响应式**：由于 Vue 的特性，当 `options` 数据改变时，Cascader 会自动更新显示的内容，无需额外操作。 在实际开发中，Element Cascader 可以方便地与其他 Element UI 组件结合使用，构建出复杂...
element-plus---Cascader三级联动地区选择---json数据
08-19
Element Plus是一个流行的Vue.js组件库，它提供了丰富的UI组件，包括Cascader（级联选择器），适用于这种需求。在这个场景中，"element-plus---Cascader三级联动地区选择---json数据" 主题指的是使用Element Plus的...
country-data:基于elementUI的Cascader 级联选择器的城市数据
05-14
在这个特定的案例中，"country-data"是一个基于ElementUI的Cascader级联选择器实现，用于展示城市级别的数据。 Cascader组件在网页设计中常用于处理层级关系的数据，如国家-省份-城市这样的地理信息，或者部门-团队...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 429
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 348
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
weixin_44565776的博客
07-18 154
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 974
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
HOW - SVG 图标组件封装（Lucide React）
最新发布
weixin_58540586的博客
07-18 809
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 148
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 246
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。
小程序js 把链接转换为二维码
Carina的编程技术博客
07-18 321
1.要下载上面地址的插件包。
element-plus中的Cascader 级联选择器,使用tooltip组件预览内容
06-10
对于element-plus中的Cascader级联选择器，使用Tooltip组件预览内容可以如下实现： 首先，在需要展示Tooltip的地方，使用`el-tooltip`组件包裹需要预览的内容，设置`content`属性为预览的内容，`disabled`属性为false（默认为true，需要手动设置为false才能生效），`effect`属性为`dark`或者`light`（根据UI风格选择），其余属性可根据需求自行设置。 然后，在Cascader组件上，使用`slot-scope`自定义模板，在需要展示的地方，使用`el-tooltip`组件包裹需要预览的内容，设置`content`属性为预览的内容，`disabled`属性为false（默认为true，需要手动设置为false才能生效），`effect`属性为`dark`或者`light`（根据UI风格选择），其余属性可根据需求自行设置。 示例代码如下： ```html <template> <el-cascader v-model="selectedOptions" :options="options" :props="props" @change="handleChange" :filterable="true" :clearable="true" :show-all-levels="false" :expand-trigger="expandTrigger" :change-on-select="changeOnSelect" > <template #default="{ labels, selectedOptions }"> <el-tooltip class="item" effect="dark" :disabled="!labels || labels.length === 0" :content="labels.join(' / ')" > <span class="el-cascader__label">{{ labels[labels.length - 1] }}</span> </el-tooltip> </template> <template #expand="{ index, data }"> <el-tooltip v-for="item in data" :key="item.value" class="item" effect="light" :content="item.label" :disabled="!item.label" > <span class="el-cascader-menu__item" @click="handleItemClick(index, item)"> {{ item.label }} </span> </el-tooltip> </template> </el-cascader> </template> ``` 注意事项： 1. `el-tooltip`组件必须设置`disabled`属性为`false`，否则会导致搜索框无法输入。 2. `el-tooltip`组件的`content`属性可以为任何类型的值，可以是字符串、数字、HTML标签等。 3. `el-tooltip`组件的`effect`属性可选值有`dark`和`light`，根据UI风格选择。 4. `el-cascader`组件的`expand-trigger`属性可选值有`click`和`hover`，根据需求选择。 5. `el-cascader`组件的`change-on-select`属性可选值有`true`和`false`，根据需求选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值