├── coverage ├── lcov.info ├── coverage-final.json ├── lcov-report │ ├── sort-arrow-sprite.png │ ├── prettify.css │ ├── index.html │ ├── sorter.js │ ├── base.css │ └── prettify.js └── clover.xml ├── test └── unit │ ├── __mocks__ │ ├── styleMock.js │ ├── fileMock.js │ └── axios.js │ ├── .eslintrc │ ├── coverage │ ├── lcov-report │ │ ├── sort-arrow-sprite.png │ │ ├── prettify.css │ │ ├── index.html │ │ ├── sorter.js │ │ ├── base.css │ │ ├── Select.vue.html │ │ ├── Main.vue.html │ │ ├── Form.vue.html │ │ └── prettify.js │ ├── lcov.info │ ├── clover.xml │ └── coverage-final.json │ ├── specs │ └── ImgDisplay.spec.js │ └── jest.conf.js ├── src ├── assets │ ├── demo.gif │ └── logo.png ├── main.js ├── App.vue └── components │ ├── contendEditSelectList.vue │ └── contendEdit.vue ├── .babelrc ├── .gitignore ├── .travis.yml ├── .editorconfig ├── index.js ├── index.html ├── .eslintrc.js ├── package.json ├── README.md └── webpack.config.js /coverage/lcov.info: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /coverage/coverage-final.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /test/unit/__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {} -------------------------------------------------------------------------------- /test/unit/__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = 'test-file-stub'; -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YalongYan/edit-by-contenteditable/HEAD/src/assets/demo.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YalongYan/edit-by-contenteditable/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /test/unit/__mocks__/axios.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | get: jest.fn(() => Promise.resolve({ status: 200 })) 3 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import App from "./App.vue"; 3 | 4 | new Vue({ 5 | el: "#app", 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YalongYan/edit-by-contenteditable/HEAD/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /test/unit/coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YalongYan/edit-by-contenteditable/HEAD/test/unit/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ], 5 | "env": { 6 | "test": { 7 | "presets": ["env"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | 5 | install: 6 | - npm install 7 | 8 | script: 9 | - npm run build 10 | 11 | branches: 12 | only: 13 | - master -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Main from './src/components/contendEdit' 2 | import _Vue from 'vue' 3 | 4 | Main.install = Vue => { 5 | if (!Vue) { 6 | window.Vue = Vue = _Vue 7 | } 8 | Vue.component(Main.name, Main) 9 | } 10 | export default Main; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 || File | 50 |51 | | Statements | 52 |53 | | Branches | 54 |55 | | Functions | 56 |57 | | Lines | 58 |59 | |
|---|
| File | 50 |51 | | Statements | 52 |53 | | Branches | 54 |55 | | Functions | 56 |57 | | Lines | 58 |59 | |
|---|---|---|---|---|---|---|---|---|---|
| Form.vue | 63 |62.5% | 65 |10/16 | 66 |75% | 67 |3/4 | 68 |57.14% | 69 |4/7 | 70 |62.5% | 71 |10/16 | 72 ||
| Main.vue | 76 |100% | 78 |3/3 | 79 |100% | 80 |0/0 | 81 |100% | 82 |1/1 | 83 |100% | 84 |3/3 | 85 |
| 1 47 | 2 48 | 3 49 | 4 50 | 5 51 | 6 52 | 7 53 | 8 54 | 9 55 | 10 56 | 11 57 | 12 58 | 13 59 | 14 60 | 15 61 | 16 62 | 17 63 | 18 64 | 19 65 | 20 66 | 21 67 | 22 68 | 23 69 | 24 70 | 25 71 | 26 72 | 27 73 | 28 74 | 29 75 | 30 76 | 31 77 | 32 78 | 33 79 | 34 80 | 35 81 | 36 82 | 37 83 | 38 84 | 39 85 | 40 86 | 41 87 | 42 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | | <style lang="scss">
129 | @import './select.scss';
130 | </style>
131 |
132 | <template>
133 | <div class="selectCtn">
134 | <el-select v-model="value" filterable placeholder="请选择">
135 | <el-option
136 | v-for="item in options"
137 | :key="item.value"
138 | :label="item.label"
139 | :value="item.value">
140 | </el-option>
141 | </el-select>
142 | </div>
143 | </template>
144 |
145 | <script>
146 | export default {
147 | data() {
148 | return {
149 | options: [{
150 | value: '选项1',
151 | label: '黄金糕'
152 | }, {
153 | value: '选项2',
154 | label: '双皮奶'
155 | }, {
156 | value: '选项3',
157 | label: '蚵仔煎'
158 | }, {
159 | value: '选项4',
160 | label: '龙须面'
161 | }, {
162 | value: '选项5',
163 | label: '北京烤鸭'
164 | }],
165 | value: '1'
166 | }
167 | }
168 | }
169 | </script> |
| 1 47 | 2 48 | 3 49 | 4 50 | 5 51 | 6 52 | 7 53 | 8 54 | 9 55 | 10 56 | 11 57 | 12 58 | 13 59 | 14 60 | 15 61 | 16 62 | 17 63 | 18 64 | 19 65 | 20 66 | 21 67 | 22 68 | 23 69 | 24 70 | 25 71 | 26 72 | 27 73 | 28 74 | 29 75 | 30 76 | 31 77 | 32 78 | 33 79 | 34 80 | 35 81 | 36 82 | 37 83 | 38 84 | 39 85 | 40 86 | 41 87 | 42 88 | 43 89 | 44 90 | 45 91 | 46 92 | 47 93 | 48 94 | 49 95 | 50 96 | 51 97 | 52 98 | 53 99 | 54 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 1x 116 | 1x 117 | 118 | 119 | 120 | 1x 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | | <template>
153 | <div class="container">
154 | <h3> 图片显隐控制</h3>
155 | <el-switch
156 | v-model="switchvalue"
157 | active-color="#13ce66"
158 | inactive-color="#ff4949">
159 | </el-switch>
160 | <span v-if="switchvalue" class="imgContainer"><img :src="logoImg" class="logoImg"> </span>
161 | <div class="line"></div>
162 | <h3> 表单请求:</h3>
163 | <Form ref='form' :initFormData='initFormData' />
164 | </div>
165 | </template>
166 |
167 | <script>
168 | import Form from './Form'
169 | import logoImg from './../assets/logo.png'
170 |
171 | export default {
172 | data () {
173 | return {
174 | switchvalue: true,
175 | logoImg: logoImg,
176 | initFormData: {
177 | name: '团建',
178 | type: [],
179 | desc: ''
180 | }
181 | }
182 | },
183 | components: {
184 | Form
185 | }
186 | }
187 | </script>
188 |
189 | <style lang="scss">
190 | .container {
191 | padding: 20px;
192 |
193 | .logoImg{
194 | width: 23px;
195 | vertical-align: middle;
196 | }
197 | .line{
198 | display: inline-block;
199 | width: 100%;
200 | height: 0px;
201 | border: 1px solid #3b3a3a;
202 | }
203 | }
204 | </style>
205 | |
| 1 47 | 2 48 | 3 49 | 4 50 | 5 51 | 6 52 | 7 53 | 8 54 | 9 55 | 10 56 | 11 57 | 12 58 | 13 59 | 14 60 | 15 61 | 16 62 | 17 63 | 18 64 | 19 65 | 20 66 | 21 67 | 22 68 | 23 69 | 24 70 | 25 71 | 26 72 | 27 73 | 28 74 | 29 75 | 30 76 | 31 77 | 32 78 | 33 79 | 34 80 | 35 81 | 36 82 | 37 83 | 38 84 | 39 85 | 40 86 | 41 87 | 42 88 | 43 89 | 44 90 | 45 91 | 46 92 | 47 93 | 48 94 | 49 95 | 50 96 | 51 97 | 52 98 | 53 99 | 54 100 | 55 101 | 56 102 | 57 103 | 58 104 | 59 105 | 60 106 | 61 107 | 62 108 | 63 109 | 64 110 | 65 111 | 66 112 | 67 113 | 68 114 | 69 115 | 70 116 | 71 117 | 72 118 | 73 119 | 74 120 | 75 121 | 76 122 | 77 123 | 78 124 | 79 125 | 80 126 | 81 127 | 82 128 | 83 129 | 84 130 | 85 131 | 86 132 | 87 133 | 88 134 | 89 135 | 90 136 | 91 137 | 92 138 | 93 139 | 94 140 | 95 141 | 96 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 3x 168 | 169 | 170 | 5x 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 4x 209 | 4x 210 | 4x 211 | 1x 212 | 1x 213 | 1x 214 | 1x 215 | 216 | 217 | 218 | 219 | 220 | 3x 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | | <template>
237 | <div class="ctn">
238 | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
239 | <el-form-item label="活动名称" prop="name">
240 | <el-input v-model="ruleForm.name"></el-input>
241 | </el-form-item>
242 | <el-form-item label="活动性质" prop="type">
243 | <el-checkbox-group v-model="ruleForm.type">
244 | <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
245 | <el-checkbox label="地推活动" name="type"></el-checkbox>
246 | <el-checkbox label="线下主题活动" name="type"></el-checkbox>
247 | <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
248 | </el-checkbox-group>
249 | </el-form-item>
250 | <el-form-item label="活动形式" prop="desc">
251 | <el-input type="textarea" v-model="ruleForm.desc"></el-input>
252 | </el-form-item>
253 | <el-form-item>
254 | <el-button class="confirm" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
255 | <el-button class="reset" @click="resetForm('ruleForm')">重置</el-button>
256 | </el-form-item>
257 | </el-form>
258 | </div>
259 | </template>
260 |
261 | <script>
262 | import axios from 'axios'
263 | export default {
264 | data() {
265 | return {
266 | ruleForm: this.initFormData,
267 | rules: {
268 | name: [
269 | { required: true, message: '请输入活动名称', trigger: 'blur' },
270 | { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
271 | ],
272 | type: [
273 | { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
274 | ],
275 | desc: [
276 | { required: true, message: '请填写活动形式', trigger: 'blur' }
277 | ]
278 | },
279 | sucess: false
280 | };
281 | },
282 | props:{
283 | initFormData: {
284 | type: Object,
285 | default: () => {
286 | {
287 | name: '';
288 | type: [];
289 | desc: ''
290 | }
291 | }
292 | }
293 | },
294 | watch: {
295 | initFormData: {
296 | handler(n, o){
297 | this.ruleForm = n
298 | },
299 | deep: true
300 | }
301 | },
302 | methods: {
303 | submitForm(formName) {
304 | this.$refs[formName].validate((valid) => {
305 | if (valid) {
306 | let url = 'http://rap2api.taobao.org/app/mock/233956/tbl-unit-test?name=' + this.ruleForm.name + '&nature=' + this.ruleForm.type.join(',') + '&form=' + this.ruleForm.form
307 | axios.get(url).then(res => {
308 | E if (res.status === 200) {
309 | this.sucess = true
310 | } else {
311 | this.sucess= false
312 | }
313 | })
314 | } else {
315 | return false;
316 | }
317 | });
318 | },
319 | resetForm(formName) {
320 | this.$refs[formName].resetFields();
321 | }
322 | }
323 | }
324 | </script>
325 |
326 | <style lang='scss' scoped>
327 | .ctn{
328 | margin-top: 20px;
329 | }
330 | </style>
331 | |