## 按钮

### 基本用法

```html
<template>
  <el-form v-form>
    <cl-form-item label="权限">
      <el-radio-group v-model="permissionVal">
        <el-radio label="n">无权限</el-radio>
        <el-radio label="r">只读</el-radio>
        <el-radio label="w">编辑</el-radio>
        <el-radio label="b">必填</el-radio>
      </el-radio-group>
    </cl-form-item>
    <cl-form-item label="脚本1">
      <cl-input type="textarea" v-model="script1" />
    </cl-form-item>
    <cl-form-item label="按钮">
      <cl-button
        v-model="value1"
        :permission="permissionVal"
        icon="el-icon-eleme"
        btn-name="百度一下"
        :script="encodeScript1"
      ></cl-button>
    </cl-form-item>
    <cl-form-item label="脚本2">
      <cl-input type="textarea" v-model="script2" />
    </cl-form-item>
    <cl-form-item label="按钮(输入框)">
      <cl-button
        v-model="value2"
        :permission="permissionVal"
        is-show-input
        btn-name="Go!"
        :script="encodeScript2"
      ></cl-button>
    </cl-form-item>
  </el-form>
</template>
<script>
  import { encode } from "@/util/base64";

  export default {
    data() {
      return {
        permissionVal: "w",
        script1: "window.open('http://www.baidu.com')",
        script2: "window.open(formVm.value2)",
        value1: "",
        value2: "http://www.chenlongkeji.com",
      };
    },
    computed: {
      encodeScript1() {
        return encode(this.script1);
      },
      encodeScript2() {
        return encode(this.script2);
      },
    },
  };
</script>

<!-- button-1.vue -->
```

### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| v-model | 绑定值 | string | — | — |
| icon  | 按钮图标    | string   | — | -   |
| btn-name  | 按钮名称    | string   | — | — |
| is-show-input  | 是否显示输入框    | boolean   | — | false |
| script | 要执行的js脚本（base64编码格式） | string | - | - |

`script`中编写的脚本会放在如下方法体中执行，该方法提供的上下文对象如下面的注释所示：

```javascript
function(req, data, i18n, Message, Loading, formVm, _this){
  // 业务逻辑代码
  // req 异步请求封装 可以查看带中的request.js
  // i18n 国际化对象 i18n.t('login.login'); // data 在线表单数据对象
  // Message, Loading 分别ElementUI 的message 和 loading组件
  // formVm form的vue实例对象 使用如下
  // formVm.data 表单数据
  // formVm.$t('login.login') 国际化
  // _this 当前控件的vue对象 _this.inputVal 控件绑定的model值
}
```
