文件夹改名
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]] Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0 Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33 Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83] Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6 Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
64
src/views/demo/plugins/better-scroll/base.vue
Normal file
64
src/views/demo/plugins/better-scroll/base.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">基础用法</template>
|
||||
<div ref="wrapper" class="demo-bs-wrapper">
|
||||
<div>
|
||||
<div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BScroll from 'better-scroll'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
click: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-bs-wrapper {
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid $color-border-1;
|
||||
border-radius: 4px;
|
||||
.demo-bs-item {
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid $color-border-4;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/demo/plugins/better-scroll/to.vue
Normal file
107
src/views/demo/plugins/better-scroll/to.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">滚动定位</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div ref="wrapper" class="demo-bs-wrapper">
|
||||
<div>
|
||||
<div v-for="n in 100" :key="n" class="demo-bs-item" :id="`demo-bs-item-${n}`">n : {{n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="d2-mb">
|
||||
<p>滚动时间 ms</p>
|
||||
<el-slider v-model="time" :min="100" :max="3000"></el-slider>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-button-group>
|
||||
<el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
|
||||
<el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-button-group>
|
||||
<el-button @click="handleScrollBy(50)">向下滚动50像素</el-button>
|
||||
<el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-button-group>
|
||||
<el-button @click="handleScrollToElement(4)">滚动到第四个</el-button>
|
||||
<el-button @click="handleScrollToElement(14)">滚动到第十四个</el-button>
|
||||
<el-button @click="handleScrollToElement(24)">滚动到第二十四个</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template slot="footer">
|
||||
<d2-link-btn title="文档" link="http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/"/>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 插件
|
||||
import BScroll from 'better-scroll'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
time: 300,
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
handleScrollTo (y) {
|
||||
this.BS.scrollTo(0, -y, this.time)
|
||||
},
|
||||
handleScrollBy (y) {
|
||||
this.BS.scrollBy(0, -y, this.time)
|
||||
},
|
||||
handleScrollToElement (n) {
|
||||
this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
|
||||
},
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, {
|
||||
mouseWheel: true,
|
||||
click: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
if (this.BS) {
|
||||
this.BS.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-bs-wrapper {
|
||||
height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid $color-border-1;
|
||||
border-radius: 4px;
|
||||
.demo-bs-item {
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid $color-border-4;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/views/demo/plugins/clipboard-polyfill/index.vue
Normal file
83
src/views/demo/plugins/clipboard-polyfill/index.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">剪贴板访问</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="d2-mb">
|
||||
<el-input v-model="text" style="width: 200px;"></el-input>
|
||||
<el-button class="d2-ml" @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
|
||||
</div>
|
||||
<el-button @click="copyHtml()">将 <span v-html="html"></span> 连带样式一起复制进剪贴板，然后去 Word 文档内粘贴</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-alert
|
||||
class="d2-mb"
|
||||
title="在 IE 浏览器或者高版本 Chrome 下你才可以通过下面这两个按钮获取剪贴板数据"
|
||||
type="warning"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<div class="d2-mb">
|
||||
<el-tooltip content="需要 IE 浏览器" placement="top">
|
||||
<el-button @click="readText">readText( )</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="需要 IE 浏览器" placement="top">
|
||||
<el-button @click="read">read( )</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-input type="textarea" placeholder="在这里检验你的剪贴板 ( text/plain 数据 )"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as clipboard from 'clipboard-polyfill'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
text: 'Hello ~',
|
||||
html: '<span style="background-color: #19be6b; color: #f8f8f9;">Hello</span><span style="background-color: #495060; color: #f8f8f9;">World</span>'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyText () {
|
||||
clipboard.writeText(this.text)
|
||||
},
|
||||
copyHtml () {
|
||||
var dt = new clipboard.DT()
|
||||
dt.setData('text/html', this.html)
|
||||
clipboard.write(dt)
|
||||
},
|
||||
readText () {
|
||||
clipboard.readText().then((res) => {
|
||||
this.$message({
|
||||
message: '读取成功 返回结果请查看控制台',
|
||||
type: 'success'
|
||||
})
|
||||
}, err => {
|
||||
console.log(err)
|
||||
this.$message({
|
||||
message: '错误信息已经打印到控制台',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
read () {
|
||||
clipboard.read().then((res) => {
|
||||
console.log(res)
|
||||
this.$message({
|
||||
message: '读取成功 返回结果请查看控制台',
|
||||
type: 'success'
|
||||
})
|
||||
}, (err) => {
|
||||
console.log(err)
|
||||
this.$message({
|
||||
message: '错误信息已经打印到控制台',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
74
src/views/demo/plugins/day/index.vue
Normal file
74
src/views/demo/plugins/day/index.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">日期计算</template>
|
||||
<h1 class="d2-mt-0">解析</h1>
|
||||
<el-row :gutter="20" class="d2-mt">
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 当前时间\ndayjs()`"/>{{dayjs()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 时间字符串\ndayjs('1995-12-25')`"/>{{dayjs('1995-12-25')}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (毫秒)\ndayjs(1318781876406)`"/>{{dayjs(1318781876406)}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Date 对象\ndayjs(new Date(2018, 8, 18))`"/>{{dayjs(new Date(2018, 8, 18))}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 复制\ndayjs().clone()`"/>{{dayjs().clone()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 检测是否是一个有效的时间\ndayjs().isValid()`"/>{{dayjs().isValid()}}</el-card></el-col>
|
||||
</el-row>
|
||||
<h1>获取</h1>
|
||||
<el-row :gutter="20" class="d2-mt">
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取年\ndayjs().year()`"/>{{dayjs().year()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取月\ndayjs().month()`"/>{{dayjs().month()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取日\ndayjs().date()`"/>{{dayjs().date()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取星期\ndayjs().day()`"/>{{dayjs().day()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取小时\ndayjs().hour()`"/>{{dayjs().hour()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取分钟\ndayjs().minute()`"/>{{dayjs().minute()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取秒\ndayjs().second()`"/>{{dayjs().second()}}</el-card></el-col>
|
||||
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取毫秒\ndayjs().millisecond()`"/>{{dayjs().millisecond()}}</el-card></el-col>
|
||||
</el-row>
|
||||
<h1>设置</h1>
|
||||
<el-row :gutter="20" class="d2-mt">
|
||||
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`// 设置月份\ndayjs().set('month', 6).month()`"/>{{dayjs().set('month', 6).month()}}</el-card></el-col>
|
||||
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`// 设置秒\ndayjs().set('second', 30).second()`"/>{{dayjs().set('second', 30).second()}}</el-card></el-col>
|
||||
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`// 设置小时\ndayjs().set('hour', 4).hour()`"/>{{dayjs().set('hour', 4).hour()}}</el-card></el-col>
|
||||
</el-row>
|
||||
<h1>操作</h1>
|
||||
<el-row :gutter="20" class="d2-mt">
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 增加\ndayjs().add(1, 'day').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().add(1, 'day').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 减少\ndayjs().subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 开头时间\ndayjs().startOf('year').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().startOf('year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 末尾时间\ndayjs().endOf('month').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().endOf('month').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
|
||||
</el-row>
|
||||
<h1>显示</h1>
|
||||
<el-row :gutter="20" class="d2-mt">
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 格式化\ndayjs().format('YYYY-M-D HH:mm:ss')`"/>{{dayjs().format('YYYY-M-D HH:mm:ss')}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 时间差\ndayjs().diff(dayjs().subtract(1, 'day'), 'days')`"/>{{dayjs().diff(dayjs().subtract(1, 'day'), 'days')}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (毫秒)\ndayjs().valueOf()`"/>{{dayjs().valueOf()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (秒)\ndayjs().unix()`"/>{{dayjs().unix()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 天数 (月)\ndayjs().daysInMonth()`"/>{{dayjs().daysInMonth()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Date 对象\ndayjs().toDate()`"/>{{dayjs().toDate()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 数组\ndayjs().toArray()`"/>{{dayjs().toArray()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 序列化 Dayjs 对象时会返回 ISO 8601 格式的字符串\ndayjs().toJSON()`"/>{{dayjs().toJSON()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// ISO 8601 字符串\ndayjs().toISOString()`"/>{{dayjs().toISOString()}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 字符串\ndayjs().toString()`"/>{{dayjs().toString()}}</el-card></el-col>
|
||||
<el-col :span="24"><el-card shadow="never"><d2-highlight slot="header" :code="`// 对象\ndayjs().toObject()`"/>{{dayjs().toObject()}}</el-card></el-col>
|
||||
</el-row>
|
||||
<h1>查询</h1>
|
||||
<el-row :gutter="20" class="d2-mt">
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否之前\ndayjs().isBefore(dayjs().add(1, 'day'))`"/>{{dayjs().isBefore(dayjs().add(1, 'day'))}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否之前\ndayjs().isBefore(dayjs().subtract(1, 'day'))`"/>{{dayjs().isBefore(dayjs().subtract(1, 'day'))}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否相同\ndayjs().isSame(dayjs())`"/>{{dayjs().isSame(dayjs())}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否相同\ndayjs().isSame(dayjs().add(1, 'day'))`"/>{{dayjs().isSame(dayjs().add(1, 'day'))}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().add(1, 'day'))`"/>{{dayjs().isAfter(dayjs().add(1, 'day'))}}</el-card></el-col>
|
||||
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().subtract(1, 'day'))`"/>{{dayjs().isAfter(dayjs().subtract(1, 'day'))}}</el-card></el-col>
|
||||
</el-row>
|
||||
<d2-link-btn slot="footer" title="依赖" link="https://github.com/iamkun/dayjs"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dayjs
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
src/views/demo/plugins/export/data/index.js
Normal file
37
src/views/demo/plugins/export/data/index.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import Mock from 'mockjs'
|
||||
|
||||
const mockData = Mock.mock({
|
||||
'data|3-6': [{
|
||||
'id|+1': 1,
|
||||
'name': '@CNAME',
|
||||
'creatDate': '@DATE',
|
||||
'address': '@CITY',
|
||||
'zip': '@ZIP'
|
||||
}]
|
||||
})
|
||||
|
||||
export default {
|
||||
data: mockData.data,
|
||||
columns: [
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id'
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
prop: 'name'
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'creatDate'
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
prop: 'address'
|
||||
},
|
||||
{
|
||||
label: '邮编',
|
||||
prop: 'zip'
|
||||
}
|
||||
]
|
||||
}
|
||||
64
src/views/demo/plugins/export/table.vue
Normal file
64
src/views/demo/plugins/export/table.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">导出表格</template>
|
||||
<div class="d2-mb">
|
||||
<el-button type="primary" @click="exportCsv">
|
||||
<d2-icon name="download"/>
|
||||
导出 CSV
|
||||
</el-button>
|
||||
<el-button type="primary" @click="exportExcel">
|
||||
<d2-icon name="download"/>
|
||||
导出 Excel
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table v-bind="table" style="width: 100%">
|
||||
<el-table-column
|
||||
v-for="(item, index) in table.columns"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 假数据
|
||||
import table from './data'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
table: {
|
||||
columns: table.columns,
|
||||
data: table.data,
|
||||
size: 'mini',
|
||||
stripe: true,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportCsv (params = {}) {
|
||||
this.$export.csv({
|
||||
columns: this.table.columns,
|
||||
data: this.table.data
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出CSV成功')
|
||||
})
|
||||
},
|
||||
exportExcel () {
|
||||
this.$export.excel({
|
||||
columns: this.table.columns,
|
||||
data: this.table.data,
|
||||
header: '导出 Excel',
|
||||
merges: ['A1', 'E1']
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出表格成功')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
45
src/views/demo/plugins/export/txt.vue
Normal file
45
src/views/demo/plugins/export/txt.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">导出文本</template>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{minRows: 2, maxRows: 4}"
|
||||
placeholder="请输入内容 然后点击保存按钮导出文本文档"
|
||||
v-model="text">
|
||||
</el-input>
|
||||
<div class="d2-mt">
|
||||
<el-button type="primary" @click="exportTxt">
|
||||
<d2-icon name="download"/>
|
||||
保存为 txt
|
||||
</el-button>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportTxt () {
|
||||
// 校验是不是空
|
||||
if (this.text === '') {
|
||||
this.$message('虽然可以为空 但是出于体验不建议这样 还是写点东西吧')
|
||||
return
|
||||
}
|
||||
// 导出
|
||||
this.$export.txt({
|
||||
text: this.text,
|
||||
title: '文本'
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出文本成功')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
67
src/views/demo/plugins/i18n/components/DemoI18n.vue
Normal file
67
src/views/demo/plugins/i18n/components/DemoI18n.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<i18n>
|
||||
{
|
||||
"cn": {
|
||||
"subtitle": "点击上面的按钮，你可以在两个示例页面之间切换，检查语言变化",
|
||||
"hello": "你好",
|
||||
"vue": "Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。",
|
||||
"check": {
|
||||
"title": "请选择",
|
||||
"label": {
|
||||
"Beijing": "北京",
|
||||
"Tokyo": "东京",
|
||||
"NewYork": "纽约"
|
||||
}
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"subtitle": "Click the button above, you can switch between two sample pages to check language changes",
|
||||
"hello": "hello",
|
||||
"vue": "Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.",
|
||||
"check": {
|
||||
"title": "Please choose",
|
||||
"label": {
|
||||
"Beijing": "Beijing",
|
||||
"Tokyo": "Tokyo",
|
||||
"NewYork": "NewYork"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ja": {
|
||||
"subtitle": "上のボタンをクリックして，あなたは2つの例のページの間で切り替えて、言語の変化を検査することができます",
|
||||
"hello": "こんにちは",
|
||||
"vue": "Vue (発音は /vjuː/、view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。",
|
||||
"check": {
|
||||
"title": "選択してください",
|
||||
"label": {
|
||||
"Beijing": "北京",
|
||||
"Tokyo": "東京",
|
||||
"NewYork": "ニューヨーク"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p>{{$t('subtitle')}}</p>
|
||||
<el-tag>{{$t('hello')}}</el-tag>
|
||||
<p>{{$t('vue')}}</p>
|
||||
<p>{{$t('check.title')}}</p>
|
||||
<el-checkbox-group v-model="check">
|
||||
<el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
|
||||
<el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
|
||||
<el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
check: ['a', 'b']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
27
src/views/demo/plugins/i18n/components/DemoI18nControl.vue
Normal file
27
src/views/demo/plugins/i18n/components/DemoI18nControl.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="d2-mb">
|
||||
<el-radio-group v-model="lang" @change="handleChange">
|
||||
<el-radio-button label="cn">中文</el-radio-button>
|
||||
<el-radio-button label="ja">日本語</el-radio-button>
|
||||
<el-radio-button label="en">English</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
lang: 'cn'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.lang = this.$i18n.locale
|
||||
},
|
||||
methods: {
|
||||
handleChange (val) {
|
||||
this.$i18n.locale = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
src/views/demo/plugins/i18n/demo1.vue
Normal file
21
src/views/demo/plugins/i18n/demo1.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">{{`${$t('pub.pageHeader.demo')} 1`}}</template>
|
||||
<DemoI18nControl></DemoI18nControl>
|
||||
<DemoI18n></DemoI18n>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
DemoI18nControl: () => import('./components/DemoI18nControl'),
|
||||
DemoI18n: () => import('./components/DemoI18n')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
src/views/demo/plugins/i18n/demo2.vue
Normal file
21
src/views/demo/plugins/i18n/demo2.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">{{`${$t('pub.pageHeader.demo')} 2`}}</template>
|
||||
<DemoI18nControl></DemoI18nControl>
|
||||
<DemoI18n></DemoI18n>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
DemoI18nControl: () => import('./components/DemoI18nControl'),
|
||||
DemoI18n: () => import('./components/DemoI18n')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
src/views/demo/plugins/import/csv.vue
Normal file
60
src/views/demo/plugins/import/csv.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">导入 csv</template>
|
||||
<div class="d2-mb">
|
||||
<el-button @click="download">
|
||||
<d2-icon name="download"/>
|
||||
下载演示 .csv 表格
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-upload :before-upload="handleUpload" action="default">
|
||||
<el-button type="success">
|
||||
<d2-icon name="file-o"/>
|
||||
选择要导入的 .csv 表格
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-table v-bind="table">
|
||||
<el-table-column
|
||||
v-for="(item, index) in table.columns"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
table: {
|
||||
columns: [],
|
||||
data: [],
|
||||
size: 'mini',
|
||||
stripe: true,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleUpload (file) {
|
||||
this.$import.csv(file)
|
||||
.then(res => {
|
||||
this.table.columns = Object.keys(res.data[0]).map(e => ({
|
||||
label: e,
|
||||
prop: e
|
||||
}))
|
||||
this.table.data = res.data
|
||||
})
|
||||
return false
|
||||
},
|
||||
download () {
|
||||
window.location.href = 'http://fairyever.qiniudn.com/d2-admin-import-csv-demo.csv'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
src/views/demo/plugins/import/xlsx.vue
Normal file
62
src/views/demo/plugins/import/xlsx.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="card">
|
||||
<template slot="header">导入 xlsx</template>
|
||||
<div class="d2-mb">
|
||||
<el-button @click="download">
|
||||
<d2-icon name="download"/>
|
||||
下载演示 .xlsx 表格
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="d2-mb">
|
||||
<el-upload :before-upload="handleUpload" action="default">
|
||||
<el-button type="success">
|
||||
<d2-icon name="file-o"/>
|
||||
选择要导入的 .xlsx 表格
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-table v-bind="table">
|
||||
<el-table-column
|
||||
v-for="(item, index) in table.columns"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
table: {
|
||||
columns: [],
|
||||
data: [],
|
||||
size: 'mini',
|
||||
stripe: true,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleUpload (file) {
|
||||
this.$import.xlsx(file)
|
||||
.then(({ header, results }) => {
|
||||
this.table.columns = header.map(e => {
|
||||
return {
|
||||
label: e,
|
||||
prop: e
|
||||
}
|
||||
})
|
||||
this.table.data = results
|
||||
})
|
||||
return false
|
||||
},
|
||||
download () {
|
||||
window.location.href = 'http://fairyever.qiniudn.com/d2-admin-import-xlsx-demo.xlsx'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
22
src/views/demo/plugins/index/index.vue
Normal file
22
src/views/demo/plugins/index/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<d2-container :filename="filename" type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-plugins'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
menu,
|
||||
banner: {
|
||||
title: 'PLUGIN',
|
||||
subTitle: 'D2Admin 集成了许多实用插件'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
src/views/demo/plugins/js-cookie/index.vue
Normal file
59
src/views/demo/plugins/js-cookie/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<div class="d2-mb">Cookie 读写</div>
|
||||
<el-alert
|
||||
title="建议"
|
||||
type="warning"
|
||||
description="建议使用 util 内的 cookies 对象，这样会在存储和读取时统一增加前缀，方便对 cookie 统一管理"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
<p class="d2-mt-0">基本读写删</p>
|
||||
<el-button type="primary" @click="set('demo-user-name', 'demo-user')">set('demo-user-name', 'normalValue')</el-button>
|
||||
<el-button type="info" @click="get('demo-user-name')">get('demo-user-name')</el-button>
|
||||
<el-button type="error" @click="remove('demo-user-name')">remove('demo-user-name')</el-button>
|
||||
<p>设置有效期</p>
|
||||
<el-button type="primary" @click="setExpires('demo-user-pwd', '123456789', 1)">设置 'demo-user-pwd' 有效期为一天</el-button>
|
||||
<el-button type="info" @click="get('demo-user-pwd')">get('demo-user-pwd')</el-button>
|
||||
<el-button type="error" @click="remove('demo-user-pwd')">remove('demo-user-pwd')</el-button>
|
||||
<p>获取所有可以获得的数据</p>
|
||||
<el-button type="info" @click="getAll">getAll</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util from '@/libs/util.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
set (name = 'default-name', value = 'default-value') {
|
||||
util.cookies.set(name, value)
|
||||
this.$message.info(`设置数据 ${name} = ${value}`)
|
||||
},
|
||||
setExpires (name = 'default-name', value = 'default-value', expires = 1) {
|
||||
util.cookies.set(name, value, {
|
||||
expires
|
||||
})
|
||||
this.$message.info(`设置数据 ${name} = ${value} 有效期 ${expires} 天`)
|
||||
},
|
||||
get (name = 'default-name') {
|
||||
const value = util.cookies.get(name)
|
||||
this.$message.info(`获取数据 ${name} = ${value}`)
|
||||
},
|
||||
getAll () {
|
||||
const value = util.cookies.getAll()
|
||||
console.log(value)
|
||||
this.$message.info('结果已经打印到控制台')
|
||||
},
|
||||
remove (name = 'default-name') {
|
||||
util.cookies.remove(name)
|
||||
this.$message.info(`删除数据 ${name}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
src/views/demo/plugins/mock/ajax.vue
Normal file
57
src/views/demo/plugins/mock/ajax.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<div slot="header">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="ajax">
|
||||
<d2-icon name="paper-plane"/>
|
||||
发送请求
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-bind="table"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
v-for="(item, index) in table.columns"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PluginMocksAjax } from '@api/demo.plugins.mocks.ajax'
|
||||
export default {
|
||||
name: 'demo-plugins-mock-ajax',
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
table: {
|
||||
columns: [],
|
||||
data: [],
|
||||
size: 'mini',
|
||||
stripe: true,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ajax () {
|
||||
PluginMocksAjax()
|
||||
.then(res => {
|
||||
this.table.columns = Object.keys(res.list[0]).map(e => ({
|
||||
label: e,
|
||||
prop: e
|
||||
}))
|
||||
this.table.data = res.list
|
||||
})
|
||||
.catch(() => {
|
||||
// 错误情况
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
63
src/views/demo/plugins/mock/components/d2-demo-mock-card.vue
Normal file
63
src/views/demo/plugins/mock/components/d2-demo-mock-card.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<div slot="header" class="d2-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')" class="d2-fr">刷新</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div class="col col-l">
|
||||
<d2-highlight :code="code"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="col col-r">
|
||||
<d2-highlight :code="mock"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-demo-mock-card',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'Mock Demo'
|
||||
},
|
||||
code: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
mock: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.col {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
font-size: 16px;
|
||||
}
|
||||
.col-l {
|
||||
background-color: lighten($color-info, 40%);
|
||||
border-color: lighten($color-info, 35%);
|
||||
}
|
||||
.col-r {
|
||||
background-color: lighten($color-success, 47%);
|
||||
border-color: lighten($color-success, 40%);
|
||||
}
|
||||
</style>
|
||||
15
src/views/demo/plugins/mock/data/settingDPD.js
Normal file
15
src/views/demo/plugins/mock/data/settingDPD.js
Normal file
@@ -0,0 +1,15 @@
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
// 字符串
|
||||
{
|
||||
title: "占位符演示",
|
||||
json: {
|
||||
"name": {
|
||||
first: '@FIRST',
|
||||
middle: '@FIRST',
|
||||
last: '@LAST',
|
||||
full: '@first @middle @last'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
115
src/views/demo/plugins/mock/data/settingDTD.js
Normal file
115
src/views/demo/plugins/mock/data/settingDTD.js
Normal file
@@ -0,0 +1,115 @@
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
// 字符串
|
||||
{
|
||||
title: "复制1-10次固定字符串",
|
||||
json: {
|
||||
"string|1-10": "★"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "复制3次",
|
||||
json: {
|
||||
"string|3": "Ha"
|
||||
}
|
||||
},
|
||||
// 数字
|
||||
{
|
||||
title: "范围随机取值",
|
||||
json: {
|
||||
"number|1-100": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "累加1",
|
||||
json: {
|
||||
"number|+1": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "累加2",
|
||||
json: {
|
||||
"number|+2": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "浮点数",
|
||||
json: {
|
||||
"number1|1-100.1-10": 1,
|
||||
"number2|123.1-10": 1,
|
||||
"number3|123.3": 1,
|
||||
"number4|123.10": 1.123
|
||||
}
|
||||
},
|
||||
// 布尔值
|
||||
{
|
||||
title: "true 的概率是 1/2",
|
||||
json: {
|
||||
"boolean|1": true
|
||||
}
|
||||
},
|
||||
// 对象
|
||||
{
|
||||
title: '随机选择3个属性',
|
||||
json: {
|
||||
"obj|3": {
|
||||
name: 'FairyEver',
|
||||
use: 'vue.js',
|
||||
sex: 1,
|
||||
qq: '1711467488',
|
||||
tel: '123-4567-8910',
|
||||
city: 'beijing',
|
||||
mail: '1711467488liyang@gmail.com',
|
||||
github: 'https://github.com/d2-projects',
|
||||
blog: 'http://www.fairyever.com/',
|
||||
creatDate: '2018-1-1',
|
||||
updateDate: '2018-1-2',
|
||||
delFlag: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '随机选择4-8个属性',
|
||||
json: {
|
||||
"obj|4-8": {
|
||||
name: 'FairyEver',
|
||||
use: 'vue.js',
|
||||
sex: 1,
|
||||
qq: '1711467488',
|
||||
tel: '123-4567-8910',
|
||||
city: 'beijing',
|
||||
mail: '1711467488liyang@gmail.com',
|
||||
github: 'https://github.com/FairyEver',
|
||||
blog: 'http://www.fairyever.com/',
|
||||
creatDate: '2018-1-1',
|
||||
updateDate: '2018-1-2',
|
||||
delFlag: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数组
|
||||
{
|
||||
title: '随机选1个',
|
||||
json: {
|
||||
"arr|1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '顺序选1个',
|
||||
json: {
|
||||
"arr|+1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '重复3次',
|
||||
json: {
|
||||
"arr|3": ['o', 'o - o', 'o - o - o']
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '重复2-10次',
|
||||
json: {
|
||||
"arr|2-10": ['-', '----']
|
||||
}
|
||||
}
|
||||
]
|
||||
47
src/views/demo/plugins/mock/dpd.vue
Normal file
47
src/views/demo/plugins/mock/dpd.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">数据占位符</template>
|
||||
<d2-markdown :source="doc" class="d2-mb"/>
|
||||
<d2-demo-mock-card
|
||||
v-for="(item, index) in settingDPD"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:code="JSON.stringify(item.json, null, 2)"
|
||||
:mock="mockResult[index]"
|
||||
style="margin-bottom: 0px !important;"
|
||||
@reload="doMock(index)">
|
||||
</d2-demo-mock-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import Mock from 'mockjs'
|
||||
import settingDPD from './data/settingDPD'
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
components: {
|
||||
'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
mockResult: [],
|
||||
settingDPD,
|
||||
settingDPDClone: cloneDeep(settingDPD),
|
||||
doc
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.settingDPD.forEach((e, i) => {
|
||||
this.doMock(i)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
doMock (n = 0) {
|
||||
Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDPDClone[n].json), null, 2))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
67
src/views/demo/plugins/mock/dtd.vue
Normal file
67
src/views/demo/plugins/mock/dtd.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">数据模板</template>
|
||||
<d2-markdown :source="doc" class="d2-mb"/>
|
||||
<d2-demo-mock-card
|
||||
v-for="(item, index) in settingDTD"
|
||||
:key="index"
|
||||
:title="item.title"
|
||||
:code="JSON.stringify(item.json, null, 2)"
|
||||
:mock="mockResult[index]"
|
||||
@reload="doMock(index)">
|
||||
</d2-demo-mock-card>
|
||||
<d2-demo-mock-card
|
||||
:title="fn.title"
|
||||
:code="fn.code"
|
||||
:mock="fn.mocked"
|
||||
@reload="fnMock()">
|
||||
</d2-demo-mock-card>
|
||||
<d2-demo-mock-card
|
||||
:title="regexp.title"
|
||||
:code="regexp.code"
|
||||
:mock="regexp.mocked"
|
||||
style="margin-bottom: 0px !important;"
|
||||
@reload="regexpMock()">
|
||||
</d2-demo-mock-card>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import Mock from 'mockjs'
|
||||
import settingDTD from './data/settingDTD'
|
||||
import regexp from './mixins/regexp'
|
||||
import fn from './mixins/function'
|
||||
import doc from './md/doc.md'
|
||||
export default {
|
||||
mixins: [
|
||||
regexp,
|
||||
fn
|
||||
],
|
||||
components: {
|
||||
'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
mockResult: [],
|
||||
settingDTD,
|
||||
settingDTDClone: cloneDeep(settingDTD),
|
||||
doc
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.settingDTD.forEach((e, i) => {
|
||||
this.doMock(i)
|
||||
})
|
||||
this.fnMock()
|
||||
this.regexpMock()
|
||||
},
|
||||
methods: {
|
||||
doMock (n = 0) {
|
||||
Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDTDClone[n].json), null, 2))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
5
src/views/demo/plugins/mock/md/doc.md
Normal file
5
src/views/demo/plugins/mock/md/doc.md
Normal file
@@ -0,0 +1,5 @@
|
||||
你可以点击每个演示卡片右上角的刷新按钮检查每次 `mock` 不同的结果
|
||||
|
||||
官方演示页面 [http://mockjs.com/examples.html](http://mockjs.com/examples.html)
|
||||
|
||||
官方 `Wiki` [https://github.com/nuysoft/Mock/wiki/Getting-Started](https://github.com/nuysoft/Mock/wiki/Getting-Started)
|
||||
30
src/views/demo/plugins/mock/mixins/function.js
Normal file
30
src/views/demo/plugins/mock/mixins/function.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/* eslint-disable */
|
||||
import Mock from 'mockjs'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 测试函数
|
||||
fn: {
|
||||
title: '函数',
|
||||
code: `{
|
||||
"name": "FairyEver",
|
||||
"say": function() {
|
||||
return 'I AM ' + this.name
|
||||
}
|
||||
}`,
|
||||
json: {
|
||||
"name": "FairyEver",
|
||||
"say": function() {
|
||||
return 'I AM ' + this.name
|
||||
}
|
||||
},
|
||||
mocked: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fnMock () {
|
||||
this.fn.mocked = JSON.stringify(Mock.mock(this.fn.json), null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/views/demo/plugins/mock/mixins/regexp.js
Normal file
28
src/views/demo/plugins/mock/mixins/regexp.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/* eslint-disable */
|
||||
import Mock from 'mockjs'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 测试正则表达式
|
||||
regexp: {
|
||||
title: '正则表达式',
|
||||
code: `{
|
||||
'regexp1': /[a-z][A-Z][0-9]/,
|
||||
'regexp2': /\w\W\s\S\d\D/,
|
||||
'regexp3': /\d{5,10}/
|
||||
}`,
|
||||
json: {
|
||||
'regexp1': /[a-z][A-Z][0-9]/,
|
||||
'regexp2': /\w\W\s\S\d\D/,
|
||||
'regexp3': /\d{5,10}/
|
||||
},
|
||||
mocked: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
regexpMock () {
|
||||
this.regexp.mocked = JSON.stringify(Mock.mock(this.regexp.json), null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user