refactor(components): 统一组件属性命名并完善文档
- 将 CuteCodeEditor 和 CuteRichTextEditor 的 readOnly 属性改为 readonly - 为 CuteTextAreaInput 组件添加 value 属性并设为必填 - 为多个组件演示页面的表格列添加固定宽度 - 更新 CuteCodeEditorDemo 和 CuteRichTextEditorDemo 中的 API 文档 - 新增 CuteHorizontalScrollBarDemo 和 CuteTextAreaInputDemo 演示页面 - 重构 CuteOtherDemo 页面移除部分组件演示 - 完善 index.vue 中的组件导入和注册信息
This commit is contained in:
@@ -13,25 +13,11 @@
|
||||
</cute-search-form>
|
||||
<cute-section-title title="高级搜索Pro版 CuteSearchProForm" />
|
||||
<cute-search-pro-form :model="searchFormProValues" :schema="searchFormProSchema" />
|
||||
<cute-section-title title="横向滚动 CuteHorizontalScrollBar" />
|
||||
<cute-horizontal-scroll-bar>
|
||||
<div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
|
||||
</cute-horizontal-scroll-bar>
|
||||
<cute-section-title title="纵向滚动 CuteVerticalScrollBar" />
|
||||
<cute-vertical-scroll-bar>
|
||||
<div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
|
||||
</cute-vertical-scroll-bar>
|
||||
<cute-section-title title="数据穿梭 CuteTransfer" />
|
||||
<cute-transfer :data-source="leftDataSource" primary-key="id">
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="description" label="备注" />
|
||||
</cute-transfer>
|
||||
<cute-section-title title="多行输入文本 CuteTextAreaInput" />
|
||||
<cute-text-area-input />
|
||||
<cute-section-title title="链接 CuteLink" />
|
||||
<cute-link title="百度一下" href="https://www.baidu.com" />
|
||||
<cute-section-title title="空状态 CuteNoData" />
|
||||
<cute-no-data desc="自定义提示语" />
|
||||
<cute-section-title title="预览抽屉 CutePreviewDrawer">
|
||||
<template v-slot:operation>
|
||||
<cute-button type="primary" @click="handleCutePreviewDrawerShow">显示</cute-button>
|
||||
@@ -65,32 +51,22 @@
|
||||
<script>
|
||||
|
||||
import CuteSearchForm from '@/views/components/dev/CuteSearchForm.vue'
|
||||
import CuteHorizontalScrollBar from '@/views/components/dev/CuteHorizontalScrollBar.vue'
|
||||
import CuteVerticalScrollBar from '@/views/components/dev/CuteVerticalScrollBar.vue'
|
||||
import CuteLink from '@/views/components/dev/CuteLink.vue'
|
||||
import CuteNoData from '@/views/components/dev/CuteNoData.vue'
|
||||
import CutePreviewDrawer from '@/views/components/dev/CutePreviewDrawer.vue'
|
||||
import CuteScreenShot from '@/views/components/dev/CuteScreenShot.vue'
|
||||
import CuteSectionTitle from '@/views/components/dev/CuteSectionTitle.vue'
|
||||
import CuteButton from '@/views/components/dev/CuteButton.vue'
|
||||
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
|
||||
import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
|
||||
import CuteSearchProForm from '@/views/components/dev/CuteSearchProForm.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteOtherDemo',
|
||||
components: {
|
||||
CuteSearchProForm,
|
||||
CuteTextAreaInput,
|
||||
CuteTransfer,
|
||||
CuteButton,
|
||||
CuteSectionTitle,
|
||||
CuteScreenShot,
|
||||
CutePreviewDrawer,
|
||||
CuteNoData,
|
||||
CuteLink,
|
||||
CuteVerticalScrollBar,
|
||||
CuteHorizontalScrollBar,
|
||||
CuteSearchForm
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
</el-row>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
<cute-code-editor :content="yamlContent" mode="yaml" @change="onYamlChange" />
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
@@ -79,7 +79,7 @@ export default {
|
||||
apiData: [
|
||||
{ name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
|
||||
{ name: 'height', remark: '编辑框高度', type: 'string', defaultValue: '500px', required: '否' },
|
||||
{ name: 'read-only', remark: '是否只读', type: 'boolean', defaultValue: 'false', 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: '否' },
|
||||
{ name: 'change', remark: '内容变化回调', type: '(value) => {}', defaultValue: '-', required: '否' }
|
||||
]
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>当需要在容器内展示大量内容，需要横向滚动查看时</li>
|
||||
<li>当希望在不同操作系统（Windows/Mac）上保持一致的滚动条样式时</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<cute-horizontal-scroll-bar>
|
||||
<div style="width: 3000px;min-width: 3000px">模拟超长内容</div>
|
||||
</cute-horizontal-scroll-bar>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteHorizontalScrollBar from '@/views/components/dev/CuteHorizontalScrollBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteHorizontalScrollBarDemo',
|
||||
components: { CuteHorizontalScrollBar },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'width', remark: '内部容器宽度', type: 'string', defaultValue: '1280px', required: '否' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -16,8 +16,8 @@
|
||||
</el-row>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
/>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
<cute-one-key-copy :content.sync="msg" />
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -9,17 +9,18 @@
|
||||
<cute-rich-text-editor @change="onChange" />
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
<h4>方法</h4>
|
||||
<el-table :data="methodData">
|
||||
<el-table-column prop="name" label="函数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="函数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="inputArgs" label="入参" />
|
||||
<el-table-column prop="outArgs" label="出参" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -34,22 +35,22 @@ export default {
|
||||
content: '',
|
||||
apiData: [
|
||||
{ name: 'content', remark: '内容', type: 'string', defaultValue: '-', required: '是' },
|
||||
{ name: 'read-only', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'change', remark: '内容改变回调事件', type: '(html, text) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'focus', remark: '编辑器获得焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' },
|
||||
{ name: 'blur', remark: '编辑器失去焦点回调事件', type: '(editor) => {}', defaultValue: '-', required: '否' }
|
||||
],
|
||||
methodData: [
|
||||
{ name: 'setHtml', remark: '设置html内容。如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析', inputArgs: 'html' },
|
||||
{ name: 'getHtml', remark: '获取html内容', inputArgs: '' },
|
||||
{ name: 'clear', remark: '清空', inputArgs: '' },
|
||||
{ name: 'undo', remark: '撤销', inputArgs: '' },
|
||||
{ name: 'redo', remark: '重做', inputArgs: '' },
|
||||
{ name: 'getSelectionText', remark: '获取选中的文本', inputArgs: '' },
|
||||
{ name: 'deleteFragment', remark: '删除选中的内容', inputArgs: '' },
|
||||
{ name: 'getFragment', remark: '获取选中的内容。JSON格式', inputArgs: '' },
|
||||
{ name: 'getText', remark: '获取文本内容', inputArgs: '' },
|
||||
{ name: 'insertText', remark: '在选取插入文本', inputArgs: '' }
|
||||
{ name: 'setHtml', remark: '设置html内容。如果是 editor.getHtml() 获取的 HTML 格式，可以完美解析', inputArgs: 'html', outArgs: '-' },
|
||||
{ name: 'getHtml', remark: '获取html内容', inputArgs: '-', outArgs: 'html' },
|
||||
{ name: 'clear', remark: '清空', inputArgs: '-', outArgs: '-' },
|
||||
{ name: 'undo', remark: '撤销', inputArgs: '-', outArgs: '-' },
|
||||
{ name: 'redo', remark: '重做', inputArgs: '-', outArgs: '-' },
|
||||
{ name: 'getSelectionText', remark: '获取选中的文本', inputArgs: '-', outArgs: 'text' },
|
||||
{ name: 'deleteFragment', remark: '删除选中的内容', inputArgs: '-', outArgs: '-' },
|
||||
{ name: 'getFragment', remark: '获取选中的内容。JSON格式', inputArgs: '-', outArgs: 'json' },
|
||||
{ name: 'getText', remark: '获取文本内容', inputArgs: '-', outArgs: 'text' },
|
||||
{ name: 'insertText', remark: '在选区插入文本', inputArgs: 'text', outArgs: '-' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
</cute-section-title>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>输入备注、说明等大量普通文本时</li>
|
||||
<li>需要限制输入文本的长度</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端） @Odboy（设计）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<cute-text-area-input v-model="content" />
|
||||
<h4>禁用状态</h4>
|
||||
<cute-text-area-input v-model="content" disabled />
|
||||
<h4>只读状态</h4>
|
||||
<cute-text-area-input v-model="content" readonly />
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteTextAreaInput from '@/views/components/dev/CuteTextAreaInput.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteTextAreaInputDemo',
|
||||
components: { CuteTextAreaInput },
|
||||
data() {
|
||||
return {
|
||||
content: '这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本这里是很多很多的文本',
|
||||
apiData: [
|
||||
{ name: 'disabled', remark: '是否禁用', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'readonly', remark: '是否只读', type: 'boolean', defaultValue: 'false', required: '否' },
|
||||
{ name: 'maxlength', remark: '最大长度', type: 'number', defaultValue: '120', required: '否' },
|
||||
{ name: 'value', remark: '绑定的值', type: 'string', defaultValue: '-', required: '是' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>何时使用</h4>
|
||||
<ul class="description">
|
||||
<li>当需要在容器内展示大量内容，需要纵向滚动查看时</li>
|
||||
<li>当希望在不同操作系统（Windows/Mac）上保持一致的滚动条样式时</li>
|
||||
<li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（设计）</li>
|
||||
</ul>
|
||||
<h4>基础用法</h4>
|
||||
<cute-vertical-scroll-bar>
|
||||
<div style="height: 3000px;min-height: 3000px">模拟超高内容</div>
|
||||
</cute-vertical-scroll-bar>
|
||||
<h4>API</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CuteVerticalScrollBar from '@/views/components/dev/CuteVerticalScrollBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'CuteHorizontalScrollBarDemo',
|
||||
components: { CuteVerticalScrollBar },
|
||||
data() {
|
||||
return {
|
||||
apiData: [
|
||||
{ name: 'height', remark: '内部容器高度', type: 'string', defaultValue: '100px', required: '否' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.description > li{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -16,8 +16,8 @@
|
||||
</el-row>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
</el-row>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
</el-row>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
</el-card>
|
||||
<h4>快捷调用</h4>
|
||||
<el-table :data="apiData">
|
||||
<el-table-column prop="name" label="参数" />
|
||||
<el-table-column prop="remark" label="说明" />
|
||||
<el-table-column prop="name" label="参数" width="220" />
|
||||
<el-table-column prop="remark" label="说明" width="450" />
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="defaultValue" label="默认值" />
|
||||
<el-table-column prop="required" label="是否必填" />
|
||||
|
||||
@@ -15,11 +15,14 @@
|
||||
<el-collapse-item title="空状态 CuteNoData" name="CuteNoData">
|
||||
<CuteNoDataDemo />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="多行输入文本 CuteTextAreaInput" name="CuteTextAreaInput">
|
||||
<CuteTextAreaInputDemo />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="段落标题 CuteSectionTitle" name="CuteSectionTitle">
|
||||
<CuteSectionTitleDemo />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="横向滚动区域 CuteHorizontalScrollBar" name="CuteHorizontalScrollBar">
|
||||
<CuteSectionTitleDemo />
|
||||
<CuteHorizontalScrollBarDemo />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="纵向滚动区域 CuteVerticalScrollBar" name="CuteVerticalScrollBar">
|
||||
<CuteSectionTitleDemo />
|
||||
@@ -76,10 +79,14 @@ import CuteOneKeyCopyDemo from '@/views/componentsDemo/dev/CuteOneKeyCopyDemo.vu
|
||||
import CuteMarkdownDemo from '@/views/componentsDemo/dev/CuteMarkdownDemo.vue'
|
||||
import CuteCodeEditorDemo from '@/views/componentsDemo/dev/CuteCodeEditorDemo.vue'
|
||||
import CuteRichTextEditorDemo from '@/views/componentsDemo/dev/CuteRichTextEditorDemo.vue'
|
||||
import CuteHorizontalScrollBarDemo from '@/views/componentsDemo/dev/CuteHorizontalScrollBarDemo.vue'
|
||||
import CuteTextAreaInputDemo from '@/views/componentsDemo/dev/CuteTextAreaInputDemo.vue'
|
||||
|
||||
export default {
|
||||
name: 'SystemComponents',
|
||||
components: {
|
||||
CuteTextAreaInputDemo,
|
||||
CuteHorizontalScrollBarDemo,
|
||||
CuteRichTextEditorDemo,
|
||||
CuteCodeEditorDemo,
|
||||
CuteMarkdownDemo,
|
||||
|
||||
Reference in New Issue
Block a user