首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >weex-09-组件text的用法

weex-09-组件text的用法

作者头像
酷走天涯
发布2018-09-14 15:15:09
1.5K0
发布2018-09-14 15:15:09
举报
本节任务

学习text组件的使用

text 组件干什么的?

<text>是Weex内置的组件,用来将文本按照指定的样式呈染出来

主要教会你什么?

1.怎么给text 组件赋值 2.怎么设置组件的背景颜色和字体颜色 3.怎么给设置组建的边框颜色,宽度,样式 4.怎么设置文字斜体 加粗 下划线等 5.怎么给文字背景设置圆角 6.怎么设置文本显示的行数 7.设置文字的对齐方式:居中 左对齐 右对齐 8.设置文字的溢出隐藏 9.如何让文字放在最中间 10.设置文字的透明度 11.字体大小设置 12.动态的给文字设置内容 13.超过指定长度隐藏文字

4DCE7B1F-329E-49AB-A421-F40C1FA60EE0.png

我们在之前的那个工程目录中创建一个text.vue 文件

默认您已经按照之前的教程创建好了工程,接下来我把创建文件的步骤写一些

第一步 创建文件

32EBE81D-A662-419B-8B5B-32088591F926.png

1A3F1055-7706-4EF3-AF03-1642927C2064.png

第二步 在打包的入口文件app.js里修改根组件为text.vue

import text from './src/text.vue'
text.el = '#root'
export default new Vue(text);

需改完成后记得保存一下 command + s (MAC快捷键)

第三步 打开两个终端窗口 分别 cd 进入工程目录 输入自动打包命令和启动服务命令

自动打包命令

xudeMacBook-Air:~ xujie$ cd /Users/xujie/Documents/weex/firstProject xudeMacBook-Air:firstProject xujie$ npm run dev

启动服务命令

xudeMacBook-Air:~ xujie$ cd /Users/xujie/Documents/weex/firstProject xudeMacBook-Air:firstProject xujie$ npm run serve

在google浏览器中输入localhost:8080

C920AAFF-BEAF-4DA8-82A6-1121C71FC353.png

基本工作 我们算是完成了,下面就进入我们今天的学习目标

打开text.vue 里面初始化完成后是这个样子的

<template>
</template>

<script>
</script>

<style>
</style>

我们先设置一个最大的容器,让其子组件沿着y轴居中对齐,从父容器的开始位置开始布局,这个其实我们上一节已经讲过了,我们回顾一下!

<template>
    <div class="root">
    </div>
</template>

<script>    
</script>

<style>
.root{
    display:flex;
    background-color: rgba(1,1,1,0.5);
    flex-direction: column;//  从上向下 布局
    justify-content: flex-start; // 从父容器顶部开始布局
    align-items: center; // 子组件水平居中
}
</style>

问题 ?为什么样式 align-items: center; 是让子组件水平对齐的?

因为 flex-direction: column; 布局方向是从上向下的,如果布局方式为从左向右,则排列方式为垂直居中,给两张图理解一下

B1676D17-C9F8-41FB-B99A-A7145699244B.png

上述图的样式为

    .root{
    display:flex;
    background-color: rgba(1,1,1,0.5);
    flex-direction: column;//  从上向下 布局
    justify-content: flex-start; // 从父容器顶部开始布局
    align-items: center; // 子组件水平居中
}

修改布局方向为从左向右 flex-direction: row;效果如下图

2CB921AB-66F8-4F21-B9D0-329520A4C544.png


布局就先讲到这里,接下来 我们看组件的各种功能用法

1.给文字赋值

<template>
    <div class="root">
        <text class="text">文字的内容</text>
    </div>
</template>

这个class=“text“样式,没有设置的效果如下

2.给文字设置颜色和背景颜色

4DCE7B1F-329E-49AB-A421-F40C1FA60EE0.png

.text{
    margin-top: 30px; // 此组件的顶部距相邻组件的距离为30px如果此组件的上面没有组件 则是离父组件的顶部为30px 
    background-color: #008000;
    color:white;
}

3.设置边框颜色,宽度和样式

5463ABFF-DC34-4A6A-B1F8-887C810933F6.png

.text{
    margin-top: 30px;
    background-color: #008000;
    color:white;
    border-bottom-style: solid; // 样式
    border-bottom-width: 2px; //宽度
    border-bottom-color: red;// 颜色
}

我们可以分别设置 上、下、左、右边框(top,bottom,left,right) 代码和上面一样,修改一下单词bottom 为指定边框就可以了

如果要一次性设置所有边框呢?

