sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件夹改名

Browse Source 
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
2019-03-14 20:24:45 +08:00
parent 0de79b3462
commit 0f04615685
338 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/demo/components/container/api.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<d2-container :filename="filename"
ref="container"
:type="containerType"
:better-scroll="betterScroll"
:scroll-delay="scrollDelay"
@scroll="({x, y}) => { scrollTop = y }">
<template slot="header">
<el-form
:inline="true"
size="mini">
<el-form-item
label="布局类型"
class="d2-mb-0">
<el-radio-group v-model="containerType">
<el-radio-button label="full"></el-radio-button>
<el-radio-button label="card"></el-radio-button>
<el-radio-button label="ghost"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
label="滚动距离"
class="d2-mb-0">
<el-input
:value="scrollTop"
style="width: 130px;">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item
v-if="!betterScroll"
label="事件延迟(ms)"
class="d2-mb-0">
<el-input-number
v-model="scrollDelay"
:min="10"
:max="2000"
:step="100"
style="width: 110px;"/>
</el-form-item>
<el-form-item class="d2-mb-0">
<el-button
v-if="scrollTop >= 55"
type="primary"
@click="$refs.container.scrollToTop">
回到顶部
</el-button>
</el-form-item>
</el-form>
</template>
<el-alert
type="success"
:title="`${betterScroll ? '此示例开启了 BetterScroll ' : ''}请向下滚动`"
class="d2-mb-10"
center/>
<d2-demo-article
v-for="i in 10"
:key="i"
:style="articleStyle"
long/>
<template slot="footer">
<el-form
:inline="true"
size="mini">
<el-form-item class="d2-mb-0">
<el-button @click="$refs.container.scrollBy(0, 30)">相对滚动 (0, 30) 像素</el-button>
</el-form-item>
<el-form-item class="d2-mb-0">
<el-button @click="$refs.container.scrollTo(0, 100)">滚动到 (0, 100) 像素位置</el-button>
</el-form-item>
<el-form-item class="d2-mb-0">
<el-button @click="$refs.container.scrollTop(100)">滚动到垂直位置 100</el-button>
</el-form-item>
</el-form>
</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename,
containerType: 'full',
scrollDelay: 10,
scrollTop: 0
}
},
computed: {
// 是否开启 better scroll
betterScroll () {
return this.$route.query.bs === 'true'
},
// 根据滚动位置返回文章的样式
articleStyle () {
return {
opacity: this.scrollTop > 55 ? '1' : '.1'
}
}
}
}
</script>

21
src/views/demo/components/container/card-bs.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<d2-container :filename="filename" type="card" better-scroll>
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Footer</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

21
src/views/demo/components/container/card-slot.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<d2-container :filename="filename" type="card">
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Footer</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

19
src/views/demo/components/container/card.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<d2-container :filename="filename" type="card">
<d2-demo-article/>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

50
src/views/demo/components/container/components/d2-demo-article.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="d2-demo-article">
<div v-if="!long" class="d2-demo-article__control">
<el-switch
v-model="isLong"
active-text="长内容"
inactive-text="短内容"/>
</div>
<d2-markdown v-show="isLong" :source="sourceLong"/>
<d2-markdown v-show="!isLong" :source="sourceShort"/>
</div>
</template>
<script>
import sourceLong from '../md/long.md'
import sourceShort from '../md/short.md'
export default {
props: {
// 指定为长文本
long: {
type: Boolean,
required: false,
default: false
}
},
data () {
return {
sourceLong,
sourceShort,
isLong: false
}
},
created () {
this.isLong = this.long
}
}
</script>
<style lang="scss" scoped>
.d2-demo-article {
transition: opacity .3s;
.d2-demo-article__control {
padding: 8px 16px;
margin-bottom: 10px;
box-sizing: border-box;
border-radius: 4px;
background-color: #f4f4f5;
}
}
</style>

21
src/views/demo/components/container/full-bs.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<d2-container :filename="filename" better-scroll>
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Header</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

21
src/views/demo/components/container/full-slot.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<d2-container :filename="filename">
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Footer</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

19
src/views/demo/components/container/full.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<d2-container :filename="filename">
<d2-demo-article/>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

25
src/views/demo/components/container/ghost-bs.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<d2-container :filename="filename" type="ghost" better-scroll>
<template slot="header">Header</template>
<div class="d2-pt d2-pb">
<el-card shadow="never" class="d2-card" style="width: 400px;">
<d2-demo-article/>
</el-card>
</div>
<template slot="footer">Footer</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

25
src/views/demo/components/container/ghost-slot.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<d2-container :filename="filename" type="ghost">
<template slot="header">Header</template>
<div class="d2-pt d2-pb">
<el-card shadow="never" class="d2-card" style="width: 400px;">
<d2-demo-article/>
</el-card>
</div>
<template slot="footer">Footer</template>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

23
src/views/demo/components/container/ghost.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<d2-container :filename="filename" type="ghost">
<div class="d2-pt d2-pb">
<el-card shadow="never" class="d2-card" style="width: 400px;">
<d2-demo-article/>
</el-card>
</div>
</d2-container>
</template>
<script>
import d2DemoArticle from './components/d2-demo-article'
export default {
components: {
'd2-demo-article': d2DemoArticle
},
data () {
return {
filename: __filename
}
}
}
</script>

53
src/views/demo/components/container/md/long.md Normal file
View File

@@ -0,0 +1,53 @@
## vue.js
**易用**
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
**灵活**
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
**高效**
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
**Vue.js 是什么**
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
## Element
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
**一致性** Consistency
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
**反馈** Feedback
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
**效率** Efficiency
- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
**可控** Controllability
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

17
src/views/demo/components/container/md/short.md Normal file
View File

@@ -0,0 +1,17 @@
## vue.js
**易用**
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
**灵活**
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
**高效**
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化