用Python写网页的工具 SimpleStart 库介绍 - 06用模版类添加组件

在前面介绍 SimpleStart 常用组件的时候, 我们说到 SimpleStart 内置了 Vuetify 和 Element Plus两个前端框架，虽然提供了不少网页常用组件，但是如果想添加它没有收录的一些组件怎么办？

今天介绍的 SimpleStart 的模板类 template 非常有用，利用它可以很容易地将 Vuetify 组件或者 Element Plus 组件添加到你的网页上。

当然这节的内容需要稍微掌握一点 Vue 或者 Javascript 的前端开发经验。

这个类主要有3个参数:

1. 要加载的 vue组件的脚本，可以是字符串，也可以是文件路径
2. 传递的数据
3. 事件响应

具体可以参考在线文档

我们举一个例子来说明。SimpleStart没有提供Element Plus的颜色选择框组件 ColorPicker, 现在我们可以通过下面的代码添加上去

#演示通过template添加组件
import simplestart as ss

#定义了预定义颜色
data = {"color":"#409EFF"}

#在模板类里引用element plus的颜色选择框组件，注意事件函数前要加转义符号
cp = ss.template('''
    <span class="demonstration">颜色选择 &nbsp;</span>
    <el-color-picker show-alpha v-model="data.color" \@change = 'syncdata' />
    ''', data=data)

#获取颜色选择框的颜色
def getColor():
    txt.text = cp.data["color"]

#添加用户按钮
ss.button("获取颜色值", onclick = getColor)

#设置颜色选择框的颜色
def setColor(state, value):
    cp.data["color"] = "0xff0000"
    
#添加用户按钮
ss.button("设置颜色值", onclick = setColor)

#显示颜色选择框的值
txt = ss.text("")

组件内对于data的变化如果需要传递到后端，需要显示地调用syncdata或者onserver事件。
如上面例子中的 οnchange="syncdata", 就是当用户改变了颜色后，将data的值传到python后端。

本例的界面效果

 

通过这个例子，我们看到在 SimpleStart 中添加 Vuetify 或者 Element Plus 已有组件还是很方便的。

下一次我们将介绍如何通过 loadvue 方法加载第3方的自定义组件

simplestart API 接口文档