【Uni-app】在App端使用颜色选择器iro.js

• iro.js和Echarts一样要用到id选择器，但是uniapp是不支持直接用document.getElementById的，所以写一下使用记录，效果如图所示
  

一、下载iro.js

在uniAPP终端里输入 npm install @jaames/iro --save

二、引用iro.js

import iro from'@jaames/iro';

三、使用render.js

在本来的script下面添加一个script

<script module="picker" lang="renderjs">
	import iro from'@jaames/iro';
	export default {
		data() {
			return {
				RGB:""
			};
		},
		mounted() {
			let that = this;
			// 通过nextTick异步画图
			this.$nextTick(() => {
				setTimeout(function() {
					that.initEcharts()
				}, 100);
			});
		},
		methods:{
			initEcharts(){
				let that = this;
				var colorPicker = new iro.ColorPicker(document.getElementById('picker'),{
					width: 300,
					color:'#fff'
				})
				colorPicker.on('color:change', function(color) {
					that.RGB = color.rgb
					that.Postmessage()
				});
			},
			Postmessage(event,ownerInstance){
				let that = this;
				that.$ownerInstance.callMethod('OnViewClick', that.RGB)
			}
		}
	}
</script>

原本的script接收renderjs传来的数据

<script>
	export default {
		data() {
			return {
			};
		},
		methods:{
			OnViewClick(data){
			   console.log(data)//renderjs传来的数据
			},
		}
	}
</script>