[email protected]

文本组件，支持双击编辑功能，可自定义编辑状态样式

示例

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/text
yarn add @ths-base/text

使用

import TText from '@ths-base/text';
import '@ths-base/text/lib/index.css';
createApp(App).use(TText);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TText);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ---------------- | ------------ | ------- | ------------- | ------ | ------ | | label | 标题 | string | -- | -- | | | c-style | 自定义样式 | object | -- | -- | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ------------------------- | -------------------- | -------------- | | wrapper | default/focus | 容器 |

事件

| 事件名称 | 说明 | 回调参数 | | ----------- | ------------ | -------- | | modify-text | 修改文本内容事件 | Object { [key]: { editable: false, value: '文本内容' } } |

作者：张金秀