Commit 13cf3423f2de3d911420739e934cbbc5f49c1122
1 parent
9eb1bab3
fix #85
Showing
5 changed files
with
48 additions
and
6 deletions
front-end/h5/src/components/core/editor/edit-panel/props.js
| @@ -58,6 +58,7 @@ export default { | @@ -58,6 +58,7 @@ export default { | ||
| 58 | } | 58 | } |
| 59 | return ( | 59 | return ( |
| 60 | <a-form-item label={item.label} labelCol={{ span: 8 }} wrapperCol={{ span: 14, offset: 2 }}> | 60 | <a-form-item label={item.label} labelCol={{ span: 8 }} wrapperCol={{ span: 14, offset: 2 }}> |
| 61 | + { item.extra && <div slot="extra">{typeof item.extra === 'function' ? item.extra(h) : item.extra}</div>} | ||
| 61 | { h(item.type, data) } | 62 | { h(item.type, data) } |
| 62 | </a-form-item> | 63 | </a-form-item> |
| 63 | ) | 64 | ) |
front-end/h5/src/components/core/models/element.js
| 1 | import { parsePx } from '../../../utils/element.js' | 1 | import { parsePx } from '../../../utils/element.js' |
| 2 | 2 | ||
| 3 | // #! 编辑状态，不可以点击的按钮，因为点击按钮会触发一些默认行为，比如表单提交等 | 3 | // #! 编辑状态，不可以点击的按钮，因为点击按钮会触发一些默认行为，比如表单提交等 |
| 4 | -const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button'] | 4 | +const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button', 'lbp-video'] |
| 5 | const cloneObj = (value) => JSON.parse(JSON.stringify(value)) | 5 | const cloneObj = (value) => JSON.parse(JSON.stringify(value)) |
| 6 | 6 | ||
| 7 | const defaultStyle = { | 7 | const defaultStyle = { |
front-end/h5/src/components/plugins/lbp-video.js
| 1 | +import playIcon from './play.svg' | ||
| 2 | +import './styles/video.scss' | ||
| 3 | +// 这里有个动画演示，可以用来学习 CSS：《CSS制作播放、暂停按钮》https://codepen.io/chriscoyier/full/lotjh | ||
| 4 | + | ||
| 1 | export default { | 5 | export default { |
| 2 | name: 'lbp-video', | 6 | name: 'lbp-video', |
| 3 | props: { | 7 | props: { |
| @@ -12,17 +16,29 @@ export default { | @@ -12,17 +16,29 @@ export default { | ||
| 12 | }, | 16 | }, |
| 13 | watch: { | 17 | watch: { |
| 14 | src () { | 18 | src () { |
| 15 | - this.$el.innerHTML = this.src | 19 | + this.appendIframe() |
| 16 | } | 20 | } |
| 17 | }, | 21 | }, |
| 18 | mounted () { | 22 | mounted () { |
| 19 | - this.$el.innerHTML = this.src | 23 | + this.appendIframe() |
| 24 | + }, | ||
| 25 | + methods: { | ||
| 26 | + appendIframe () { | ||
| 27 | + if (this.src) { | ||
| 28 | + this.$el.innerHTML = this.src | ||
| 29 | + } | ||
| 30 | + } | ||
| 20 | }, | 31 | }, |
| 21 | - | ||
| 22 | render (h) { | 32 | render (h) { |
| 23 | - const style = this.disabled ? { 'pointer-events': 'none' } : {} | 33 | + const style = this.disabled ? { 'pointer-events': 'none' } : { } |
| 24 | return ( | 34 | return ( |
| 25 | - <div style={style}></div> | 35 | + <div class="lbc-video" style={style}> |
| 36 | + { | ||
| 37 | + this.disabled | ||
| 38 | + ? <video playsinline="true" webkit-playsinline="" width="100%" height="100%" poster={playIcon}><source type="video/mp4" /></video> | ||
| 39 | + : <div></div> | ||
| 40 | + } | ||
| 41 | + </div> | ||
| 26 | ) | 42 | ) |
| 27 | }, | 43 | }, |
| 28 | editorConfig: { | 44 | editorConfig: { |
| @@ -33,6 +49,9 @@ export default { | @@ -33,6 +49,9 @@ export default { | ||
| 33 | prop: { | 49 | prop: { |
| 34 | type: 'textarea' | 50 | type: 'textarea' |
| 35 | }, | 51 | }, |
| 52 | + extra: (h) => { | ||
| 53 | + return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a> | ||
| 54 | + }, | ||
| 36 | defaultPropValue: '' | 55 | defaultPropValue: '' |
| 37 | } | 56 | } |
| 38 | }, | 57 | }, |
front-end/h5/src/components/plugins/play.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="UTF-8"?> | ||
| 2 | +<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
| 3 | + <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch --> | ||
| 4 | + <title>Rectangle 3</title> | ||
| 5 | + <desc>Created with Sketch.</desc> | ||
| 6 | + <defs></defs> | ||
| 7 | + <g id="play" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||
| 8 | + <g id="Group-29" fill-rule="nonzero"> | ||
| 9 | + <rect id="Rectangle-3" fill="#D8D8D8" opacity="0" x="0" y="0" width="320" height="180"></rect> | ||
| 10 | + <g id="Group-2" transform="translate(124.000000, 54.000000)"> | ||
| 11 | + <circle id="Combined-Shape" fill="#FFFFFF" opacity="0.400000006" cx="36" cy="36" r="36"></circle> | ||
| 12 | + <path d="M52.5014571,38.4687039 L29.5125474,53.0910406 C28.4252016,53.7826583 26.9830667,53.4618573 26.291449,52.3745114 C26.0533764,52.000219 25.9269295,51.5658183 25.9269295,51.1222268 L25.9269295,21.8775534 C25.9269295,20.588889 26.9715984,19.5442201 28.2602628,19.5442201 C28.7038543,19.5442201 29.138255,19.6706671 29.5125474,19.9087397 L52.5014571,34.5310764 C53.5888029,35.2226941 53.909604,36.6648289 53.2179863,37.7521747 C53.0345158,38.0406229 52.7899052,38.2852335 52.5014571,38.4687039 Z" id="Triangle-2" fill="#000000" opacity="0.5"></path> | ||
| 13 | + </g> | ||
| 14 | + </g> | ||
| 15 | + </g> | ||
| 16 | +</svg> | ||
| 0 | \ No newline at end of file | 17 | \ No newline at end of file |