uni-app 插件需求 html标签名修改 尾部标签自动更新

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 插件需求 html标签名修改 尾部标签自动更新

功能与vscode中的插件Auto Rename Tag相同

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20240109/8264df32dfa4af6e17182e0811e03dc5.png)
Harmonyos Next教程
3 回复

我快实现了，新增和删除标签名已经功能正常，覆盖修改还有bug，预计2月底上线，提前调研下，下载看广告会被嫌弃不，做hbuilderx的适配确实花了挺多精力。并且有个主要的使用上的问题，只能等官方提供方案，受限于hbuilderx api，同步标签名会产生编辑操作，新增一个字母，就需要撤回两次，才能回退到没编辑标签名之前，假如编辑标签名n个字母，需要撤回2n次，就很麻烦


https://ext.dcloud.net.cn/plugin?id=16466

在 uni-app 中，插件开发或者组件封装时，有时候需要自定义 HTML 标签名，并确保其尾部标签（闭合标签）在模板中自动更新。尽管 uni-app 本身基于 Vue.js，并且 Vue.js 允许自定义组件，但直接修改原生 HTML 标签名并不是 Vue.js 或 uni-app 设计的初衷。然而，我们可以通过自定义组件来实现类似的功能。

以下是一个示例，展示如何在 uni-app 中创建一个自定义组件，并在父组件中使用它，同时确保数据更新时组件能够自动渲染更新。

1. 创建自定义组件

首先，在 components 文件夹下创建一个名为 MyCustomTag.vue 的文件：

<template>
  <view class="my-custom-tag">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'MyCustomTag',
  props: {
    content: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.my-custom-tag {
  border: 1px solid #000;
  padding: 10px;
}
</style>

2. 在父组件中使用自定义组件

接下来，在父组件中使用 MyCustomTag 组件，并通过绑定数据来确保其自动更新：

<template>
  <view>
    <MyCustomTag :content="myContent">
      <text>{{ myContent }}</text>
    </MyCustomTag>
    <button @click="updateContent">Update Content</button>
  </view>
</template>

<script>
import MyCustomTag from '@/components/MyCustomTag.vue';

export default {
  components: {
    MyCustomTag
  },
  data() {
    return {
      myContent: 'Hello, uni-app!'
    };
  },
  methods: {
    updateContent() {
      this.myContent = 'Content has been updated!';
    }
  }
}
</script>

<style scoped>
button {
  margin-top: 20px;
}
</style>

3. 解释

  • MyCustomTag.vue 是一个自定义组件，它接受一个 content 属性，并在模板中显示一个 view 元素，其中包含插槽内容。
  • 父组件中导入了 MyCustomTag 并绑定 myContent 数据到 content 属性。同时，通过点击按钮调用 updateContent 方法来更新 myContent 的值。
  • 当 myContent 更新时，由于 Vue 的响应式系统，MyCustomTag 组件会自动重新渲染，显示最新的内容。

通过这种方式，虽然我们不能直接修改原生 HTML 标签名，但可以通过自定义组件实现类似的功能，并确保数据的自动更新。

回到顶部