no message
Former-commit-id: 85ec7bbd986a27b5bf63f4c661bd992e0ee96cf7 Former-commit-id: c82d46c4a506965beb80b7c8dbea4e1650c91723 Former-commit-id: b7578889722e86782b775d382f87c5eb00ebd0b6
This commit is contained in:
李杨
parent
de6e26ca53
commit
68c34ef21a
|
|
@ -17,50 +17,50 @@
|
|||
|
||||
|
||||
// 浮动相关
|
||||
.fl {
|
||||
.#{$prefix}-fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
.#{$prefix}-fr {
|
||||
float: right;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
.#{$prefix}-clearfix:before,
|
||||
.#{$prefix}-clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
.#{$prefix}-clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
// 边距相关
|
||||
.m {
|
||||
.#{$prefix}-m {
|
||||
margin: $margin;
|
||||
}
|
||||
.mt {
|
||||
.#{$prefix}-mt {
|
||||
margin-top: $margin;
|
||||
}
|
||||
.mr {
|
||||
.#{$prefix}-mr {
|
||||
margin-right: $margin;
|
||||
}
|
||||
.mb {
|
||||
.#{$prefix}-mb {
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
.ml {
|
||||
.#{$prefix}-ml {
|
||||
margin-left: $margin;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
.#{$prefix}-m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
.mt-0 {
|
||||
.#{$prefix}-mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.mr-0 {
|
||||
.#{$prefix}-mr-0 {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.mb-0 {
|
||||
.#{$prefix}-mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.ml-0 {
|
||||
.#{$prefix}-ml-0 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import '~@/assets/style/unit/_color.scss';
|
||||
@import '~@/assets/style/unit/_size.scss';
|
||||
|
||||
// 工具类名统一前缀
|
||||
$prefix: dd;
|
||||
|
||||
// 禁止用户选中 鼠标变为手形
|
||||
%unable-select {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-popover
|
||||
ref="pop"
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="popover.visible">
|
||||
<p>访问 Github</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="popover.visible = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="jump">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-button
|
||||
v-popover:pop
|
||||
v-bind="$attrs"
|
||||
@click="popover.visible = true">
|
||||
view in
|
||||
<span class="fa fa-github"></span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'https://github.com/FairyEver'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
popover: {
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump () {
|
||||
window.open(this.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -31,6 +31,12 @@ Vue.component('GithubLink', resolve => {
|
|||
require(['@/components/demo/GithubLink'], resolve)
|
||||
})
|
||||
|
||||
// 名称：github 链接按钮
|
||||
// 用途：本质上这就是一个 github 的链接
|
||||
Vue.component('GithubLinkButton', resolve => {
|
||||
require(['@/components/demo/GithubLinkButton'], resolve)
|
||||
})
|
||||
|
||||
// 名称：SimpleMDE markdown 编辑器
|
||||
// 用途：SimpleMDE markdown 编辑器
|
||||
Vue.component('SimpleMDE', resolve => {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</PageHeader>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="mb">
|
||||
<div class="dd-mb">
|
||||
<el-input v-model="text" style="width: 200px;"></el-input>
|
||||
<el-button @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
|
||||
</div>
|
||||
|
|
@ -15,12 +15,12 @@
|
|||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-alert
|
||||
class="mb"
|
||||
class="dd-mb"
|
||||
title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<div class="mb">
|
||||
<div class="dd-mb">
|
||||
<el-tooltip content="需要 IE 浏览器" placement="top">
|
||||
<el-button @click="readText">readText( )</el-button>
|
||||
</el-tooltip>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<Container type="ghost">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">javascript</p>
|
||||
<Highlight :code="codeJavascript"></Highlight>
|
||||
</el-card>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">css</p>
|
||||
<Highlight :code="codeCSS"></Highlight>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">scss</p>
|
||||
<Highlight :code="codeSCSS"></Highlight>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">html</p>
|
||||
<Highlight :code="codeHTML"></Highlight>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<Container type="ghost">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">基本读写删</p>
|
||||
<el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
|
||||
<el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
|
||||
<el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
|
||||
</el-card>
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">设置有效期</p>
|
||||
<el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
|
||||
<el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
|
||||
<el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
|
||||
</el-card>
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<p slot="title">获取所有可以获得的数据</p>
|
||||
<el-button type="info" @click="getAll">getAll</el-button>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div slot="header">
|
||||
<el-button @click="ajax">发送请求</el-button>
|
||||
</div>
|
||||
<el-table v-bind="table" style="width: 100%" class="mb">
|
||||
<el-table v-bind="table" style="width: 100%" class="dd-mb">
|
||||
<el-table-column
|
||||
v-for="(item, index) in table.columns"
|
||||
:key="index"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<el-card class="mb">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-card class="dd-mb">
|
||||
<div slot="header" class="dd-clearfix">
|
||||
<el-button type="text" size="mini">{{title}}</el-button>
|
||||
<el-tooltip content="重新 mock 数据" placement="top-end">
|
||||
<el-button type="primary" size="mini" @click="$emit('reload')" style="float: right;">刷新</el-button>
|
||||
<el-button type="primary" size="mini" @click="$emit('reload')" class="dd-fr">刷新</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<Container type="ghost">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
|
||||
</el-card>
|
||||
<MockDemoCard
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<Container type="ghost">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
|
||||
</el-card>
|
||||
<MockDemoCard
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</PageHeader>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="4">
|
||||
<div class="mb">
|
||||
<div class="dd-mb">
|
||||
<el-button @click="download">下载演示CSV</el-button>
|
||||
</div>
|
||||
<el-upload :before-upload="handleUpload" action="default">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<Container type="ghost">
|
||||
<el-card class="mb">
|
||||
<el-card class="dd-mb">
|
||||
<QuillEditor
|
||||
style="min-height: 200px;"
|
||||
v-model="value"
|
||||
|
|
|
|||
|
|
@ -14,8 +14,12 @@
|
|||
<el-card>
|
||||
<el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
|
||||
<template v-if="item.i === '0'">
|
||||
<p>拖拽卡片调整位置</p>
|
||||
<p>拖拽卡片右下角的手柄调整卡片大小</p>
|
||||
<div class="dd-mb">拖拽卡片调整位置</div>
|
||||
<div class="dd-mb">拖拽卡片右下角的手柄调整卡片大小</div>
|
||||
<GithubLinkButton
|
||||
url="https://github.com/jbaysolutions/vue-grid-layout"
|
||||
type="success">
|
||||
</GithubLinkButton>
|
||||
</template>
|
||||
</el-card>
|
||||
</GridItem>
|
||||
|
|
@ -29,16 +33,14 @@ export default {
|
|||
return {
|
||||
layout: {
|
||||
layout: [
|
||||
{'x': 0, 'y': 0, 'w': 4, 'h': 5, 'i': '0'},
|
||||
{'x': 2, 'y': 5, 'w': 2, 'h': 5, 'i': '1'},
|
||||
{'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '2'},
|
||||
{'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '3'},
|
||||
{'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '4'},
|
||||
{'x': 10, 'y': 10, 'w': 2, 'h': 5, 'i': '5'},
|
||||
{'x': 0, 'y': 5, 'w': 2, 'h': 5, 'i': '6'},
|
||||
{'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '7'},
|
||||
{'x': 8, 'y': 10, 'w': 2, 'h': 5, 'i': '8'},
|
||||
{'x': 4, 'y': 5, 'w': 6, 'h': 5, 'i': '9'}
|
||||
{'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0'},
|
||||
{'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1'},
|
||||
{'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2'},
|
||||
{'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3'},
|
||||
{'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4'},
|
||||
{'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5'},
|
||||
{'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6'},
|
||||
{'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7'}
|
||||
],
|
||||
colNum: 12,
|
||||
rowHeight: 30,
|
||||
|
|
@ -55,7 +57,7 @@ export default {
|
|||
layoutUpdatedHandler (newLayout) {
|
||||
// console.log('layoutUpdatedHandler')
|
||||
newLayout.forEach(e => {
|
||||
// console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
||||
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
|
||||
})
|
||||
},
|
||||
resizeHandler (i, newH, newW) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue