From d7a2b04f456c7fad46c0c523a704e7e75d8fb2bb Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Wed, 12 Dec 2018 20:57:40 +0800 Subject: [PATCH] =?UTF-8?q?select-svg=20=E5=9F=BA=E6=9C=AC=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e6796da5ea041da9ed2fcbf89e84c91e2b7b230 [formerly 226e52a0e20b8a9cd011e2a2b0b0da2c25b9db4b]]]]] Former-commit-id: 4fd47532611745f6cefcbbb3f9f9409c6cbb978c Former-commit-id: 4a9f59b88aa4d6a164010e2cf80a20a6ad704efb Former-commit-id: 8b2408f7205cf68a8920e6287ad7cdc6da541d13 [formerly 50abaafae7d85ed49404b471297543a95c773e68] Former-commit-id: e9c5c24e393c7cc06f275b8249a1ff10e5aea3e2 Former-commit-id: 133e32b20973babb6cb2815c5f88f925e1d68cf2 Former-commit-id: 5b4528bd6e10f53f5ca19948af5fbe40a18ae4d3 Former-commit-id: 429cc57574024a3d073657f7c773104ec29ced39 Former-commit-id: b78065290d0d26c7fe4c6b2fd41288fb115686df --- src/components/d2-icon-select/index.vue | 4 +- .../data/index.js.REMOVED.git-id | 1 + src/components/d2-icon-svg-select/index.vue | 179 ++++++++++++++++++ src/components/index.js | 3 +- src/menu/modules/demo-components.js | 5 +- src/mock/api/demo.business.issues.142.js | 24 +-- src/mock/api/demo.business.table.1.js | 56 +++--- src/mock/api/demo.plugins.mock.ajax.js | 36 ++-- src/mock/api/sys.login.js | 39 ++-- src/mock/d2-mock/index.js | 77 ++++++++ src/mock/d2-mock/patch/index.js | 8 + src/mock/index.js | 20 +- .../components/icon/{svg.vue => icon-svg.vue} | 0 src/pages/demo/components/icon/select-svg.vue | 25 +++ src/router/modules/components.js | 5 +- 15 files changed, 380 insertions(+), 102 deletions(-) create mode 100644 src/components/d2-icon-svg-select/data/index.js.REMOVED.git-id create mode 100644 src/components/d2-icon-svg-select/index.vue create mode 100644 src/mock/d2-mock/index.js create mode 100644 src/mock/d2-mock/patch/index.js rename src/pages/demo/components/icon/{svg.vue => icon-svg.vue} (100%) create mode 100644 src/pages/demo/components/icon/select-svg.vue diff --git a/src/components/d2-icon-select/index.vue b/src/components/d2-icon-select/index.vue index 7079d763..bf3cc194 100644 --- a/src/components/d2-icon-select/index.vue +++ b/src/components/d2-icon-select/index.vue @@ -1,5 +1,5 @@ + + diff --git a/src/components/index.js b/src/components/index.js index 76a5b68a..59549f4e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -12,8 +12,9 @@ Vue.component('d2-page-cover', () => import('./d2-page-cover')) Vue.component('d2-count-up', () => import('./d2-count-up')) Vue.component('d2-highlight', () => import('./d2-highlight')) Vue.component('d2-icon', () => import('./d2-icon')) -Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue')) Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue')) +Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue')) +Vue.component('d2-icon-svg-select', () => import('./d2-icon-svg-select/index.vue')) Vue.component('d2-markdown', () => import('./d2-markdown')) Vue.component('d2-mde', () => import('./d2-mde')) Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner')) diff --git a/src/menu/modules/demo-components.js b/src/menu/modules/demo-components.js index 62b00eef..f4ebd4a7 100644 --- a/src/menu/modules/demo-components.js +++ b/src/menu/modules/demo-components.js @@ -67,9 +67,10 @@ export default { icon: 'star', children: [ { path: `${pre}icon/icon`, title: '图标组件' }, - { path: `${pre}icon/list`, title: 'FontAwesome' }, + { path: `${pre}icon/icon-svg`, title: 'svg 图标组件' }, { path: `${pre}icon/select`, title: '图标选择器' }, - { path: `${pre}icon/svg`, title: 'SVG图标组件' } + { path: `${pre}icon/select-svg`, title: 'svg 图标选择器' }, + { path: `${pre}icon/list`, title: 'FontAwesome' } ] }, { diff --git a/src/mock/api/demo.business.issues.142.js b/src/mock/api/demo.business.issues.142.js index 0c8933d8..9098c95e 100644 --- a/src/mock/api/demo.business.issues.142.js +++ b/src/mock/api/demo.business.issues.142.js @@ -1,6 +1,3 @@ -import Mock from 'mockjs' -import qs from 'qs' - const db = [ { id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' }, { id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' }, @@ -8,19 +5,14 @@ const db = [ { id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' } ] -Mock.mock(RegExp('/api/demo/business/issues/142' + '.*'), 'get', ({ url, type, body }) => { - // 解析 - const options = { - params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''), - body: qs.parse(body), - url: qs.parse(url.split('?')[0]) - } - // 返回数据 - return Mock.mock( - { +export default { + path: RegExp('/api/demo/business/issues/142' + '.*'), + method: 'get', + handle ({ method, url, params, body, Mock, Random, Generator, Repeat }) { + return { code: 0, msg: '获取数据成功', - data: db.find(e => e.id === options.params.id) + data: db.find(e => e.id === params.id) } - ) -}) + } +} diff --git a/src/mock/api/demo.business.table.1.js b/src/mock/api/demo.business.table.1.js index ff02e4c7..b6cb6074 100644 --- a/src/mock/api/demo.business.table.1.js +++ b/src/mock/api/demo.business.table.1.js @@ -1,29 +1,29 @@ -import Mock from 'mockjs' - -Mock.mock('/api/demo/business/table/1', ({ body }) => { - // 这是通过 post 传来的参数 - body = JSON.parse(body) - const { page } = body - page.total = 1000 - return Mock.mock( - { - code: 0, - msg: '获取数据成功', - data: { - page, - 'list|20': [ - { - 'key': '@guid', - 'value|1': [10, 100, 200, 500], - 'type': '@boolean', - 'admin': '@cname', - 'adminNote': '@cparagraph(0.5)', - 'dateTimeCreat': '@datetime', - 'used': '@boolean', - 'dateTimeUse': '@datetime' - } - ] +export default { + path: RegExp('/api/demo/business/table/1'), + method: 'post', + handle ({ method, url, params, body, Mock, Random, Generator, Repeat }) { + const { page } = body + page.total = 1000 + return Mock.mock( + { + code: 0, + msg: '获取数据成功', + data: { + page, + 'list|20': [ + { + 'key': '@guid', + 'value|1': [10, 100, 200, 500], + 'type': '@boolean', + 'admin': '@cname', + 'adminNote': '@cparagraph(0.5)', + 'dateTimeCreat': '@datetime', + 'used': '@boolean', + 'dateTimeUse': '@datetime' + } + ] + } } - } - ) -}) + ) + } +} diff --git a/src/mock/api/demo.plugins.mock.ajax.js b/src/mock/api/demo.plugins.mock.ajax.js index 0e696322..a9df1a8b 100644 --- a/src/mock/api/demo.plugins.mock.ajax.js +++ b/src/mock/api/demo.plugins.mock.ajax.js @@ -1,19 +1,21 @@ -import Mock from 'mockjs' - -Mock.mock('/api/demo/plugins/mock/ajax', { - code: 0, - msg: '获取数据成功', - data: { - 'list|4-10': [ - { - 'id|+1': 1, - 'name': '@CNAME', - 'star|1-5': '★', - 'delFlag|1': [0, 1], - 'creatDate': '@DATE', - 'address': '@CITY', - 'zip': '@ZIP' +export default { + path: RegExp('/api/demo/plugins/mock/ajax'), + method: 'get', + handle ({ Repeat }) { + return { + code: 0, + msg: '获取数据成功', + data: { + list: Repeat('4-10', { + 'id|+1': 1, + 'name': '@CNAME', + 'star|1-5': '★', + 'delFlag|1': [0, 1], + 'creatDate': '@DATE', + 'address': '@CITY', + 'zip': '@ZIP' + }) } - ] + } } -}) +} diff --git a/src/mock/api/sys.login.js b/src/mock/api/sys.login.js index 2b2becb4..e9b51d2e 100644 --- a/src/mock/api/sys.login.js +++ b/src/mock/api/sys.login.js @@ -1,5 +1,3 @@ -import Mock from 'mockjs' - const userDB = [ { username: 'admin', @@ -21,23 +19,26 @@ const userDB = [ } ] -Mock.mock('/api/login', 'post', ({ url, type, body }) => { - const bodyObj = JSON.parse(body) - const user = userDB.find(e => e.username === bodyObj.username && e.password === bodyObj.password) - if (user) { - return { - code: 0, - msg: '登录成功', - data: { - ...user, - token: 'd787syv8dys8cas80d9s0a0d8f79ads56f7s4d56f879a8as89fd980s7dg' +export default { + path: RegExp('/api/login'), + method: 'post', + handle ({ body }) { + const user = userDB.find(e => e.username === body.username && e.password === body.password) + if (user) { + return { + code: 0, + msg: '登录成功', + data: { + ...user, + token: 'd787syv8dys8cas80d9s0a0d8f79ads56f7s4d56f879a8as89fd980s7dg' + } + } + } else { + return { + code: 401, + msg: '用户名或密码错误', + data: {} } } - } else { - return { - code: 401, - msg: '用户名或密码错误', - data: {} - } } -}) +} diff --git a/src/mock/d2-mock/index.js b/src/mock/d2-mock/index.js new file mode 100644 index 00000000..f1671624 --- /dev/null +++ b/src/mock/d2-mock/index.js @@ -0,0 +1,77 @@ +import Mock from 'mockjs' +import qs from 'qs' +import patch from './patch' + +/* 打补丁 */ +patch(Mock) + +/* Mock 默认配置 */ + +Mock.setup({ timeout: '200-300' }) + +/* 扩展 */ + +const Generator = (prop, template) => { + const obj = {} + obj[prop] = [template] + return Mock.mock(obj) +} + +/* 扩展 */ + +const Repeat = (num, itemTemplate) => Generator(`data|${num}`, itemTemplate).data + +const CustomExtends = { + Generator, + Repeat, + Mock, + Random: Mock.Random +} + +const extend = (prop, value) => { + CustomExtends[prop] = value +} + +/* 装配配置组 */ + +const wired = ({ url, type, body }) => ({ + method: type, + params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''), + body: JSON.parse(body), + url: qs.parse(url.split('?')[0]), + ...CustomExtends +}) + +const setup = (path, method, handle) => { + Mock.mock( + path, + method, + typeof handle === 'function' ? o => handle(wired(o)) : handle + ) +} + +const load = (collection) => { + collection.map(({ path, method, handle }) => { + if (method === '*') { + method = [ + 'get', + 'head', + 'post', + 'put', + 'delete', + 'connect', + 'options', + 'trace', + 'patch' + ] + } + if (typeof method === 'string' && method.indexOf('|') > -1) method = method.split('|') + if (method instanceof Array) { + method.map(item => setup(path, item, handle)) + } else { + setup(path, method, handle) + } + }) +} + +export default { setup, load, extend } diff --git a/src/mock/d2-mock/patch/index.js b/src/mock/d2-mock/patch/index.js new file mode 100644 index 00000000..71a65a32 --- /dev/null +++ b/src/mock/d2-mock/patch/index.js @@ -0,0 +1,8 @@ +export default function (Mock) { + // http://cnine.me/note/FrontEnd/mock-lose-cookies-dbg.html + Mock.XHR.prototype.__send = Mock.XHR.prototype.send + Mock.XHR.prototype.send = function () { + if (this.custom.xhr) this.custom.xhr.withCredentials = this.withCredentials || false + this.__send.apply(this, arguments) + } +} diff --git a/src/mock/index.js b/src/mock/index.js index 7711bd1f..4d7c7eca 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -1,19 +1,9 @@ -import Mock from 'mockjs' - -// 解决 Mock 情况下，携带 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题 -Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send -Mock.XHR.prototype.send = function () { - if (this.custom.xhr) { - this.custom.xhr.withCredentials = this.withCredentials || false - } - this.proxy_send(...arguments) -} +import d2Mock from './d2-mock' // 导入所有的接口 const req = context => context.keys().map(context) -req(require.context('./api/', true, /\.js$/)) +const arr = req(require.context('./api/', true, /\.js$/)) + .filter(e => e.default) + .map(e => e.default) -// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留 -Mock.setup({ - timeout: '300-600' -}) +d2Mock.load(arr) diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/icon-svg.vue similarity index 100% rename from src/pages/demo/components/icon/svg.vue rename to src/pages/demo/components/icon/icon-svg.vue diff --git a/src/pages/demo/components/icon/select-svg.vue b/src/pages/demo/components/icon/select-svg.vue new file mode 100644 index 00000000..244ba521 --- /dev/null +++ b/src/pages/demo/components/icon/select-svg.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/router/modules/components.js b/src/router/modules/components.js index d1864fcb..c8c56fa1 100644 --- a/src/router/modules/components.js +++ b/src/router/modules/components.js @@ -31,9 +31,10 @@ export default { { path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE'), meta: { ...meta, title: 'markdown编辑器' } }, { path: 'highlight', name: `${pre}highlight`, component: () => import('@/pages/demo/components/highlight'), meta: { ...meta, title: '代码高亮组件' } }, { path: 'icon/icon', name: `${pre}icon-icon`, component: () => import('@/pages/demo/components/icon/icon.vue'), meta: { ...meta, title: '图标组件' } }, + { path: 'icon/icon-svg', name: `${pre}icon-icon-svg`, component: () => import('@/pages/demo/components/icon/icon-svg.vue'), meta: { ...meta, title: 'svg 图标' } }, + { path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue'), meta: { ...meta, title: '图标选择器' } }, + { path: 'icon/select-svg', name: `${pre}icon-select-svg`, component: () => import('@/pages/demo/components/icon/select-svg.vue'), meta: { ...meta, title: 'svg 图标选择器' } }, { path: 'icon/list', name: `${pre}icon-list`, component: () => import('@/pages/demo/components/icon/list.vue'), meta: { ...meta, title: '图标列表' } }, - { path: 'icon/select', name: `${pre}icon-select`, component: () => import('@/pages/demo/components/icon/select.vue'), meta: { ...meta, title: '图表选择器组件' } }, - { path: 'icon/svg', name: `${pre}icon-svg`, component: () => import('@/pages/demo/components/icon/svg.vue'), meta: { ...meta, title: 'svg 图标' } }, { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/components/index'), meta: { ...meta, title: '组件首页' } }, { path: 'json-tree', name: `${pre}json-tree`, component: () => import('@/pages/demo/components/json-tree'), meta: { ...meta, title: 'JSON 展示' } }, { path: 'layout/grid', name: `${pre}layout-grid`, component: () => import('@/pages/demo/components/layout/grid.vue'), meta: { ...meta, title: '拖拽网格布局' } },