Skip to content
This repository was archived by the owner on May 12, 2021. It is now read-only.

Commit 01bce26

Browse files
dream2023dream2023
committedJul 29, 2019
init
0 parents  commit 01bce26

17 files changed

+12743
-0
lines changed
 

‎.browserslistrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

‎.editorconfig

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.eslintrc.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'@vue/standard'
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint'
16+
}
17+
}

‎.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 二当家的
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.m

‎README.md

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# vue-ele-form-codemirror | vue-ele-form 的代码编辑器
2+
3+
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)
4+
[![npm](https://img.shields.io/npm/v/vue-ele-form-codemirror.svg)](https://www.npmjs.com/package/vue-ele-form-codemirror)
5+
[![download](https://img.shields.io/npm/dw/vue-ele-form-codemirror.svg)](https://npmcharts.com/compare/vue-ele-form-codemirror?minimal=true)
6+
7+
## 介绍
8+
9+
vue-ele-form-codemirror 做为 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 的第三方扩展, 通过对 [vue-codemirror](https://github.com/surmon-china/vue-codemirror) 的二次封装, 实现代码编辑器的扩展
10+
11+
![image](https://raw.githubusercontent.com/dream2023/images/master/vue-ele-codemirror.ep8rp5ce6q8.png)
12+
13+
## 安装
14+
15+
```bash
16+
npm install vue-ele-form-codemirror --save
17+
```
18+
19+
## 使用
20+
21+
```js
22+
import EleForm from 'vue-ele-form'
23+
import EleFormCodemirror from 'vue-ele-form-codemirror'
24+
// 以下仅为示例, 具体根据需要, 在局部或者全局引入相应的资源
25+
// 属性和引用资源参考: https://github.com/surmon-china/vue-codemirror
26+
// language js
27+
import 'codemirror/mode/javascript/javascript.js'
28+
// theme css
29+
import 'codemirror/theme/base16-dark.css'
30+
31+
// 注册 codemirror 组件
32+
Vue.component('codemirror', EleFormCodemirror)
33+
34+
// 注册 vue-ele-form
35+
Vue.use(EleForm, {
36+
// 可以为编辑器配置全局属性, 每个实例都共享这个属性
37+
codemirror: {
38+
options: {
39+
theme: 'base16-dark',
40+
tabSize: 4,
41+
mode: 'text/javascript',
42+
lineNumbers: true,
43+
line: true
44+
}
45+
// events: ['scroll', ...]
46+
}
47+
})
48+
```
49+
50+
```js
51+
formDesc: {
52+
xxx: {
53+
label: 'xxx',
54+
type: 'codemirror', // 只需要在这里指定为 codemirror 即可
55+
attrs: {
56+
// 属性配置(会覆盖全局配置)
57+
options: {
58+
tabSize: 4,
59+
mode: 'text/javascript',
60+
theme: 'base16-dark',
61+
lineNumbers: true,
62+
line: true,
63+
}
64+
}
65+
}
66+
}
67+
```
68+
69+
## 相关链接
70+
71+
- [vue-codemirror](https://github.com/surmon-china/vue-codemirror)
72+
- [vue-ele-form](https://github.com/dream2023/vue-ele-form)
73+
- [element-ui](http://element-cn.eleme.io)

‎babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎example/App.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<el-card
3+
header="ele-form-codemirror 演示"
4+
shadow="never"
5+
style="max-width: 1250px;margin: 20px auto;"
6+
>
7+
<ele-form
8+
:form-data="formData"
9+
:form-desc="formDesc"
10+
:request-fn="handleRequest"
11+
:span="22"
12+
@request-success="handleSuccess"
13+
/>
14+
</el-card>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: 'App',
20+
data () {
21+
return {
22+
formData: {
23+
content: ''
24+
},
25+
formDesc: {
26+
content: {
27+
label: '代码',
28+
type: 'codemirror'
29+
}
30+
}
31+
}
32+
},
33+
methods: {
34+
handleRequest (data) {
35+
console.log(data)
36+
return Promise.resolve()
37+
},
38+
handleSuccess () {
39+
this.$message.success('提交成功')
40+
}
41+
},
42+
mounted () {}
43+
}
44+
</script>
45+
46+
<style>
47+
body {
48+
background-color: #f0f2f5;
49+
}
50+
</style>

‎example/main.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import ElementUI from 'element-ui'
4+
import EleForm from 'vue-ele-form'
5+
import EleFormCodemirror from '../lib/index'
6+
import 'element-ui/lib/theme-chalk/index.css'
7+
import 'codemirror/mode/javascript/javascript.js'
8+
import 'codemirror/theme/base16-dark.css'
9+
10+
Vue.config.productionTip = false
11+
12+
Vue.use(ElementUI)
13+
Vue.component('codemirror', EleFormCodemirror)
14+
Vue.use(EleForm, {
15+
codemirror: {
16+
options: {
17+
theme: 'base16-dark',
18+
tabSize: 4,
19+
mode: 'text/javascript',
20+
lineNumbers: true,
21+
line: true
22+
}
23+
// events: ['scroll', ...]
24+
}
25+
})
26+
27+
new Vue({
28+
render: h => h(App)
29+
}).$mount('#app')

‎lib/EleFormCodemirror.vue

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="ele-form-codemirror">
3+
<vue-codemirror
4+
:class="desc.class"
5+
:style="desc.style"
6+
v-bind="attrs"
7+
v-model="newValue"
8+
v-on="onEvents"
9+
/>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { codemirror } from 'vue-codemirror'
15+
import 'codemirror/lib/codemirror.css'
16+
import formMixin from 'vue-ele-form/lib/mixins/formMixin'
17+
18+
export default {
19+
name: 'codemirror',
20+
mixins: [formMixin],
21+
components: {
22+
'vue-codemirror': codemirror
23+
},
24+
data () {
25+
return {
26+
defaultAttrs: {
27+
options: {
28+
tabSize: 4,
29+
lineNumbers: true,
30+
line: true
31+
}
32+
}
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style>
39+
.ele-form-codemirror {
40+
line-height: 1.3;
41+
}
42+
</style>

‎lib/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import EleFormCodemirror from './EleFormCodemirror'
2+
3+
export default EleFormCodemirror

‎package-lock.json

+12,391
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "vue-ele-form-codemirror",
3+
"version": "0.1.0",
4+
"description": "vue-ele-form 的 代码编辑器",
5+
"private": false,
6+
"license": "MIT",
7+
"scripts": {
8+
"serve": "vue-cli-service serve",
9+
"lint": "vue-cli-service lint"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/dream2023/vue-ele-form-codemirror"
14+
},
15+
"main": "lib/index.js",
16+
"homepage": "https://github.com/dream2023/vue-ele-form-codemirror",
17+
"keywords": [
18+
"vue-ele-form",
19+
"code-editor",
20+
"codemirror",
21+
"vue-codemirror",
22+
"vue2",
23+
"codemirror-editor",
24+
"element-codemirror"
25+
],
26+
"dependencies": {
27+
"vue-codemirror": "^4.0.6"
28+
},
29+
"devDependencies": {
30+
"@vue/cli-plugin-babel": "^3.9.0",
31+
"@vue/cli-plugin-eslint": "^3.9.0",
32+
"@vue/cli-service": "^3.9.0",
33+
"@vue/eslint-config-standard": "^4.0.0",
34+
"babel-eslint": "^10.0.1",
35+
"core-js": "^2.6.5",
36+
"element-ui": "^2.11.1",
37+
"eslint": "^5.16.0",
38+
"eslint-plugin-vue": "^5.0.0",
39+
"lint-staged": "^8.1.5",
40+
"vue": "^2.6.10",
41+
"vue-ele-form": "^0.3.6",
42+
"vue-template-compiler": "^2.6.10"
43+
},
44+
"gitHooks": {
45+
"pre-commit": "lint-staged"
46+
},
47+
"lint-staged": {
48+
"*.{js,vue}": [
49+
"vue-cli-service lint",
50+
"git add"
51+
]
52+
}
53+
}

‎postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>vue-ele-form-codemirror</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but vue-ele-form-codemirror doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎vue.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
css: { extract: false },
3+
configureWebpack: {
4+
entry: './example/main.js',
5+
output: {
6+
libraryExport: 'default'
7+
}
8+
}
9+
}

0 commit comments

Comments
 (0)
This repository has been archived.