bqy_fe
4 years ago
parent
43b6361515
commit
240a0bd779
@ -0,0 +1,44 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-14 12:24:12 |
||||
* @LastEditTime: 2021-06-14 12:38:02 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: |
||||
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\notice-bar\createFieldProps.ts |
||||
*/ |
||||
import { |
||||
createEditorInputProp, |
||||
createEditorSelectProp, |
||||
createEditorSwitchProp |
||||
} from '@/visual-editor/visual-editor.props' |
||||
|
||||
export const createFieldProps = () => ({ |
||||
background: createEditorInputProp({ label: '滚动条背景' }), |
||||
color: createEditorInputProp({ label: '通知文本颜色' }), |
||||
delay: createEditorInputProp({ label: '动画延迟时间 (s)' }), |
||||
leftIcon: createEditorInputProp({ label: '左侧图标名称或图片链接', defaultValue: 'volume-o' }), |
||||
mode: createEditorSelectProp({ |
||||
label: '通知栏模式', |
||||
options: [ |
||||
{ |
||||
label: '默认', |
||||
value: '' |
||||
}, |
||||
{ |
||||
label: '可关闭', |
||||
value: 'closeable' |
||||
}, |
||||
{ |
||||
label: '链接', |
||||
value: 'link' |
||||
} |
||||
] |
||||
}), |
||||
scrollable: createEditorSwitchProp({ label: '是否开启滚动播放，内容长度溢出时默认开启' }), |
||||
speed: createEditorInputProp({ label: '滚动速率 (px/s)' }), |
||||
text: createEditorInputProp({ |
||||
label: '通知文本内容', |
||||
defaultValue: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。' |
||||
}), |
||||
wrapable: createEditorSwitchProp({ label: '是否开启文本换行，只在禁用滚动时生效' }) |
||||
}) |
||||
@ -0,0 +1,37 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-14 12:24:12 |
||||
* @LastEditTime: 2021-06-14 12:56:23 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: |
||||
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\notice-bar\index.tsx |
||||
*/ |
||||
import { NoticeBar } from 'vant' |
||||
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' |
||||
import { createFieldProps } from './createFieldProps' |
||||
import { useGlobalProperties } from '@/hooks/useGlobalProperties' |
||||
|
||||
export default { |
||||
key: 'NoticeBar', |
||||
moduleName: 'baseWidgets', |
||||
label: '通知栏', |
||||
preview: () => ( |
||||
<NoticeBar |
||||
style={{ width: '180px' }} |
||||
leftIcon={'volume-o'} |
||||
text={'在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。'} |
||||
/> |
||||
), |
||||
render: ({ block, props }) => { |
||||
const { registerRef } = useGlobalProperties() |
||||
|
||||
return <NoticeBar ref={(el) => registerRef(el, block._vid)} {...props} /> |
||||
}, |
||||
props: createFieldProps(), |
||||
resize: { |
||||
width: true |
||||
}, |
||||
model: { |
||||
default: '绑定字段' |
||||
} |
||||
} as VisualEditorComponent |
||||
@ -0,0 +1,33 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-14 12:24:12 |
||||
* @LastEditTime: 2021-06-14 18:43:21 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: |
||||
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\swipe\createFieldProps.ts |
||||
*/ |
||||
import { |
||||
createEditorInputProp, |
||||
createEditorSwitchProp, |
||||
createEditorCrossSortableProp |
||||
} from '@/visual-editor/visual-editor.props' |
||||
|
||||
export const createFieldProps = () => ({ |
||||
images: createEditorCrossSortableProp({ |
||||
label: '图片列表', |
||||
labelPosition: 'top', |
||||
defaultValue: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'] |
||||
}), |
||||
width: createEditorInputProp({ label: '滑块宽度，单位为 px', defaultValue: 'auto' }), |
||||
height: createEditorInputProp({ label: '滑块高度，单位为 px', defaultValue: '200' }), |
||||
autoplay: createEditorInputProp({ label: '自动轮播间隔，单位为 ms', defaultValue: '' }), |
||||
duration: createEditorInputProp({ label: '动画时长，单位为 ms', defaultValue: '500' }), |
||||
indicatorColor: createEditorInputProp({ label: '指示器颜色', defaultValue: '#1989fa' }), |
||||
initialSwipe: createEditorInputProp({ label: '初始位置索引值', defaultValue: '0' }), |
||||
lazyRender: createEditorSwitchProp({ label: '是否延迟渲染未展示的轮播', defaultValue: false }), |
||||
loop: createEditorSwitchProp({ label: '是否开启循环播放', defaultValue: true }), |
||||
showIndicators: createEditorSwitchProp({ label: '是否显示指示器', defaultValue: true }), |
||||
stopPropagation: createEditorSwitchProp({ label: '是否阻止滑动事件冒泡', defaultValue: true }), |
||||
touchable: createEditorSwitchProp({ label: '是否可以通过手势滑动', defaultValue: true }), |
||||
vertical: createEditorSwitchProp({ label: '是否为纵向滚动', defaultValue: false }) |
||||
}) |
||||
@ -0,0 +1,54 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-14 12:24:12 |
||||
* @LastEditTime: 2021-06-14 18:48:44 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: |
||||
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\swipe\index.tsx |
||||
*/ |
||||
import { Swipe, SwipeItem } from 'vant' |
||||
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' |
||||
import { createFieldProps } from './createFieldProps' |
||||
import { useGlobalProperties } from '@/hooks/useGlobalProperties' |
||||
|
||||
const swipeItemStyle = `color: #fff;
|
||||
font-size: 20px; |
||||
line-height: 150px; |
||||
text-align: center; |
||||
background-color: #39a9ed;` |
||||
|
||||
export default { |
||||
key: 'swipe', |
||||
moduleName: 'baseWidgets', |
||||
label: '轮播图', |
||||
preview: () => ( |
||||
<Swipe style={{ width: '180px', height: '80%' }} indicatorColor={'white'}> |
||||
<SwipeItem style={swipeItemStyle}>1</SwipeItem> |
||||
<SwipeItem style={swipeItemStyle}>2</SwipeItem> |
||||
<SwipeItem style={swipeItemStyle}>3</SwipeItem> |
||||
<SwipeItem style={swipeItemStyle}>4</SwipeItem> |
||||
</Swipe> |
||||
), |
||||
render: ({ block, props }) => { |
||||
const { registerRef } = useGlobalProperties() |
||||
|
||||
return ( |
||||
<Swipe ref={(el) => registerRef(el, block._vid)} {...props}> |
||||
{props.images?.map((item) => ( |
||||
<> |
||||
<SwipeItem key={item}> |
||||
<img src={item} /> |
||||
</SwipeItem> |
||||
</> |
||||
))} |
||||
</Swipe> |
||||
) |
||||
}, |
||||
props: createFieldProps(), |
||||
resize: { |
||||
width: true |
||||
}, |
||||
model: { |
||||
default: '绑定字段' |
||||
} |
||||
} as VisualEditorComponent |
||||
@ -0,0 +1,54 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-14 00:53:21 |
||||
* @LastEditTime: 2021-06-14 00:55:55 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: 可用字体集 |
||||
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\text\fontArr.ts |
||||
*/ |
||||
export const fontArr = [ |
||||
{ label: '宋体', value: 'SimSun' }, |
||||
{ label: '黑体', value: 'SimHei' }, |
||||
{ label: '微软雅黑', value: 'Microsoft Yahei' }, |
||||
{ label: '微软正黑体', value: 'Microsoft JhengHei' }, |
||||
{ label: '楷体', value: 'KaiTi' }, |
||||
{ label: '新宋体', value: 'NSimSun' }, |
||||
{ label: '仿宋', value: 'FangSong' }, |
||||
{ label: '苹方', value: 'PingFang SC' }, |
||||
{ label: '华文黑体', value: 'STHeiti' }, |
||||
{ label: '华文楷体', value: 'STKaiti' }, |
||||
{ label: '华文宋体', value: 'STSong' }, |
||||
{ label: '华文仿宋', value: 'STFangsong' }, |
||||
{ label: '华文中宋', value: 'STZhongsong' }, |
||||
{ label: '华文琥珀', value: 'STHupo' }, |
||||
{ label: '华文新魏', value: 'STXinwei' }, |
||||
{ label: '华文隶书', value: 'STLiti' }, |
||||
{ label: '华文行楷', value: 'STXingkai' }, |
||||
{ label: '冬青黑体简', value: 'Hiragino Sans GB' }, |
||||
{ label: '兰亭黑-简', value: 'Lantinghei SC' }, |
||||
{ label: '翩翩体-简', value: 'Hanzipen SC' }, |
||||
{ label: '手札体-简', value: 'Hannotate SC' }, |
||||
{ label: '宋体-简', value: 'Songti SC' }, |
||||
{ label: '娃娃体-简', value: 'Wawati SC' }, |
||||
{ label: '魏碑-简', value: 'Weibei SC' }, |
||||
{ label: '行楷-简', value: 'Xingkai SC' }, |
||||
{ label: '雅痞-简', value: 'Yapi SC' }, |
||||
{ label: '圆体-简', value: 'Yuanti SC' }, |
||||
{ label: '幼圆', value: 'YouYuan' }, |
||||
{ label: '隶书', value: 'LiSu' }, |
||||
{ label: '华文细黑', value: 'STXihei' }, |
||||
{ label: '华文楷体', value: 'STKaiti' }, |
||||
{ label: '华文宋体', value: 'STSong' }, |
||||
{ label: '华文仿宋', value: 'STFangsong' }, |
||||
{ label: '华文中宋', value: 'STZhongsong' }, |
||||
{ label: '华文彩云', value: 'STCaiyun' }, |
||||
{ label: '华文琥珀', value: 'STHupo' }, |
||||
{ label: '华文新魏', value: 'STXinwei' }, |
||||
{ label: '华文隶书', value: 'STLiti' }, |
||||
{ label: '华文行楷', value: 'STXingkai' }, |
||||
{ label: '方正舒体', value: 'FZShuTi' }, |
||||
{ label: '方正姚体', value: 'FZYaoti' }, |
||||
{ label: '思源黑体', value: 'Source Han Sans CN' }, |
||||
{ label: '思源宋体', value: 'Source Han Serif SC' }, |
||||
{ label: '文泉驿微米黑', value: 'WenQuanYi Micro Hei' } |
||||
] |
||||
@ -0,0 +1,72 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-14 15:00:45 |
||||
* @LastEditTime: 2021-06-14 17:41:14 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: 可以拖拽排序的选项列表 |
||||
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\cross-sortable-options\cross-sortable-options.tsx |
||||
*/ |
||||
|
||||
import { defineComponent, reactive, computed, PropType } from 'vue' |
||||
import Draggable from 'vuedraggable' |
||||
import { ElInput } from 'element-plus' |
||||
import { useVModel } from '@vueuse/core' |
||||
|
||||
export const CrossSortableOptionsEditor = defineComponent({ |
||||
props: { |
||||
modelValue: { |
||||
type: Array as PropType<string[]>, |
||||
default: () => [] |
||||
} |
||||
}, |
||||
setup(props, { emit }) { |
||||
const state = reactive({ |
||||
list: useVModel(props, 'modelValue', emit), |
||||
drag: false |
||||
}) |
||||
|
||||
const dragOptions = computed(() => { |
||||
return { |
||||
animation: 200, |
||||
group: 'description', |
||||
disabled: false, |
||||
ghostClass: 'ghost' |
||||
} |
||||
}) |
||||
|
||||
return () => ( |
||||
<Draggable |
||||
tag="ul" |
||||
list={state.list} |
||||
class="list-group" |
||||
component-data={{ |
||||
tag: 'ul', |
||||
type: 'transition-group', |
||||
name: !state.drag ? 'flip-list' : null |
||||
}} |
||||
handle=".handle" |
||||
{...dragOptions.value} |
||||
itemKey={''} |
||||
onStart={() => (state.drag = true)} |
||||
onEnd={() => (state.drag = false)} |
||||
> |
||||
{{ |
||||
item: ({ element, index }) => ( |
||||
<div class={'flex items-center justify-between'}> |
||||
<i class={'el-icon-s-grid handle'}></i> |
||||
<ElInput |
||||
v-model={state.list[index]} |
||||
class={'m-12px'} |
||||
style={{ width: '270px' }} |
||||
></ElInput> |
||||
<div class={'flex flex-col'}> |
||||
<i class={'el-icon-circle-plus-outline'} onClick={() => state.list.push('')}></i> |
||||
<i class={'el-icon-remove-outline'} onClick={() => state.list.splice(index, 1)}></i> |
||||
</div> |
||||
</div> |
||||
) |
||||
}} |
||||
</Draggable> |
||||
) |
||||
} |
||||
}) |
||||
@ -1,10 +1,13 @@ |
||||
/** |
||||
* @name: index |
||||
* @author: 卜启缘 |
||||
* @date: 2021/5/30 10:57 |
||||
* @description：index |
||||
* @update: 2021/5/30 10:57 |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-12 22:18:48 |
||||
* @LastEditTime: 2021-06-14 16:58:34 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: |
||||
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\index.ts |
||||
*/ |
||||
|
||||
export { TablePropEditor } from './table-prop-editor/table-prop-editor' |
||||
export { AttrEditor } from './attr-editor/AttrEditor' |
||||
export { Animate } from './animate/Animate' |
||||
export { CrossSortableOptionsEditor } from './cross-sortable-options/cross-sortable-options' |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
/* |
||||
* @Author: 卜启缘 |
||||
* @Date: 2021-06-13 22:07:29 |
||||
* @LastEditTime: 2021-06-14 18:18:51 |
||||
* @LastEditors: 卜启缘 |
||||
* @Description: 当前页面配置 |
||||
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\page-setting\pageSetting.tsx |
||||
*/ |
||||
@ -1,17 +0,0 @@ |
||||
/** |
||||
* @name: index.common |
||||
* @author: 卜启缘 |
||||
* @date: 2021/5/3 16:05 |
||||
* @description：index.common |
||||
* @update: 2021/5/3 16:05 |
||||
*/ |
||||
body { |
||||
.el-form-item__label { |
||||
font-size: 12px; |
||||
} |
||||
.el-form-item--mini .el-form-item__content { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue