技术难题初登场 家人们，最近在开发一个超复杂的后台管理系统项目，里面有各种数据展示、表单提交、权限控制等功能，在这个过程中，我频繁地使用到了element-plus组件库中的el-dialog组件 。它就像一个小弹窗，可以用来显示各种提示信息、编辑表单之类的。比如说在用户点击 “编辑” 按钮时，就弹出一个el-dialog，里面放着编辑表单，让用户修改数据。 但随着功能的不断完善，我发现原生的el-dialog组件在某些场景下真的不够灵活。比如说，我想在不同的组件中根据不同的业务逻辑动态地控制对话框的显示和隐藏，还要传递不同的数据给对话框，原生组件用起来就很麻烦，每次都要写很多重复的代码，这可太影响开发效率了。所以，我就决定对el-dialog进行二次封装，实现动态调用，让它更好地满足我的项目需求。接下来，就把我的经验分享给大家，一起看看怎么解决这个问题。 实现效果 代码实现 import { ElButton, ElDialog } from "element-plus"; import { createApp, h } from "vue";…

直接上代码了，vue3 setup 模式下 需要额外写一个script <script> export default { options: { styleIsolation: 'shared' } } </script> styleIsolation 可选项 isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值） apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

Web Worker中需要加载js文件中包含import 的文件的话，需要一些设置 // main.js（主线程） const worker = new Worker('/worker.js', { type: 'module' // 指定 worker.js 的类型 这里设置开启 ESModule 模式 });

<Trans i18nKey={'app.btn.setIcon'} defaults={'设置图标'} /> i18nKey 是 对应翻译文件的key，defaults 是默认值，就是找不到翻译文件的时候显示的默认内容 // t 的用法 {t('common.button.cancel', { defaultValue: '取消 {{name}}', name: iconPath })} 第一个参数 common.button.cancel 为翻译文件的key，defaultValue 是找不到翻译时候显示的默认内容， name 的对应 defaultValue 里面的 {{name}} 动态值，他会知道替换里面的内容

最近开发页面装修功能，封装了很多层级的子组件，顶层用provide设置当前编辑的右侧数据，如下图 在最里面的子组件使用了watch来监听数据的变化 // 监听数据变化 watch( () => props.modelValue, (newVal) => { if (!newVal) return; rightStyle.value = newVal; }, { deep: true } ); watch( () => rightStyle.value, () => { // 数据更新后，通知父组件更新数据 emit('update:modelValue', rightStyle.value); }, { deep: true } ); 然后奇怪的事情发生了，如下图 watch 竟然监听不到变化，经过反复摸索，代码变更为 // 监听数据变化 watch( () => props.modelValue, (newVal) => { if (!newVal) return; rightStyle.value = newVal; }, {…

本篇详细介绍Painter在uniapp中的使用方法 前置资源： Painter的github库：https://github.com/Kujiale-Mobile/Painter Painter在线设置网站：https://lingxiaoyi.github.io/painter-custom-poster/ 完整demo：https://gitee.com/hackchen/uniapp-painter-demo 新建项目 使用HBuilderX新建一个空项目 新建一个叫painter-demo的页面 新建一个js文件paletteData.js（这个文件可自行决定是否需要，本demo因为数据量太大，所以独立建一个文件） 通过github，下载得到painter项目文件 将项目下的components/painter文件夹复制到uniapp项目的wxcomponents文件夹下 新建完文件后，大致的目录结构如下图 修改pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/…

// xxx.ets import web_webview from '@ohos.web.webview' @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); build() { Column() { // src 不能带协议 Web({ src: 'www.baidu.com', controller: this.controller }) } } } // 需要额外配置当前模块下的 module.json5 文件 requestPermissions 块 { "module": { "name": "entry", "type": "entry", "description": "$string:module_desc&quo…

运行下面命令 npm config ls -l 上面命令会显示 .npmrc 文件所在路径 打开 .npmrc 文件，并添加下面内容 ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

当前环境 vite 版本 4.2.1 node 版本 14.20.0 通过百度查到 Unexpected token '??=' 是由于node版本太低造成的，使用nvm 升级node 到 18 版本即可解决

if(fast.device.isWxMiniProgram()) { $("#js_wx_mini").attr('src',"/js/jweixin-1.3.2.js"); $(".icon-arrow-left").hide(); $(".fast-nav-title").css({ marginLeft:'0px' }); // 监听 popstate 事件 window.addEventListener('popstate',function(event) { wx.miniProgram.navigateBack(); }); }

找到nvm的安装目录，打开 settings.txt 文件，添加下面2行配置 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/

这是因为jdk版本太高了，可以调低版本 可以尝试 JDK 1.8

显示如下提示 只要打开下面设置即可 打钩红色框框选项

const downPic = async (url: string, fileName: string) => { // 判断文件是否存在 const isExist = () => { return new Promise((resolve, reject) => { plus.io.resolveLocalFileSystemURL( `_downloads/${fileName}`, function (entry) { // 文件存在 console.log(`File exists: ${entry.name}`); resolve(entry); }, function (e) { // 文件不存在 console.log(`File not found: ${e.message}`); resolve(false); } ); }); }; const file = await isExist(); if (file) { return new Promise((resolve, reject) => { resolve({ filename: …

在 .eslintrc 文件中设置 rules { 'rules': { 'linebreak-style': 0 }} 解决办法二： # windows 在拉仓库之前修改 git 配置文件（换行符使用 LF 而不会自动转化为 CRLF） git config –global core.autocrlf false