0.1.57 • Published 2 years ago
l-components v0.1.57
业务组件库
提供一个业务组件库在编辑器和 H5 页面中都可以使用
该组件包导出两种格式的模块,供不同情况下使用
// umd 格式
"main": "dist/l-components.umd.js",
// es modules 格式
"module": "dist/l-components.esm.js",
安装和使用
// 安装
npm install l-components --save
import L from 'l-components'
// 加载样式
import 'l-components/dist/l-components.css'
const app = createApp(App)
// 全局引入 目前包括 FinalPage, LText, LImage , Lshape三个组件
app.use(L)
app.mount('#app')
渲染最终页面
setup() {
// 使用 finalPage 组件进行渲染,使用我们预定义好的数据结构
const testData = {
// 页面上面一个个组件的属性
components: [
{id: '123', name: 'l-text', props: { text: 'hello', top: '0', left: '20px'}},
{id: '234', name: 'l-image', props: { imageSrc: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f6338e666336111f73d220c.png', top: '30px', left: '20px'}},
{id: '235', name: 'l-shape', props: { backgroundColor: 'red', top: '50px', left: '20px', width: '100px', height: '100px'}},
// 这是一个链接
{id: '345', name: 'l-text', props: { backgroundColor: "#1890ff", color: "#ffffff", text: "按钮内容", width: "100px", actionType: "to", url: "http://www.baidu.com", top: '200px', left: '150px',
}}
]
}
return {
testData
}
}
<final-page :components="testData.components"></final-page>
最终页面效果
0.1.57
2 years ago
0.1.52
2 years ago
0.1.53
2 years ago
0.1.54
2 years ago
0.1.55
2 years ago
0.1.56
2 years ago
0.1.50
2 years ago
0.1.51
2 years ago
0.1.49
2 years ago
0.1.41
2 years ago
0.1.42
2 years ago
0.1.43
2 years ago
0.1.44
2 years ago
0.1.45
2 years ago
0.1.46
2 years ago
0.1.47
2 years ago
0.1.48
2 years ago
0.1.40
2 years ago
0.1.38
2 years ago
0.1.39
2 years ago
0.1.30
3 years ago
0.1.31
3 years ago
0.1.32
3 years ago
0.1.33
3 years ago
0.1.34
3 years ago
0.1.35
2 years ago
0.1.36
2 years ago
0.1.37
2 years ago
0.1.28
3 years ago
0.1.29
3 years ago
0.1.27
3 years ago
0.1.26
3 years ago
0.1.25
3 years ago
0.1.24
3 years ago
0.1.23
3 years ago
0.1.22
3 years ago
0.1.21
3 years ago
0.1.20
3 years ago
0.1.19
3 years ago
0.1.18
3 years ago
0.1.17
3 years ago
0.1.16
3 years ago
0.1.15
3 years ago
0.1.14
3 years ago
0.1.13
3 years ago
0.1.12
3 years ago
0.1.11
3 years ago
0.1.10
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago