no message
Former-commit-id: fc287cc8f6ab2052af26400abf0893008c9a21d3 Former-commit-id: 976fdd8400a9c855446ec171549fb3d489fda9f5 Former-commit-id: 69af7ddb348f8f80321bec6a5f7c636c5cc85487
This commit is contained in:
liyang
@@ -1,13 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<d2-demo-page-header slot="header" title="基本示例"/>
|
||||||
<d2-demo-page-header slot="header" title="基本示例"/>
|
<d2-mde
|
||||||
<d2-mde
|
v-model="text"
|
||||||
v-model="text"
|
class="mde"/>
|
||||||
class="mde"/>
|
<el-card shadow="never">
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<template slot="header">输出</template>
|
|
||||||
<pre>{{text}}</pre>
|
<pre>{{text}}</pre>
|
||||||
</el-card>
|
</el-card>
|
||||||
</d2-container>
|
</d2-container>
|
||||||
|
|||||||
@@ -1,35 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">代码高亮组件</template>
|
||||||
<d2-demo-page-header title="代码高亮组件"/>
|
<el-card shadow="never" class="d2-mb">
|
||||||
</el-card>
|
|
||||||
<el-card class="d2-mb">
|
|
||||||
<p slot="title">javascript</p>
|
<p slot="title">javascript</p>
|
||||||
<d2-highlight :code="codeJavascript"/>
|
<d2-highlight :code="codeJavascript"/>
|
||||||
</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 shadow="never">
|
||||||
<p slot="title">css</p>
|
<p slot="title">css</p>
|
||||||
<d2-highlight :code="codeCSS"/>
|
<d2-highlight :code="codeCSS"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never">
|
||||||
<p slot="title">scss</p>
|
<p slot="title">scss</p>
|
||||||
<d2-highlight :code="codeSCSS"/>
|
<d2-highlight :code="codeSCSS"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card class="d2-mb">
|
<el-card shadow="never">
|
||||||
<p slot="title">html</p>
|
<p slot="title">html</p>
|
||||||
<d2-highlight :code="codeHTML"/>
|
<d2-highlight :code="codeHTML"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 代码高亮.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">图标组件</template>
|
||||||
<d2-demo-page-header slot="header" title="图标组件"/>
|
<d2-icon/>
|
||||||
<d2-icon/>
|
<d2-icon name="github"/>
|
||||||
<d2-icon name="github"/>
|
<d2-icon name="github" style="font-size: 100px;"/>
|
||||||
<d2-icon name="github" style="font-size: 100px;"/>
|
<d2-icon name="github" class="icon-class-demo"/>
|
||||||
<d2-icon name="github" class="icon-class-demo"/>
|
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图标组件.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,28 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card>
|
<template slot="header">
|
||||||
<template slot="header">
|
<el-radio-group v-model="showIndex" size="mini">
|
||||||
<el-radio-group v-model="showIndex" size="mini">
|
<el-radio-button
|
||||||
<el-radio-button
|
v-for="(item, index) in radioOptions"
|
||||||
v-for="(item, index) in radioOptions"
|
:key="index"
|
||||||
:key="index"
|
:label="item.value">
|
||||||
:label="item.value">
|
{{item.label}}
|
||||||
{{item.label}}
|
</el-radio-button>
|
||||||
</el-radio-button>
|
</el-radio-group>
|
||||||
</el-radio-group>
|
</template>
|
||||||
</template>
|
<el-row style="margin: -10px;">
|
||||||
<el-row style="margin: -10px;">
|
<el-alert title="点击图标复制代码" type="info" class="d2-m-10" style="width: auto;"/>
|
||||||
<el-alert
|
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
|
||||||
title="点击图标复制代码"
|
<d2-icon-cell :icon="iconItem"/>
|
||||||
type="info"
|
</el-col>
|
||||||
class="d2-m-10"
|
</el-row>
|
||||||
style="width: auto;">
|
|
||||||
</el-alert>
|
|
||||||
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
|
|
||||||
<d2-iconCell :icon="iconItem"></d2-iconCell>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -30,7 +23,7 @@
|
|||||||
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
IconCell: () => import('./components/IconCell')
|
'd2-icon-cell': () => import('./components/d2-icon-cell')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,33 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">图标选择器</template>
|
||||||
<d2-demo-page-header slot="header" title="图标选择器"/>
|
<div class="title-group">
|
||||||
<div class="title-group">
|
<p class="title">一般用法</p>
|
||||||
<p class="title">一般用法</p>
|
<p class="sub-title">
|
||||||
<p class="sub-title">
|
<template v-if="icon">
|
||||||
<template v-if="icon">
|
选择的图标 {{icon}}
|
||||||
选择的图标 {{icon}}
|
<i :class="'fa fa-' + icon"></i>
|
||||||
<i :class="'fa fa-' + icon"></i>
|
</template>
|
||||||
</template>
|
<template v-else>未选择</template>
|
||||||
<template v-else>未选择</template>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<d2-icon-select v-model="icon"/>
|
||||||
<d2-icon-select v-model="icon"/>
|
<div class="title-group">
|
||||||
<div class="title-group">
|
<p class="title">用户可以输入</p>
|
||||||
<p class="title">用户可以输入</p>
|
<p class="sub-title">
|
||||||
<p class="sub-title">
|
<template v-if="icon2">
|
||||||
<template v-if="icon2">
|
选择的图标 {{icon2}}
|
||||||
选择的图标 {{icon2}}
|
<i :class="'fa fa-' + icon2"></i>
|
||||||
<i :class="'fa fa-' + icon2"></i>
|
</template>
|
||||||
</template>
|
<template v-else>未选择</template>
|
||||||
<template v-else>未选择</template>
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<d2-icon-select v-model="icon2" :user-input="true"/>
|
||||||
<d2-icon-select v-model="icon2" :user-input="true"/>
|
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图标选择器.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,19 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<d2-container type="ghost">
|
<d2-container>
|
||||||
<el-card class="d2-mb">
|
<template slot="header">SVG图标组件</template>
|
||||||
<d2-demo-page-header slot="header" title="SVG图标组件"/>
|
<el-row>
|
||||||
<el-row>
|
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
|
||||||
<el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
|
<d2-icon-svg class="icon" :name="icon"/>
|
||||||
<d2-icon-svg class="icon" :name="icon"/>
|
<div class="icon-title">
|
||||||
<div class="icon-title">
|
<span>{{icon}}</span>
|
||||||
<span>{{icon}}</span>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
</el-col>
|
</el-row>
|
||||||
</el-row>
|
|
||||||
</el-card>
|
|
||||||
<el-card>
|
|
||||||
<d2-markdown url="/static/md/组件 - 图标组件 - svg.md"/>
|
|
||||||
</el-card>
|
|
||||||
</d2-container>
|
</d2-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user