DWF提供的内置选项设置组件

建设中...，关于AttributeSelector的用法先列出源代码，后续要继续完善：

props 示例图

# 属性选择器 AttributeSelector

v-model: (__必填__)目标类的属性名，string类型

- className:
  - 类型：string
  - __必填__
  - 说明：目标类的类名。通常使用`this.targetClass` 或者已绑定的类名

<AttributeSelector :class-name="'foobar'" v-model="args.attr1"></AttributeSelector>

- dataTypes：
  - 类型： Array
  - 说明：允许的数据类型，用于缩小选择范围。提前设定。
  - 默认值：允许所有类型

<AttributeSelector :class-name="'foobar'" :data-types="['String', 'Integer']" v-model="args.attr2"></AttributeSelector>

示例：

<!---  在template的editbox中使用 ---->
  <ClassNameSelector v-model="args.classNameForAttr3"></ClassNameSelector>
  <AttributeSelector :class-name="args.classNameForAttr3" v-model="args.attr3"></AttributeSelector>

  <script>
    export default {
      data () {
        return {
          args: {
            classNameForAttr3: '',
            attr3: ''
          }
        }
      }
    }
  </script>

ClassNameSelector:

props

示例图

# 类选择器 ClassNameSelector

用于选择一个实体类或者关系类。返回选定类的类名（可能需要进一步判断是否为关联类）

v-model: (__必填__)目标类的属性名，string类型

<ClassNameSelector v-model="args.clsname1"/>

示例：

提供一个带有标题的类选择器，用于选择一个类，选定的类名保存为组件的'args.clsname1'。标题名叫"目标类"

 
  <!--- 在template的editbox中使用 ----->
  <div>
    <p>目标类</p>
    <ClassNameSelector v-model="args.clsname1"/>
  </div>

ImageSelector

props

示例图

# 图片选择器 ImageSelector

用于选择一个上传的图片，或网络图片

props：
- value
  - 类型：object
  - __必填__
  - 说明：用于存储选定图片信息的对象。要求带有以下两个属性：
    - imgOrigin: 使用图片库还是自定义图片。字符串值，取值有两个：
      + `imgBase`：使用图片库
      + `imgSelf`：使用自定义图片 （？）
    - back_picture：图片地址。oid值或者url（？）

    实际使用时，可以将以上两个属性初始化为空字符串（''）

示例：

<ImageSelector v-model="args.imageData"></ImageSelector>

<script>
  export default {
    data () {
      return {
        args: {
          imageData: {imgOrigin: 'imgBase', back_picture: ''}
        }
      }
    }
  }
</script>

使用图片库时

ColorSelector

props

# 颜色选择器 ColorSelector

用于选择一个颜色值，可以通过开关控制是否带有透明度

v-model: （__必填__）颜色值，是一个字符串，开启alpha时为"rgb(x, y, z, a)", 否则为 #rrggbb


- alpha
  类型：Boolean
  说明：是否支持透明度选择
  默认值：false

示例：- 提供一个颜色选择器，用于选择一个颜色。颜色值保存为组件的'args.color'

  <!-- 使用选中图片作为div的背景 -->
  <div :style="{'backgroundColor': args.color}" style="width: 500px; height: 400px;"></div>

  <!-- Editbox中 -->
  <ColorSelector v-model="args.color"></ColorSelector>

页面树结构

DWF提供的内置选项设置组件