no message

Former-commit-id: de9fc7ee6ce7d2874bedb5d51fd2997f52870126
Former-commit-id: 70cb9e2b35ef7a76a62dc085aeb77eb914bc42ab
Former-commit-id: 47e9746d0a0fd6d32e798a0f6fbd684c8b555f09
This commit is contained in:
liyang
2018-06-10 08:43:27 +08:00
parent 8cc55e1bf7
commit 58ec52afac
11 changed files with 27 additions and 25 deletions

View File

@@ -15,13 +15,13 @@
``` vue ``` vue
// 基本使用方法 // 基本使用方法
<CountUp :end="100"></CountUp> <d2-count-up :end="100"></d2-count-up>
// 设置始末值 // 设置始末值
<CountUp :start="14" :end="100"></CountUp> <d2-count-up :start="14" :end="100"></d2-count-up>
// 设置动画时间 // 设置动画时间
<CountUp :end="100" :decimals="2"></CountUp> <d2-count-up :end="100" :decimals="2"></d2-count-up>
``` ```
组件会在页面上渲染 `<span>` 标签 组件会在页面上渲染 `<span>` 标签

View File

@@ -9,7 +9,7 @@
## 示例 ## 示例
``` vue ``` vue
<Highlight code="alert('Hello')"></Highlight> <d2-highlight code="alert('Hello')"></d2-highlight>
``` ```
::: tip ::: tip

View File

