快捷導(dǎo)航

vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解

更新時(shí)間：2022年04月26日 09:59:51 作者：笑望灬星辰

這篇文章主要介紹了vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant組件庫之tag

直接上代碼

<template>
? <div class="pd50">
? ? <!-- Tag標(biāo)簽的屬性與Button按鈕的大體相同 -->
? ? <!-- 基礎(chǔ)用法?
? ? ? ? 其他第三方ui庫的顏色可能不一致
? ? -->
? ? <h2>基礎(chǔ)用法</h2>
? ? <van-tag type="primary">標(biāo)簽</van-tag>
? ? <van-tag type="success">標(biāo)簽</van-tag>
? ? <van-tag type="danger">標(biāo)簽</van-tag>
? ? <van-tag type="warning">標(biāo)簽</van-tag>
? ? <!-- 空心樣式?
? ? ? ? 多數(shù)第三方都是采用 plain 作為空心樣式
? ? -->
? ? <h2>空心樣式</h2>
? ? <van-tag plain type="primary">標(biāo)簽</van-tag>
? ? <h2>圓角</h2>
? ? <van-tag round type="primary">標(biāo)簽</van-tag>
? ? <h2>標(biāo)記樣式 半圓角</h2>
? ? <van-tag mark type="primary">標(biāo)簽</van-tag>
? ? <h2>可關(guān)閉標(biāo)簽</h2>
? ? <!-- 需要自己寫邏輯控制關(guān)閉 -->
? ? <van-tag v-if="show" closeable type="primary" @close="close">
? ? ? 標(biāo)簽
? ? </van-tag>
? ? <h2>大小</h2>
? ? <van-tag type="primary">標(biāo)簽</van-tag>
? ? <van-tag type="primary" size="medium">標(biāo)簽</van-tag>
? ? <van-tag type="primary" size="large">標(biāo)簽</van-tag>
? ? <h2>自定義顏色</h2>
? ? <!--?
? ? ? ? color 背景顏色
? ? ? ? text-color 文本顏色
? ? ?-->
? ? <van-tag color="#7232dd">標(biāo)簽</van-tag>
? ? <van-tag color="#ffe1e1" text-color="#e44e44">標(biāo)簽</van-tag>
? ? <van-tag color="#7232dd" plain>標(biāo)簽</van-tag>
? ? <h2>漸變色沒有起作用，后續(xù)博文處理該問題</h2>
? ? <van-tag color="linear-gradient(to right, #ff6034, #ee0a24)">我是漸變tag</van-tag>
? ? <!-- ?-->
? ? <h2>其他</h2>
? ? <div>內(nèi)容是個(gè)默認(rèn)插槽， 也就是說可以進(jìn)行一些額外的布局</div>
? ? <van-tag type="success" plain><span style="color:#347ad0">我可以</span></van-tag>
? ? <van-tag type="success" plain>
? ? ? ? <img src="@/assets/1.jpg" alt="">
? ? </van-tag>
? </div>
</template>

<script>
import { Tag } from "vant";
export default {
? components: {
? ? vanTag: Tag,
? },
? data() {
? ? return {
? ? ? show: true,
? ? };
? },
? methods: {
? ? close() {
? ? ? this.show = false;
? ? },
? },
};
</script>
<style lang="scss" scoped>
</style>

效果

tag標(biāo)簽選中(類型選擇,分類選擇)

使用三元表達(dá)式為類選擇器給值。當(dāng)變量active被點(diǎn)擊賦值時(shí)則，引用active樣式。無點(diǎn)擊使用Classification樣式。

往往就是簡單的操作，就把自己玩懵逼了！寫半天報(bào)找不到Classification，還在想誒？Classification不是變量啊。一臉懵逼。最后發(fā)現(xiàn)'active':'Classification'。沒加''。（日常自己坑自己）

效果圖：

<div v-for="(item,index) in data">
	<span :class="active==item.type?'active':'Classification'" @click="oncheck(item.type)">        
         {{item.type}}</span>
</div>

js：

data() {
	return {
		data: [{
			    type: '66P'
			}, {
			    type: '760P'
			}, {
			    type: '(含16G系統(tǒng)優(yōu)盤)660P'
			}, {
			    type: '(含16G系統(tǒng)優(yōu)化盤)760P'
			}],
			active:''
			}
},
 
methods: {
    oncheck(name){
		 console.log(name)
		 this.active=name
	}
}

css：

.active{
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #efc531;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}
.Classification {
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #f7f7f7;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: