CuteJava 在线文档
目录

新版基础组件

# CuteCodeEditor 代码编辑器

# 预览

# API属性
参数 说明 类型 默认值 是否必填 枚举值
content 绑定值 String
height 编辑器高度 String 500px 否
readOnly 是否只读 Boolean false 否
mode 模式 String yaml 否 yaml, java, go, swift, dockerfile, groovy, lua, perl, python, ruby, sql, xml, vue
change 编辑区发生变化的回调事件 Function
# 使用方式

<cute-code-editor :content="content" mode="java" @change="onChange"/>
<cute-code-editor :content="content" mode="yaml" @change="onChange"/>
1
2
3

# CuteMarkdown Markdown编辑器

# 预览

# API属性
参数 说明 类型 默认值 是否必填
content 绑定值 String
change 编辑区发生变化的回调事件 Function
save ctrl + s 的回调事件(保存按键,同样触发该回调) Function
# 使用方式

<cute-markdown :content="content" @change="onChange" @save="onSave"/>
1
2
function onChange(text, markdown) {
    console.log('onChange:text', text)
    console.log('onChange:markdown', markdown)
}

function onSave(text, markdown) {
    console.log('onSave:text', text)
    console.log('onSave:markdown', markdown)
}
1
2
3
4
5
6
7
8
9

# CuteRichTextEditor 富文本编辑器

# 预览

# API属性
参数 说明 类型 默认值 是否必填
change 编辑区发生变化的回调事件 Function
readOnly 是否只读 Boolean false 否
# 使用方式

<cute-rich-text-editor :read-only="false" @change="onChange"/>
1
2
function onChange(html, text) {
    console.log('onChange:html', html)
    console.log('onChange:text', text)
}
1
2
3
4

# CuteSimpleTable 简单表格

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue

<!-- fetch: 获取远程数据 -->
<!-- params-transform: 组装查询参数 -->
<!-- responseTransform: 组装表格对象。对响应结果做处理 -->
<!-- primary-key: 主键 -->
<!-- mode: 模式。不传默认，传multi为多选 -->
<!-- @selection-change: 当且仅当mode为multi时启用 -->
<cute-simple-table
    ref="instance"
    :fetch="curd.fetch"
    :params-transform="curd.paramsTransform"
    primary-key="id"
    :page-props="curd.pageProps"
>
  <el-table-column prop="name" label="名称"/>
  <el-table-column prop="description" label="描述"/>
  <el-table-column prop="createTime" label="创建时间" :formatter="FormatRowDateTimeStr"/>
  <el-table-column prop="createBy" label="创建人"/>
  <el-table-column label="操作" width="150" min-width="150" fixed="right">
    <template slot-scope="scope">
      <div>
        <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
        <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
      </div>
    </template>
  </el-table-column>
</cute-simple-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# CuteDragTable 拖拽表格

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue

<!-- fetch: 获取远程数据 -->
<!-- params-transform: 组装查询参数 -->
<!-- responseTransform: 组装表格对象。对响应结果做处理 -->
<!-- primary-key: 主键 -->
<!-- data-source: 数据源。当data-source不为空时，以data-source的数据为主 -->
<!-- mode: 模式。不传默认，传multi为多选 -->
<!-- @selection-change: 当且仅当mode为multi时启用 -->
<cute-drag-table
    ref="instance"
    :fetch="curd.fetch"
    :params-transform="curd.paramsTransform"
    primary-key="id"
    :page-props="curd.pageProps"
>
  <el-table-column prop="name" label="名称"/>
  <el-table-column prop="description" label="描述"/>
  <el-table-column prop="createTime" label="创建时间" :formatter="FormatRowDateTimeStr"/>
  <el-table-column prop="createBy" label="创建人"/>
  <el-table-column label="操作" width="150" min-width="150" fixed="right">
    <template slot-scope="scope">
      <div>
        <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
        <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
      </div>
    </template>
  </el-table-column>
</cute-drag-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# CuteFormDialog 简易弹窗表单

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue


