低代码可视化-uniapp响应式数据data-代码生成器

简介: 低代码可视化-uniapp响应式数据data-代码生成器

uniapp框架中,data 是一个核心的概念,它代表了组件或uniapp实例中的响应式数据。这些数据是组件状态的基础,uniapp会根据这些数据的变化来更新DOM,从而保持视图与数据的同步。

data 的特点

响应式:uniapp使用一种称为“响应式系统”的机制来追踪数据的变化,并在数据变化时更新DOM。这意味着当你修改data中的某个属性时,uniapp会自动更新与该属性相关的视图。


局部状态:在uniapp组件中,data定义的数据是局部的,它只属于该组件实例。不同的组件实例之间不会共享同一个data对象。


初始化:data中的数据是在组件或Vue实例创建时初始化的,你可以在创建后通过uniapp实例或组件实例来访问和修改这些数据。

定义文本变量

DIY可视化如果想把静态的文本显示转换为data里的变量,只需要开启是否变量即可。比如我们定义字段标识为meessage。代码转换后模板会变成{{message}},data里会定义message变量。

改变变量值

我们采用点击事件改改变值。

配置点击事件


扩展data知识

uniapp里的data里会通过JSON树型格式数据,比如下方数据data下一级直接用this.message,二级用this.form.input。实际需求大家可以根据自己的变量标识来设置。


生成代码

<template>
  <view class="container container329152">
    <text class="diygw-col-24">
      {{ message }}
    </text>
    <button @tap="navigateTo" data-type="changeMessageFunction" class="diygw-col-24 btn-clz diygw-btn-default">点击改变meessage值</button>
    <u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
      <u-form-item class="diygw-col-24" label="日期" prop="date">
        <u-input @click="formData.showDate = true" class="" placeholder="请选择" v-model="form.date" type="select"></u-input>
        <u-calendar maxDate="2050-12-31" v-model="formData.showDate" mode="date" @change="changeFormDate"></u-calendar>
      </u-form-item>
      <u-form-item class="diygw-col-24" label="标题" prop="input">
        <u-input :focus="formData.inputFocus" placeholder="请输入提示信息" v-model="form.input"></u-input>
      </u-form-item>
      <u-form-item class="diygw-col-24" label="标题" prop="textarea">
        <u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="form.textarea" type="textarea"></u-input>
      </u-form-item>
    </u-form>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: { data_id: 0 },
        message: `DIY可视化例子`,
        form: {
          date: '',
          input: '',
          textarea: ''
        },
        formRules: {},
        formData: {
          showDate: false,
          inputFocus: false
        }
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    onReady() {
      this.$refs.formRef?.setRules(this.formRules);
    },
    methods: {
      async init() {
        await this.initResetform();
      },
      // 改变MEESSAGE 自定义方法
      async changeMessageFunction(param) {
        let thiz = this;
        this.meessage = '值被点击后改变了';
      },
      changeFormDate(evt) {
        this.form.date = evt.result;
      },
      initResetform() {
        this.initform = JSON.stringify(this.form);
        //如果想给表单默认初始值,其中row为某一行数据也可能是API返回的结果集,然后给到this.form
        //this.form = this.$tools.changeRowToForm(row,this.form)
      },
      resetForm() {
        this.form = JSON.parse(this.initform);
      },
 
      async submitForm(e) {
        this.$refs.formRef?.setRules(this.formRules);
 
        this.$nextTick(async () => {
          let valid = await this.$refs.formRef.validate();
          if (valid) {
            //保存数据
            let param = this.form;
            let header = {};
            let url = '';
            if (!url) {
              this.showToast('请先配置表单提交地址', 'none');
              return false;
            }
 
            let res = await this.$http.post(url, param, header, 'json');
 
            if (res.code == 200) {
              this.showToast(res.msg, 'success');
            } else {
              this.showModal(res.msg, '提示', false);
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .btn-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #fff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #07c160;
    margin-left: 10rpx;
    overflow: hidden;
    width: calc(100% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    text-align: center;
    padding-right: 20rpx;
  }
  .container329152 {
  }
</style>


目录
相关文章
|
1月前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
43 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
53 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
39 0
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
31 0
|
2月前
|
数据可视化 安全 Android开发
低代码可视化-uniapp蓝牙标签打印-代码生成器
低代码可视化-uniapp蓝牙标签打印-代码生成器
72 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
67 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
87 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
117 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
120 7