chana1024 / linzhinan-vue-code-link Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
<a-tree v-model="checkedKeys" :treeData="treeData" :selectedKeys="selectedKeys" :expandedKeys="expandedKeys" @expand="onExpand" :autoExpandParent="autoExpandParent" :replaceFields="replaceFields" @select="onSelect" :show-line="true">
<template slot="title" slot-scope="{ name }">
<span v-html="
name.replace(
new RegExp(searchValue, 'g'),
'<span style=color:#f50>' + searchValue + '</span>'
)
"></span>
</template>
</a-tree>
如果a-tree里面套了一个template,template里面有span标签用了v-html的js代码,比方说上面这个,插件会把其中的html字符串给加上行号,导致页面显示是这样的。
体验了一把 vue-code-link
, 针对 client
的实现有 2 点建议期望采纳
shift + 鼠标右键
, 用起来不太适应, 建议支持自定义激活方式尝试改了下源码 node_modules/@linzhinan/vue-code-link/client/index.js
调整为不屏蔽右键菜单, 激活方式改为 shift + 鼠标左键
// /client/index.js
function openFileInEditor(e) {
// if (e.shiftKey && e.button === 2) {
if (e.shiftKey && e.button === 0) {
e.preventDefault();
const filePath = getFilePath(e.target);
sendRequestToOpenFileInEditor(filePath)
}
}
function init() {
if (process.env.NODE_ENV === 'development') {
const indexcss = require("../css/index.css")
// document.oncontextmenu = function() {
// return false;
// }
document.onmousedown = function(e) {
// if (e.shiftKey && e.button === 2) {
if (e.shiftKey && e.button === 0) {
const element = document.createElement('div');
const elementId = "clickBall" + uuid(8, 16);
element.id = elementId;
element.style.left = (e.clientX - 20) + "px";
element.style.top = (e.clientY - 20) + "px";
element.setAttribute("class", "clickBall hidSlow");
document.body.appendChild(element);
setTimeout(() => {
document.getElementById(elementId).remove();
}, 1000)
openFileInEditor(e)
}
}
}
}
尬
也是有看到vivo的这篇文章,找到了 linzhinan-vue-code-link
在体用使用后,提出一点点建议:
我平常本地运行的地址是http://xx.xx.xx.xx:8081/
想试试这个插件
按照npm上面的教程把代码嵌入进去然后运行起来之后
使用shift+左键点击元素会提示http://xx.xx.xx.xx:8081/code not found
为啥咧?但是我在cmd终端上面直接输入code是能唤起vscode的
补充:我本地运行代码的时候,接口是设置了代理的,会跟这个有关系么
按照文档操作,出现报错。
ERROR in ./node_modules/@linzhinan/vue-code-link/server/openCodeFile.js 27:13-26
Module not found: Error: Can't resolve 'os' in 'xxxxx/node_modules/@linzhinan/vue-code-link/server'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
@ ./node_modules/@linzhinan/vue-code-link/server/index.js 1:21-59
@ ./node_modules/@linzhinan/vue-code-link/index.js 1:26-45
@ ./src/main.js 9:0-61 10:0-22
webpack compiled with 4 errors
补充下vue2项目的package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@linzhinan/vue-code-link": "^1.0.36",
"amfe-flexible": "^2.2.1",
"axios": "^1.3.6",
"babel-plugin-import": "^1.13.6",
"core-js": "^3.8.3",
"js-base64": "^3.7.5",
"node-polyfill-webpack-plugin": "^2.0.1",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.62.0",
"sass-loader": "^13.2.2",
"scss": "^0.2.4",
"vant": "^2.12.54",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
},
"postcss": {
"plugins": {
"autoprefixer": {
"overrideBrowserslist": [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.