├── babel.config.js
├── public
    ├── example.gif
    ├── favicon.ico
    ├── img
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   └── 5.png
    └── index.html
├── .editorconfig
├── vue.config.js
├── src
    ├── components
    │   ├── EleEditableText.vue
    │   ├── EleEditableColor.vue
    │   ├── EleEditableNumber.vue
    │   ├── EleEditableInput.vue
    │   ├── EleEditableTextarea.vue
    │   ├── EleEditableUrl.vue
    │   ├── EleEditableRadio.vue
    │   ├── EleEditableTimeText.vue
    │   ├── EleEditableCheckbox.vue
    │   ├── EleEditableDatetimeText.vue
    │   ├── EleEditableSelect.vue
    │   ├── EleEditableImage.vue
    │   ├── EleCommonTime.vue
    │   ├── EleEditableDate.vue
    │   ├── EleEditableDateText.vue
    │   ├── EleEditableDatetime.vue
    │   ├── EleEditableUploadImage.vue
    │   ├── EleEditableStatus.vue
    │   ├── EleEditableTime.vue
    │   └── EleEditableSwitch.vue
    ├── index.js
    ├── wrapper
    │   ├── EleEditableWrapperForm.vue
    │   └── EleEditableWrapperDisplay.vue
    ├── EleEditableMixin.js
    ├── EleEditableWrapper.vue
    └── EleEditable.vue
├── .gitignore
├── .npmignore
├── example
    ├── CustomSlider.vue
    ├── main.js
    ├── CustomRate.vue
    └── App.vue
├── LICENSE
├── package.json
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/example.gif


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/img/1.png


--------------------------------------------------------------------------------
/public/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/img/2.png


--------------------------------------------------------------------------------
/public/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/img/3.png


--------------------------------------------------------------------------------
/public/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/img/4.png


