From 394faf94ee9d9f156f39606f1dcecb99443675b1 Mon Sep 17 00:00:00 2001 From: 刘汉宸 Date: Thu, 25 Feb 2021 14:53:04 +0800 Subject: [PATCH] docs: 更新开发文档 --- examples/main.js | 2 ++ examples/mixins/page.js | 2 +- examples/router/routes.js | 17 +++++++++++++++++ examples/views/docs/component/select.md | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ examples/views/docs/develop/mixin/origin.md | 43 +++++++++++++++++++++++++++++++++++++++++++ examples/views/docs/develop/mixin/page.md | 295 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------ examples/views/docs/develop/scheme/scheme.md | 5 +++++ packages/select/index.vue | 20 ++++++++++---------- packages/table/editable.vue | 3 +++ packages/table/normal.vue | 3 +++ 10 files changed, 316 insertions(+), 179 deletions(-) create mode 100644 examples/views/docs/develop/mixin/origin.md create mode 100644 examples/views/docs/develop/scheme/scheme.md diff --git a/examples/main.js b/examples/main.js index 1bc7523..4ffb906 100644 --- a/examples/main.js +++ b/examples/main.js @@ -13,8 +13,10 @@ import '@/styles/highlight.scss'; import '@/assets/iconfont/iconfont.css'; import '@/mixins/page.scss'; import MIX_PAGE from '@/mixins/page.js'; +import MIX_ORIGIN from '@/mixins/origin'; window.MIX_PAGE = MIX_PAGE; +window.MIX_ORIGIN = MIX_ORIGIN; // 进度条配置 NProgress.configure({ showSpinner: false }); diff --git a/examples/mixins/page.js b/examples/mixins/page.js index 69f6101..c3f6c46 100644 --- a/examples/mixins/page.js +++ b/examples/mixins/page.js @@ -4,7 +4,7 @@ export default { mixins: [MIX_ORIGIN], data() { return { - auto: true, // 页面加载时自动查询 + auto: false, // 页面加载时自动查询 tableData: [], // 表格数据 loading: false, // 加载状态 total: 0, // 数据总量 diff --git a/examples/router/routes.js b/examples/router/routes.js index 47d6498..bfaaaa5 100644 --- a/examples/router/routes.js +++ b/examples/router/routes.js @@ -122,6 +122,23 @@ const _develops = [ meta: { title: 'Mixin Page 标准页' }, component: () => import('@/views/docs/develop/mixin/page.md'), }, + { + path: 'orgin', + name: 'orgin', + meta: { title: 'Mixin Orgin 初始值' }, + component: () => import('@/views/docs/develop/mixin/origin.md'), + }, + ], + }, + { + group: '方案开发', + children: [ + { + path: 'scheme', + name: 'developScheme', + meta: { title: 'Scheme 方案' }, + component: () => import('@/views/docs/develop/scheme/scheme.md'), + }, ], }, ]; diff --git a/examples/views/docs/component/select.md b/examples/views/docs/component/select.md index 8bc591e..2266a43 100644 --- a/examples/views/docs/component/select.md +++ b/examples/views/docs/component/select.md @@ -455,6 +455,111 @@ export default { ::: +## 可创建新条目 + +设置`allow-create`和`filterable`允许创建新的选项，输入内容后可以直接选择已输入的内容 + +
+ +::: snippet 单选示例 + +```html + + + +``` + +::: + +::: snippet 多选示例 + +```html + + + +``` + +::: + +
+ +
+ +::: snippet 远程示例，输入创建的新项为临时项，选中后再次下拉时不会包括在选项结果中 + +```html + + + +``` + +::: + +
+ ## API ## Attribute 属性 diff --git a/examples/views/docs/develop/mixin/origin.md b/examples/views/docs/develop/mixin/origin.md new file mode 100644 index 0000000..125897d --- /dev/null +++ b/examples/views/docs/develop/mixin/origin.md @@ -0,0 +1,43 @@ +# Mixin Origin 初始值 + +常用Vue页面初始值的混入配置 + +## 基础用法 + +`MIX_ORIGIN`混入配置项，会默认记录当前页面初始值。 + +::: snippet `originData`表示当前页面的初始data值，`getOriginData`方法可获得一个新的初始值对象 + +```html + + + +``` + +::: diff --git a/examples/views/docs/develop/mixin/page.md b/examples/views/docs/develop/mixin/page.md index 3a138a4..9f48c16 100644 --- a/examples/views/docs/develop/mixin/page.md +++ b/examples/views/docs/develop/mixin/page.md @@ -1,6 +1,6 @@ # Mixin Page 标准页 -根据JSON Scheme配置自动生成一个筛选条件表单 +常规分页逻辑的混入配置 ## 基础用法 @@ -51,31 +51,12 @@ export default { searchModel: { name: '', }, + tableData: [ + { id: '0', name: '李饼', age: 32 }, + { id: '1', name: '陈拾', age: 20 }, + ], }; }, - methods: { - searchAPI(params) { - return new Promise(resolve => { - setTimeout(() => { - const source = [ - { id: '0', name: '李饼', age: 32 }, - { id: '1', name: '陈拾', age: 20 }, - { id: '3', name: '王七', age: 26 }, - { id: '4', name: '崔倍', age: 27 }, - { id: '5', name: '孙豹', age: 38 }, - { id: '6', name: '庞柏', age: 42 }, - { id: '7', name: '蔡疏', age: 60 }, - { id: '8', name: '卢纳', age: 55 }, - ]; - const list = source.filter(item => `${item.name}`.includes(params.name)); - resolve({ - result: list, - totalCount: list.length - }); - }, 1500); - }); - }, - }, }; @@ -123,6 +104,7 @@ export default { mixins: [MIX_PAGE], data() { return { + auto: true, searchModel: { name: '', }, @@ -147,7 +129,7 @@ export default { result: list, totalCount: list.length }); - }, 1500); + }, 500); }); }, }, @@ -158,174 +140,151 @@ export default { ::: -## 内置方法 +## 弹出框表单 -本混入配置中，内置了`originData`对象和`getOriginData`方法。 +常用的弹出框表单提交示例 -::: snippet `originData`表示当前页面的初始data值，`getOriginData`方法可获得一个新的初始值对象 +::: snippet 新增修改共用表单示例 ```html -``` - -::: - -## 源文件 - -```js -import MIX_ORIGIN from '@/mixins/origin'; // 初始值逻辑混入 - -export default { - mixins: [MIX_ORIGIN], - data() { - return { - auto: true, // 页面加载时自动查询 - tableData: [], // 表格数据 - loading: false, // 加载状态 - total: 0, // 数据总量 - currentPage: 1, // 当前页码 - pageSize: 10, // 分页大小 - pageSizes: [10, 20, 50, 100], // 分页大小选项 - layout: 'total, sizes, prev, pager, next, jumper', // 分页器默认设置 - searchModel: {}, // 搜索表单绑定值 - form: {}, // 常规表单绑定值 - submitting: false, // 提交状态 - selection: [], // 表格选中项 - collapsed: false, // 展开状态 + form: { + id: '', + name: '', + age: '', + }, + formRules: { + name: [{ required: true, message: '请输入姓名' }] + }, + dialogVisible: false, + dialogMode: 'new', }; }, computed: { - // 搜索栏折叠按钮文本 - toggleText() { - return this.collapsed ? '收起' : '展开'; - }, - // 表格属性 - tableProps() { - return { - size: 'mini', - rowKey: 'id', - border: true, - highlightCurrentRow: true, - data: this.tableData, - }; - }, - // 表格事件 - tableEvent() { - return { - 'selection-change': this.onSelectionChange, - }; - }, - // 分页参数 - pageParams() { - return { - currentPage: this.currentPage, - pageSize: this.pageSize, - }; - }, - // 分页器属性 - paginationProps() { - return { - 'current-page': this.currentPage, - 'page-sizes': this.pageSizes, - 'page-size': this.pageSize, - layout: this.layout, - total: this.total, - }; - }, - // 分页器事件 - paginationEvent() { - return { - 'size-change': this.onPageSizeChange, - 'current-change': this.onCurrentPageChange, - }; - }, - }, - created() { - if (this.auto) { - this.search(); + dialogTitle() { + return this.dialogMode === 'edit' ? '编辑' : '新增'; } }, methods: { - // 空Promise - emptyPromise() { - return new Promise(resolve => resolve()); - }, - // 重置查询 - onSearch() { - this.currentPage = 1; - this.loadData(); - }, - // 切换展开状态 - toggle() { - this.collapsed = !this.collapsed; - }, - // 查询数据 - search() { - this.loadData(); - }, - // 加载数据 - async loadData() { - this.loading = true; - const params = { - ...this.searchModel, - ...this.pageParams, - }; - const searchAPI = this.searchAPI || this.emptyPromise; - await searchAPI(params) - .then(response => { - const { result = [], totalCount = 0 } = response || {}; - this.tableData = result || []; - this.total = totalCount || 0; - }) - .finally(() => { - this.loading = false; - }); + searchAPI(params) { + return new Promise(resolve => { + setTimeout(() => { + const source = [ + { id: '0', name: '李饼', age: 32 }, + { id: '1', name: '陈拾', age: 20 }, + { id: '3', name: '王七', age: 26 }, + { id: '4', name: '崔倍', age: 27 }, + { id: '5', name: '孙豹', age: 38 }, + { id: '6', name: '庞柏', age: 42 }, + { id: '7', name: '蔡疏', age: 60 }, + { id: '8', name: '卢纳', age: 55 }, + ]; + const list = source.filter(item => `${item.name}`.includes(params.name)); + resolve({ + result: list, + totalCount: list.length + }); + }, 300); + }); }, - // 重置搜索表单 - onReset() { - this.searchModel = this.cloneDeep(this.originData).searchModel; + openNew() { + this.dialogMode = 'new'; + this.dialogVisible = true; }, - // 多选 - onSelectionChange(selection) { - this.selection = selection; + openEdit({ row }) { + this.dialogMode = 'edit'; + this.form = this.cloneDeep(row); + this.dialogVisible = true; }, - // 切换当前页码 - onCurrentPageChange(value) { - this.currentPage = value; - this.$nextTick(this.loadData); + onSubmit() { + this.$refs.form.validate(valid => { + if (valid) { + let data = this.cloneDeep(this.form); + if (this.dialogMode === 'new') { + delete data.id; + console.log('新增提交：', data); + } else if (this.dialogMode === 'edit') { + console.log('修改提交：', data); + } + this.submitting = true; + setTimeout(() => { + this.submitting = false; + this.dialogVisible = false; + this.search(); + }, 1500); + } + }); }, - // 切换最大页码 - onPageSizeChange(value) { - this.currentPage = 1; - this.pageSize = value; - this.$nextTick(this.loadData); + onCancel() { + this.dialogVisible = false; }, + resetForm() { + this.form = this.getOriginData().form; + this.$refs.form.resetFields(); + } }, }; -``` \ No newline at end of file + + +``` + +::: + +## 内置方法 + +本配置中，已经混入了`MIX_ORIGIN`，内置了`originData`对象和`getOriginData`方法。 diff --git a/examples/views/docs/develop/scheme/scheme.md b/examples/views/docs/develop/scheme/scheme.md new file mode 100644 index 0000000..2dee97e --- /dev/null +++ b/examples/views/docs/develop/scheme/scheme.md @@ -0,0 +1,5 @@ +# Scheme 方案开发 + +通过配置JSON Scheme的方式快速生成一些业务组件 + +## 基础用法 \ No newline at end of file diff --git a/packages/select/index.vue b/packages/select/index.vue index 84220a0..3464973 100644 --- a/packages/select/index.vue +++ b/packages/select/index.vue @@ -1,5 +1,6 @@