# 点击编辑组件使用说明

## 示例
:::demo
```html
<template>
    <su-view-edit 
        type="textarea" 
        id="5" 
        placeholder="请输入标题" 
        :prop="propOptions" 
        value="这是一个文章标题" 
        @change="changeTitle"
    ></su-view-edit>
</template>
<script>
export default {
    components:{
        seViewEdit
    },
    data () {
        return {
            propOptions: {
                clearDefault: true,
                options: {}
            }
        }
    },
    methods: {
        /**
         * @name: 组件确认编辑时触发的事件
         * @param { String } id 传入的id
         * @param { String } value 确认编辑的新值
         * @param { String } handleName 用户触发的事件名 例如回车enter或者失去焦点blur
         * @return {*}
         */
        changeTitle({id, value, handleName}) {
            
        }
    }
}
</script>
```
:::


## 属性介绍

### type

需要展示的组件类型，共有一下值可供选择

| 值                 | 类型           | 关联element组件地址 |
| ------------------ | -------------- | ------------------- |
| input              | 普通输入框     | el-input            |
| textarea           | 多行文本输入框 | el-input            |
| number             | 数字输入框     | el-input            |
| date               | 日期选择器     | el-date-picker      |
| timePicker         | 固定时间选择器 | el-time-select      |
| timeSelect         | 任意时间选择器 | el-time-picker      |
| select             | 下拉框         | el-select           |
| cascader（待完善） | 级联选择器     |                     |

### id

如果一个页面内引入了多个此组件，比如在循环时，可以传入一个id字段予以区分，id字段将在确认编辑时在 `change`事件中返回

### placeholder

输入框内提示文字

### value

传入的值，组件将根据此值进行默认状态下的展示。如果选择组件为输入框类型，可以直接将显示的值作为`value`传入，如果是`select`之类的下拉框，请直接传入id或者id组成的数组，组件将根据传入的id和数据自动回显。

> 请注意：如果使用`:value`的方式传入value值，组件将在确认编辑时返回新值，但不会对原值进行修改，需要用户手动修改原值才可更新组件显示默认值

**双向绑定**

如果需要双向绑定的话，请使用`v-model`属性，使用此方法的话在确认编辑时将直接修改原值。

```html
<view-edit type="input" v-model="title"></view-edit>
```

```javascript
data () {
    return {
        title: '这是一个标题'
    }
}
```

### prop

prop为配置项，详细配置请查看后面prop单独介绍

## 事件

### change

组件将在用户回车或者组件失焦时触发`change`事件，返回的值为一个`Object`，该Object由三个值组成，分别是id（使用时传入的id）、value（用户确认输入的新值）和handleName（用户触发的事件名）

## prop-共有配置

共有配置，以下配置所有类型组件都有，就是无论当type等于什么，input还是select都支持下面的配置项

```javascript
prop: {
	 clearDefault: true,
      option: {}
}
```



### clearDefault

**type：**Boolean

**必填：**否

点击输入时是否显示空输入框，true代表会清空输入框，false代表输入框内将显示展示值

### option

**type：**Object

**必填：**否

本组件其实封装的就是一个个element的组件，具体都有哪些组件可以参考上方属性介绍部分type参数解释，prop配置中的option选项就是给这些element组件配置属性，option内的所有参数都将作为属性配置给element组件，举例如下

```html
<view-edit type="input" v-model="title" :prop="propOption"></view-edit>
```

```js
propOption: {
    option: {
        maxLength: 10
    }
}
```

上面代码中的`maxLength: 10`就会直接作为`el-input`的属性

> 请注意，element组件的有些属性需要在定义组件的时候就存在，不可后期动态变更，比如`show-word-limit`，所以这些属性将不会被支持。

## prop-专属配置

有一些配置项只有某些类型的组件会使用。

### type = input && type = textarea && type = number

```javascript
prop: {
	reg: /[^\u4e00-\u9fa5]/g, // 输入框仅支持输入中文
	regMessage: '仅可输入中文，请将输入法切换至中文',
	options: {}
}
```

| 属性       | 介绍                                         | 类型       | 默认值 |
| ---------- | -------------------------------------------- | ---------- | ------ |
| reg        | 可以限制用户输入内容                         | 正则表达式 | 无     |
| regMessage | 当用户输入正则表达式限制的字符时候的提示内容 | String     | 无     |

### type=textarea

```js
prop: {
	wrap: true,
	options: {}
}
```

| 属性 | 介绍                                                   | 类型    | 默认值 |
| ---- | ------------------------------------------------------ | ------- | ------ |
| wrap | 是否支持换行，配置为true时，回车事件将不会触发修改事件 | Boolean | false  |

### type = select

```js
prop: {
	label: 'label',
    value: 'value',
    numberId: true,
    clearDefault: true,
    data: [
        { label: '前端', value: 1 },
        { label: '后端', value: 2 },
        { label: '产品', value: 3 },
        { label: '测试', value: 4 }
    ],
    options: {
    	multiple: true
    }
}
```

| 属性      | 介绍                                                    | 类型    | 默认值 |
| --------- | ------------------------------------------------------- | ------- | ------ |
| label     | 下拉框数据中显示值的字段                                | String  | label  |
| value     | 下拉框数据中需要取的值的字段                            | String  | value  |
| numberId* | 如果下拉框数据中的value值为数字类型，此项需要设置为true | Boolean | false  |
| data      | 下拉框数据                                              | Object  | 无     |

> 注意，此组件接收值仅支持数字和字符串，如果需要传入数组（比如组件类型为多选的select时），请将数组转为逗号隔开的字符串传入，组件返回值也为字符串，如果是多选的下拉框，则返回值也为逗号隔开的字符串。

numberId：此组件目前接收value值仅支持数字和字符串，如果是select多选情况下，需要传入的值为**逗号隔开的字符串**，再进行回显时，组件会将逗号隔开的字符串转换为数组，然后赋值给el-select组件，由于逗号隔开的字符串转为数组时，默认的每一项为字符串，所以如果传入的data中的value值类型是数字，可能会回显异常，为了解决此问题，当传入的data中的value值类型是数字时，可以传入numberId属性，并设置为true，这样组件在将逗号隔开的字符串转为数组时，会将其中的每一项转换为数字。

### type=cascader 级联选择器

请注意，此类型组件由于可能性太多，暂未完善，目前显示值不支持显示完整路径，也不支持二维数组，具体完善方案要基于具体要求确定

```js
prop: {
    options: {},
    data: [{
        value: 'zhinan',
        label: '指南',
        children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
                value: 'yizhi',
                label: '一致'
            }, {
                value: 'fankui',
                label: '反馈'
            }]
        }, {
            value: 'daohang',
            label: '导航',
            children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
            }, {
                value: 'dingbudaohang',
                label: '顶部导航'
            }]
        }]
    }],
        props: {
            label: 'label',
                value: 'value',
                    checkStrictly: true,
                        multiple: true,
                            emitPath: false
        }
}

```

| 属性  | 介绍                                           | 类型   | 默认值 |
| ----- | ---------------------------------------------- | ------ | ------ |
| data  | 级联选择器的数据，等于el-cascader的options属性 | Array  | 无     |
| props | 级联选择器的配置，等于el-cascader的props属性   | Object | 无     |

## 注意事项

- number类型默认支持输入包含一个小数点的正负数字，如果需要限制正数或者正整数，可以通过reg属性传入正则表达式