前言组件库也已经上线运行了一段时间，该改的BUG也都解决了，也基本可以稳定运行了。今天就抽出点时间更新下文档方便日后查看！背景随着公司项目的迭代更新，业务需求越来越多，如果继续大规模使用element原生封装的组件，就会使得业务代码更加的繁琐并且难以维护。所以就决定把element进行二次封装，在封装之前查阅了一些资料，为了方便后期维护最后决定分装成一个组件库！设计思路参考网上封装的思路，发现只是对el-input层进行封装，虽然在使用过程中可以简化一点使用代码，但是整体的封装层次不大。如果添加校验还是要和element一样单独添加relus,添加验证规则，如果这样的话封装的意义就不大了。所以
先来效果图展示展示.png拖拽尺寸.png拖拽后.png移动.png组件封装大家这块直接复制使用就OKimportVueGridLayoutfrom'vue-grid-layout';//importChartfrom"@/components/chart/index.vue";exportdefault{components:{GridLayout:VueGridLayout.GridLayout,GridItem:VueGridLayout.GridItem,//Chart},props:{//布局数据layout:{type:Array,default:()=>[]},//是否可拖拽is
先来效果图展示展示.png拖拽尺寸.png拖拽后.png移动.png组件封装大家这块直接复制使用就OKimportVueGridLayoutfrom'vue-grid-layout';//importChartfrom"@/components/chart/index.vue";exportdefault{components:{GridLayout:VueGridLayout.GridLayout,GridItem:VueGridLayout.GridItem,//Chart},props:{//布局数据layout:{type:Array,default:()=>[]},//是否可拖拽is
一.为什么要封装打印类虽然flutter/原生给我们提供了日志打印的功能,但是超出一定长度以后会被截断Json打印挤在一起看不清楚堆栈打印深度过深多打印一些不需要的东西实现log的多种展示方式屏幕截图2022-06-09000012.png屏幕截图2022-06-09000147.png屏幕截图2022-06-09000210.png二.需要哪些类为了可以实现对日志的多种内容格式化和各种显示输出所以抽出来以下几个类一些常量的字符串表示对日志内容的打印输出抽象类对日志内容格式化的抽象类日志工具的config类日志工具的管理类日志工具的Util类三.打印输出的抽象类打印类核心的功能就是打印日志所以
一.为什么要封装打印类虽然flutter/原生给我们提供了日志打印的功能,但是超出一定长度以后会被截断Json打印挤在一起看不清楚堆栈打印深度过深多打印一些不需要的东西实现log的多种展示方式屏幕截图2022-06-09000012.png屏幕截图2022-06-09000147.png屏幕截图2022-06-09000210.png二.需要哪些类为了可以实现对日志的多种内容格式化和各种显示输出所以抽出来以下几个类一些常量的字符串表示对日志内容的打印输出抽象类对日志内容格式化的抽象类日志工具的config类日志工具的管理类日志工具的Util类三.打印输出的抽象类打印类核心的功能就是打印日志所以
在使用第三方组件的时候或多或少的会因为样式，业务不符合自己的需求进而进行封装。是否你也会有这样的困扰。封装业务组件的时候，弄了好多业务进自己的组件里。要传递好多参数给自己封装的组件，然后再在封装的组件里传递给第三方组件。不禁要知道每个组件的参数的意思还要对其增加参数。用于传递给第三方组件。一旦业务拓展，就还需要对应往封装组件增加属性，组件内增加接收传递给第三方组件。后期维护起来痛苦不堪。那么下面我要说的便是可以解决你的问题。$attrs2.4.0新增主要作用是直接在封装的业务组件上将相应的属性参数可以直接给到第三方组件，不需要在业务组件中额外接收。官网解释：包含了父作用域中不作为prop被识别
在使用第三方组件的时候或多或少的会因为样式，业务不符合自己的需求进而进行封装。是否你也会有这样的困扰。封装业务组件的时候，弄了好多业务进自己的组件里。要传递好多参数给自己封装的组件，然后再在封装的组件里传递给第三方组件。不禁要知道每个组件的参数的意思还要对其增加参数。用于传递给第三方组件。一旦业务拓展，就还需要对应往封装组件增加属性，组件内增加接收传递给第三方组件。后期维护起来痛苦不堪。那么下面我要说的便是可以解决你的问题。$attrs2.4.0新增主要作用是直接在封装的业务组件上将相应的属性参数可以直接给到第三方组件，不需要在业务组件中额外接收。官网解释：包含了父作用域中不作为prop被识别
在vue开发中使用element-ui的el-table时一般都需要进行封装以便于复用，提高开发效率，减少重复代码，这篇博客对el-table进行简单的二次封装：一、安装引入Element官方文档npm安装element-ui：npmielement-ui-S可以看文档按需引入，这里为了方便直接全局引入了：importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementUIfrom'element-ui'//全局引入element-uiimport'
在vue开发中使用element-ui的el-table时一般都需要进行封装以便于复用，提高开发效率，减少重复代码，这篇博客对el-table进行简单的二次封装：一、安装引入Element官方文档npm安装element-ui：npmielement-ui-S可以看文档按需引入，这里为了方便直接全局引入了：importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementUIfrom'element-ui'//全局引入element-uiimport'
本文中用到的插件有跳转外部浏览器插件url_launcher在App内部打开网页的插件webview_flutter在组件中加载Html片段的插件flutter_html插件的引入上面三个插件按需引入flutter_html:^3.0.0-alpha.3webview_flutter:^3.0.2url_launcher:^6.1.0需要实现的方法加载在线网页WebView(initialUrl::_url,//是否开启JSjavascriptMode:JavascriptMode.unrestricted,///WebView创建onWebViewCreated:_onWebViewCrea
