weex-09-组件text的用法

本节任务

学习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设置一个弹性值,它就会自动限制文字的宽度。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

如何用<dl>标签做表格而不用table标签

  我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,...

33660
来自专栏web前端

smartClient 3--布局

一、组件的布局(如何将组件按照想要的方式进行布局,如左右布局,上下布局等等,这里是大框架下的整体布局) HLayout  水平 VLayout   垂直 HSt...

23370
来自专栏十月梦想

表单

1.表单控件     1.input标记         1.input标记             提供文本输入框,密码输入框,按钮,单选按钮,多选按钮,...

8430
来自专栏别先生

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

21490
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

25460
来自专栏前端知识分享

第137天:移动端-仿京东秒杀倒计时

40930
来自专栏一“技”之长

自定义Window标题栏titleBar 原

    在进行OS X软件开发时,Window自带的标题栏十分简易,往往不能达到我们的需求,如下图:

12220
来自专栏栗霖积跬步之旅

HTML基础上

知识点一:HTML Hyper Text Markup Language  超文本标记语言。  HTML标准结构: < ! doctype html> 声...

24070
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

8940
来自专栏知道一点点

bootstrap快速入门笔记(八)-按钮,响应式图片

一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-...

13030

扫码关注云+社区

领取腾讯云代金券