本節(jié)任務
學習text組件的使用
text 組件干什么的?
<text>是Weex內(nèi)置的組件，用來將文本按照指定的樣式呈染出來
主要教會你什么建芙？
1.怎么給text 組件賦值
2.怎么設(shè)置組件的背景顏色和字體顏色
3.怎么給設(shè)置組建的邊框顏色,寬度,樣式
4.怎么設(shè)置文字斜體 加粗 下劃線等
5.怎么給文字背景設(shè)置圓角
6.怎么設(shè)置文本顯示的行數(shù)
7.設(shè)置文字的對齊方式:居中 左對齊 右對齊
8.設(shè)置文字的溢出隱藏
9.如何讓文字放在最中間
10.設(shè)置文字的透明度
11.字體大小設(shè)置
12.動態(tài)的給文字設(shè)置內(nèi)容
13.超過指定長度隱藏文字
我們在之前的那個工程目錄中創(chuàng)建一個text.vue 文件
默認您已經(jīng)按照之前的教程創(chuàng)建好了工程,接下來我把創(chuàng)建文件的步驟寫一些
第一步
創(chuàng)建文件
第二步
在打包的入口文件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
基本工作 我們算是完成了,下面就進入我們今天的學習目標
打開text.vue 里面初始化完成后是這個樣子的
<template>
</template>
<script>
</script>
<style>
</style>
我們先設(shè)置一個最大的容器,讓其子組件沿著y軸居中對齊,從父容器的開始位置開始布局,這個其實我們上一節(jié)已經(jīng)講過了,我們回顧一下!
<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; 布局方向是從上向下的,如果布局方式為從左向右,則排列方式為垂直居中,給兩張圖理解一下
上述圖的樣式為
.root{
display:flex;
background-color: rgba(1,1,1,0.5);
flex-direction: column;// 從上向下 布局
justify-content: flex-start; // 從父容器頂部開始布局
align-items: center; // 子組件水平居中
}
修改布局方向為從左向右 flex-direction: row;效果如下圖
布局就先講到這里,接下來 我們看組件的各種功能用法
1.給文字賦值
<template>
<div class="root">
<text class="text">文字的內(nèi)容</text>
</div>
</template>
這個class=“text“樣式,沒有設(shè)置的效果如下
2.給文字設(shè)置顏色和背景顏色
.text{
margin-top: 30px; // 此組件的頂部距相鄰組件的距離為30px如果此組件的上面沒有組件 則是離父組件的頂部為30px
background-color: #008000;
color:white;
}
3.設(shè)置邊框顏色,寬度和樣式
.text{
margin-top: 30px;
background-color: #008000;
color:white;
border-bottom-style: solid; // 樣式
border-bottom-width: 2px; //寬度
border-bottom-color: red;// 顏色
}
我們可以分別設(shè)置 上、下蛤袒、左、右邊框(top,bottom,left,right)
代碼和上面一樣,修改一下單詞bottom 為指定邊框就可以了
如果要一次性設(shè)置所有邊框呢膨更？
.text{
margin-top: 30px;
background-color: #008000;
color:white;
border-style: solid;
border-width: 3px;
border-color: red;
}
在這里提醒各位一下
有些同學是資深web工程師,可能習慣使用簡寫
border: solid 3px red;網(wǎng)頁上可以顯示出來的邊框,但是手機端是不會有效果的,因為weex目前暫不支持這樣的簡寫,以后或許就支持了,請耐心等待!
4.怎么設(shè)置文字斜體/加粗/下劃線
font-style: italic; // 斜體
text-decoration:underline;
注意
下滑線的顏色和字體顏色是保持一致的,如果你想要下滑線的顏色和字體顏色不一致該怎么辦呢妙真？很簡單不要使用這個屬性,使用兩個組件進行組合使用,就能滿足您的需求
font-weight: bold;
5.怎么給文字背景設(shè)置圓角
不設(shè)置組件的寬和高直接設(shè)置圓角
border-radius: 10px;
設(shè)置寬和高，設(shè)置圓角
.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;
}
我們發(fā)現(xiàn)文字超過邊框并且成兩行,那我們怎么設(shè)置為單行顯示呢荚守？
6.怎么設(shè)置文本顯示的行數(shù)
lines:1;
注意網(wǎng)頁上顯示依然為下面這個效果,可以使用overflow: hidden; 讓網(wǎng)頁溢出隱藏,但是這個屬性真機沒有效果!
真機上會變成一行,請使用真機測試效果
7.設(shè)置文字的對齊方式:居中 左對齊 右對齊
text-align: center;
可以設(shè)置left center right 三種,其他兩種請各自嘗試一下
8.設(shè)置文字的溢出隱藏
text-overflow:ellipsis;
你會發(fā)現(xiàn)沒有任何作用,因為這個要和lines 一起使用
lines:1;
text-overflow:ellipsis;
9.如何讓文字放在最中間
.text{
margin-top: 30px;
background-color: #008000;
color:white;
text-align: center;
width:200px;
height: 100px;
}
我們發(fā)現(xiàn)text組件的值 沒有垂直居中,現(xiàn)在我們使用下面的樣式讓其居中
line-height: 100px; // 設(shè)置文字的行高和組件的高度一致,也就實現(xiàn)了文字垂直居中的效果
10.設(shè)置文字的透明度
opacity:0.3;
11.字體大小設(shè)置
font-size: 50px;
注意一點
text 組件添加子組件
12.動態(tài)的給文字設(shè)置內(nèi)容
定義變量
<script>
export default{
data(){
return {
text:'我是酷走天涯'
}
}
}
</script>
注意:
data 其實是一個方法 返回一個json對象
接下來看如何將數(shù)據(jù)綁定到組件上
<template>
<div class="root">
<text class="text" >{{text}}</text>
</div>
</template>
語法
{{變量}},使用雙大括號將變量包起來即可
此時如果方法中更改了變量的值珍德，組件顯示的值會立刻被刷新
13.超過指定長度隱藏文字
如果你設(shè)置了寬度,和行數(shù),文字會自動隱藏,但是如果你使用了彈性布局方式呢？沒有設(shè)置指定的寬度矗漾，文字不會隱藏,使用下面的方式可以解決這個問題
.content{
line-height: 40px;
margin-right: 10px;
margin-right:10px;
flex:1;
lines:1;
}
flex：1;給text設(shè)置一個彈性值,它就會自動限制文字的寬度锈候。
本節(jié)內(nèi)容到這里就講解完畢了,請練習一遍,如果都掌握了,請繼續(xù)我們下一節(jié)內(nèi)容。