@@ -5,6 +5,7 @@
<script> <script>
import CountUp from 'countup.js' import CountUp from 'countup.js'
export default { export default {
name: 'd2-count-up',
props: { props: {
start: { start: {
type: Number, type: Number,

View File

@@ -1,5 +1,5 @@
<template> <template>
<pre class="high-light-component" v-html="highlightHTML"></pre> <pre class="d2-highlight" v-html="highlightHTML"></pre>
</template> </template>
<script> <script>
@@ -7,6 +7,7 @@
// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
import highlight from 'highlight.js' import highlight from 'highlight.js'
export default { export default {
name: 'd2-highlight',
props: { props: {
code: { code: {
type: String, type: String,
@@ -36,7 +37,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.high-light-component { .d2-highlight {
margin: 0px; margin: 0px;
border-radius: 4px; border-radius: 4px;
} }

View File

@@ -1,8 +1,8 @@
import Vue from 'vue' import Vue from 'vue'
Vue.component('d2-container', resolve => { require(['@/components/core/d2-container'], resolve) }) Vue.component('d2-container', resolve => { require(['@/components/core/d2-container'], resolve) })
Vue.component('CountUp', resolve => { require(['@/components/core/CountUp'], resolve) }) Vue.component('d2-count-up', resolve => { require(['@/components/core/d2-count-up'], resolve) })
Vue.component('Highlight', resolve => { require(['@/components/core/Highlight'], resolve) }) Vue.component('d2-highlight', resolve => { require(['@/components/core/d2-highlight'], resolve) })
Vue.component('Icon', resolve => { require(['@/components/core/Icon'], resolve) }) Vue.component('Icon', resolve => { require(['@/components/core/Icon'], resolve) })
Vue.component('IconSelect', resolve => { require(['@/components/core/IconSelect/index.vue'], resolve) }) Vue.component('IconSelect', resolve => { require(['@/components/core/IconSelect/index.vue'], resolve) })
Vue.component('IconSvg', resolve => { require(['@/components/core/IconSvg/index.vue'], resolve) }) Vue.component('IconSvg', resolve => { require(['@/components/core/IconSvg/index.vue'], resolve) })

View File

@@ -11,7 +11,7 @@
<el-card> <el-card>
<p slot="title">只设置目标数字</p> <p slot="title">只设置目标数字</p>
<div class="group"> <div class="group">
<CountUp :end="100"></CountUp> <d2-count-up :end="100"></d2-count-up>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -19,7 +19,7 @@
<el-card> <el-card>
<p slot="title">设置起止数值</p> <p slot="title">设置起止数值</p>
<div class="group"> <div class="group">
<CountUp :start="14" :end="100"></CountUp> <d2-count-up :start="14" :end="100"></d2-count-up>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -27,7 +27,7 @@
<el-card> <el-card>
<p slot="title">小数位数</p> <p slot="title">小数位数</p>
<div class="group"> <div class="group">
<CountUp :end="100" :decimals="2"></CountUp> <d2-count-up :end="100" :decimals="2"></d2-count-up>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -35,7 +35,7 @@
<el-card> <el-card>
<p slot="title">动画时长</p> <p slot="title">动画时长</p>
<div class="group"> <div class="group">
<CountUp :end="100" :duration="6"></CountUp> <d2-count-up :end="100" :duration="6"></d2-count-up>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -43,7 +43,7 @@
<el-card> <el-card>
<p slot="title">回调函数</p> <p slot="title">回调函数</p>
<div class="group"> <div class="group">
<CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp> <d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"></d2-count-up>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -51,7 +51,7 @@
<el-card> <el-card>
<p slot="title">结束一秒后更新数值</p> <p slot="title">结束一秒后更新数值</p>
<div class="group"> <div class="group">
<CountUp :end="end" :callback="update"></CountUp> <d2-count-up :end="end" :callback="update"></d2-count-up>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>

View File

@@ -16,7 +16,7 @@
</el-card> </el-card>
<el-card> <el-card>
<template slot="header">输出</template> <template slot="header">输出</template>
<Highlight :code="formated"></Highlight> <d2-highlight :code="formated"></d2-highlight>
</el-card> </el-card>
</d2-container> </d2-container>
</template> </template>

View File

@@ -8,25 +8,25 @@
</el-card> </el-card>
<el-card class="d2-mb"> <el-card class="d2-mb">
<p slot="title">javascript</p> <p slot="title">javascript</p>
<Highlight :code="codeJavascript"></Highlight> <d2-highlight :code="codeJavascript"></d2-highlight>
</el-card> </el-card>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-card class="d2-mb"> <el-card class="d2-mb">
<p slot="title">css</p> <p slot="title">css</p>
<Highlight :code="codeCSS"></Highlight> <d2-highlight :code="codeCSS"></d2-highlight>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-card class="d2-mb"> <el-card class="d2-mb">
<p slot="title">scss</p> <p slot="title">scss</p>
<Highlight :code="codeSCSS"></Highlight> <d2-highlight :code="codeSCSS"></d2-highlight>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-card class="d2-mb"> <el-card class="d2-mb">
<p slot="title">html</p> <p slot="title">html</p>
<Highlight :code="codeHTML"></Highlight> <d2-highlight :code="codeHTML"></d2-highlight>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>

View File

@@ -9,12 +9,12 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="12">
<div class="col col-l"> <div class="col col-l">
<Highlight :code="code"></Highlight> <d2-highlight :code="code"></d2-highlight>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="col col-r"> <div class="col col-r">
<Highlight :code="mock"></Highlight> <d2-highlight :code="mock"></d2-highlight>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>

View File

@@ -7,7 +7,7 @@
## 示例 ## 示例
``` ```
<Highlight code="alert('Hello')"></Highlight> <d2-highlight code="alert('Hello')"></d2-highlight>
``` ```
> 本框架只是提供代码高亮的简单实现,如需实现更高级的设置请修改组件代码 > 本框架只是提供代码高亮的简单实现,如需实现更高级的设置请修改组件代码

View File

@@ -13,13 +13,13 @@
``` ```
// 基本使用方法 // 基本使用方法
<CountUp :end="100"></CountUp> <d2-count-up :end="100"></d2-count-up>
// 设置始末值 // 设置始末值
<CountUp :start="14" :end="100"></CountUp> <d2-count-up :start="14" :end="100"></d2-count-up>
// 设置动画时间 // 设置动画时间
<CountUp :end="100" :decimals="2"></CountUp> <d2-count-up :end="100" :decimals="2"></d2-count-up>
``` ```
组件会在页面上渲染 `<span>` 标签 组件会在页面上渲染 `<span>` 标签