zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[i18n]: components

This commit is contained in:
Pan 2017-12-26 16:32:13 +08:00
parent a098a8ab95
commit d22165ebad
10 changed files with 239 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lang/en.js
View File

@ -69,6 +69,15 @@ export default {
permissions: 'Your permissions', permissions: 'Your permissions',
switchPermissions: 'Switch permissions' switchPermissions: 'Switch permissions'
}, },
components: {
documentation: 'Documentation',
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the final trade-off is the selection of Tinymce.See documentation for more detailed rich text editor comparisons and introductions',
dropzoneTips: 'Because my business has special needs, and has to upload to qiniu, So instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the specific code in @/components/Dropzone.',
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself,and if you are going to use it, it is better to use official version.'
},
table: { table: {
dynamicTips1: 'Fixed header, sorted by header order', dynamicTips1: 'Fixed header, sorted by header order',
dynamicTips2: 'Not fixed header, sorted by click order', dynamicTips2: 'Not fixed header, sorted by click order',

9
src/lang/zh.js
View File

@ -69,6 +69,15 @@ export default {
permissions: '你的权限', permissions: '你的权限',
switchPermissions: '切换权限' switchPermissions: '切换权限'
}, },
components: {
documentation: '文档',
tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
stickyTips: '当页面滚动到预设的位置会吸附在顶部',
backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
},
table: { table: {
dynamicTips1: '固定表头, 按照表头顺序排序', dynamicTips1: '固定表头, 按照表头顺序排序',
dynamicTips2: '不固定表头, 按照点击顺序排序', dynamicTips2: '不固定表头, 按照点击顺序排序',

10
src/views/components-demo/avatarUpload.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>这里核心代码用的是 <code>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a> <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component {{$t('components.imageUploadTips')}}
</code> </code>
<pan-thumb :image="image"></pan-thumb> <pan-thumb :image="image"></pan-thumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像 <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
</el-button> </el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper> :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div> </div>
</template> </template>

251
src/views/components-demo/backToTop.vue
View File

@ -1,134 +1,121 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code> <code>{{$t('components.backToTopTips1')}}</code>
<code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code> <code>{{$t('components.backToTopTips2')}}</code>
<div>我是占位</div> <div class="placeholder-container">
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> </div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<!--可自定义按钮的样式、show/hide临界点、返回的位置 --> <!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 --> <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
<el-tooltip placement="top" content="文字提示"> <el-tooltip placement="top" content="tooltip">
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top> <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
</el-tooltip> </el-tooltip>
</div> </div>
@ -148,10 +135,16 @@ export default {
width: '40px', width: '40px',
height: '40px', height: '40px',
'border-radius': '4px', 'border-radius': '4px',
'line-height': '45px', // 请保持与高度一致以垂直居中 'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
background: '#e7eaf1'// 按钮的背景颜色 background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
} }
} }
} }
} }
</script> </script>
<style scoped>
.placeholder-container div {
margin: 10px;
}
</style>

2
src/views/components-demo/dndList.vue
View File

@ -4,7 +4,7 @@
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a> <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
</code> </code>
<div class="editor-container"> <div class="editor-container">
<dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list> <dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
</div> </div>
</div> </div>
</template> </template>

8
src/views/components-demo/dropzone.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code> <code>
基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 , Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a> ,
由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装 {{$t('components.dropzoneTips')}}
</code> </code>
<div class="editor-container"> <div class="editor-container">
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone> <dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
@ -19,11 +19,11 @@ export default {
methods: { methods: {
dropzoneS(file) { dropzoneS(file) {
console.log(file) console.log(file)
this.$message({ message: '上传成功', type: 'success' }) this.$message({ message: 'Upload success', type: 'success' })
}, },
dropzoneR(file) { dropzoneR(file) {
console.log(file) console.log(file)
this.$message({ message: '删除成功', type: 'success' }) this.$message({ message: 'Delete success', type: 'success' })
} }
} }
} }

6
src/views/components-demo/markdown.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>Markdown 我们这里选用了 <code>Markdown is based on
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14"> <a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
相关文章 </a> 相关文章 </a>
</code> </code>
<div class="editor-container"> <div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor> <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div> </div>
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button> <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
<div v-html="html"></div> <div v-html="html"></div>
</div> </div>
</template> </template>

6
src/views/components-demo/splitpane.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>splitPane 如果你用过 <code>splitPane If you've used
<a href="http://codepen.io/" target="_blank"> codepen</a>, <a href="http://codepen.io/" target="_blank"> codepen</a>,
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了 <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a> <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
</code> </code>
<split-pane v-on:resize="resize" split="vertical"> <split-pane v-on:resize="resize" split="vertical">
<template slot="paneL"> <template slot="paneL">

133
src/views/components-demo/sticky.vue
View File

@ -2,8 +2,8 @@
<div> <div>
<sticky className="sub-navbar"> <sticky className="sub-navbar">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button> <el-button plain>
平台<i class="el-icon-caret-bottom el-icon--right"></i> Platform<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu class="no-border" slot="dropdown"> <el-dropdown-menu class="no-border" slot="dropdown">
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;"> <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
@ -15,79 +15,79 @@
</el-dropdown> </el-dropdown>
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button> <el-button plain>
外链<i class="el-icon-caret-bottom el-icon--right"></i> Link<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown"> <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
<el-input placeholder="请输入内容" v-model="url"> <el-input placeholder="Please enter the content" v-model="url">
<template slot="prepend">填写url</template> <template slot="prepend">Url</template>
</el-input> </el-input>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<div class="time-container"> <div class="time-container">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间"> <el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
</el-date-picker> </el-date-picker>
</div> </div>
<el-button style="margin-left: 10px;" type="success">发布 <el-button style="margin-left: 10px;" type="success">publish
</el-button> </el-button>
</sticky> </sticky>
<div class="components-container"> <div class="components-container">
<code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code> <code>Sticky header, {{$t('components.stickyTips')}}</code>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
</div> </div>
</div> </div>
</template> </template>
@ -105,9 +105,9 @@ export default {
url: '', url: '',
platforms: ['a-platform'], platforms: ['a-platform'],
platformsOptions: [ platformsOptions: [
{ key: 'a-platform', name: '平台A' }, { key: 'a-platform', name: 'platformA' },
{ key: 'b-platform', name: '平台B' }, { key: 'b-platform', name: 'platformB' },
{ key: 'c-platform', name: '平台C' } { key: 'c-platform', name: 'platformC' }
], ],
pickerOptions: { pickerOptions: {
disabledDate(time) { disabledDate(time) {
@ -120,8 +120,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
.components-container div {
margin: 10px;
}
.time-container { .time-container {
display: inline-block; display: inline-block;
} }
</style> </style>

14
src/views/components-demo/tinymce.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="components-container"> <div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce <code>
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a> {{$t('components.tinymceTips')}}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"> {{$t('components.documentation')}}</a>
</code> </code>
<div> <div>
<tinymce :height="200" v-model="content"></tinymce> <tinymce :height="200" v-model="content"></tinymce>
@ -18,7 +19,14 @@ export default {
components: { Tinymce }, components: { Tinymce },
data() { data() {
return { return {
content: 'Tinymce' content:
`<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>
<ul>
<li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
</ul>
`
} }
} }
} }