bqy_fe
5 years ago
35 changed files with 513 additions and 109 deletions
@ -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