056:vue工具 --- CSS在线格式化

在这里插入图片描述

第056个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 应用场景
    • 示例效果
    • 示例源代码(共90行)

应用场景

vue项目中,如何做CSS在线格式化呢,下面的示例就是这样的一个小工具,具体的看源代码

示例效果

在这里插入图片描述

示例源代码(共90行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-19
*/<template><div class="djs-box"><div class="topBox"><h3>vue工具:CSS在线格式化 </h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><el-input type="textarea" :rows="10" v-model="textdata" style="font-size: 18px;"></el-input></div><h4><el-button type="success" size="small" @click="CSSencode(textdata)">横向排列</el-button><el-button type="primary" size="small" @click="CSSdecode(textdata)">竖向排列</el-button></h4></div>
</template><script>export default {data() {return {textdata: '',}},mounted() {},methods: {CSSencode(code) { code = code.replace(/\r\n/ig,''); code = code.replace(/(\s){2,}/ig,'$1'); code = code.replace(/\t/ig,''); code = code.replace(/\n\}/ig,'\}'); code = code.replace(/\n\{\s*/ig,'\{'); code = code.replace(/(\S)\s*\}/ig,'$1\}'); code = code.replace(/(\S)\s*\{/ig,'$1\{'); code = code.replace(/\{\s*(\S)/ig,'\{$1'); this.textdata=code; } ,CSSdecode(code) { code = code.replace(/(\s){2,}/ig,'$1'); code = code.replace(/(\S)\s*\{/ig,'$1 {'); code = code.replace(/\*\/(.[^\}\{]*)}/ig,'\*\/\n$1}'); code = code.replace(/\/\*/ig,'\n\/\*'); code = code.replace(/;\s*(\S)/ig,';\n\t$1'); code = code.replace(/\}\s*(\S)/ig,'\}\n$1'); code = code.replace(/\n\s*\}/ig,'\n\}'); code = code.replace(/\{\s*(\S)/ig,'\{\n\t$1'); code = code.replace(/(\S)\s*\*\//ig,'$1\*\/'); code = code.replace(/\*\/\s*([^\}\{]\S)/ig,'\*\/\n\t$1'); code = code.replace(/(\S)\}/ig,'$1\n\}'); code = code.replace(/(\n){2,}/ig,'\n'); code = code.replace(/:/ig,':'); code = code.replace(/  /ig,' '); this.textdata=code; }	}}
</script>
<style scoped>.djs-box {width: 900px;height: 580px;margin: 50px auto;border: 1px solid seagreen;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: #666;color: #fff;}.dajianshi {width: 90%;height: 300px;margin: 50px auto 0;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/232077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SimpleFOC核心代码,解决Id一直为正 无法控为0

注&#xff1a;&#xff08;我这个是用simulink仿真做的SimpleFOC&#xff0c;因此代码是m语言的&#xff0c;在stm32可以改成C的&#xff0c;这两种基本差不多&#xff0c;搭建的SimpleFOC仿真下载链接&#xff1a;https://download.csdn.net/download/qq_35239859/88642607?…

虚幻学习笔记18—C++委托(多播)和事件

一、前言 委托分单播和多播&#xff0c;多播就是可以绑定多个回调函数&#xff0c;然后一次性执行。这样也可以理解为啥多播没有返回值&#xff0c;多个回调函数执行后返回哪一个都是问题啊。而事件呢官方官方文档说法是“对于事件而言&#xff0c;只有定义事件的类才能调用 Br…

用python编写一个对列表降序排列的方法。 定义函数des(),该函数接收一个整数列表作为参数。 在函数内部,实现降序排序。

编写一个对列表降序排列的方法。 定义函数des()&#xff0c;该函数接收一个整数列表作为参数。 在函数内部&#xff0c;实现降序排序。 然后&#xff0c;返回排序后的列表。 最后&#xff0c;在函数外部打印排序后的列表。 以下是一个使用Python编写的对列表降序排列的方法的示…

西南科技大学数据库实验七(综合实验—选课系统综合查询)

一、实验目的 存储过程与触发器 二、实验任务 一、创建数据库及表(提供数据库文件mytables.sql,可以导入,可以拷贝) 1、创建班级表class 2、创建学生表student 3、创建选课表choose 4、创建课程表course 5、创建教师表 teacher 1、【例8.1】创建一个名为student_coun…

Spring boot+nacos+mysql通过修改配置密码自动刷新数据库连接

由于安全需要&#xff0c;数据库需要定时更新密码&#xff0c;快速更新服务连接数据库密码&#xff0c;现在提供参考方案如下 集中nacos配置&#xff0c;将密码集中收集到一个配置文件里 spring:datasource:password: 123456 在项目中使用nacos的配置中心&#xff0c;同时设…

后端笔记之gin框架学习

gin框架学习 1. 使用脚手架搭建gin框架2. 应用框架3. 路由管理4.自定义中间件的使用5. 通过中间件设置路由权限校验1. 自定义校验2. 配置跨域3. 使用jwt进行tokn校验 6. 接口入参获取和绑定2. 参数校验3. protobuf 7. 集成mysql数据库1. gorm使用 1. 使用脚手架搭建gin框架 gi…

MapReduce和Yarn部署+入门

看的黑马视频记的笔记 目录 1.入门知识点 分布式计算&#xff1a; 概念&#xff1a; 两种模式&#xff1a; MapReduce&#xff08;分布式计算&#xff0c;分散汇总模式&#xff09; 概念 执行原理 注&#xff1a; Yarn&#xff08;分布式资源调度&#xff09; 概述 Y…

VS Code配置Go语言开发环境

提示&#xff1a;首先这是一个新型语言&#xff0c;最好把vscode更新到最新版。 1&#xff1a;去官网下载Go语言编译器&#xff0c;之后配置到系统环境中&#xff0c;能看到版本就行。 2&#xff1a;创建一个文件夹&#xff0c;存放go的工具文件&#xff0c;我的在D:\GoFile\G…

【数据分析之Numpy】Numpy中复制函数numpy.repeat()与numpy.tile()的使用方法及区别

一、简介 numpy.repeat()与numpy.tile()都是Numpy库中的复制函数&#xff0c;用于将数组中的元素重复指定的次数。 numpy.repeat()函数接受三个参数&#xff1a;要重复的数组、重复的次数和重复的轴。 numpy.tile()函数接受两个参数&#xff1a;要重复的数组和重复的次数。 二…

前端技术的新趋势:React、Vue与Angular的比较

本文将比较当前最流行的前端框架React、Vue和Angular&#xff0c;探讨它们各自的优缺点&#xff0c;并分析它们在未来的发展趋势。 随着互联网技术的不断发展&#xff0c;前端技术也在不断演进。React、Vue和Angular作为当前最流行的前端框架&#xff0c;它们在开发效率、性能和…

使用AI大模型生成动漫人像

在线体验&#xff1a;点击【图像处理】即可使用 public static final String SELFIE_ANIME "https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime"; private static final String TOKEN_URL "https://aip.baidubce.com/oauth/2.0/token";…

HTTP协议:简单易用、可扩展的应用层协议

HTTP 协议是一种基于 TCP/IP 的应用层协议&#xff0c;是最常用的Web协议之一&#xff0c;用于客户端和服务器之间传递和交换数据&#xff0c;也常被称为超文本传输协议。在HTTP协议中&#xff0c;每一个TCP连接会产生两个并行的流&#xff0c;一个是传输客户端发送给服务器的请…

elasticsearch简单相关操作

查看索引 GET _cat/indices //获取所有的index GET account发送post不带id新建数据 POST user/_doc/ {"name":"bobby","compamy":"imooc" }如果post带id就和put一样的操作了&#xff0c; put是不允许不带id的 post _create 没有就…

【前端】vscode 相关插件

一 插件&#xff1a; 01、ESLint 用来识别并检查ECMAScript/JavaScript 代码的工具 02、Prettier 用来格式化代码&#xff0c;如.js、.vue、css等都可以进行格式化 03、Vetur 用来识别并高亮vue语法 04、EditorConfig 用来设置vscode的编程行为 二、安装依赖 01、…

干涉光学测试导论

1.用于光学测试的基本干涉仪 2。相移干涉术 3。专业光学测试 4。长波长干涉术 5。非球面试验 6。表面微观结构的测量 7。绝对测量 8。结束语 第1部分-光学测试用基本干涉仪 (1)双光束干涉 (2)菲佐干涉仪和特维曼-格林干涉仪 (3)测试平面和球面的基本技术 (4)球面的基本…

dart遍历树及查找

省市区三级联动后端返回用户选择字符串&#xff0c;前端遍历查找&#xff0c;本来想用递归。后来看了一篇文章&#xff0c;作者使用js写的。目前&#xff0c;我在写flutter项目所以该用dart。文章地址&#xff0c;作者讲解的很详细&#xff0c;不再赘述。 /** 深度遍历树查找*…

QT视频报错:DirectShowPlayerService::doRender: Unresolved error code 0x80040266

原因&#xff1a;QT使用windows默认解码器&#xff0c;如果没有安装有相关DirectShowService解码器&#xff0c;则运行程序也是没法播放视频的&#xff0c;必须安装相关directshow解码器&#xff0c;安装位置在你的qt安装目录&#xff0c;安装完重启电脑就可以解决了。 解决办…

如何获取旧版 macOS

识别机型支持的最新的兼容操作系统 识别 MacBook Air - 官方 Apple 支持 (中国) 社区网站&#xff1a;AppStore 无法找到macos cata… - Apple 社区 官网链接隐藏比较深&#xff1a;如何下载和安装 macOS - 官方 Apple 支持 (中国) 获取磁盘映像 Lion 10.7 https://update…

maui中实现加载更多 RefreshView跟ListView(2)

一个类似商品例表的下拉效果&#xff1a; 代码 新增个类为商品商体类 public class ProductItem{public string ImageSource { get; set; }public string ProductName { get; set; }public string Price { get; set; }}界面代码&#xff1a; <?xml version"1.0&quo…

我的创作纪念日365

机缘 提示&#xff1a;可以和大家分享最初成为创作者的初心 例如&#xff1a; 实战项目中的经验分享日常学习过程中的记录通过文章进行技术交流… 收获 提示&#xff1a;在创作的过程中都有哪些收获 例如&#xff1a; 获得了多少粉丝的关注获得了多少正向的反馈&#xff0c…