uni-app 实现 ColorUI-UniApp 点击控件随时实时显示该控件的属性

在 uni-app 中实现点击控件时实时显示该控件的属性，可以结合 ColorUI-UniApp 样式库来实现。下面是一个简单的示例代码，展示如何在点击控件时，通过控制台输出该控件的属性。

首先，确保你的项目已经安装了 ColorUI-UniApp，并且正确引入了相关样式。

1. 安装 ColorUI-UniApp

如果你还没有安装 ColorUI-UniApp，可以通过以下命令安装（假设你使用的是 npm）：

npm install @dcloudio/uni-ui

然后在 main.js 中引入 ColorUI 的样式：

import '@/static/colorui/main.css';
import '@/static/colorui/icon.css';

2. 创建页面并添加控件

在 pages/index/index.vue 文件中，添加一个按钮和一个文本显示区域：

<template>
  <view class="container">
    <button @click="showProps($event, 'button')">点击我</button>
    <view v-for="(prop, key) in buttonProps" :key="key">
      {{ key }}: {{ prop }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      buttonProps: {}
    };
  },
  methods: {
    showProps(event, componentName) {
      const target = event.currentTarget;
      const props = {};
      for (let attr of target.attributes) {
        props[attr.name] = attr.value;
      }
      this.$set(this, `${componentName}Props`, props);
      console.log(`${componentName} 属性:`, props);
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
button {
  /* 使用 ColorUI 样式 */
  cu-custom;
  background-color: #1aad19;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

3. 解释代码

• 在模板中，我们定义了一个按钮，并绑定了点击事件 showProps，同时传递了当前事件对象和控件名称 'button'。
• 在 showProps 方法中，我们通过 event.currentTarget 获取到被点击的控件，然后遍历其所有属性，并将属性名和属性值存储到 buttonProps 对象中。
• 使用 v-for 指令在页面上显示 buttonProps 对象中的属性。
• 在控制台输出控件的属性，方便调试。

4. 运行项目

确保所有文件保存后，运行你的 uni-app 项目，点击按钮即可在控制台看到按钮的属性，并在页面上显示这些属性。

这个示例展示了如何获取和显示控件属性，你可以根据需要扩展和修改以适应你的具体需求。