<cute-form-dialog ref="dialogForm" :model="createFormModel" :rules="createFormRules" title="演示:表单对话框"
                  @submit="onDialogFormSubmit">
  <el-form-item label="活动名称" prop="name" label-width="100px">
    <el-input v-model="createFormModel.name" placeholder="请输入" style="width: 100%"/>
  </el-form-item>
  <el-form-item label="活动区域" prop="region" label-width="100px">
    <el-select v-model="createFormModel.region" placeholder="请选择" style="width: 100%">
      <el-option label="区域一" value="shanghai"/>
      <el-option label="区域二" value="beijing"/>
    </el-select>
  </el-form-item>
</cute-form-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13

# CuteFormDrawer 简易抽屉表单

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue


<cute-form-drawer ref="drawerFrom" :model="createFormModel" :rules="createFormRules" title="演示:表单抽屉"
                  @submit="onDrawerFormSubmit">
  <el-form-item label="活动名称" prop="name" label-width="100px">
    <el-input v-model="createFormModel.name" placeholder="请输入" style="width: 100%"/>
  </el-form-item>
  <el-form-item label="活动区域" prop="region" label-width="100px">
    <el-select v-model="createFormModel.region" placeholder="请选择" style="width: 100%">
      <el-option label="区域一" value="shanghai"/>
      <el-option label="区域二" value="beijing"/>
    </el-select>
  </el-form-item>
</cute-form-drawer>
1
2
3
4
5
6
7
8
9
10
11
12
13

# CuteSearchForm 简易查询表单

# 预览

# API属性
参数 说明 类型 默认值 是否必填
model 绑定值 Object {} 是
disabled 是否禁用表单 Boolean false
submit 当查询或重置按钮被点击 Function 表单绑定值 是
# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-search-form :model="searchFormModel" :disable="true" @submit="handleSearchFormSubmit">
  <template v-slot:suffix>
    <el-form-item label="模糊查询" prop="blurry">
      <el-input v-model="searchFormModel.blurry" clearable/>
    </el-form-item>
  </template>
  <template v-slot:operation>
    <el-button type="primary">查询后置按钮</el-button>
  </template>
</cute-search-form>
1
2
3
4
5
6
7
8
9
10
11

# CuteHorizontalScrollBar 横向滚动条容器

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-horizontal-scroll-bar>
  <div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
</cute-horizontal-scroll-bar>
1
2
3
4

# CuteVerticalScrollBar 纵向滚动条容器

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-vertical-scroll-bar>
  <div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
</cute-vertical-scroll-bar>
1
2
3
4
# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-link title="百度一下" href="https://www.baidu.com"/>
1
2

# CuteNoData 无数据占位

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-no-data desc="自定义提示语"/>
1
2

# CutePreviewDrawer 预览抽屉

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-preview-drawer ref="cpd" title="预览抽屉">
  <p>预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉预览抽屉</p>
</cute-preview-drawer>
1
2
3
4

# CuteOneKeyCopy 一键复制

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOneKeyCopyDemo.vue


<cute-one-key-copy style="margin-left: 10pt" :content.sync="msg"/>
1
2

# CuteScreenShot 截屏

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-screen-shot>
  <cute-search-form :model="searchFormModel" @submit="handleSearchFormSubmit" @reset="handleSearchFormReset">
    <template v-slot:suffix>
      <el-form-item label="模糊查询" prop="blurry">
        <el-input v-model="searchFormModel.blurry" clearable/>
      </el-form-item>
    </template>
    <template v-slot:operation>
      <el-button type="primary">查询后置按钮</el-button>
    </template>
  </cute-search-form>
</cute-screen-shot>
1
2
3
4
5
6
7
8
9
10
11
12
13

# CuteSectionTitle 段落标题

# 预览

# 使用方式

参考 cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue


<cute-section-title title="段落标题">
  <el-button type="danger">操作按钮</el-button>
</cute-section-title>
1
2
3
4
帮助我们改善此页面！ (opens new window)
系统组件
新版业务组件

← 新版业务组件→

Theme by Vdoing | Copyright © 2017-2025 Odboy的武林秘籍