perf[i18n]: components
This commit is contained in:
Pan
parent
a098a8ab95
commit
d22165ebad
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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: '不固定表头, 按照点击顺序排序',
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
.time-container {
|
.components-container div {
|
||||||
display: inline-block;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
|
.time-container {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue