odboy/cutejava
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 统一组件API规范并完善表单重置功能

Browse Source 
- 将多个组件的props从具体属性名改为统一的value属性
- 为所有组件添加v-model支持，替换原有的具体属性绑定
- 统一实现resetField方法，确保表单重置功能一致性
- 修正组件内部数据绑定逻辑，使用innerValue替代直接修改prop
- 更新文档示例，将API参数说明改为value | v-model格式
- 为代码编辑器、富文本编辑器等组件添加input事件发射
- 调整文件上传组件的值类型定义，从Object改为String
- 移除废弃的maxLength回调方法，优化编辑器性能
- 重构双向绑定逻辑，确保父子组件数据同步正确性
- 为树形选择器添加ref引用以便操作内部实例
- 调整组件演示页面的导入路径和标签页名称结构
This commit is contained in:
odboy
2026-02-05 14:34:32 +08:00
parent 9adedc71a5
commit 882ac772d3
31 changed files with 218 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cutejava-front/src/views/components/advanced/CuteEditTable.vue
+2 -1
View File
@@ -199,7 +199,8 @@ export default {
*/
resetField() {
this.dataSource = []
this.$emit('input', this.dataSource)
this.$emit('change', [])
this.$emit('input', [])
}
}
}
cutejava-front/src/views/components/business/CuteDeptTree.vue
+8 -2
View File
@@ -18,6 +18,7 @@
/>
</div>
<el-tree
ref="deptTree"
:data="deptData"
:load="getDeptData"
:props="defaultProps"
@@ -45,8 +46,7 @@ export default {
return {
deptName: '',
deptData: [],
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
currentDept: null
defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }
}
},
methods: {
@@ -74,7 +74,13 @@ export default {
// 绑定node-click事件
this.$emit('node-click', value)
// 绑定form value
this.$emit('change', value.id)
this.$emit('input', value.id)
},
resetField() {
this.$refs.deptTree.setCurrentNode(null)
this.$emit('change', null)
this.$emit('input', null)
}
}
}
cutejava-front/src/views/components/business/CuteFileDragUpload.vue
+11 -3
View File
@@ -31,8 +31,8 @@ export default {
name: 'CuteFileUpload',
props: {
value: {
type: Object,
required: true,
type: String,
required: false,
default: null
},
/**
@@ -73,9 +73,10 @@ export default {
// console.error('response', response)
// console.error('file', file)
// console.error('fileList', fileList)
this.value.fileUrl = response
// 绑定on-success事件
this.$emit('on-success', response, file, fileList)
this.$emit('change', response)
this.$emit('input', response)
},
// 监听上传失败
handleError(e, file, fileList) {
@@ -83,6 +84,13 @@ export default {
KitMessage.Error(msg.message)
// 绑定on-error事件
this.$emit('on-error', e, file, fileList)
this.$emit('change', null)
this.$emit('input', null)
},
resetField() {
this.$refs.upload.clearFiles()
this.$emit('change', null)
this.$emit('input', null)
}
}
}
cutejava-front/src/views/components/business/CuteFileUpload.vue
+10 -2
View File
@@ -29,7 +29,7 @@ export default {
name: 'CuteFileUpload',
props: {
value: {
type: Object,
type: String,
required: true,
default: null
},
@@ -70,9 +70,10 @@ export default {
// console.error('response', response)
// console.error('file', file)
// console.error('fileList', fileList)
this.value.fileUrl = response
// 绑定on-success事件
this.$emit('on-success', response, file, fileList)
this.$emit('change', response)
this.$emit('input', response)
},
// 监听上传失败
handleError(e, file, fileList) {
@@ -80,6 +81,13 @@ export default {
KitMessage.Error(msg.message)
// 绑定on-error事件
this.$emit('on-error', e, file, fileList)
this.$emit('change', null)
this.$emit('input', null)
},
resetField() {
this.$refs.upload.clearFiles()
this.$emit('change', null)
this.$emit('input', null)
}
}
}
cutejava-front/src/views/components/business/CuteProductLineSelect.vue
+11 -4
View File
@@ -6,7 +6,7 @@
-->
<template>
<el-select
v-model="productLine"
v-model="innerValue"
filterable
clearable
placeholder="请选择产品线"
@@ -33,22 +33,24 @@ export default {
props: {
value: {
type: String,
required: false,
default: null
},
disabled: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
deptOptions: [],
productLine: this.value
innerValue: this.value
}
},
watch: {
value(newVal) {
this.productLine = newVal
this.innerValue = newVal
}
},
created() {
@@ -64,7 +66,7 @@ export default {
})
},
handleChange(value) {
this.productLine = value
this.innerValue = value
for (const item of this.deptOptions) {
if (item.value === value) {
this.$emit('detail', item)
@@ -75,6 +77,11 @@ export default {
this.$emit('change', value)
// 绑定form value
this.$emit('input', value)
},
resetField() {
this.innerValue = null
this.$emit('change', null)
this.$emit('input', null)
}
}
}
cutejava-front/src/views/components/business/CuteProductLineSelectPro.vue
+11 -4
View File
@@ -6,7 +6,7 @@
-->
<template>
<el-cascader
v-model="productLine"
v-model="innerValue"
:disabled="disabled"
:options="deptOptions"
style="width: 100%"
@@ -25,22 +25,24 @@ export default {
props: {
value: {
type: Array,
required: false,
default: null
},
disabled: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
deptOptions: [],
productLine: this.value
innerValue: this.value
}
},
watch: {
value(newVal) {
this.productLine = newVal
this.innerValue = newVal
}
},
created() {
@@ -71,12 +73,17 @@ export default {
})
},
handleChange(value) {
this.productLine = value
this.innerValue = value
// console.error('value', value)
// 绑定change事件
this.$emit('change', value)
// 绑定form value
this.$emit('input', value)
},
resetField() {
this.innerValue = null
this.$emit('change', null)
this.$emit('input', null)
}
}
}
cutejava-front/src/views/components/business/CuteSingleUserSelect.vue
+12 -7
View File
@@ -6,7 +6,7 @@
-->
<template>
<el-select
v-model="user"
v-model="innerValue"
style="width: 100%"
filterable
remote
@@ -41,21 +41,21 @@ export default {
},
data() {
return {
user: [],
innerValue: [],
loading: false,
options: []
}
},
watch: {
value(newVal) {
this.user = newVal
this.innerValue = newVal
}
},
async mounted() {
async created() {
const that = this
if (that.value && that.value.length > 0) {
that.options = await CuteUserSelectApi.listMetadataByUsernames(that.value)
that.users = that.value
if (that.value) {
that.options = await CuteUserSelectApi.listMetadataByUsernames([that.value])
that.innerValue = that.value
}
},
methods: {
@@ -81,6 +81,11 @@ export default {
this.$emit('change', value)
// 绑定form value
this.$emit('input', value)
},
resetField() {
this.innerValue = null
this.$emit('change', null)
this.$emit('input', null)
}
}
}
cutejava-front/src/views/components/business/CuteUserSelect.vue
+12 -5
View File
@@ -6,7 +6,7 @@
-->
<template>
<el-select
v-model="users"
v-model="innerValue"
style="width: 100%"
multiple
filterable
@@ -36,26 +36,28 @@ export default {
value: {
type: Array,
required: false,
default: null
default: function() {
return []
}
}
},
data() {
return {
users: [],
innerValue: [],
loading: false,
options: []
}
},
watch: {
value(newVal) {
this.users = newVal
this.innerValue = newVal
}
},
async mounted() {
const that = this
if (that.value && that.value.length > 0) {
that.options = await CuteUserSelectApi.listMetadataByUsernames(that.value)
that.users = that.value
that.innerValue = that.value
}
},
methods: {
@@ -81,6 +83,11 @@ export default {
this.$emit('change', value)
// 绑定form value
this.$emit('input', value)
},
resetField() {
this.innerValue = []
this.$emit('change', [])
this.$emit('input', [])
}
}
}
cutejava-front/src/views/components/dev/CuteCodeEditor.vue
+10 -6
View File
@@ -35,9 +35,9 @@ const SupportModeList = ['yaml', 'java', 'go', 'swift', 'dockerfile', 'groovy',
export default {
name: 'CuteCodeEditor',
props: {
content: {
value: {
type: String,
required: true,
required: false,
default: ''
},
height: {
@@ -62,7 +62,7 @@ export default {
}
},
watch: {
content(newVal, oldVal) {
value(newVal, oldVal) {
const editorValue = this.editor.getValue()
if (newVal !== editorValue) {
this.editor.setValue(newVal)
@@ -92,12 +92,14 @@ export default {
theme: 'darcula'
})
this.editor.setSize('auto', this.height)
if (this.content) {
this.editor.setValue(this.content)
if (this.value) {
this.editor.setValue(this.value)
}
this.editor.setOption('readOnly', this.readonly)
this.editor.on('change', cm => {
this.$emit('change', cm.getValue())
const value = cm.getValue()
this.$emit('change', value)
this.$emit('input', value)
})
return
}
@@ -118,6 +120,8 @@ export default {
},
resetField() {
this.editor.setValue('')
this.$emit('change', '')
this.$emit('input', '')
}
}
}
cutejava-front/src/views/components/dev/CuteMarkdown.vue
+15 -4
View File
@@ -8,7 +8,7 @@
<template>
<mavon-editor
ref="md"
v-model="content"
v-model="innerValue"
:style="`height: + ${height};overflow-y: hidden`"
:ishljs="true"
@imgAdd="imgAdd"
@@ -30,7 +30,7 @@ export default {
mavonEditor
},
props: {
content: {
value: {
type: String,
required: true,
default: ''
@@ -38,7 +38,8 @@ export default {
},
data() {
return {
height: document.documentElement.clientHeight - dynamicHeight + 'px'
height: document.documentElement.clientHeight - dynamicHeight + 'px',
innerValue: ''
}
},
computed: {
@@ -47,6 +48,11 @@ export default {
'baseApi'
])
},
watch: {
value(newVal) {
this.innerValue = newVal
}
},
mounted() {
const that = this
window.onresize = () => {
@@ -64,12 +70,17 @@ export default {
},
onChange(value, render) {
this.$emit('change', value, render)
this.$emit('input', value)
},
onSave(value, render) {
this.$emit('save', value, render)
this.$emit('change', value)
this.$emit('input', value)
},
resetField() {
this.content = ''
this.innerValue = ''
this.$emit('change', '')
this.$emit('input', '')
}
}
}
cutejava-front/src/views/components/dev/CuteOneKeyCopy.vue
+2 -8
View File
@@ -6,20 +6,14 @@
* @description 使用方式：<cute-one-key-copy :content.sync="data" />
-->
<template>
<el-button
v-clipboard:copy="content"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
size="small"
icon="el-icon-document-copy"
/>
<el-button v-clipboard:copy="value" v-clipboard:success="onCopy" v-clipboard:error="onError" size="small" icon="el-icon-document-copy" />
</template>
<script>
export default {
name: 'CuteOneKeyCopy',
props: {
content: {
value: {
type: String,
required: true,
default: ''
cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
+30 -14
View File
@@ -13,7 +13,7 @@
:mode="editMode"
/>
<Editor
v-model="editValue"
v-model="innerValue"
:style="`height: 500px;overflow-y: hidden`"
:default-config="editorConfig"
:mode="editMode"
@@ -44,7 +44,7 @@ export default {
required: false,
default: false
},
content: {
value: {
type: String,
required: false,
default: ''
@@ -80,7 +80,7 @@ export default {
// 'default' or 'simple'
editMode: 'simple',
editor: null,
editValue: ''
innerValue: ''
}
},
computed: {
@@ -89,6 +89,11 @@ export default {
'baseApi'
])
},
watch: {
value(newVal) {
this.innerValue = newVal
}
},
methods: {
/**
* 编辑器创建完毕时的回调函数
@@ -97,7 +102,7 @@ export default {
onCreated(editor) {
// 一定要用 Object.seal(), 否则会报错
this.editor = Object.seal(editor)
this.editValue = this.content
this.innerValue = this.value
},
/**
* 编辑器内容、选区变化时的回调函数
@@ -112,6 +117,7 @@ export default {
// 纯文本内容
const text = editor.getText()
this.$emit('change', html, text)
this.$emit('input', html)
},
/**
* 编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器
@@ -123,15 +129,6 @@ export default {
}
editor.destroy()
},
/**
* 编辑器内容达到最大长度时的回调函数(会导致卡顿)
* @param editor
*/
onMaxLength(editor) {
if (editor == null) {
return
}
},
/**
* 编辑器 focus 时的回调函数
* @param editor
@@ -211,6 +208,9 @@ export default {
return
}
this.editor.dangerouslyInsertHtml(html)
const content = this.getHtml()
this.$emit('change', content)
this.$emit('input', content)
},
/**
* 获取编辑器html内容
@@ -229,6 +229,9 @@ export default {
return
}
this.editor.clear()
const content = this.getHtml()
this.$emit('change', content)
this.$emit('input', content)
},
/**
* 撤销
@@ -238,6 +241,9 @@ export default {
return
}
this.editor.undo()
const content = this.getHtml()
this.$emit('change', content)
this.$emit('input', content)
},
/**
* 重做
@@ -247,6 +253,9 @@ export default {
return
}
this.editor.redo()
const content = this.getText()
this.$emit('change', content)
this.$emit('input', content)
},
/**
* 获取选中的文本
@@ -265,6 +274,9 @@ export default {
return
}
this.editor.deleteFragment()
const content = this.getHtml()
this.$emit('change', content)
this.$emit('input', content)
},
/**
* 获取选中的内容。JSON格式
@@ -293,12 +305,16 @@ export default {
return
}
this.editor.insertText(text)
const content = this.getHtml()
this.$emit('change', content)
this.$emit('input', content)
},
/**
* el-form重置联动
*/
resetField() {
this.setHtml('')
this.clear()
this.$emit('change', '')
this.$emit('input', '')
}
}
cutejava-front/src/views/components/dev/CuteTextAreaInput.vue
+13 -2
View File
@@ -6,7 +6,7 @@
-->
<template>
<el-input
v-model="content"
v-model="innerValue"
type="textarea"
:autosize="{ minRows: 1, maxRows: 5}"
placeholder="请输入内容"
@@ -50,12 +50,23 @@ export default {
},
data() {
return {
content: this.value
innerValue: ''
}
},
watch: {
value(newVal) {
this.innerValue = newVal
}
},
methods: {
handleInput(value) {
this.$emit('change', value)
this.$emit('input', value)
},
resetField() {
this.innerValue = ''
this.$emit('change', '')
this.$emit('input', '')
}
}
}
cutejava-front/src/views/components/dev/CuteTransfer.vue
+23 -11
View File
@@ -6,7 +6,6 @@
-->
<template>
<el-row>
<!-- <el-button @click="onTestValue">测试值</el-button>-->
<el-col :span="11">
<el-input
v-model="searchValue"
@@ -96,6 +95,7 @@ export default {
*/
value: {
type: Array,
require: false,
default: function() {
return []
}
@@ -115,7 +115,7 @@ export default {
*/
primaryKey: {
type: String,
require: false,
require: true,
default: 'id'
},
/**
@@ -139,8 +139,9 @@ export default {
searchCacheDS: []
}
},
mounted() {
this.rightValues = this.value
watch: {
value(newVal) {
this.rightValues = newVal
this.leftDataSource = this.dataSource
const key = this.primaryKey
@@ -159,6 +160,7 @@ export default {
} else {
this.leftDataSource = leftDataSource
}
}
},
methods: {
onSearchValueChange(value) {
@@ -234,14 +236,24 @@ export default {
this.$emit('change', this.rightValues)
this.$emit('input', this.rightValues)
}
},
/**
* el-form重置联动
*/
resetField() {
const searchCacheDS = this.searchCacheDS
if (searchCacheDS && searchCacheDS.length > 0) {
this.leftDataSource = [...searchCacheDS, ...this.rightDataSource]
this.searchCacheDS = []
} else {
this.leftDataSource = [...this.leftDataSource, ...this.rightDataSource]
}
this.searchValue = ''
this.leftSelection = []
this.rightSelection = []
this.rightDataSource = []
this.rightValues = []
}
// onTestValue() {
// console.error('==============leftDataSource', this.leftDataSource)
// console.error('==============leftSelection', this.leftSelection)
// console.error('==============rightDataSource', this.rightDataSource)
// console.error('==============rightSelection', this.rightSelection)
// console.error('==============rightValues', this.rightValues)
// }
}
}
</script>
cutejava-front/src/views/componentsDemo/business/CuteDeptTreeDemo.vue
+3 -3
View File
@@ -44,9 +44,9 @@ export default {
dept: null
},
apiData: [
{ name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
{ name: 'node-click', remark: '部门节点发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' },
{ name: 'search', remark: '搜索部门回调事件', type: '(value) => {}', defaultValue: '-', required: '否' }
{ name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
{ name: 'search', remark: '搜索部门回调事件', type: '(value) => {}', defaultValue: '-', required: '否' },
{ name: 'node-click', remark: '部门节点发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
]
}
},
cutejava-front/src/views/componentsDemo/business/CuteFileDragUploadDemo.vue
+4 -4
View File
@@ -18,7 +18,7 @@
</el-select>
</el-form-item>
<el-form-item label="文件上传" prop="fileUrl">
<cute-file-drag-upload v-model="form" mode="local" />
<cute-file-drag-upload v-model="form.fileUrl" mode="local" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提 交</el-button>
@@ -37,7 +37,7 @@
</el-select>
</el-form-item>
<el-form-item label="文件上传" prop="fileUrl" label-width="80px">
<cute-file-drag-upload v-model="form" mode="local" />
<cute-file-drag-upload v-model="form.fileUrl" mode="local" />
</el-form-item>
</cute-form-dialog>
<h4>与CuteFormDrawer集成</h4>
@@ -53,7 +53,7 @@
</el-select>
</el-form-item>
<el-form-item label="文件上传" prop="fileUrl" label-width="80px">
<cute-file-drag-upload v-model="form" mode="local" />
<cute-file-drag-upload v-model="form.fileUrl" mode="local" />
</el-form-item>
</cute-form-drawer>
<h4>API</h4>
@@ -83,7 +83,7 @@ export default {
fileUrl: ''
},
apiData: [
{ name: 'value', remark: '上传的文件路径', type: 'string', defaultValue: '-', required: '是' },
{ name: 'value | v-model', remark: '上传的文件路径', type: 'string', defaultValue: '-', required: '否' },
{ name: 'mode', remark: '上传方式。local本地、oss对象存储', type: 'string', defaultValue: 'local', required: '否' }
]
}
cutejava-front/src/views/componentsDemo/business/CuteFileUploadDemo.vue
+3 -3
View File
@@ -18,7 +18,7 @@
</el-select>
</el-form-item>
<el-form-item label="文件上传" prop="fileUrl">
<cute-file-upload v-model="form" mode="local" />
<cute-file-upload v-model="form.fileUrl" mode="local" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提 交</el-button>
@@ -37,7 +37,7 @@
</el-select>
</el-form-item>
<el-form-item label="文件上传" prop="fileUrl" label-width="80px">
<cute-file-upload v-model="form" mode="local" />
<cute-file-upload v-model="form.fileUrl" mode="local" />
</el-form-item>
</cute-form-dialog>
<h4>与CuteFormDrawer集成</h4>
@@ -53,7 +53,7 @@
</el-select>
</el-form-item>
<el-form-item label="文件上传" prop="fileUrl" label-width="80px">
<cute-file-upload v-model="form" mode="local" />
<cute-file-upload v-model="form.fileUrl" mode="local" />
</el-form-item>
</cute-form-drawer>
<h4>API</h4>
cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectDemo.vue
+1 -1
View File
@@ -40,7 +40,7 @@ export default {
productLine: null
},
apiData: [
{ name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
{ name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
{ name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'change', remark: '产品线发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' },
{ name: 'detail', remark: '产品线明细发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
cutejava-front/src/views/componentsDemo/business/CuteProductLineSelectProDemo.vue
+1 -1
View File
@@ -41,7 +41,7 @@ export default {
productLine: null
},
apiData: [
{ name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' }
{ name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' }
]
}
},
cutejava-front/src/views/componentsDemo/business/CuteSingleUserSelectDemo.vue
+1 -1
View File
@@ -41,7 +41,7 @@ export default {
user: ''
},
apiData: [
{ name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
{ name: 'value | v-model', remark: '绑定的值', type: 'string', defaultValue: '-', required: '否' },
{ name: 'change', remark: '选中用户发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
]
}
cutejava-front/src/views/componentsDemo/business/CuteUserSelectDemo.vue
+1 -1
View File
@@ -42,7 +42,7 @@ export default {
user: []
},
apiData: [
{ name: 'value', remark: '绑定的值', type: 'array', defaultValue: '[]', required: '否' },
{ name: 'value | v-model', remark: '绑定的值', type: 'array', defaultValue: '[]', required: '否' },
{ name: 'change', remark: '选中用户发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
]
}
cutejava-front/src/views/componentsDemo/dev/CuteCodeEditorDemo.vue
+3 -3
View File
@@ -6,9 +6,9 @@
<li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
</ul>
<h4>Java编辑器</h4>
<cute-code-editor :content="javaContent" mode="java" @change="onJavaChange" />
<cute-code-editor v-model="javaContent" mode="java" @change="onJavaChange" />
<h4>Yaml编辑器</h4>
<cute-code-editor :content="yamlContent" mode="yaml" @change="onYamlChange" />
<cute-code-editor v-model="yamlContent" mode="yaml" @change="onYamlChange" />
<h4>API</h4>
<el-table :data="apiData">
<el-table-column prop="name" label="参数" width="220" />
@@ -77,7 +77,7 @@ export default {
' # IMMEDIATE(立即): 当应用程序以"IMMEDIATE"模式关闭时，它会立即终止，而不管当前是否有任何活动任务或请求。这种方式适用于那些可以立即停止而不会造成严重问题的情况。\n' +
' shutdown: graceful\n',
apiData: [
{ name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
{ name: 'value | v-model', remark: '内容', type: 'string', defaultValue: '-', required: '否' },
{ name: 'height', remark: '编辑框高度', type: 'string', defaultValue: '500px', required: '否' },
{ name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'mode', remark: '语法模式。支持：yaml | java | go | swift | dockerfile | groovy | lua | perl | python | ruby | sql | xml | vue', type: 'string', defaultValue: 'yaml', required: '否' },
cutejava-front/src/views/componentsDemo/dev/CuteMarkdownDemo.vue
+8 -8
View File
@@ -7,7 +7,7 @@
</ul>
<h4>基础用法</h4>
<cute-markdown
:content="content"
v-model="content"
@change="onChange"
@save="onSave"
/>
@@ -38,20 +38,20 @@ export default {
'- HTML 标签；\n' +
'- 流程图和序列图 \n',
apiData: [
{ name: 'content', remark: 'markdown格式内容', type: 'string', defaultValue: '-', required: '是' },
{ name: 'change', remark: '编辑区发生变化的回调事件', type: '(text, markdown) => {}', defaultValue: '-', required: '否' },
{ name: 'save', remark: 'ctrl + s 的回调事件(保存按键,同样触发该回调)', type: '(text, markdown) => {}', defaultValue: '-', required: '否' }
{ name: 'value | v-model', remark: 'markdown格式内容', type: 'string', defaultValue: '-', required: '否' },
{ name: 'change', remark: '编辑区发生变化的回调事件', type: '(markdown, html) => {}', defaultValue: '-', required: '否' },
{ name: 'save', remark: 'ctrl + s 的回调事件(保存按键,同样触发该回调)', type: '(markdown, html) => {}', defaultValue: '-', required: '否' }
]
}
},
methods: {
onChange(text, markdown) {
console.log('onChange:text', text)
onChange(markdown, html) {
console.log('onChange:markdown', markdown)
console.log('onChange:html', html)
},
onSave(text, markdown) {
console.log('onSave:text', text)
onSave(markdown, html) {
console.log('onSave:markdown', markdown)
console.log('onSave:html', html)
}
}
}
cutejava-front/src/views/componentsDemo/dev/CuteOneKeyCopyDemo.vue
+3 -2
View File
@@ -8,7 +8,8 @@
<h4>基础用法：clipboard版</h4>
<div id="btn" @click="copy">复制</div>
<h4>基础用法：OneKeyCopy组件版（推荐）</h4>
<cute-one-key-copy :content.sync="msg" />
<!-- v-model 会自动绑定元素的 value 属性，并监听 input 事件（某些元素如复选框监听 change 事件）-->
<cute-one-key-copy v-model="msg" />
<h4>API</h4>
<el-table :data="apiData">
<el-table-column prop="name" label="参数" width="220" />
@@ -30,7 +31,7 @@ export default {
return {
msg: '来复制我吧',
apiData: [
{ name: 'content', remark: '待复制的内容', type: 'string', defaultValue: '-', required: '是' }
{ name: 'value | v-model', remark: '待复制的内容', type: 'string', defaultValue: '-', required: '否' }
]
}
},
cutejava-front/src/views/componentsDemo/dev/CuteRichTextEditorDemo.vue
+1 -1
View File
@@ -34,7 +34,7 @@ export default {
return {
content: '',
apiData: [
{ name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
{ name: 'value | v-model', remark: '内容', type: 'string', defaultValue: '-', required: '否' },
{ name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
{ name: 'change', remark: '内容改变回调事件', type: '(html, text) => {}', defaultValue: '-', required: '否' },
{ name: 'focus', remark: '编辑器获得焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' },
cutejava-front/src/views/componentsDemo/dev/CuteTransferDemo.vue
+1 -1
View File
@@ -56,7 +56,7 @@ export default {
{ id: 18, name: '小王', description: '小王牛P' }
],
apiData: [
{ name: 'value', remark: '右侧已选值', type: 'array', defaultValue: '[]', required: '否' },
{ name: 'value | v-model', remark: '右侧数据对象属性值集合', type: 'array', defaultValue: '[]', required: '否' },
{ name: 'dataSource', remark: '左侧表格数据', type: 'array', defaultValue: '[]', required: '是' },
{ name: 'primary-key', remark: '取对象的哪个值作为value', type: 'string', defaultValue: 'id', required: '否' },
{ name: 'loading', remark: '是否加载中', type: 'boolean', defaultValue: 'false', required: '是' },
cutejava-front/src/views/componentsDemo/index.vue
+5 -5
View File
@@ -50,7 +50,7 @@
</el-collapse-item>
</el-collapse>
</el-tab-pane>
<el-tab-pane label="快捷组件" name="kit">
<el-tab-pane label="快捷组件" name="util">
<el-collapse accordion>
<el-collapse-item title="信息提示 KitMessage" name="KitMessage">
<KitMessageDemo />
@@ -130,10 +130,10 @@
import CutePage from '@/views/components/dev/CutePage.vue'
import CuteButtonDemo from '@/views/componentsDemo/dev/CuteButtonDemo.vue'
import KitMessageDemo from '@/views/componentsDemo/dev/KitMessageDemo.vue'
import KitNotificationDemo from '@/views/componentsDemo/dev/KitNotificationDemo.vue'
import KitDialogDemo from '@/views/componentsDemo/dev/KitDialogDemo.vue'
import KitWsClientDemo from '@/views/componentsDemo/dev/KitWsClientDemo.vue'
import KitMessageDemo from '@/views/componentsDemo/util/KitMessageDemo.vue'
import KitNotificationDemo from '@/views/componentsDemo/util/KitNotificationDemo.vue'
import KitDialogDemo from '@/views/componentsDemo/util/KitDialogDemo.vue'
import KitWsClientDemo from '@/views/componentsDemo/util/KitWsClientDemo.vue'
import CuteLinkDemo from '@/views/componentsDemo/dev/CuteLinkDemo.vue'
import CutePageDemo from '@/views/componentsDemo/dev/CutePageDemo.vue'
import CuteNoDataDemo from '@/views/componentsDemo/dev/CuteNoDataDemo.vue'
cutejava-front/src/views/componentsDemo/dev/KitDialogDemo.vue → cutejava-front/src/views/componentsDemo/util/KitDialogDemo.vue
View File
cutejava-front/src/views/componentsDemo/dev/KitMessageDemo.vue → cutejava-front/src/views/componentsDemo/util/KitMessageDemo.vue
View File
cutejava-front/src/views/componentsDemo/dev/KitNotificationDemo.vue → cutejava-front/src/views/componentsDemo/util/KitNotificationDemo.vue
View File
cutejava-front/src/views/componentsDemo/dev/KitWsClientDemo.vue → cutejava-front/src/views/componentsDemo/util/KitWsClientDemo.vue
View File