lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

select-svg 基本完成 

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
This commit is contained in:
liyang 2018-12-12 20:57:40 +08:00
parent 8104fb1db6
commit d7a2b04f45
15 changed files with 380 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/d2-icon-select/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<span>
<el-popover
ref="pop"
v-model="pop"
@ -55,7 +55,7 @@
</template>
{{value ? value : placeholder}}
</el-button>
</div>
</span>
</template>
<script>

1
src/components/d2-icon-svg-select/data/index.js.REMOVED.git-id Normal file
View File

@ -0,0 +1 @@
3283c245146c8130af1352a64561e780a3f585c5

179
src/components/d2-icon-svg-select/index.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<span>
<el-popover
ref="pop"
v-model="pop"
:placement="placement"
width="300"
trigger="click">
<div class="header d2-clearfix d2-mb-10" v-if="clearable">
<el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
</div>
<el-input
v-model="searchText"
:clearable="true"
placeholder="搜索 比如 'plus'"
prefix-icon="el-icon-search">
</el-input>
<div class="group">
<el-row>
<el-col
v-for="(item, index) in iconFilted"
:key="index"
class="icon-item"
:span="4"
@click.native="selectIcon(item)">
<d2-icon-svg :name="item"/>
</el-col>
</el-row>
</div>
</el-popover>
<!-- 允许用户输入 -->
<el-input
v-if="userInput"
v-model="currentValue"
v-bind="bind"
style="max-width: 240px;">
<template v-if="value" slot="prepend">
<d2-icon-svg class="d2-icon-svg--input-preview" :name="value"/>
</template>
<el-button v-popover:pop slot="append">
<i class="fa fa-list"></i>
</el-button>
</el-input>
<!-- 不允许用户输入 -->
<el-button v-popover:pop v-if="!userInput">
<span flex="dir:left main:center cross:center">
<d2-icon-svg v-if="value" class="d2-icon-svg--input-preview d2-mr-10" :name="value"/>
<span>{{value ? value : placeholder}}</span>
</span>
</el-button>
</span>
</template>
<script>
import icon from './data/index'
export default {
name: 'd2-icon-select',
props: {
// 值
value: {
type: String,
required: false,
default: ''
},
// 占位符
placeholder: {
type: String,
required: false,
default: '请选择'
},
// 弹出界面的方向
placement: {
type: String,
required: false,
default: 'right'
},
// 是否可清空
clearable: {
type: Boolean,
required: false,
default: true
},
// 是否允许用户输入
userInput: {
type: Boolean,
required: false,
default: false
},
// 是否在选择后自动关闭
autoClose: {
type: Boolean,
required: false,
default: true
}
},
data () {
return {
// 绑定弹出框
pop: false,
// 所有图标
icon,
// 组件内输入框的值
currentValue: '',
// 搜索的文字
searchText: '',
// 不是搜索的时候显示的折叠面板绑定的展开数据
collapseActive: []
}
},
computed: {
// 输入框上绑定的设置
bind () {
return {
placeholder: this.placeholder,
clearable: this.clearable,
...this.$attrs
}
},
// 是否在搜索
searchMode () {
return !!this.searchText
},
// 过滤后的图标
iconFilted () {
return this.$IconSvg.filter(icon => icon.indexOf(this.searchText) >= 0)
}
},
watch: {
value (value) {
this.currentValue = value
},
currentValue (value) {
this.selectIcon(value)
}
},
created () {
this.currentValue = this.value
},
methods: {
selectIcon (iconName = '') {
this.$emit('input', iconName)
if (iconName && this.autoClose) {
this.pop = false
}
}
}
}
</script>
<style lang="scss" scoped>
.d2-icon-svg--input-preview {
height: 14px;
width: 14px;
display: block;
}
.group {
max-height: 400px;
overflow-x: hidden;
overflow-y: scroll;
margin-top: 10px;
.icon-item {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: $color-text-sub;
svg {
height: 20px;
width: 20px;
}
&:hover {
color: $color-text-main;
background-color: $color-bg;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px $color-border-1;
}
}
}
</style>

3
src/components/index.js
View File

@ -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'))

5
src/menu/modules/demo-components.js
View File

@ -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' }
]
},
{

24
src/mock/api/demo.business.issues.142.js
View File

@ -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)
}
)
})
}
}

56
src/mock/api/demo.business.table.1.js
View File

@ -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'
}
]
}
}
}
)
})
)
}
}

36
src/mock/api/demo.plugins.mock.ajax.js
View File

@ -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'
})
}
]
}
}
})
}

39
src/mock/api/sys.login.js
View File

@ -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: {}
}
}
})
}

77
src/mock/d2-mock/index.js Normal file
View File

@ -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 }

8
src/mock/d2-mock/patch/index.js Normal file
View File

@ -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)
}
}

20
src/mock/index.js
View File

@ -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)

0
src/pages/demo/components/icon/svg.vue → src/pages/demo/components/icon/icon-svg.vue
View File

25
src/pages/demo/components/icon/select-svg.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<d2-container :filename="filename">
<template slot="header">svg 图标选择器</template>
<div class="d2-mb">
<p class="d2-mt-0 d2-mb-10">一般用法 | {{icon || '未选择'}}</p>
<d2-icon-svg-select v-model="icon"/>
</div>
<div class="d2-mb">
<p class="d2-mt-0 d2-mb-10">用户可以输入 | {{icon2 || '未选择'}}</p>
<d2-icon-svg-select v-model="icon2" :user-input="true"/>
</div>
</d2-container>
</template>
<script>
export default {
data () {
return {
filename: __filename,
icon: '',
icon2: ''
}
}
}
</script>

5
src/router/modules/components.js
View File

@ -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: '拖拽网格布局' } },