vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的

这篇具有很好参考价值的文章主要介绍了vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.写完静态不是要写less吗,自动生成一下实现

this.getLevelClass('domId');

domId是自定义的class名称,跟根据自己的需要设置

//vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的
        getLevelClass(name) {
            let dom = document.getElementById(name);
            let html = dom.innerHTML;
            let str = `.${name}{`
            console.log('html', html);
            let domLIst = dom.childNodes;
            console.log(domLIst);
            domLIst.forEach(item => {
                console.log('domLIst', item);
                str = this.getdom(item, str);
            })
            str += '}'
            console.log('str', str);

        },
        getdom(dom, str) {
            if (dom.classList && dom.classList.length) {
                str += `.${Array.from(dom.classList).join('.')}{`
                if (dom.childNodes) {
                    dom.childNodes.forEach(item => {
                        str = this.getdom(item, str);
                    })
                }
                str += `}`;
                str += `       `
                return str
            } else {
                return str;
            }
        },

 查看一下效果:

<div id="domId" class="domId">

            <div class="aa abc">

                aa

                <div class="a1">

                    <div class="a1-1"></div>

                    <div class="a1-2"></div>

                </div>

                <div class="a2">

                    <div class="a2-1"></div>

                    <div class="a2-2"></div>

                </div>

                <input />

            </div>

            <div class="bb">bb</div>

        </div>

vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的,前端

返回的class自动格式化就好了

vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的,前端

优化:如果我们在使用ui框架如antd等组件时不想返回包括antd组件的class时可以:

if (dom.classList && dom.classList.length && Array.from(dom.classList).join('.').indexOf('ant-') == -1)

在if中多添加判断过滤 文章来源地址https://www.toymoban.com/news/detail-603150.html

到了这里,关于vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode里vue文件内<template>标签报错

         发现只要把文件名使用驼峰命名法,把Login.vue改为LoginView.vue就不报错了加个大写的View就没有了。  官方参考文档:vue/multi-word-component-names | eslint-plugin-vue

    2024年02月12日
    浏览(36)
  • 在前端开发中,什么叫移动设备上的视口?如何通过header标签中的meta属性设置页面的视口。

    移动设备上的视口(Viewport)是指在移动设备上可见的网页区域。由于移动设备的屏幕尺寸和分辨率各不相同,为了确保网页在各种设备上都能正确显示和交互,需要通过视口设置来适配不同的屏幕尺寸。 在移动设备上,网页通常会比在桌面电脑上的屏幕要宽,因此需要缩放

    2024年02月11日
    浏览(50)
  • Vue教程:如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式

    前言: 在写Vue项目时,我们经常会用到单选框以及复选框,以往我们常用的是Element里面的单选框以及复选框,但是呢这里面的选框都不容易调整,假如我们需要不同的样式以及大小,就很难去实现想要的结果,本章教程就为大家讲解,如何使用div标签去实现单选,多选的这

    2024年01月18日
    浏览(35)
  • Vue2 实战 基于 Elmenet-UI 的 单页面开发 用户信息增删改查 | 支持分页查询 | 自动登录

    为了熟悉 Vue2 框架 的使用,现采用 Vue2的基础知识、Router路由、Vuex 管理仓库来实现一个可对用户进行增删改查的小案例。数据存储在浏览器的 localStorage 本地缓存中,方便模拟从后端获取数据,不过这里仅有前端部分,没有涉及 axios 请求相关的内容。 技术栈:Vue2 + ElementU

    2024年02月08日
    浏览(37)
  • vue2 ElementUI 表单标签、表格表头添加问号图标提示

    使用element-ui有时候需要对表格的 表头 、表单的 标签 进行自定义,添加问号的悬浮提示。 要达到的效果,如图所示: https://element.eleme.cn/#/zh-CN/component/tooltip 定义问号图标,图标上方显示tooltip提示内容 代码: 实现效果: 为什么不写content属性和里面的提示内容也能显示?

    2024年01月25日
    浏览(51)
  • vue 通过 Ctrl 、Shift 键 + 点击鼠标实现 div 多选操作(1)

    接下来就是相关主要代码的编写问题,因为每个人的项目和需求是不一样的,所以我就简单分享一下自己的主要代码逻辑。 代码 首先在vue项目里面定义几个变量哈。 data() { return { tableData: [], // 假设这个是上边小div的列表,后台数据请求回来的吗,假设已经有数据了哈,里面

    2024年04月13日
    浏览(49)
  • Vue2 集成 CodeMirror 实现公式编辑、块状文本编辑,TAG标签功能

    效果图  安装codemirror依赖 本示例为Vue2项目,安装低版本的依赖 实现 实现代码如下,里边涉及到的变量和函数自行替换即可,没有其他复杂逻辑。

    2024年02月10日
    浏览(37)
  • 【vue2】vue2中的性能优化(持续更新中)

    ⭐ v-for 遍历避免同时使用 v-if ⭐ v-for 中的key绑定唯一的值 ⭐ v-show与v-if对性能的影响 ⭐ 妙用计算属性 ⭐ 使用防抖与节流控制发送频率 ⭐ 路由守卫处理请求避免重复发送请求 ⭐ 使用第三方UI库的引入方式 【前言】 该系列是博主在使用vue2开发项目中常用上的一些小Tips,学

    2024年01月16日
    浏览(45)
  • HTML <template> 标签

    实例 使用 template 保留页面加载时隐藏的内容。使用 JavaScript 来显示: 页面下方有更多 TIY 实例。 template  标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。 template  中的内容可以稍后使用 JavaScript 呈现。 如果您有一些需要重复使用的 HTML 代码,则可以使用  template  

    2024年02月11日
    浏览(36)
  • vue2 vue中的常用指令

    1.前端必备技能 2.岗位多,绝大互联网公司都在使用Vue 3.提高开发效率 4.高薪必备技能(Vue2+Vue3) 概念:Vue (读音 /vjuː/,类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架 Vue2官网:https://v2.cn.vuejs.org/ 1.什么是构建用户界面 基于数据 渲染出用户可以看到的 界面 2.什么是渐

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包