# (Vue)JsvTextBox
# 组件基本说明
对应代码位置:
node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget/JsvTextBox.vue
<!--
* @file
*
* JsvTextBox：Vue高阶组件，用于文字绘制要精细调整的场景，
* 注意: 其中Jsv打头的属性为内部属性，不要在组件外直接使用，规避后续调整时进行变名等调整导致使用不了。
* props说明:
* verticalAlign {string} 垂直对齐方式 (必需) top、middle、bottom
* style {object} 样式(必需)
* enableLatex {bool} 是否启用Latex文字描画模式
* textDirection {string} 文字方向，主要考虑阿拉伯语的方向场景
* syncDraw {string} 文字较长时，是强制同步绘制还是自动的进入异步绘制，可选"auto","sync","async"
* 其中"async"为强制包含短文字的场景也异步绘制
* minWidth {number} 最小宽度限制，-1表示不限制。当文字内容较少时，确保组件至少占用指定宽度,
* 以此影响后续的Flex布局
* maxWidth {number} 最大宽度限制，-1表示不限制。当文字内容较多时，限制组件最大宽度，
* 当文字不足指定宽度时，此组件为文字的实际宽度，以此影响后续的Flex布局，超出部分根据textOverflow处理
* minHeight {number} 最小高度限制，-1表示不限制。当文字内容较少时，确保组件至少占用指定高度,
* 以此影响后续的Flex布局
* maxHeight {number} 最大高度限制，-1表示不限制。当文字内容较多时，限制组件最大高度，
* 当文字不足指定高度时，此组件为文字的实际高度， 以此影响后续的Flex布局，超出部分根据textOverflow处理
* latex语法样例
* 1. 颜色: "测试\\textcolor{#FF0000}{红色}文字"
* 2. 加粗: "测试\\textb{加粗}文字"
* 3. 斜体: "测试\\texti{斜体}文字"
* 4. 下划线: "测试\\textdecoration{underline}{下划线}文字"
* 5. 删除线: "测试\\textdecoration{line-through}{删除线}文字"
* latex混合样式样例
* "测试\\textcolor{#FF0000}{红色并且\\textb{加粗}}文字"
-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
对应样例代码位置
node_modules/@shijiu/jsview-vue-samples/LatexDemo/App.vue
node_modules/@shijiu/jsview-vue-samples/TextSizeLimit/App.vue
# 常用场景提示
- 通过 enableLatex 实现一段文字中间嵌入其他颜色的文字的需求
- 通过设置min-width,父节点为JsvFlexDiv, 顶住右端JsvFlexDiv的图标之类内容
- 通过设置max-width设置,父节点为JsvFlexDiv, 实现后方跟随图标, 同时文字又不会太长超显示范围, 比如用户名区域后跟图标
- 通过max-height设置, 父节点为JsvFlexDiv, 在多行文字端下方跟随图标, 例如影片详情信息文字框