--------------------------------------------------------------------------------
/public/img/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/vue-ele-editable/HEAD/public/img/5.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   css: { extract: false },
 3 |   configureWebpack: {
 4 |     entry: './example/main.js',
 5 |     output: {
 6 |       libraryExport: 'default'
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/EleEditableText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-bind="attrs">{{displayValue}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import EleEditableMixin from '../EleEditableMixin'
 7 | 
 8 | export default {
 9 |   name: 'EleEditableText',
10 |   mixins: [EleEditableMixin]
11 | }
12 | </script>
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 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?
22 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | tests
 3 | docs
 4 | documentation
 5 | public
 6 | vue.config.js
 7 | coverage
 8 | example
 9 | jest.config.js
10 | .eslintrc.js
11 | cypress.json
12 | .browserslistrc
13 | postcss.config.js
14 | babel.config.js
15 | .editorconfig
16 | .cypress.json
17 | .vscode
18 | .env.docs
19 | dist/demo.html
20 | .env.dev-doc
21 | .env.dev-example


--------------------------------------------------------------------------------
/src/components/EleEditableColor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-color-picker
 3 |     @input="handleChange"
 4 |     size="small"
 5 |     v-bind="attrs"
 6 |     v-model="newValue"
 7 |   />
 8 | </template>
 9 | 
10 | <script>
11 | import EleEditableMixin from '../EleEditableMixin'
12 | 
13 | export default {
14 |   name: 'EleEditableSwitch',
15 |   mixins: [EleEditableMixin]
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import EleEditable from './EleEditable'
 2 | 
 3 | const Plugin = {}
 4 | 
 5 | Plugin.install = function (Vue, params = {}) {
 6 |   Vue.prototype.$EleEditableParams = params
 7 |   Vue.component(EleEditable.name, EleEditable)
 8 | }
 9 | 
10 | if (typeof window !== 'undefined' && window.Vue) {
11 |   Plugin.install(window.Vue)
12 | }
13 | 
14 | export { EleEditable }
15 | export default Plugin
16 | 


--------------------------------------------------------------------------------
/src/components/EleEditableNumber.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-input-number
 3 |     :clearable="true"
 4 |     @input="handleChange"
 5 |     size="small"
 6 |     v-bind="attrs"
 7 |     v-model="newValue"
 8 |   />
 9 | </template>
10 | 
11 | <script>
12 | import EleEditableMixin from '../EleEditableMixin'
13 | 
14 | export default {
15 |   name: 'EleEditableNumber',
16 |   mixins: [EleEditableMixin]
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/EleEditableInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-input
 3 |     :clearable="true"
 4 |     @input="handleChange"
 5 |     size="small"
 6 |     v-bind="attrs"
 7 |     v-model="newValue"
 8 |   ></el-input>
 9 | </template>
10 | 
11 | <script>
12 | import EleEditableMixin from '../EleEditableMixin'
13 | 
14 | export default {
15 |   name: 'EleEditableInput',
16 |   mixins: [EleEditableMixin]
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/EleEditableTextarea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-input
 3 |     :autosize="{ minRows: 2}"
 4 |     :clearable="true"
 5 |     @input="handleChange"
 6 |     size="small"
 7 |     type="textarea"
 8 |     v-bind="attrs"
 9 |     v-model="newValue"
10 |   />
11 | </template>
12 | 
13 | <script>
14 | import EleEditableMixin from '../EleEditableMixin'
15 | 
16 | export default {
17 |   name: 'EleEditableInput',
18 |   mixins: [EleEditableMixin]
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/EleEditableUrl.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     :href="computedValue"
 4 |     v-bind="attrs"
 5 |     v-if="computedValue"
 6 |   >{{displayValue}}</a>
 7 | </template>
 8 | 
 9 | <script>
10 | import EleEditableMixin from '../EleEditableMixin'
11 | 
12 | export default {
13 |   name: 'EleEditableUrl',
14 |   mixins: [EleEditableMixin],
15 |   data () {
16 |     return {
17 |       defaultAttrs: {
18 |         target: '_blank'
19 |       }
20 |     }
21 |   }
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/example/CustomSlider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- newValue 和 handleChange 和 attrs 都已经在mixin中实现, 直接引用即可 -->
 3 |   <el-slider
 4 |     @change="handleChange"
 5 |     style="min-width: 100px"
 6 |     v-model="newValue"
 7 |   ></el-slider>
 8 | </template>
 9 | 
10 | <script>
11 | // 自定义组件
12 | // 正式环境下, 应该这样引用:
13 | // import EleEditableMixin from 'vue-ele-editable/src/EleEditableMixin'
14 | import EleEditableMixin from '../src/EleEditableMixin'
15 | 
16 | export default {
17 |   name: 'CustomSlider',
18 |   mixins: [EleEditableMixin]
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/EleEditableRadio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-radio-group
 3 |     @input="handleChange"
 4 |     size="small"
 5 |     v-bind="attrs"
 6 |     v-model="newValue"
 7 |   >
 8 |     <el-radio
 9 |       :key="item.value"
10 |       :label="item.value"
11 |       v-for="item in options"
12 |     >{{item.text}}</el-radio>
13 |   </el-radio-group>
14 | </template>
15 | 
16 | <script>
17 | import EleEditableMixin from '../EleEditableMixin'
18 | 
19 | export default {
20 |   name: 'EleEditableRadio',
21 |   mixins: [EleEditableMixin]
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/EleEditableTimeText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ele-common-time
 3 |     :value="displayValue"
 4 |     v-bind="attrs"
 5 |   />
 6 | </template>
 7 | 
 8 | <script>
 9 | import EleCommonTime from './EleCommonTime'
10 | import EleEditableMixin from '../EleEditableMixin'
11 | 
12 | export default {
13 |   name: 'EleEditableTimeText',
14 |   mixins: [EleEditableMixin],
15 |   components: {
16 |     EleCommonTime
17 |   },
18 |   data () {
19 |     return {
20 |       defaultAttrs: {
21 |         format: 'HH:mm'
22 |       }
23 |     }
24 |   }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/components/EleEditableCheckbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-checkbox-group
 3 |     @input="handleChange"
 4 |     size="small"
 5 |     v-bind="attrs"
 6 |     v-model="newValue"
 7 |   >
 8 |     <el-checkbox
 9 |       :key="item.value"
10 |       :label="item.value"
11 |       v-for="item in options"
12 |     >{{item.text}}</el-checkbox>
13 |   </el-checkbox-group>
14 | </template>
15 | 
16 | <script>
17 | import EleEditableMixin from '../EleEditableMixin'
18 | 
19 | export default {
20 |   name: 'EleEditableCheckbox',
21 |   mixins: [EleEditableMixin]
22 | }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/components/EleEditableDatetimeText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ele-common-time
 3 |     :value="displayValue"
 4 |     v-bind="attrs"
 5 |   />
 6 | </template>
 7 | 
 8 | <script>
 9 | import EleCommonTime from './EleCommonTime'
10 | import EleEditableMixin from '../EleEditableMixin'
11 | 
12 | export default {
13 |   name: 'EleEditableDateTimeText',
14 |   mixins: [EleEditableMixin],
15 |   components: {
16 |     EleCommonTime
17 |   },
18 |   data () {
19 |     return {
20 |       defaultAttrs: {
21 |         format: 'YYYY-MM-DD HH:mm'
22 |       }
23 |     }
24 |   }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import EleEditable from '../src/index'
 4 | import ElementUI from 'element-ui'
 5 | import 'element-ui/lib/theme-chalk/index.css'
 6 | import CustomRate from './CustomRate'
 7 | import CustomSlider from './CustomSlider'
 8 | Vue.component(CustomRate.name, CustomRate)
 9 | Vue.component(CustomSlider.name, CustomSlider)
10 | 
11 | Vue.use(ElementUI)
12 | Vue.use(EleEditable, {
13 |   image: {
14 |     lazy: true
15 |   },
16 |   number: {
17 |     step: 10
18 |   }
19 | })
20 | Vue.config.productionTip = false
21 | 
22 | new Vue({
23 |   render: h => h(App)
24 | }).$mount('#app')
25 | 


--------------------------------------------------------------------------------
/src/components/EleEditableSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-select
 3 |     :clearable="true"
 4 |     @input="handleChange"
 5 |     placeholder="请选择"
 6 |     size="small"
 7 |     v-bind="attrs"
 8 |     v-model="newValue"
 9 |   >
10 |     <el-option
11 |       :key="item.value"
12 |       :label="item.text"
13 |       :value="item.value"
14 |       v-for="item in options"
15 |     ></el-option>
16 |   </el-select>
17 | </template>
18 | 
19 | <script>
20 | import EleEditableMixin from '../EleEditableMixin'
21 | 
22 | export default {
23 |   name: 'EleEditableSelect',
24 |   mixins: [EleEditableMixin]
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 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-editable</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-ele-editable 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>
18 | 


--------------------------------------------------------------------------------
/src/components/EleEditableImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ele-gallery
 3 |     :sliceSingle="true"
 4 |     :source="displayValue"
 5 |     :title="title"
 6 |     style="line-height:1em"
 7 |     v-bind="attrs"
 8 |   />
 9 | </template>
10 | 
11 | <script>
12 | import EleEditableMixin from '../EleEditableMixin'
13 | import EleGallery from 'vue-ele-gallery'
14 | 
15 | export default {
16 |   name: 'EleEditableImage',
17 |   components: {
18 |     EleGallery
19 |   },
20 |   mixins: [EleEditableMixin],
21 |   data () {
22 |     return {
23 |       defaultAttrs: {
24 |         size: 50
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/example/CustomRate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- newValue 和 handleChange 和 attrs 都已经在mixin中实现, 直接引用即可 -->
 3 |   <el-rate
 4 |     :colors="colors"
 5 |     @input="handleChange"
 6 |     v-bind="attrs"
 7 |     v-model="newValue"
 8 |   ></el-rate>
 9 | </template>
10 | 
11 | <script>
12 | // 自定义组件
13 | // 正式环境下, 应该这样引用:
14 | // import EleEditableMixin from 'vue-ele-editable/src/EleEditableMixin'
15 | import EleEditableMixin from '../src/EleEditableMixin'
16 | 
17 | export default {
18 |   name: 'CustomRate',
19 |   mixins: [EleEditableMixin],
20 |   data () {
21 |     return {
22 |       colors: ['#99A9BF', '#F7BA2A', '#FF9900']
23 |     }
24 |   }
25 | }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/components/EleCommonTime.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>{{displayValue}}</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import dayjs from 'dayjs'
 7 | 
 8 | export default {
 9 |   name: 'EleCommonTime',
10 |   props: {
11 |     value: [Number, String, Date],
12 |     format: {
13 |       type: String,
14 |       required: true
15 |     }
16 |   },
17 |   computed: {
18 |     displayValue () {
19 |       const value = typeof this.value === 'number' ? this.value * 1000 : this.value
20 | 
21 |       if (dayjs(value).isValid()) {
22 |         return dayjs(value).format(this.format)
23 |       } else {
24 |         return value
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/components/EleEditableDate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-date-picker
 3 |     :clearable="true"
 4 |     @input="handleTimeChange"
 5 |     size="small"
 6 |     style="max-width: 140px"
 7 |     v-bind="attrs"
 8 |     v-model="newValue"
 9 |   />
10 | </template>
11 | 
12 | <script>
13 | import EleEditableMixin from '../EleEditableMixin'
14 | 
15 | export default {
16 |   name: 'EleEditableDate',
17 |   mixins: [EleEditableMixin],
18 |   data () {
19 |     return {
20 |       defaultAttrs: {
21 |         format: 'yyyy-MM-dd'
22 |       }
23 |     }
24 |   },
25 |   methods: {
26 |     setNewValue () {
27 |       this.setTimeNewValue()
28 |     }
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/EleEditableDateText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ele-common-time
 3 |     :format="showFormat"
 4 |     :value="displayValue"
 5 |     v-bind="attrs"
 6 |   />
 7 | </template>
 8 | 
 9 | <script>
10 | import EleCommonTime from './EleCommonTime'
11 | import EleEditableMixin from '../EleEditableMixin'
12 | 
13 | export default {
14 |   name: 'EleEditableDateText',
15 |   mixins: [EleEditableMixin],
16 |   components: {
17 |     EleCommonTime
18 |   },
19 |   computed: {
20 |     showFormat () {
21 |       return this.attrs.format.replace(/y/g, 'Y')
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |       defaultAttrs: {
27 |         format: 'YYYY-MM-DD'
28 |       }
29 |     }
30 |   }
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/components/EleEditableDatetime.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-date-picker
 3 |     :clearable="true"
 4 |     :format="format"
 5 |     @input="handleTimeChange"
 6 |     size="small"
 7 |     style="max-width: 200px"
 8 |     type="datetime"
 9 |     v-bind="attrs"
10 |     v-model="newValue"
11 |   />
12 | </template>
13 | 
14 | <script>
15 | import EleEditableMixin from '../EleEditableMixin'
16 | 
17 | export default {
18 |   name: 'EleEditableDatetime',
19 |   mixins: [EleEditableMixin],
20 |   data () {
21 |     return {
22 |       defaultAttrs: {
23 |         format: 'yyyy-MM-dd HH:mm'
24 |       }
25 |     }
26 |   },
27 |   methods: {
28 |     setNewValue () {
29 |       this.setTimeNewValue()
30 |     }
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/components/EleEditableUploadImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ele-upload-image
 3 |     :isShowTip="false"
 4 |     :size="60"
 5 |     @input="handleChange"
 6 |     class="editable-upload-image"
 7 |     v-bind="attrs"
 8 |     v-model="newValue"
 9 |   />
10 | </template>
11 | 
12 | <script>
13 | import EleUploadImage from 'vue-ele-upload-image'
14 | import EleEditableMixin from '../EleEditableMixin'
15 | 
16 | export default {
17 |   name: 'EleEditableUploadImage',
18 |   mixins: [EleEditableMixin],
19 |   components: {
20 |     EleUploadImage
21 |   }
22 | }
23 | </script>
24 | 
25 | <style>
26 | .editable-upload-image
27 |   .el-upload-list--picture-card
28 |   .el-upload-list__item-actions
29 |   span
30 |   + span {
31 |   margin-left: 8px;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/components/EleEditableStatus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-tag
 3 |     :type="tagType"
 4 |     v-bind="attrs"
 5 |     v-if="displayValue"
 6 |   >{{displayValue}}</el-tag>
 7 | </template>
 8 | 
 9 | <script>
10 | import EleEditableMixin from '../EleEditableMixin'
11 | 
12 | export default {
13 |   name: 'EleEditableStatus',
14 |   mixins: [EleEditableMixin],
15 |   computed: {
16 |     // 获取类型(primary, info, danger...)
17 |     tagType () {
18 |       const value = this.computedValue
19 |       const option = this.options.find((item) => {
20 |         return item.value === value
21 |       })
22 | 
23 |       if (option && option.type) {
24 |         return option.type
25 |       } else {
26 |         return 'primary'
27 |       }
28 |     }
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/EleEditableTime.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-time-select
 4 |       :clearable="true"
 5 |       :picker-options="{
 6 |         start: '00:00',
 7 |         end: '24:00'
 8 |       }"
 9 |       @input="handleTimeChange"
10 |       size="small"
11 |       style="max-width: 110px"
12 |       v-bind="attrs"
13 |       v-model="newValue"
14 |     />
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import EleEditableMixin from '../EleEditableMixin'
20 | 
21 | export default {
22 |   name: 'EleEditableTime',
23 |   mixins: [EleEditableMixin],
24 |   data () {
25 |     return {
26 |       defaultAttrs: {
27 |         format: 'HH:mm'
28 |       }
29 |     }
30 |   },
31 |   methods: {
32 |     setNewValue () {
33 |       this.setTimeNewValue()
34 |     }
35 |   }
36 | }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/components/EleEditableSwitch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-switch
 3 |     @input="handleChange"
 4 |     size="small"
 5 |     v-bind="attrs"
 6 |     v-model="newValue"
 7 |   />
 8 | </template>
 9 | 
10 | <script>
11 | import EleEditableMixin from '../EleEditableMixin'
12 | 
13 | export default {
14 |   name: 'EleEditableSwitch',
15 |   mixins: [EleEditableMixin],
16 |   data () {
17 |     return {
18 |       newValue: Boolean(this.computedValue)
19 |     }
20 |   },
21 |   methods: {
22 |     // 将 switch 的值转为 boolean 值
23 |     setNewValue () {
24 |       this.newValue = Boolean(this.displayValue)
25 |     },
26 |     handleChange (value) {
27 |       if (typeof this.value === 'number') {
28 |         value = Number(value)
29 |       }
30 | 
31 |       this.$emit('change', value)
32 |     }
33 |   }
34 | }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/wrapper/EleEditableWrapperForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-form
 3 |     :inline="inline"
 4 |     :model="{ [field]: newValue }"
 5 |     :rules="rules"
 6 |     :show-message="false"
 7 |     onsubmit="return false"
 8 |     style="max-width: 280px"
 9 |   >
10 |     <!-- 内容 -->
11 |     <el-form-item
12 |       :prop="field"
13 |       :style="{
14 |         'margin-bottom': inline ? '0' : '8px'
15 |       }"
16 |     >
17 |       <slot/>
18 |     </el-form-item>
19 | 
20 |     <!-- 操作区 -->
21 |     <el-form-item style="margin-bottom: 0px">
22 |       <slot name="action"/>
23 |     </el-form-item>
24 |   </el-form>
25 | </template>
26 | 
27 | <script>
28 | 
29 | export default {
30 |   name: 'EleEditableWrapperForm',
31 |   props: {
32 |     // 行内
33 |     inline: Boolean,
34 |     // 用于校检
35 |     field: {
36 |       type: String,
37 |       required: true
38 |     },
39 |     // 校检规则
40 |     rules: [Object, Array],
41 |     // 新值(用于校检)
42 |     newValue: [String, Number, Boolean, Array, Date]
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 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.


--------------------------------------------------------------------------------
/src/wrapper/EleEditableWrapperDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     :class="{'ele-editable__empty': isEmpty, 'ele-editable__edit': !isEmpty}"
 4 |     @click="$emit('click')"
 5 |   >
 6 |     <!-- 为空时 -->
 7 |     <template v-if="isEmpty">{{emptyText}}</template>
 8 |     <!-- 不为空时 -->
 9 |     <template v-else>
10 |       <template v-if="isTimeComponent">
11 |         <ele-common-time
12 |           :format="timeFormat"
13 |           :value="displayValue"
14 |         />
15 |       </template>
16 |       <template v-else>{{displayValue}}</template>
17 |     </template>
18 |   </a>
19 | </template>
20 | 
21 | <script>
22 | import EleCommonTime from '../components/EleCommonTime'
23 | 
24 | export default {
25 |   name: 'EleEditableWrapperDisplay',
26 |   components: { EleCommonTime },
27 |   props: {
28 |     type: String,
29 |     isEmpty: Boolean,
30 |     emptyText: String,
31 |     displayValue: [String, Number, Boolean, Array, Date]
32 |   },
33 |   computed: {
34 |     // 日期组件特殊处理: 判断是否为日期组件
35 |     isTimeComponent () {
36 |       return ['time', 'date', 'datetime'].includes(this.type)
37 |     },
38 |     // 日期特殊处理: 格式化
39 |     timeFormat () {
40 |       if (this.isTimeComponent) {
41 |         let format = this.customAttrs && this.customAttrs.format ? this.customAttrs.format : this.timeDefaultAttrs[this.type]
42 |         format = format.replace(/y/g, 'Y')
43 |         format = format.replace(/d/g, 'D')
44 |         return format
45 |       } else {
46 |         return null
47 |       }
48 |     }
49 |   },
50 |   data () {
51 |     return {
52 |       // 日期组件特殊处理: 日期显示格式
53 |       timeDefaultAttrs: {
54 |         time: 'HH:mm',
55 |         date: 'YYYY-MM-DD',
56 |         datetime: 'YYYY-MM-DD HH:mm'
57 |       }
58 |     }
59 |   }
60 | }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ele-editable",
 3 |   "description": "高效、简单、强大的 element-ui 行内编辑组件",
 4 |   "version": "1.0.3",
 5 |   "private": false,
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build:lib": "vue build -t lib --name vue-ele-editable -d ./dist/ ./src/index.js",
10 |     "build": "npm run lint & npm run build:lib",
11 |     "lint": "vue-cli-service lint"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/dream2023/vue-ele-editable"
16 |   },
17 |   "main": "dist/vue-ele-editable.umd.min.js",
18 |   "homepage": "https://github.com/dream2023/vue-ele-editable",
19 |   "keywords": [
20 |     "vue-ele-editable",
21 |     "editable",
22 |     "inline edit",
23 |     "edit cell",
24 |     "editable table",
25 |     "element table",
26 |     "el-editable",
27 |     "vue editable"
28 |   ],
29 |   "dependencies": {
30 |     "dayjs": "^1.8.14",
31 |     "vue-ele-gallery": "^2.1.3",
32 |     "vue-ele-upload-image": "^2.0.4"
33 |   },
34 |   "devDependencies": {
35 |     "@vue/cli-plugin-babel": "^3.8.0",
36 |     "@vue/cli-plugin-eslint": "^3.8.0",
37 |     "@vue/cli-service": "^3.8.0",
38 |     "@vue/eslint-config-standard": "^4.0.0",
39 |     "babel-eslint": "^10.0.1",
40 |     "core-js": "^2.6.5",
41 |     "element-ui": "^2.9.1",
42 |     "eslint": "^5.16.0",
43 |     "eslint-plugin-vue": "^5.0.0",
44 |     "lint-staged": "^8.1.5",
45 |     "vue": "^2.6.10",
46 |     "vue-template-compiler": "^2.6.10"
47 |   },
48 |   "eslintConfig": {
49 |     "root": true,
50 |     "env": {
51 |       "node": true
52 |     },
53 |     "extends": [
54 |       "plugin:vue/essential",
55 |       "@vue/standard"
56 |     ],
57 |     "rules": {},
58 |     "parserOptions": {
59 |       "parser": "babel-eslint"
60 |     }
61 |   },
62 |   "postcss": {
63 |     "plugins": {
64 |       "autoprefixer": {}
65 |     }
66 |   },
67 |   "browserslist": [
68 |     "> 1%",
69 |     "last 2 versions"
70 |   ],
71 |   "gitHooks": {
72 |     "pre-commit": "lint-staged"
73 |   },
74 |   "lint-staged": {
75 |     "src/*.{js,vue}": [
76 |       "vue-cli-service lint",
77 |       "git add"
78 |     ]
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/EleEditableMixin.js:
--------------------------------------------------------------------------------
  1 | import dayjs from 'dayjs'
  2 | 
  3 | export default {
  4 |   // 不继承父组件隐式绑定的属性
  5 |   inheritAttrs: false,
  6 |   props: {
  7 |     // 类型
  8 |     type: {
  9 |       type: String,
 10 |       required: true
 11 |     },
 12 |     // 用于还原失败后newValue的值
 13 |     isError: Boolean,
 14 |     // 选项 (select, checkbox, radio)
 15 |     options: Array,
 16 |     // 弹窗标题
 17 |     title: String,
 18 |     // 自定义属性
 19 |     customAttrs: Object,
 20 |     // 原始值
 21 |     value: [String, Number, Boolean, Array, Date],
 22 |     // 计算后的值
 23 |     computedValue: [String, Number, Boolean, Array, Date],
 24 |     // 显示的值
 25 |     displayValue: [String, Number, Boolean, Array, Date],
 26 |     // 是否不需要包裹
 27 |     noWrapper: {
 28 |       type: Boolean,
 29 |       required: true
 30 |     }
 31 |   },
 32 |   computed: {
 33 |     // 全局参数
 34 |     globalEditableParams () {
 35 |       return this.$EleEditableParams || {}
 36 |     },
 37 |     // 组件属性: 默认属性和自定义属性的融合
 38 |     attrs () {
 39 |       return Object.assign(
 40 |         {},
 41 |         this.globalEditableParams[this.type] || {},
 42 |         this.defaultAttrs || {},
 43 |         this.customAttrs
 44 |       )
 45 |     },
 46 |     format () {
 47 |       let format =
 48 |         this.attrs && this.attrs.format ? this.attrs.format : 'yyyy-MM-dd'
 49 |       format = format.replace(/Y/g, 'y')
 50 |       format = format.replace(/D/g, 'd')
 51 |       return format
 52 |     },
 53 |     showFormat () {
 54 |       let format =
 55 |         this.attrs && this.attrs.format ? this.attrs.format : 'yyyy-MM-dd'
 56 |       format = format.replace(/y/g, 'Y')
 57 |       format = format.replace(/d/g, 'D')
 58 |       return format
 59 |     }
 60 |   },
 61 |   data () {
 62 |     return {
 63 |       // 用于组件 v-model 绑定值
 64 |       newValue: this.computedValue
 65 |     }
 66 |   },
 67 |   watch: {
 68 |     // 检测是否出错, 出错后进行还原值
 69 |     isError (value) {
 70 |       if (value) {
 71 |         this.setNewValue()
 72 |       }
 73 |     },
 74 |     // 当检测到值变化时, 进行设置新值
 75 |     computedValue () {
 76 |       this.setNewValue()
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     // 设置新值
 81 |     setNewValue () {
 82 |       this.newValue = this.computedValue
 83 |     },
 84 |     // 提交
 85 |     handleChange (value) {
 86 |       if (this.noWrapper) {
 87 |         this.$emit('change', value)
 88 |       } else {
 89 |         this.$emit('update', value)
 90 |       }
 91 |     },
 92 |     // 取消(还原值)
 93 |     handleCancel () {
 94 |       this.setNewValue()
 95 |     },
 96 |     // 日期和时间特殊处理
 97 |     setTimeNewValue () {
 98 |       const value =
 99 |         typeof this.computedValue === 'number'
100 |           ? this.computedValue * 1000
101 |           : this.computedValue
102 |       if (dayjs(value).isValid()) {
103 |         this.newValue = dayjs(value).format(this.showFormat)
104 |       } else {
105 |         this.newValue = value
106 |       }
107 |     },
108 |     // 日期和时间特殊处理
109 |     handleTimeChange (value) {
110 |       if (value) {
111 |         if (typeof this.value === 'number') {
112 |           value = dayjs(value).unix()
113 |         } else {
114 |           if (dayjs(value).isValid()) {
115 |             value = dayjs(value).format(this.showFormat)
116 |           }
117 |         }
118 |       }
119 |       this.handleChange(value)
120 |     }
121 |   },
122 |   mounted () {
123 |     // 初始化
124 |     this.setNewValue()
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/src/EleEditableWrapper.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- 不需要包裹 -->
  4 |     <template v-if="noWrapper">
  5 |       <slot/>
  6 |     </template>
  7 | 
  8 |     <!-- 需要包裹 -->
  9 |     <template v-else>
 10 |       <!-- 是否正在被编辑 -->
 11 |       <template v-if="isEditing">
 12 |         <!-- 行内形态 -->
 13 |         <ele-editable-wrapper-form
 14 |           :field="field"
 15 |           :inline="inline"
 16 |           :newValue="newValue"
 17 |           :rules="rules"
 18 |           v-if="inline"
 19 |         >
 20 |           <slot/>
 21 |           <template v-slot:action>
 22 |             <el-button
 23 |               @click="handleChange"
 24 |               icon="el-icon-check"
 25 |               size="small"
 26 |               type="primary"
 27 |             ></el-button>
 28 |             <el-button
 29 |               @click="handleHideEditing"
 30 |               icon="el-icon-close"
 31 |               size="small"
 32 |             ></el-button>
 33 |           </template>
 34 |         </ele-editable-wrapper-form>
 35 | 
 36 |         <!-- 弹窗形态 -->
 37 |         <template v-else>
 38 |           <el-popover
 39 |             :title="title"
 40 |             trigger="manual"
 41 |             v-model="visible"
 42 |           >
 43 |             <!-- 弹窗内容区 -->
 44 |             <ele-editable-wrapper-form
 45 |               :field="field"
 46 |               :inline="inline"
 47 |               :newValue="newValue"
 48 |               :rules="rules"
 49 |             >
 50 |               <slot/>
 51 |               <template v-slot:action>
 52 |                 <div style="text-align: right; margin: 0">
 53 |                   <el-button
 54 |                     @click="handleHideEditing"
 55 |                     size="small"
 56 |                   >取消</el-button>
 57 |                   <el-button
 58 |                     @click="handleChange"
 59 |                     size="small"
 60 |                     type="primary"
 61 |                   >确定</el-button>
 62 |                 </div>
 63 |               </template>
 64 |             </ele-editable-wrapper-form>
 65 | 
 66 |             <!-- 弹窗展示区 -->
 67 |             <ele-editable-wrapper-display
 68 |               :displayValue="displayValue"
 69 |               :emptyText="emptyText"
 70 |               :isEmpty="isEmpty"
 71 |               :type="type"
 72 |               @click="handleHideEditing"
 73 |               slot="reference"
 74 |             />
 75 |           </el-popover>
 76 |         </template>
 77 |       </template>
 78 | 
 79 |       <!-- 没有正在编辑 -->
 80 |       <template v-else>
 81 |         <ele-editable-wrapper-display
 82 |           :displayValue="displayValue"
 83 |           :emptyText="emptyText"
 84 |           :isEmpty="isEmpty"
 85 |           :type="type"
 86 |           @click="handleShowEditing"
 87 |         />
 88 |       </template>
 89 |     </template>
 90 |   </div>
 91 | </template>
 92 | 
 93 | <script>
 94 | import { on, off } from 'element-ui/src/utils/dom'
 95 | import EleEditableWrapperDisplay from './wrapper/EleEditableWrapperDisplay'
 96 | import EleEditableWrapperForm from './wrapper/EleEditableWrapperForm'
 97 | 
 98 | export default {
 99 |   name: 'EleEditableWrapper',
100 |   components: {
101 |     EleEditableWrapperDisplay,
102 |     EleEditableWrapperForm
103 |   },
104 |   props: {
105 |     // 弹窗标题
106 |     title: String,
107 |     // 用于校检
108 |     field: {
109 |       type: String,
110 |       required: true
111 |     },
112 |     // 是否弹窗
113 |     inline: {
114 |       type: Boolean,
115 |       default: false
116 |     },
117 |     // 用于判断是否需要包裹
118 |     type: {
119 |       type: String,
120 |       required: true
121 |     },
122 |     // 自定义属性
123 |     customAttrs: {
124 |       type: Object,
125 |       default () {
126 |         return {}
127 |       }
128 |     },
129 |     // 是否为空
130 |     isEmpty: {
131 |       type: Boolean,
132 |       required: true
133 |     },
134 |     // 是否被包裹
135 |     noWrapper: Boolean,
136 |     // 空值时显示的文字
137 |     emptyText: {
138 |       type: String,
139 |       required: true
140 |     },
141 |     // 校检规则
142 |     rules: [Object, Array],
143 |     // 新值(用于校检)
144 |     newValue: [String, Number, Boolean, Array, Date],
145 |     // 显示的值(用于显示)
146 |     displayValue: [String, Number, Boolean, Array, Date]
147 |   },
148 |   data () {
149 |     return {
150 |       // 显示
151 |       visible: false,
152 |       // 是否正在被编辑
153 |       isEditing: false
154 |     }
155 |   },
156 |   methods: {
157 |     // 提交
158 |     handleChange () {
159 |       this.visible = false
160 |       this.$nextTick(() => {
161 |         this.isEditing = false
162 |       })
163 |       this.$emit('submit')
164 |     },
165 |     // 隐藏编辑
166 |     handleHideEditing () {
167 |       if (this.visible === false) return
168 |       this.visible = false
169 |       this.$nextTick(() => {
170 |         this.isEditing = false
171 |       })
172 |       this.$emit('cancel')
173 |     },
174 |     // 显示编辑
175 |     handleShowEditing () {
176 |       this.hideOthers()
177 |       this.isEditing = true
178 |       this.$nextTick(() => {
179 |         this.visible = true
180 |       })
181 |     },
182 |     // 隐藏其他
183 |     hideOthers () {
184 |       const components = this.findComponentsDownward(this.$root, 'EleEditableWrapper')
185 |       components.forEach((component) => component.handleHideEditing())
186 |     },
187 |     // 在上下文下, 根据组件名进行组件查找
188 |     findComponentsDownward (context, componentName) {
189 |       return context.$children.reduce((components, child) => {
190 |         if (child.$options.name === componentName) components.push(child)
191 |         const foundChilds = this.findComponentsDownward(child, componentName)
192 |         return components.concat(foundChilds)
193 |       }, [])
194 |     }
195 |   },
196 | 
197 |   mounted () {
198 |     // 其他地方关闭弹窗
199 |     on(document, 'click', this.handleHideEditing, false)
200 |   },
201 |   destroyed () {
202 |     off(document, 'click', this.handleHideEditing, false)
203 |   }
204 | }
205 | </script>
206 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-ele-editable | 高效、简单、强大的 element-ui 行内编辑组件
  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-editable.svg)](https://www.npmjs.com/package/vue-ele-editable)
  5 | [![download](https://img.shields.io/npm/dw/vue-ele-editable.svg)](https://npmcharts.com/compare/vue-ele-editable?minimal=true)
  6 | 
  7 | ## 介绍
  8 | 
  9 | vue-ele-editable 是一个高效、简单、强大的 element-ui 行内编辑组件, 引用组件后, 仅通过数据就可以完成行内编辑功能, 具体特点如下:
 10 | 
 11 | - 支持多种内置组件: input、select、radio、checkbox、textarea、date、time、datetime、text、url、status、switch、image、upload-image、time-text、date-text、datetime-text、color、number
 12 | - 支持 Popover 和 Inline 两种模式
 13 | - 支持数据校检、自定义属性、自定义显示数据、自定义发送数据
 14 | - 足够简单, 仅需要 1 行 html 代码和数据即可
 15 | 
 16 | > 为了帮助您更好的了解和使用, star 数超过 100 的话, 有视频源码讲解, 希望能给个 star😘😘😘
 17 | 
 18 | ## 效果图
 19 | 
 20 | [![示例](./public/example.gif)](https://codepen.io/dream2023/pen/dBNNbP)
 21 | 
 22 | ## 在线示例
 23 | 
 24 | [https://codepen.io/dream2023/pen/dBNNbP](https://codepen.io/dream2023/pen/dBNNbP)
 25 | 
 26 | ## 安装
 27 | 
 28 | ```bash
 29 | npm install vue-ele-editable --save
 30 | ```
 31 | 
 32 | ## 使用
 33 | 
 34 | ```js
 35 | import EleEditable from 'vue-ele-editable'
 36 | Vue.use(EleEditable)
 37 | 
 38 | // 在引入 EleEditable 时，可以传入一个全局配置对象
 39 | // key 是组件名, value 是组件的属性, 例如:
 40 | Vue.use(EleEditable, {
 41 |   // 所有 image 类型的组件都会有 lazy: true 的属性
 42 |   image: {
 43 |     lazy: true
 44 |   },
 45 |   // 所有的 number 类型的组件都会有 step: 10 的属性
 46 |   number: {
 47 |     step: 10
 48 |   },
 49 |   ...
 50 | })
 51 | ```
 52 | 
 53 | ## Props
 54 | 
 55 | ### 参数总览
 56 | 
 57 | ```js
 58 | props: {
 59 |   // 类型
 60 |   type: {
 61 |     type: String,
 62 |     default: 'text'
 63 |   },
 64 |   // 字段
 65 |   field: {
 66 |     type: String,
 67 |     required: true
 68 |   },
 69 |   // 是否为行内
 70 |   inline: {
 71 |     type: Boolean,
 72 |     default: false
 73 |   },
 74 |   // 标题
 75 |   title: String,
 76 |   // 字段值
 77 |   value: [String, Number, Boolean, Array, Date],
 78 |   // 默认值
 79 |   defaultValue: {
 80 |     type: [String, Number, Boolean, Array, Date],
 81 |     default: null
 82 |   },
 83 |   // 自定义组件是否需要包裹
 84 |   isNoWrapper: {
 85 |     type: Boolean,
 86 |     default: false
 87 |   },
 88 |   // 选项
 89 |   options: {
 90 |     type: Array,
 91 |     default () {
 92 |       return []
 93 |     }
 94 |   },
 95 |   // 请求地址
 96 |   requestFn: Function,
 97 |   // 校检规则
 98 |   rules: [Array, Object],
 99 |   // 其他附带数据
100 |   customData: Object,
101 |   // 自定义属性
102 |   customAttrs: Object,
103 |   // 格式化显示数据
104 |   displayFormatter: Function,
105 |   // 对请求数据格式化
106 |   valueFormatter: Function,
107 |   // 值空时显示的文本
108 |   emptyText: {
109 |     type: String,
110 |     default: '空'
111 |   }
112 | }
113 | ```
114 | 
115 | ### 参数讲解
116 | 
117 | #### type:
118 | 
119 | `type` 用于指定渲染组件, 目前支持的内置组件有:
120 | 
121 | | 类型          | 含义                                                 | 属性参考                                                                                 |
122 | | ------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |
123 | | text          | 静态文本                                             |                                                                                          |
124 | | image         | 单个图片/多张图片                                    | [vue-ele-gallery](https://github.com/dream2023/vue-ele-gallery)                          |
125 | | upload-image  | 上传图片                                             | [vue-ele-upload-image](https://github.com/dream2023/vue-ele-upload-image)                |
126 | | input         | 可编辑的单行文本                                     | [element-ui input](https://element.eleme.cn/#/zh-CN/component/input)                     |
127 | | textarea      | 可编辑的多行文本                                     | [element-ui input](https://element.eleme.cn/#/zh-CN/component/input)                     |
128 | | select        | 下拉框                                               | [element-ui select](https://element.eleme.cn/#/zh-CN/component/select)                   |
129 | | number        | 可编辑数字                                           | [element-ui input-number](https://element.eleme.cn/#/zh-CN/component/input-number)       |
130 | | radio         | 单选                                                 | [element-ui radio](https://element.eleme.cn/#/zh-CN/component/radio)                     |
131 | | checkbox      | 多选                                                 | [element-ui checkbox](https://element.eleme.cn/#/zh-CN/component/checkbox)               |
132 | | datetime      | 可编辑的日期时间 (可接受时间戳, 字符串, Date 类型值) | [element-ui datetime-picker](https://element.eleme.cn/#/zh-CN/component/datetime-picker) |
133 | | datetime-text | 不可编辑的日期时间 (接受值同上)                      |                                                                                          |
134 | | date          | 可编辑的日期 (接受值同上)                            | [element-ui date-picker](https://element.eleme.cn/#/zh-CN/component/date-picker)         |
135 | | date-text     | 不可编辑的日期 (接受值同上)                          |                                                                                          |
136 | | time          | 可编辑的时间 (接受值同上)                            | [element-ui time-picker](https://element.eleme.cn/#/zh-CN/component/time-picker)         |
137 | | time-text     | 不可编辑的时间 (接受值同上)                          |                                                                                          |
138 | | status        | 状态                                                 | [element-ui tag](https://element.eleme.cn/#/zh-CN/component/tag)                         |
139 | | switch        | 开关                                                 | [element-ui switch](https://element.eleme.cn/#/zh-CN/component/switch)                   |
140 | | url           | 链接                                                 |                                                                                          |
141 | | color         | 颜色                                                 | [element-ui color-picker](https://element.eleme.cn/#/zh-CN/component/color-picker)       |
142 | 
143 | 当`type`不是以上任何一个类型时, 就会按照传递的名字渲染, 可以进行自定义扩展组件, 具体参考 [自定义扩展示例 rate](./example/CustomRate.vue), [自定义扩展示例 slider](./example/CustomSlider.vue), 具体表现形式, 请看[在线示例](https://codepen.io/dream2023/pen/dBNNbP)
144 | 
145 | ### isNoWrapper:
146 | 
147 | `isNoWrapper`用于自定义组件是否需要包裹, 举例, input 是包裹组件, switch 就是不包裹组件, 内置组件的包裹与否无法改变, 只能改变自定义组件, 例如上面的 `rate` 组件就是不包裹, `slider`组件就是包裹组件
148 | 
149 | ### customAttrs:
150 | 
151 | `customAttrs` 自定义组件属性, 例如将 input 变为密码框:
152 | 
153 | ```js
154 | {
155 |   type: 'input',
156 |   // 属性参考 element-ui input组件
157 |   customAttrs: {
158 |     'show-password': true
159 |   }
160 | }
161 | ```
162 | 
163 | ### field:
164 | 
165 | `field` 用于发送请求, 作为数据的 `key`, 例如:
166 | 
167 | ```js
168 | {
169 |   value: 'zhang'
170 |   field: 'name'
171 | }
172 | 
173 | // 最终发送的数据为:
174 | {
175 |   name: 'zhang'
176 | }
177 | ```
178 | 
179 | ### inline:
180 | 
181 | `inline` 用于指定是采用 `popover` 还是 `inline` 的模式, 默认为 `popover`
182 | 
183 | ### title:
184 | 
185 | `title` 用于弹窗的标题
186 | 
187 | ### value:
188 | 
189 | `value` 值, 可用 `v-model` 绑定
190 | 
191 | ### defaultValue:
192 | 
193 | `defaultValue` 当 `value` 不存在时, 代替 `value`, 例如:
194 | 
195 | ```js
196 | {
197 |   value: '',
198 |   field: 'name',
199 |   defaultValue: '匿名'
200 | }
201 | 
202 | // 最终显示到屏幕上为: 匿名
203 | ```
204 | 
205 | ### displayFormatter:
206 | 
207 | `displayFormatter` 用于对值显示的进一步处理, 例如:
208 | 
209 | ```js
210 | // 伪代码
211 | {
212 |   value: 10,
213 |   displayFormatter: function (value) {
214 |     return `${value} 岁`
215 |   }
216 | }
217 | 
218 | // 最终显示到屏幕上为: 10 岁
219 | ```
220 | 
221 | ### emptyText:
222 | 
223 | `emptyText` 用于当无数据时, 显示的字符串, 例如:
224 | 
225 | ```js
226 | {
227 |   field: 'mobile',
228 |   // 当 value, defaultValue 和 displayFormatter都返回空时, 才起作用
229 |   value: '',
230 |   defaultValue: '',
231 |   displayFormatter: null,
232 |   emptyText: '无手机可用'
233 | }
234 | 
235 | // 最终显示到屏幕上为: 无手机可用
236 | ```
237 | 
238 | ### options:
239 | 
240 | `options` 用于 checkbox、radio、select、status 组件的选项, 支持对象数组和字符串数组:
241 | 
242 | ```js
243 | // 对象数组形式 (text 用于展示, 实际值是 value)
244 | options: [{ text: '男', value: 'male' }, { text: '女', value: 'female' }]
245 | 
246 | // 字符串数组 (相当于 [{ text: '男', value: '男' }, { text: '女', value: '女' }])
247 | options: ['男', '女']
248 | ```
249 | 
250 | ### requestFn:
251 | 
252 | `requestFn` 请求函数, 此函数无论如何最终要返回一个 `Promise` 示例, 用于判断请求的状态和结果
253 | 
254 | 有两种情况, 一种是你需要对原请求的响应结果进行处理, 可以套一层 Promise:
255 | 
256 | ```js
257 | // 伪代码
258 | async function requestFn(data) {
259 |   return new Promise((resolve, reject) => {
260 |     try {
261 |       const res = await axios.post('/post', data)
262 |       // 对res做各种处理
263 |       ...
264 |       resolve()
265 |     } catch(e) {
266 |       reject(e)
267 |     }
268 |   })
269 | }
270 | ```
271 | 
272 | 另一个种是不需要处理, 可以直接返回一个`Promise`对象
273 | 
274 | ```js
275 | async function requestFn(data) {
276 |   return axios.post('/post', data)
277 | }
278 | ```
279 | 
280 | ### rules:
281 | 
282 | `rules` 用于校检, 校检规则同 element-ui 的 form 一样, 都是使用的 [async-validator](https://github.com/yiminghe/async-validator), 支持数组和对象两种形式, 例如:
283 | 
284 | ```js
285 | // 对象
286 | rules: {
287 |   required: true,
288 |   message: '名称不能为空'
289 | }
290 | 
291 | // 数组
292 | rules: [
293 |   { type: 'number', message: '年龄必须填写数字' },
294 |   { required: true, message: '年龄必填填写' }
295 | ]
296 | ```
297 | 
298 | ### customData:
299 | 
300 | `customData` 用于携带额外数据, 例如:
301 | 
302 | ```js
303 | // 伪代码
304 | 
305 | // props的值
306 | {
307 |   field: 'name',
308 |   value: 'zhangchaojie',
309 |   customData: {
310 |     id: 10,
311 |     status: 1
312 |   }
313 | }
314 | 
315 | // 最终发送的数据为:
316 | {
317 |   name: 'zhangchaojie',
318 |   id: 10,
319 |   status: 1
320 | }
321 | ```
322 | 
323 | ### valueFormatter:
324 | 
325 | `valueFormatter` 用于对请求数据的进一步处理, 例如:
326 | 
327 | ```js
328 | // 伪代码
329 | 
330 | // props 值
331 | field: 'age',
332 | value: 10,
333 | customData: { id: 1 },
334 | valueFormatter: function (value) {
335 |   return value + 1
336 | }
337 | 
338 | // 最终发送的值为:
339 | {
340 |   age: 11,
341 |   id: 1
342 | }
343 | ```
344 | 
345 | ## 参考链接
346 | 
347 | - [x-editable](http://vitalets.github.io/x-editable)
348 | - [element-ui](http://element-cn.eleme.io)
349 | - [dolphinphp](https://www.kancloud.cn/ming5112/dolphinphp/256299)
350 | 


--------------------------------------------------------------------------------
/src/EleEditable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     @click.stop
  4 |     class="ele-editable"
  5 |   >
  6 |     <i
  7 |       class="el-icon-loading"
  8 |       v-show="isLoading"
  9 |     ></i>
 10 |     <ele-editable-wrapper
 11 |       :customAttrs="customAttrs"
 12 |       :displayValue="displayValue"
 13 |       :emptyText="emptyText"
 14 |       :field="field"
 15 |       :inline="inline"
 16 |       :isEmpty="isEmpty"
 17 |       :newValue="newValue"
 18 |       :noWrapper="noWrapper"
 19 |       :rules="rulesWidthKey"
 20 |       :title="title"
 21 |       :type="type"
 22 |       @cancel="handleCancel"
 23 |       @submit="handleSubmit"
 24 |       v-show="!isLoading"
 25 |     >
 26 |       <component
 27 |         :computedValue="computedValue"
 28 |         :customAttrs="customAttrs"
 29 |         :displayValue="displayValue"
 30 |         :field="field"
 31 |         :is="componentName"
 32 |         :isError="isError"
 33 |         :noWrapper="noWrapper"
 34 |         :options="changedOptions"
 35 |         :title="title"
 36 |         :type="type"
 37 |         :value="value"
 38 |         @change="handleChange"
 39 |         @update="handleUpdate"
 40 |         ref="com"
 41 |       ></component>
 42 |     </ele-editable-wrapper>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import EleEditableWrapper from './EleEditableWrapper'
 48 | import EleEditableUrl from './components/EleEditableUrl'
 49 | import EleEditableText from './components/EleEditableText'
 50 | import EleEditableTime from './components/EleEditableTime'
 51 | import EleEditableDate from './components/EleEditableDate'
 52 | import EleEditableInput from './components/EleEditableInput'
 53 | import EleEditableImage from './components/EleEditableImage'
 54 | import EleEditableColor from './components/EleEditableColor'
 55 | import EleEditableRadio from './components/EleEditableRadio'
 56 | import EleEditableStatus from './components/EleEditableStatus'
 57 | import EleEditableSelect from './components/EleEditableSelect'
 58 | import EleEditableNumber from './components/EleEditableNumber'
 59 | import EleEditableSwitch from './components/EleEditableSwitch'
 60 | import EleEditableTimeText from './components/EleEditableTimeText'
 61 | import EleEditableDateText from './components/EleEditableDateText'
 62 | import EleEditableTextarea from './components/EleEditableTextarea'
 63 | import EleEditableDatetime from './components/EleEditableDatetime'
 64 | import EleEditableCheckbox from './components/EleEditableCheckbox'
 65 | import EleEditableUploadImage from './components/EleEditableUploadImage'
 66 | import EleEditableDatetimeText from './components/EleEditableDatetimeText'
 67 | import Schema from 'async-validator'
 68 | 
 69 | export default {
 70 |   name: 'EleEditable',
 71 |   components: {
 72 |     EleEditableUrl,
 73 |     EleEditableText,
 74 |     EleEditableDate,
 75 |     EleEditableTime,
 76 |     EleEditableImage,
 77 |     EleEditableInput,
 78 |     EleEditableColor,
 79 |     EleEditableRadio,
 80 |     EleEditableSelect,
 81 |     EleEditableSwitch,
 82 |     EleEditableNumber,
 83 |     EleEditableStatus,
 84 |     EleEditableWrapper,
 85 |     EleEditableTimeText,
 86 |     EleEditableDateText,
 87 |     EleEditableTextarea,
 88 |     EleEditableDatetime,
 89 |     EleEditableCheckbox,
 90 |     EleEditableUploadImage,
 91 |     EleEditableDatetimeText
 92 |   },
 93 |   props: {
 94 |     // 类型
 95 |     type: {
 96 |       type: String,
 97 |       default: 'text',
 98 |       required: true
 99 |     },
100 |     // 字段
101 |     field: {
102 |       type: String,
103 |       required: true
104 |     },
105 |     // 是否为行内
106 |     inline: {
107 |       type: Boolean,
108 |       default: false
109 |     },
110 |     // 标题
111 |     title: String,
112 |     // 字段值
113 |     value: [String, Number, Boolean, Array, Date],
114 |     // 默认值
115 |     defaultValue: {
116 |       type: [String, Number, Boolean, Array, Date],
117 |       default: null
118 |     },
119 |     // 选项
120 |     options: {
121 |       type: Array,
122 |       default () {
123 |         return []
124 |       }
125 |     },
126 |     // 请求地址
127 |     requestFn: Function,
128 |     // 校检规则
129 |     rules: [Array, Object],
130 |     // 其他附带数据
131 |     customData: Object,
132 |     // 自定义属性
133 |     customAttrs: Object,
134 |     // 格式化显示数据
135 |     displayFormatter: Function,
136 |     // 对请求数据格式化
137 |     valueFormatter: Function,
138 |     // 组件是否需要包裹(用于自定义组件)
139 |     isNoWrapper: {
140 |       type: Boolean,
141 |       default: false
142 |     },
143 |     // 值空时显示的文本
144 |     emptyText: {
145 |       type: String,
146 |       default: '空'
147 |     }
148 |   },
149 |   computed: {
150 |     // 判断是否为空
151 |     isEmpty () {
152 |       return this.displayValue == null || this.displayValue === ''
153 |     },
154 |     // options 默认支持两种形式: ['xxx', 'xxx'] 和 [{ value: 'xxx', text: 'xxx' }]
155 |     // 统一改为 [{ value: xxx, text: xxx }] 形式
156 |     changedOptions () {
157 |       return this.options.map(item => {
158 |         if (typeof item === 'string') {
159 |           return {
160 |             text: item,
161 |             value: item
162 |           }
163 |         } else {
164 |           return item
165 |         }
166 |       })
167 |     },
168 |     // 子组件的名字
169 |     childNames () {
170 |       return this.$children.forEach((item) => item)
171 |     },
172 |     // 显示的值
173 |     displayValue () {
174 |       let value = this.computedValue
175 |       // 自定义显示值
176 |       if (this.displayFormatter) {
177 |         value = this.displayFormatter(value)
178 |       }
179 | 
180 |       if (this.options && this.options.length) {
181 |         // 根据 value 从 option 中获取 text
182 |         if (value instanceof Array) {
183 |           const res = value.map(item => {
184 |             return this.getTextFromOptions(item)
185 |           })
186 |           return res.join(',')
187 |         } else {
188 |           return this.getTextFromOptions(value)
189 |         }
190 |       } else {
191 |         return value
192 |       }
193 |     },
194 | 
195 |     // 当值为空时, 看是否存在默认值
196 |     computedValue () {
197 |       return this.value == null || this.value === '' ? this.defaultValue : this.value
198 |     },
199 | 
200 |     // 校检规则
201 |     rulesWidthKey () {
202 |       return { [this.field]: this.rules }
203 |     },
204 | 
205 |     // 当前组件是否需要被包裹
206 |     noWrapper () {
207 |       return this.noWrapperNameArr.includes(this.type) || this.isNoWrapper === true
208 |     },
209 | 
210 |     // 组件名称
211 |     componentName () {
212 |       if (this.builtInNames.includes(this.type)) {
213 |         // 内置组件
214 |         return 'ele-editable-' + this.type
215 |       } else {
216 |         // 外部组件
217 |         return this.type
218 |       }
219 |     }
220 |   },
221 |   data () {
222 |     return {
223 |       // 请求是否出错
224 |       isError: false,
225 |       // 是否正在请求
226 |       isLoading: false,
227 |       // 新值
228 |       newValue: '',
229 |       // 不需要包裹的组件
230 |       noWrapperNameArr: ['switch', 'status', 'date-text', 'time-text', 'datetime-text', 'text', 'url', 'image', 'color', 'upload-image'],
231 |       // 所有内置组件
232 |       builtInNames: ['text', 'image', 'url', 'time', 'date', 'datetime', 'input', 'select', 'radio', 'checkbox', 'textarea', 'switch', 'color', 'number', 'status', 'time-text', 'date-text', 'datetime-text', 'upload-image']
233 |     }
234 |   },
235 |   methods: {
236 |     // 从 options 中获取 value
237 |     getTextFromOptions (value) {
238 |       const options = this.changedOptions
239 | 
240 |       // 查找 value 对应的 option
241 |       const option = options.find(option => option.value === value)
242 | 
243 |       // 判断是否查询到
244 |       if (option && option.text) {
245 |         return option.text
246 |       } else {
247 |         return value
248 |       }
249 |     },
250 | 
251 |     // 复制值
252 |     cloneValue (value) {
253 |       if (Object.prototype.toString.call(value) === '[object Object]') {
254 |         // 对象格式
255 |         return Object.assign({}, value)
256 |       } else if (Array.isArray(value)) {
257 |         // 数组形式
258 |         return [...value]
259 |       } else {
260 |         // 其他值
261 |         return value
262 |       }
263 |     },
264 | 
265 |     // 发送请求
266 |     async handleChange (value) {
267 |       if (!this.requestFn) {
268 |         this.$notify.error({
269 |           title: '参数错误',
270 |           message: '未传递request-fn参数'
271 |         })
272 |         return
273 |       }
274 |       // 判断是否正在加载
275 |       if (this.isLoading) return
276 | 
277 |       // 判断是否进行了更改
278 |       if (value === this.value) return
279 | 
280 |       // 参数校检
281 |       try {
282 |         // 对值进行自定义处理
283 |         value = this.cloneValue(value)
284 |         if (this.valueFormatter) {
285 |           value = this.valueFormatter(value)
286 |         }
287 | 
288 |         // 参数校检
289 |         await this.validateData(value, this.rules, this.field)
290 |         try {
291 |           // 发送请求
292 |           const data = Object.assign({}, this.customData, { [this.field]: value })
293 |           this.isLoading = true
294 |           await this.requestFn(data)
295 |           this.isError = false
296 |           this.$message.success('更新成功')
297 |           this.$emit('input', value)
298 |         } catch (e) {
299 |           this.isError = true
300 |           this.$message.error('更新失败, 请重试')
301 |         } finally {
302 |           this.isLoading = false
303 |         }
304 |       } catch (errors) {
305 |         // 验证规则校检结果展示
306 |         errors.forEach(error => {
307 |           this.$notify.error({
308 |             title: '错误',
309 |             message: error.message
310 |           })
311 |         })
312 |       }
313 |     },
314 | 
315 |     // 校检
316 |     validateData (value, rules, field) {
317 |       return new Promise((resolve, reject) => {
318 |         if (rules) {
319 |           // 添加上 key
320 |           value = { [field]: value }
321 | 
322 |           const validator = new Schema(this.rulesWidthKey)
323 |           validator.validate(value, (errors, fileds) => {
324 |             if (errors) {
325 |               reject(errors)
326 |             } else {
327 |               resolve()
328 |             }
329 |           })
330 |         } else {
331 |           resolve()
332 |         }
333 |       })
334 |     },
335 | 
336 |     // 更新新值
337 |     handleUpdate (value) {
338 |       this.newValue = value
339 |     },
340 | 
341 |     // 确认
342 |     handleSubmit () {
343 |       this.handleChange(this.newValue)
344 |     },
345 | 
346 |     // 取消
347 |     handleCancel () {
348 |       this.$refs.com.setNewValue()
349 |     }
350 |   }
351 | }
352 | </script>
353 | 
354 | <style>
355 | .ele-editable .el-form-item {
356 |   margin-bottom: 0;
357 | }
358 | 
359 | .ele-editable .el-icon-loading {
360 |   font-size: 24px;
361 |   color: #409eff;
362 |   animation: rotating 1s linear infinite;
363 | }
364 | 
365 | .ele-editable__empty {
366 |   cursor: pointer;
367 |   color: #f56c6c;
368 |   font-style: italic;
369 |   border-bottom: dashed 1px #409eff;
370 | }
371 | 
372 | .ele-editable__edit {
373 |   cursor: pointer;
374 |   color: #409eff;
375 |   border-bottom: dashed 1px #409eff;
376 | }
377 | </style>
378 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="margin: 100px auto;max-width: 1200px;">
  3 |     <h1 style="text-align: center">vue-ele-editable</h1>
  4 |     <h2>类型演示:</h2>
  5 |     <el-table
  6 |       :data="tableData"
  7 |       border
  8 |       stripe
  9 |     >
 10 |       <el-table-column
 11 |         label="类型"
 12 |         prop="type"
 13 |         width="160"
 14 |       ></el-table-column>
 15 |       <el-table-column
 16 |         label="含义"
 17 |         prop="desc"
 18 |         width="400"
 19 |       ></el-table-column>
 20 |       <el-table-column
 21 |         label="演示(popover模式)"
 22 |         prop="popover"
 23 |       >
 24 |         <template slot-scope="scope">
 25 |           <ele-editable
 26 |             :custom-attrs="scope.row.popover.customAttrs"
 27 |             :field="scope.row.type"
 28 |             :isNoWrapper="scope.row.popover.isNoWrapper"
 29 |             :options="scope.row.popover.options"
 30 |             :request-fn="handleChange"
 31 |             :title="scope.row.type"
 32 |             :type="scope.row.type"
 33 |             v-model="scope.row.popover.data"
 34 |           />
 35 |         </template>
 36 |       </el-table-column>
 37 |       <el-table-column
 38 |         label="演示(inline模式)"
 39 |         prop="inline"
 40 |       >
 41 |         <template slot-scope="scope">
 42 |           <ele-editable
 43 |             :custom-attrs="scope.row.inline.customAttrs"
 44 |             :field="scope.row.type"
 45 |             :inline="true"
 46 |             :isNoWrapper="scope.row.inline.isNoWrapper"
 47 |             :options="scope.row.inline.options"
 48 |             :request-fn="handleChange"
 49 |             :title="scope.row.type"
 50 |             :type="scope.row.type"
 51 |             v-model="scope.row.inline.data"
 52 |           />
 53 |         </template>
 54 |       </el-table-column>
 55 |     </el-table>
 56 | 
 57 |     <h2>案例:</h2>
 58 |     <el-table
 59 |       :data="exampleData"
 60 |       border
 61 |       stripe
 62 |     >
 63 |       <el-table-column
 64 |         :key="field"
 65 |         :label="column.label"
 66 |         :prop="field"
 67 |         :width="column.width"
 68 |         v-for="(column, field) of exampleDesc"
 69 |       >
 70 |         <template slot-scope="scope">
 71 |           <ele-editable
 72 |             :custom-attrs="column.customAttrs"
 73 |             :custom-data="{
 74 |               id: scope.row.id
 75 |             }"
 76 |             :default-value="column.defaultValue"
 77 |             :display-formatter="column.displayFormatter"
 78 |             :empty-text="column.emptyText"
 79 |             :field="field"
 80 |             :inline="column.inline"
 81 |             :options="column.options"
 82 |             :request-fn="handleChange"
 83 |             :rules="column.rules"
 84 |             :title="column.label"
 85 |             :type="column.type"
 86 |             :value-formatter="column.valueFormatter"
 87 |             v-model="scope.row[field]"
 88 |           />
 89 |         </template>
 90 |       </el-table-column>
 91 |     </el-table>
 92 |   </div>
 93 | </template>
 94 | 
 95 | <script>
 96 | export default {
 97 |   name: 'App',
 98 |   data () {
 99 |     return {
100 |       tableDesc: {
101 |         type: {
102 |           label: '类型'
103 |         },
104 |         desc: {
105 |           label: '含义'
106 |         },
107 |         popover: {
108 |           label: '演示(popover模式)'
109 |         },
110 |         inline: {
111 |           label: '演示(inline模式)'
112 |         }
113 |       },
114 |       tableData: [
115 |         {
116 |           type: 'text',
117 |           desc: '静态文本',
118 |           popover: {
119 |             data: '我是静态文本'
120 |           },
121 |           inline: {
122 |             data: '我是静态文本'
123 |           }
124 |         },
125 |         {
126 |           type: 'input',
127 |           desc: '可编辑的单行文本',
128 |           popover: {
129 |             data: '我是可编辑的单行文本'
130 |           },
131 |           inline: {
132 |             data: '我是可编辑的单行文本'
133 |           }
134 |         },
135 |         {
136 |           type: 'textarea',
137 |           desc: '可编辑的多行文本',
138 |           popover: {
139 |             data: '我是可编辑的多行文本'
140 |           },
141 |           inline: {
142 |             data: '我是可编辑的多行文本'
143 |           }
144 |         },
145 |         {
146 |           type: 'select',
147 |           desc: '下拉框',
148 |           popover: {
149 |             data: 'beijing',
150 |             options: [
151 |               { text: '北京', value: 'beijing' },
152 |               { text: '上海', value: 'shanghai' },
153 |               { text: '深圳', value: 'shenzhen' }
154 |             ]
155 |           },
156 |           inline: {
157 |             data: 'beijing',
158 |             options: [
159 |               { text: '北京', value: 'beijing' },
160 |               { text: '上海', value: 'shanghai' },
161 |               { text: '深圳', value: 'shenzhen' }
162 |             ]
163 |           }
164 |         },
165 |         {
166 |           type: 'number',
167 |           desc: '可编辑数字',
168 |           popover: {
169 |             data: 10
170 |           },
171 |           inline: {
172 |             data: 10
173 |           }
174 |         },
175 |         {
176 |           type: 'radio',
177 |           desc: '单选',
178 |           popover: {
179 |             data: 1,
180 |             options: [
181 |               { text: '男', value: 0 },
182 |               { text: '女', value: 1 }
183 |             ]
184 |           },
185 |           inline: {
186 |             data: 1,
187 |             options: [
188 |               { text: '男', value: 0 },
189 |               { text: '女', value: 1 }
190 |             ]
191 |           }
192 |         },
193 |         {
194 |           type: 'checkbox',
195 |           desc: '多选',
196 |           popover: {
197 |             data: ['huawei', 'mi'],
198 |             options: [
199 |               { text: '华为', value: 'huawei' },
200 |               { text: '小米', value: 'mi' },
201 |               { text: '苹果', value: 'apple' }
202 |             ]
203 |           },
204 |           inline: {
205 |             data: ['huawei', 'mi'],
206 |             options: [
207 |               { text: '华为', value: 'huawei' },
208 |               { text: '小米', value: 'mi' },
209 |               { text: '苹果', value: 'apple' }
210 |             ]
211 |           }
212 |         },
213 |         {
214 |           type: 'datetime',
215 |           desc: '可编辑的日期时间 (可接受时间戳, 字符串, Date类型值)',
216 |           popover: {
217 |             data: new Date()
218 |           },
219 |           inline: {
220 |             data: new Date()
221 |           }
222 |         },
223 |         {
224 |           type: 'datetime-text',
225 |           desc: '不可编辑的日期时间 (接受值同上)',
226 |           popover: {
227 |             data: new Date()
228 |           },
229 |           inline: {
230 |             data: new Date()
231 |           }
232 |         },
233 |         {
234 |           type: 'date',
235 |           desc: '可编辑的日期 (接受值同上)',
236 |           popover: {
237 |             data: new Date()
238 |           },
239 |           inline: {
240 |             data: new Date()
241 |           }
242 |         },
243 |         {
244 |           type: 'date-text',
245 |           desc: '不可编辑的日期 (接受值同上)',
246 |           popover: {
247 |             data: new Date()
248 |           },
249 |           inline: {
250 |             data: new Date()
251 |           }
252 |         },
253 |         {
254 |           type: 'time',
255 |           desc: '可编辑的时间 (接受值同上)',
256 |           popover: {
257 |             data: new Date()
258 |           },
259 |           inline: {
260 |             data: new Date()
261 |           }
262 |         },
263 |         {
264 |           type: 'time-text',
265 |           desc: '不可编辑的时间 (接受值同上)',
266 |           popover: {
267 |             data: new Date()
268 |           },
269 |           inline: {
270 |             data: new Date()
271 |           }
272 |         },
273 |         {
274 |           type: 'status',
275 |           desc: '状态',
276 |           popover: {
277 |             data: 1,
278 |             options: [
279 |               { text: '审核失败', value: 0, type: 'danger' },
280 |               { text: '审核通过', value: 1, type: 'success' },
281 |               { text: '待审核', value: 2, type: 'primary' }
282 |             ]
283 |           },
284 |           inline: {
285 |             data: 1,
286 |             options: [
287 |               { text: '审核失败', value: 0, type: 'danger' },
288 |               { text: '审核通过', value: 1, type: 'success' },
289 |               { text: '待审核', value: 2, type: 'primary' }
290 |             ]
291 |           }
292 |         },
293 |         {
294 |           type: 'switch',
295 |           desc: '开关',
296 |           popover: {
297 |             data: 1
298 |           },
299 |           inline: {
300 |             data: 1
301 |           }
302 |         },
303 |         {
304 |           type: 'image',
305 |           desc: '单个图片/多张图片',
306 |           popover: {
307 |             data: ['https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/3.png', 'https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/4.png']
308 |           },
309 |           inline: {
310 |             data: ['https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/3.png', 'https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/4.png']
311 |           }
312 |         },
313 |         {
314 |           type: 'upload-image',
315 |           desc: '上传图片',
316 |           popover: {
317 |             data: null,
318 |             customAttrs: {
319 |               action: 'https://jsonplaceholder.typicode.com/posts/',
320 |               responseFn: function (response, file) {
321 |                 return file.url
322 |               }
323 |             }
324 |           },
325 |           inline: {
326 |             data: null,
327 |             customAttrs: {
328 |               action: 'https://jsonplaceholder.typicode.com/posts/',
329 |               responseFn: function (response, file) {
330 |                 return file.url
331 |               }
332 |             }
333 |           }
334 |         },
335 |         {
336 |           type: 'url',
337 |           desc: '链接',
338 |           popover: {
339 |             data: 'https://www.baidu.com'
340 |           },
341 |           inline: {
342 |             data: 'https://www.baidu.com'
343 |           }
344 |         },
345 |         {
346 |           type: 'color',
347 |           desc: '颜色',
348 |           popover: {
349 |             data: '#409EFF'
350 |           },
351 |           inline: {
352 |             data: '#409EFF'
353 |           }
354 |         },
355 |         {
356 |           type: 'custom-rate',
357 |           desc: '自定义扩展(评分组件)',
358 |           popover: {
359 |             data: 5,
360 |             isNoWrapper: true
361 |           },
362 |           inline: {
363 |             data: 2,
364 |             isNoWrapper: true
365 |           }
366 |         },
367 |         {
368 |           type: 'custom-slider',
369 |           desc: '自定义扩展(滑块组件)',
370 |           popover: {
371 |             data: 0
372 |           },
373 |           inline: {
374 |             data: 50
375 |           }
376 |         }
377 |       ],
378 |       exampleDesc: {
379 |         id: {
380 |           label: 'ID',
381 |           width: 50
382 |         },
383 |         avatar: {
384 |           label: '头像',
385 |           type: 'image',
386 |           width: 150
387 |         },
388 |         name: {
389 |           label: '姓名',
390 |           type: 'input',
391 |           rules: {
392 |             required: true,
393 |             message: '姓名必填'
394 |           }
395 |         },
396 |         age: {
397 |           label: '年龄',
398 |           type: 'number',
399 |           displayFormatter (value) {
400 |             return value != null ? `${value} 岁` : null
401 |           }
402 |         },
403 |         city: {
404 |           label: '所属忍村',
405 |           type: 'select',
406 |           options: [
407 |             { text: '木叶村', value: 'muyecun' },
408 |             { text: '砂隐村', value: 'shayincun' },
409 |             { text: '雾隐村', value: 'wurencun' },
410 |             { text: '音隐村', value: 'yinyincun' }
411 |           ]
412 |         },
413 |         gender: {
414 |           label: '性别',
415 |           type: 'radio',
416 |           options: [
417 |             { text: '男', value: 'male' },
418 |             { text: '女', value: 'female' }
419 |           ]
420 |         },
421 |         match: {
422 |           label: '中忍比赛时间',
423 |           type: 'datetime'
424 |         },
425 |         is_pass: {
426 |           label: '审核结果',
427 |           type: 'status',
428 |           defaultValue: 0,
429 |           options: [
430 |             { text: '未处理', value: 0, type: 'info' },
431 |             { text: '已通过', value: 1, type: 'success' },
432 |             { text: '未通过', value: 2, type: 'danger' }
433 |           ]
434 |         },
435 |         status: {
436 |           label: '状态',
437 |           type: 'switch'
438 |         }
439 |       },
440 |       exampleData: [
441 |         {
442 |           id: 1,
443 |           name: '旋涡鸣人',
444 |           avatar: ['https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/3.png', 'https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/4.png'],
445 |           age: 12,
446 |           city: 'muyecun',
447 |           match: '2019-10-20 10:20:30',
448 |           gender: 'male',
449 |           status: true,
450 |           is_pass: 1
451 |         },
452 |         {
453 |           id: 2,
454 |           name: '日向雏田',
455 |           avatar: ['https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/1.png', 'https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/2.png'],
456 |           age: 12,
457 |           city: 'muyecun',
458 |           match: '2019-10-20 10:20:30',
459 |           gender: 'male',
460 |           status: true,
461 |           is_pass: 1
462 |         },
463 |         {
464 |           id: 3,
465 |           name: '药师兜',
466 |           avatar: 'https://raw.githubusercontent.com/dream2023/vue-ele-editable/master/public/img/5.png',
467 |           age: 24,
468 |           city: 'yinyincun',
469 |           match: 1571536800,
470 |           gender: 'male',
471 |           status: false,
472 |           is_pass: 2
473 |         },
474 |         {
475 |           id: 4,
476 |           name: null,
477 |           avatar: null,
478 |           age: null,
479 |           city: null,
480 |           match: null,
481 |           gender: null,
482 |           status: null,
483 |           is_pass: null
484 |         }
485 |       ]
486 |     }
487 |   },
488 |   methods: {
489 |     handleChange (data) {
490 |       console.log(data)
491 |       return new Promise((resolve, reject) => {
492 |         setTimeout(() => {
493 |           resolve()
494 |         }, 1000)
495 |       })
496 |     }
497 |   }
498 | }
499 | </script>
500 | 


--------------------------------------------------------------------------------