低代码可视化-UniApp引入第三方自定义组件或模板使用-代码生成器

低代码可视化-UniApp引入第三方自定义组件或模板使用-代码生成器。自定义组件或模板使用，DIY可视化提供了一个支持用户自定义模板。在实际场景下，可视化提供组件可能不能满足你的需求，需要用到一些第三方组件库。可视化支持插入你的代码来实现。

拖入文本内容组件进设计区

文本内容里输入你想要的内容，比如我们输入两个text组件，然后其中一个自定义样式。

保存源码至本地可以查看效果。

自定义组件库使用

假如我们的输入组件为自定义组件，参照他提供的文档来实现

定义双向绑定变量

如果你的模板里有双向绑定的属性，比如这里的组件使用到了input 来双向绑定。

显示input值

这里使用文本内容双向绑定显示input值。

组件自定义方法

组件里可能内置了一些回调方法调用，如果我们的input组件里有@blur方法。

如果有多个自定义方法用,号隔开，都可以写在上面

具体实用根据你的组件实际情况来自定义组件扩展数据、组件扩展方法。

代码生成器

<template>
	<view class="container container333638">
		<view class="diygw-col-24">
			<text> 内容 </text>
			<text style="font-weight: bold"> 内容 </text>
		</view>
		<view class="diygw-col-24">
			<u-form-item class="diygw-col-24" label="标题" prop="input">
				<u-input @blur="onBlur" :focus="inputFocus" placeholder="请输入提示信息" v-model="input"></u-input>
			</u-form-item>
		</view>
		<text class="diygw-col-24">
			{{ input }}
		</text>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false },
				input: '',
				inputFocus: false
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			onBlur() {
				this.showToast('回调了哟');
			},
			onBlur2() {
				this.showToast('回调了哟');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container333638 {
	}
</style>