3DD31111-0F73-41D2-AB6B-6421AE8FB3A5.png

.text{
    margin-top: 30px;
    background-color: #008000;
    color:white;
    border-style: solid;
    border-width: 3px;
    border-color: red;
}

在这里提醒各位一下

有些同学是资深web工程师,可能习惯使用简写border: solid 3px red; 网页上可以显示出来的边框,但是手机端是不会有效果的,因为weex目前暂不支持这样的简写,以后或许就支持了,请耐心等待!

4.怎么设置文字斜体/加粗/下划线

  font-style: italic; // 斜体

C17D7D5B-831A-494E-B9D3-0204B6957ED5.png

text-decoration:underline;

FE8B6CE5-3E32-4937-ABC5-94CB08640280.png

注意

下滑线的颜色和字体颜色是保持一致的,如果你想要下滑线的颜色和字体颜色不一致该怎么办呢?很简单不要使用这个属性,使用两个组件进行组合使用,就能满足您的需求

font-weight: bold;

96E8F947-5931-4C4A-9959-05C56F7E937D.png

5.怎么给文字背景设置圆角

不设置组件的宽和高直接设置圆角

border-radius: 10px;

9504A8F6-1DF5-4412-99DC-28F1060EEF90.png

设置宽和高,设置圆角

.text{
    margin-top: 30px;
    background-color: #008000;
    color:white;
    border-style: solid;
    border-width: 3px;
    border-color: red;
    /* 圆角*/
    border-radius: 30px; 
    width:200px;
    height: 60px;
}

C44582E8-35E7-4692-A3EB-C3D2525E008A.png

我们发现文字超过边框并且成两行,那我们怎么设置为单行显示呢?

6.怎么设置文本显示的行数

lines:1;

注意网页上显示依然为下面这个效果,可以使用overflow: hidden; 让网页溢出隐藏,但是这个属性真机没有效果!

C44582E8-35E7-4692-A3EB-C3D2525E008A.png

真机上会变成一行,请使用真机测试效果

7.设置文字的对齐方式:居中 左对齐 右对齐

text-align: center;

1EBD40DD-B6AE-44A5-A458-B3D195D73809.png

可以设置left center right 三种,其他两种请各自尝试一下

8.设置文字的溢出隐藏

    text-overflow:ellipsis; 

AEE44A01-1F2C-4A4E-AE0C-640BB2045319.png

你会发现没有任何作用,因为这个要和lines 一起使用

lines:1;
text-overflow:ellipsis; 

35FD51F1-E43C-49BF-996C-F436F4D778E9.png

9.如何让文字放在最中间

.text{
    margin-top: 30px;
    background-color: #008000;
    color:white;
    text-align: center;
    width:200px;
    height: 100px;
}

5E347CE4-5A6F-4183-A2B8-07AE0E9BBFB7.png

我们发现text组件的值 没有垂直居中,现在我们使用下面的样式让其居中

line-height: 100px; // 设置文字的行高和组件的高度一致,也就实现了文字垂直居中的效果

0E2AE2C8-B9AE-4949-B46D-EF0296D90CF3.png

10.设置文字的透明度

opacity:0.3;

1AEC5924-1AF9-4D59-AB75-9BE2F1A9F405.png

11.字体大小设置

font-size: 50px;

A7D4E899-B0CF-4792-BD21-13F5E762D3DA.png

注意一点

text 组件添加子组件

12.动态的给文字设置内容

定义变量

<script>
  export default{
    data(){
        return {
            text:'我是酷走天涯'
        }
    }
}   
</script>

注意:

data 其实是一个方法 返回一个json对象

接下来看如何将数据绑定到组件上

<template>
    <div class="root">
    <text class="text" >{{text}}</text>
    </div>
</template>

语法

{{变量}},使用双大括号将变量包起来即可

此时如果方法中更改了变量的值,组件显示的值会立刻被刷新

B85B292C-0678-4B90-AB4D-840F2C78D850.png

13.超过指定长度隐藏文字

如果你设置了宽度,和行数,文字会自动隐藏,但是如果你使用了弹性布局方式呢?没有设置指定的宽度,文字不会隐藏,使用下面的方式可以解决这个问题

.content{
    line-height: 40px;
    margin-right: 10px;
    margin-right:10px;
    flex:1;
    lines:1;
}

flex:1;给text设置一个弹性值,它就会自动限制文字的宽度。

本节内容到这里就讲解完毕了,请练习一遍,如果都掌握了,请继续我们下一节内容。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.06.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本节任务
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档