ap-dev 1.2.24 → 1.2.26

package/dev/CustomPanel/items/ApDevSelect.vue

@@ -1,314 +1,314 @@
-<template>
-  <div
-    class="dev-main-item"
-    :data-ref="itemObj.ref"
-    :data-type="itemObj.type"
-    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
-    @click.stop="itemClick(itemObj)"
-  >
-    {{ itemObj.options.labelName }}
-
-    <!-- 级联选择器 -->
-    <template v-if="itemObj.options.type == 'cascader'">
-      <template v-if="itemObj.options.props == true">
-        <el-cascader
-          :key="dataList2.value"
-          v-model="value"
-          :options="dataList2"
-          :name="itemObj.options.name"
-          :label="itemObj.options.label"
-          :placeholder="itemObj.options.placeholder"
-          :props="{ expandTrigger: 'hover', multiple: itemObj.options.multiple, checkStrictly: itemObj.options.checkStrictly }"
-          :clearable="itemObj.options.clearable"
-          :show-all-levels="itemObj.options.levels"
-          :collapse-tags="itemObj.options.tags"
-          :filterable="itemObj.options.filterable"
-          :separator="itemObj.options.separator"
-        />
-      </template>
-
-      <template v-else>
-        <el-cascader
-          :key="dataList2.value"
-          v-model="value"
-          :options="dataList2"
-          :name="itemObj.options.name"
-          :label="itemObj.options.label"
-          :placeholder="itemObj.options.placeholder"
-          :props="{ multiple: itemObj.options.multiple, checkStrictly: itemObj.options.checkStrictly }"
-          :clearable="itemObj.options.clearable"
-          :show-all-levels="itemObj.options.levels"
-          :collapse-tags="itemObj.options.tags"
-          :filterable="itemObj.options.filterable"
-          :separator="itemObj.options.separator"
-        />
-      </template>
-    </template>
-
-    <!-- 选择器 -->
-    <template v-else>
-      <el-select
-        v-model="value"
-        :name="itemObj.options.name"
-        :label="itemObj.options.label"
-        :placeholder="itemObj.options.placeholder"
-        :clearable="itemObj.options.clearable"
-        :disabled="itemObj.options.disabled"
-        :multiple="itemObj.options.multiple"
-        :filterable="itemObj.options.filterable"
-        :collapse-tags="itemObj.options.tags"
-      >
-        <el-option
-          v-for="item in dataList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </template>
-
-  </div>
-</template>
-
-<script>
-import ApDevItemBase from './base/ApDevItemBase'
-
-export default {
-  name: 'ApDevSelect',
-  extends: ApDevItemBase,
-  data() {
-    return {
-      dataList: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      dataList2: [{
-        value: 'zhinan',
-        label: '指南',
-        disabled: true,
-        children: [{
-          value: 'shejiyuanze',
-          label: '设计原则',
-          children: [{
-            value: 'yizhi',
-            label: '一致'
-          }, {
-            value: 'fankui',
-            label: '反馈'
-          }, {
-            value: 'xiaolv',
-            label: '效率'
-          }, {
-            value: 'kekong',
-            label: '可控'
-          }]
-        }, {
-          value: 'daohang',
-          label: '导航',
-          children: [{
-            value: 'cexiangdaohang',
-            label: '侧向导航'
-          }, {
-            value: 'dingbudaohang',
-            label: '顶部导航'
-          }]
-        }]
-      }, {
-        value: 'zujian',
-        label: '组件',
-        children: [{
-          value: 'basic',
-          label: 'Basic',
-          children: [{
-            value: 'layout',
-            label: 'Layout 布局'
-          }, {
-            value: 'color',
-            label: 'Color 色彩'
-          }, {
-            value: 'typography',
-            label: 'Typography 字体'
-          }, {
-            value: 'icon',
-            label: 'Icon 图标'
-          }, {
-            value: 'button',
-            label: 'Button 按钮'
-          }]
-        }, {
-          value: 'form',
-          label: 'Form',
-          children: [{
-            value: 'radio',
-            label: 'Radio 单选框'
-          }, {
-            value: 'checkbox',
-            label: 'Checkbox 多选框'
-          }, {
-            value: 'input',
-            label: 'Input 输入框'
-          }, {
-            value: 'input-number',
-            label: 'InputNumber 计数器'
-          }, {
-            value: 'select',
-            label: 'Select 选择器'
-          }, {
-            value: 'cascader',
-            label: 'Cascader 级联选择器'
-          }, {
-            value: 'switch',
-            label: 'Switch 开关'
-          }, {
-            value: 'slider',
-            label: 'Slider 滑块'
-          }, {
-            value: 'time-picker',
-            label: 'TimePicker 时间选择器'
-          }, {
-            value: 'date-picker',
-            label: 'DatePicker 日期选择器'
-          }, {
-            value: 'datetime-picker',
-            label: 'DateTimePicker 日期时间选择器'
-          }, {
-            value: 'upload',
-            label: 'Upload 上传'
-          }, {
-            value: 'rate',
-            label: 'Rate 评分'
-          }, {
-            value: 'form',
-            label: 'Form 表单'
-          }]
-        }, {
-          value: 'data',
-          label: 'Data',
-          children: [{
-            value: 'table',
-            label: 'Table 表格'
-          }, {
-            value: 'tag',
-            label: 'Tag 标签'
-          }, {
-            value: 'progress',
-            label: 'Progress 进度条'
-          }, {
-            value: 'tree',
-            label: 'Tree 树形控件'
-          }, {
-            value: 'pagination',
-            label: 'Pagination 分页'
-          }, {
-            value: 'badge',
-            label: 'Badge 标记'
-          }]
-        }, {
-          value: 'notice',
-          label: 'Notice',
-          children: [{
-            value: 'alert',
-            label: 'Alert 警告'
-          }, {
-            value: 'loading',
-            label: 'Loading 加载'
-          }, {
-            value: 'message',
-            label: 'Message 消息提示'
-          }, {
-            value: 'message-box',
-            label: 'MessageBox 弹框'
-          }, {
-            value: 'notification',
-            label: 'Notification 通知'
-          }]
-        }, {
-          value: 'navigation',
-          label: 'Navigation',
-          children: [{
-            value: 'menu',
-            label: 'NavMenu 导航菜单'
-          }, {
-            value: 'tabs',
-            label: 'Tabs 标签页'
-          }, {
-            value: 'breadcrumb',
-            label: 'Breadcrumb 面包屑'
-          }, {
-            value: 'dropdown',
-            label: 'Dropdown 下拉菜单'
-          }, {
-            value: 'steps',
-            label: 'Steps 步骤条'
-          }]
-        }, {
-          value: 'others',
-          label: 'Others',
-          children: [{
-            value: 'dialog',
-            label: 'Dialog 对话框'
-          }, {
-            value: 'tooltip',
-            label: 'Tooltip 文字提示'
-          }, {
-            value: 'popover',
-            label: 'Popover 弹出框'
-          }, {
-            value: 'card',
-            label: 'Card 卡片'
-          }, {
-            value: 'carousel',
-            label: 'Carousel 走马灯'
-          }, {
-            value: 'collapse',
-            label: 'Collapse 折叠面板'
-          }]
-        }]
-      }, {
-        value: 'ziyuan',
-        label: '资源',
-        children: [{
-          value: 'axure',
-          label: 'Axure Components'
-        }, {
-          value: 'sketch',
-          label: 'Sketch Templates'
-        }, {
-          value: 'jiaohu',
-          label: '组件交互文档'
-        }]
-      }],
-      value: ''
-    }
-  },
-  created() {
-    // 默认参数
-    this.defaultOptions = {
-      span: 12,
-      type: 'select',
-      placeholder: '请选择',
-      levels: false,
-      tags: false
-    }
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <div
+    class="dev-main-item"
+    :data-ref="itemObj.ref"
+    :data-type="itemObj.type"
+    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
+    @click.stop="itemClick(itemObj)"
+  >
+    {{ itemObj.options.labelName }}
+
+    <!-- 级联选择器 -->
+    <template v-if="itemObj.options.type == 'cascader'">
+      <template v-if="itemObj.options.props == true">
+        <el-cascader
+          :key="dataList2.value"
+          v-model="value"
+          :options="dataList2"
+          :name="itemObj.options.name"
+          :label="itemObj.options.label"
+          :placeholder="itemObj.options.placeholder"
+          :props="{ expandTrigger: 'hover', multiple: itemObj.options.multiple, checkStrictly: itemObj.options.checkStrictly }"
+          :clearable="itemObj.options.clearable"
+          :show-all-levels="itemObj.options.levels"
+          :collapse-tags="itemObj.options.tags"
+          :filterable="itemObj.options.filterable"
+          :separator="itemObj.options.separator"
+        />
+      </template>
+
+      <template v-else>
+        <el-cascader
+          :key="dataList2.value"
+          v-model="value"
+          :options="dataList2"
+          :name="itemObj.options.name"
+          :label="itemObj.options.label"
+          :placeholder="itemObj.options.placeholder"
+          :props="{ multiple: itemObj.options.multiple, checkStrictly: itemObj.options.checkStrictly }"
+          :clearable="itemObj.options.clearable"
+          :show-all-levels="itemObj.options.levels"
+          :collapse-tags="itemObj.options.tags"
+          :filterable="itemObj.options.filterable"
+          :separator="itemObj.options.separator"
+        />
+      </template>
+    </template>
+
+    <!-- 选择器 -->
+    <template v-else>
+      <el-select
+        v-model="value"
+        :name="itemObj.options.name"
+        :label="itemObj.options.label"
+        :placeholder="itemObj.options.placeholder"
+        :clearable="itemObj.options.clearable"
+        :disabled="itemObj.options.disabled"
+        :multiple="itemObj.options.multiple"
+        :filterable="itemObj.options.filterable"
+        :collapse-tags="itemObj.options.tags"
+      >
+        <el-option
+          v-for="item in dataList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </template>
+
+  </div>
+</template>
+
+<script>
+import ApDevItemBase from './base/ApDevItemBase'
+
+export default {
+  name: 'ApDevSelect',
+  extends: ApDevItemBase,
+  data() {
+    return {
+      dataList: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      dataList2: [{
+        value: 'zhinan',
+        label: '指南',
+        disabled: true,
+        children: [{
+          value: 'shejiyuanze',
+          label: '设计原则',
+          children: [{
+            value: 'yizhi',
+            label: '一致'
+          }, {
+            value: 'fankui',
+            label: '反馈'
+          }, {
+            value: 'xiaolv',
+            label: '效率'
+          }, {
+            value: 'kekong',
+            label: '可控'
+          }]
+        }, {
+          value: 'daohang',
+          label: '导航',
+          children: [{
+            value: 'cexiangdaohang',
+            label: '侧向导航'
+          }, {
+            value: 'dingbudaohang',
+            label: '顶部导航'
+          }]
+        }]
+      }, {
+        value: 'zujian',
+        label: '组件',
+        children: [{
+          value: 'basic',
+          label: 'Basic',
+          children: [{
+            value: 'layout',
+            label: 'Layout 布局'
+          }, {
+            value: 'color',
+            label: 'Color 色彩'
+          }, {
+            value: 'typography',
+            label: 'Typography 字体'
+          }, {
+            value: 'icon',
+            label: 'Icon 图标'
+          }, {
+            value: 'button',
+            label: 'Button 按钮'
+          }]
+        }, {
+          value: 'form',
+          label: 'Form',
+          children: [{
+            value: 'radio',
+            label: 'Radio 单选框'
+          }, {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          }, {
+            value: 'input',
+            label: 'Input 输入框'
+          }, {
+            value: 'input-number',
+            label: 'InputNumber 计数器'
+          }, {
+            value: 'select',
+            label: 'Select 选择器'
+          }, {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          }, {
+            value: 'switch',
+            label: 'Switch 开关'
+          }, {
+            value: 'slider',
+            label: 'Slider 滑块'
+          }, {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          }, {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          }, {
+            value: 'datetime-picker',
+            label: 'DateTimePicker 日期时间选择器'
+          }, {
+            value: 'upload',
+            label: 'Upload 上传'
+          }, {
+            value: 'rate',
+            label: 'Rate 评分'
+          }, {
+            value: 'form',
+            label: 'Form 表单'
+          }]
+        }, {
+          value: 'data',
+          label: 'Data',
+          children: [{
+            value: 'table',
+            label: 'Table 表格'
+          }, {
+            value: 'tag',
+            label: 'Tag 标签'
+          }, {
+            value: 'progress',
+            label: 'Progress 进度条'
+          }, {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          }, {
+            value: 'pagination',
+            label: 'Pagination 分页'
+          }, {
+            value: 'badge',
+            label: 'Badge 标记'
+          }]
+        }, {
+          value: 'notice',
+          label: 'Notice',
+          children: [{
+            value: 'alert',
+            label: 'Alert 警告'
+          }, {
+            value: 'loading',
+            label: 'Loading 加载'
+          }, {
+            value: 'message',
+            label: 'Message 消息提示'
+          }, {
+            value: 'message-box',
+            label: 'MessageBox 弹框'
+          }, {
+            value: 'notification',
+            label: 'Notification 通知'
+          }]
+        }, {
+          value: 'navigation',
+          label: 'Navigation',
+          children: [{
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          }, {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          }, {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          }, {
+            value: 'dropdown',
+            label: 'Dropdown 下拉菜单'
+          }, {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }]
+        }, {
+          value: 'others',
+          label: 'Others',
+          children: [{
+            value: 'dialog',
+            label: 'Dialog 对话框'
+          }, {
+            value: 'tooltip',
+            label: 'Tooltip 文字提示'
+          }, {
+            value: 'popover',
+            label: 'Popover 弹出框'
+          }, {
+            value: 'card',
+            label: 'Card 卡片'
+          }, {
+            value: 'carousel',
+            label: 'Carousel 走马灯'
+          }, {
+            value: 'collapse',
+            label: 'Collapse 折叠面板'
+          }]
+        }]
+      }, {
+        value: 'ziyuan',
+        label: '资源',
+        children: [{
+          value: 'axure',
+          label: 'Axure Components'
+        }, {
+          value: 'sketch',
+          label: 'Sketch Templates'
+        }, {
+          value: 'jiaohu',
+          label: '组件交互文档'
+        }]
+      }],
+      value: ''
+    }
+  },
+  created() {
+    // 默认参数
+    this.defaultOptions = {
+      span: 12,
+      type: 'select',
+      placeholder: '请选择',
+      levels: false,
+      tags: false
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>