init

Author: dream2023

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

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

README.md

@@ -0,0 +1,73 @@
+# vue-ele-form-codemirror | vue-ele-form 的代码编辑器
+
+[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)
+[![npm](https://img.shields.io/npm/v/vue-ele-form-codemirror.svg)](https://www.npmjs.com/package/vue-ele-form-codemirror)
+[![download](https://img.shields.io/npm/dw/vue-ele-form-codemirror.svg)](https://npmcharts.com/compare/vue-ele-form-codemirror?minimal=true)
+
+## 介绍
+
+vue-ele-form-codemirror 做为 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 的第三方扩展, 通过对 [vue-codemirror](https://github.com/surmon-china/vue-codemirror) 的二次封装, 实现代码编辑器的扩展
+
+![image](https://raw.githubusercontent.com/dream2023/images/master/vue-ele-codemirror.ep8rp5ce6q8.png)
+
+## 安装
+
+```bash
+npm install vue-ele-form-codemirror --save
+```
+
+## 使用
+
+```js
+import EleForm from 'vue-ele-form'
+import EleFormCodemirror from 'vue-ele-form-codemirror'
+// 以下仅为示例, 具体根据需要, 在局部或者全局引入相应的资源
+// 属性和引用资源参考: https://github.com/surmon-china/vue-codemirror
+// language js
+import 'codemirror/mode/javascript/javascript.js'
+// theme css
+import 'codemirror/theme/base16-dark.css'
+
+// 注册 codemirror 组件
+Vue.component('codemirror', EleFormCodemirror)
+
+// 注册 vue-ele-form
+Vue.use(EleForm, {
+  // 可以为编辑器配置全局属性, 每个实例都共享这个属性
+  codemirror: {
+    options: {
+      theme: 'base16-dark',
+      tabSize: 4,
+      mode: 'text/javascript',
+      lineNumbers: true,
+      line: true
+    }
+    // events: ['scroll', ...]
+  }
+})
+```
+
+```js
+formDesc: {
+  xxx: {
+    label: 'xxx',
+    type: 'codemirror', // 只需要在这里指定为 codemirror 即可
+    attrs: {
+      // 属性配置(会覆盖全局配置)
+      options: {
+        tabSize: 4,
+        mode: 'text/javascript',
+        theme: 'base16-dark',
+        lineNumbers: true,
+        line: true,
+      }
+    }
+  }
+}
+```
+
+## 相关链接
+
+- [vue-codemirror](https://github.com/surmon-china/vue-codemirror)
+- [vue-ele-form](https://github.com/dream2023/vue-ele-form)
+- [element-ui](http://element-cn.eleme.io)

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

example/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-card
+    header="ele-form-codemirror 演示"
+    shadow="never"
+    style="max-width: 1250px;margin: 20px auto;"
+  >
+    <ele-form
+      :form-data="formData"
+      :form-desc="formDesc"
+      :request-fn="handleRequest"
+      :span="22"
+      @request-success="handleSuccess"
+    />
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data () {
+    return {
+      formData: {
+        content: ''
+      },
+      formDesc: {
+        content: {
+          label: '代码',
+          type: 'codemirror'
+        }
+      }
+    }
+  },
+  methods: {
+    handleRequest (data) {
+      console.log(data)
+      return Promise.resolve()
+    },
+    handleSuccess () {
+      this.$message.success('提交成功')
+    }
+  },
+  mounted () {}
+}
+</script>
+
+<style>
+body {
+  background-color: #f0f2f5;
+}
+</style>

example/main.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import App from './App.vue'
+import ElementUI from 'element-ui'
+import EleForm from 'vue-ele-form'
+import EleFormCodemirror from '../lib/index'
+import 'element-ui/lib/theme-chalk/index.css'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/theme/base16-dark.css'
+
+Vue.config.productionTip = false
+
+Vue.use(ElementUI)
+Vue.component('codemirror', EleFormCodemirror)
+Vue.use(EleForm, {
+  codemirror: {
+    options: {
+      theme: 'base16-dark',
+      tabSize: 4,
+      mode: 'text/javascript',
+      lineNumbers: true,
+      line: true
+    }
+    // events: ['scroll', ...]
+  }
+})
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

lib/EleFormCodemirror.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ele-form-codemirror">
+    <vue-codemirror
+      :class="desc.class"
+      :style="desc.style"
+      v-bind="attrs"
+      v-model="newValue"
+      v-on="onEvents"
+    />
+  </div>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import formMixin from 'vue-ele-form/lib/mixins/formMixin'
+
+export default {
+  name: 'codemirror',
+  mixins: [formMixin],
+  components: {
+    'vue-codemirror': codemirror
+  },
+  data () {
+    return {
+      defaultAttrs: {
+        options: {
+          tabSize: 4,
+          lineNumbers: true,
+          line: true
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.ele-form-codemirror {
+  line-height: 1.3;
+}
+</style>

lib/index.js

@@ -0,0 +1,3 @@
+import EleFormCodemirror from './EleFormCodemirror'
+
+export default EleFormCodemirror