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>

页面树结构

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